refactor: improved game ui

Fixes #17
Erb3 · May 21, 2024 · ba76bdf · ba76bdf
1 parent 782d704
commit ba76bdf
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 23 deletions.
diff --git a/frontend/game.html b/frontend/game.html
@@ -12,25 +12,46 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin="" />
     <link rel="stylesheet" href="/static/game.css" />
-    <title>Sveio</title>
+    <link rel="stylesheet" href="/static/ui.css" />
+    <title>Sveio - Ingame</title>
+
+    <style>
+      nav {
+        position: absolute;
+        top: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        min-width: 25vw;
+        background-color: var(--container);
+        border-radius: 1rem 1rem 0 0;
+        padding: 2vh 2vw;
+      }
+
+      .progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 0.7vh;
+      }
+
+      .progress > div {
+        width: 0%;
+        height: 100%;
+        background-color: var(--primary);
+        transition-property: width;
+        transition-timing-function: linear;
+      }
+    </style>
   </head>
   <body>
-    <aside>
-      <header>
-        <section>
-          <h1>Sveio</h1>
-        </section>
-        <h3>Locate</h3>
-        <h2>Get ready...</h2>
-        <progress value="20" max="100"></progress>
-      </header>
-
-      <footer>
-        <a href="https://github.com/Erb3/Sveio">Source</a>
-        <span>-</span>
-        <a href="https://github.com/Erb3">Erb3</a>
-      </footer>
-    </aside>
+    <nav>
+      <p class="text-center">The target location will appear here</p>
+      <div class="progress">
+        <div></div>
+      </div>
+    </nav>
 
     <main>
       <div id="map" class="cursor-grab"></div>

diff --git a/frontend/game.js b/frontend/game.js
@@ -1,6 +1,5 @@
-const targetElement = document.querySelector('h2');
-const locateElement = document.querySelector('h3');
-const progressElement = document.querySelector('progress');
+const targetElement = document.querySelector('nav > p');
+const progressElement = document.querySelector('.progress > div');
 const mapElement = document.querySelector('#map');
 const socket = io();
 
@@ -69,8 +68,9 @@ socket.on('newTarget', (data) => {
     marker.remove();
   });
 
-  locateElement.style.display = 'unset';
   targetElement.innerHTML = `${data.capital}, ${data.country}`;
+  progressElement.style.width = '100%';
+  progressElement.style.transitionDuration = '5s';
   canMoveMarker = true;
   mapElement.classList.remove('cursor-grab');
   map.setZoom(3);
@@ -80,8 +80,9 @@ socket.on('solution', (data) => {
   console.log('received solution :) ', data);
   const goalCoords = [data.location.Latitude, data.location.Longitude];
   goalMarker.setLatLng(goalCoords).addTo(map);
-  locateElement.style.display = 'none';
-  targetElement.innerHTML = 'Get ready...';
+  targetElement.innerHTML = 'The target location will appear here';
+  progressElement.style.width = '0%';
+  progressElement.style.transitionDuration = '1s';
 
   if (map.hasLayer(mySelectionMarker)) {
     const coords = [mySelectionMarker.getLatLng(), goalCoords];

diff --git a/frontend/ui.css b/frontend/ui.css
@@ -17,6 +17,7 @@
 /* "Real" css  */
 :root {
   --background: #17181c;
+  --container: #272930;
   --primary: #b3c7ff;
   --primary-active: #799bf7;
   --text: white;