MAPG-54 introduce round info - current round number and score

public/static/css/mapguesser.css

@@ -21,6 +21,10 @@ p {
     font-size: 12px;
 }
 
+.mono {
+    font-family: 'Roboto Mono', monospace;
+}
+
 .bold {
     font-weight: 500;
 }
@@ -84,6 +88,24 @@ div.buttonContainer.bottom {
     z-index: 3;
 }
 
+#roundInfo {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    height: 28px;
+    line-height: 28px;
+    padding: 0 8px;
+    background-color: #eeeeee;
+    border: solid 1px #555555;
+    border-radius: 3px;
+    opacity: 0.95;
+    z-index: 2;
+}
+
+#roundInfo p {
+    font-size: 16px;
+}
+
 #panorama {
     height: 100%;
     width: 100%;
@@ -119,6 +141,8 @@ div.buttonContainer.bottom {
     text-align: center;
     box-sizing: border-box;
     background-color: #ffffff;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
     display: none;
 }
 
@@ -177,7 +201,7 @@ div.buttonContainer.bottom {
 
     #guess {
         left: 20px;
-        top: 20px;
+        top: 40px;
         opacity: 0.95;
         visibility: hidden;
     }
@@ -230,7 +254,7 @@ div.buttonContainer.bottom {
     #guess.result {
         width: initial;
         height: initial;
-        top: 50px;
+        top: 40px;
         left: 50px;
         right: 50px;
         bottom: 50px;
@@ -242,12 +266,12 @@ div.buttonContainer.bottom {
 
     @media screen and (max-height: 424px) {
         #guess {
-            top: 20px;
+            top: 40px;
             height: initial;
         }
 
         #guess.adapt:hover {
-            top: 20px;
+            top: 40px;
             height: initial;
         }
     }

public/static/js/mapguesser.js

@@ -33,8 +33,13 @@
             if (Core.rounds.length > 0 && !Core.rounds[Core.rounds.length - 1].guessPosition) {
                 Core.realPosition = Core.rounds[Core.rounds.length - 1].realPosition;
                 Core.loadPositionInfo(Core.realPosition);
+
+                document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
+                document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String((Core.rounds.length-1) * Core.MAX_SCORE);
             } else {
                 Core.startNewRound();
+
+                document.getElementById('currentScoreSum').innerHTML = String(0);
             }
         },
 
@@ -60,6 +65,8 @@
             document.getElementById('startNewGameButton').style.display = null;
 
             Core.prepareNewRound();
+
+            document.getElementById('currentScoreSum').innerHTML = String(0);
         },
 
         prepareNewRound: function () {
@@ -91,6 +98,8 @@
             Core.panorama.setVisible(false);
             document.getElementById('loading').style.visibility = 'visible';
 
+            document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
+
             Core.getNewPosition();
         },
 
@@ -141,6 +150,8 @@
             var score = Core.calculateScore(distance);
             Core.scoreSum += score;
 
+            document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String(Core.rounds.length * Core.MAX_SCORE);
+
             Core.saveToSession();
 
             Core.guessMarker.setMap(null);
@@ -277,7 +288,7 @@
 
             Core.map.fitBounds(resultBounds);
 
-            document.getElementById('scoreSum').innerHTML = Core.scoreSum;
+            document.getElementById('scoreSum').innerHTML = String(Core.scoreSum);
 
             var scoreBarProperties = Core.calculateScoreBarProperties(Core.scoreSum, Core.NUMBER_OF_ROUNDS * Core.MAX_SCORE);
             var scoreBar = document.getElementById('scoreBar');

views/game.php

@@ -5,12 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MapGuesser</title>
     <link href="static/css/mapguesser.css" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
 </head>
 <body>
     <div id="loading">
         <img src="static/img/loading.gif">
     </div>
+    <div id="roundInfo">
+        <p>Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
+    </div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">
         <button id="showGuessButton" class="block">Show guess map</button>