From 96ee250f96cef48eb686a335735ec5a00bf5c13c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 23:22:11 +0200
Subject: [PATCH 01/10] MAPG-20 merge guessMap and resultMap into one map

---
 public/static/css/mapguesser.css | 41 ++++++++++-----------
 public/static/js/mapguesser.js   | 61 ++++++++++++++++++--------------
 views/game.php                   |  9 +++--
 3 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index 3153f8a..5d0b36e 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -97,25 +97,19 @@ div.buttonContainer.bottom {
     z-index: 2;
 }
 
+#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
+    display: none;
+}
+
 #guessMap {
     width: 100%;
     border-radius: 3px;
 }
 
-#result {
-    position: absolute;
-    opacity: 0.95;
-    z-index: 2;
-    visibility: hidden;
-    background-color: #ffffff;
-    border-radius: 3px;
-}
-
-#resultMap {
+#guess.result > #guessMap {
     height: 70%;
-    width: 100%;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 #resultInfo {
@@ -124,6 +118,12 @@ div.buttonContainer.bottom {
     padding: 10px 20px;
     text-align: center;
     box-sizing: border-box;
+    background-color: #ffffff;
+    display: none;
+}
+
+#guess.result > #resultInfo {
+    display: block;
 }
 
 #resultInfo > div {
@@ -186,13 +186,6 @@ div.buttonContainer.bottom {
         height: calc(100% - 90px);
     }
 
-    #result {
-        top: 20px;
-        left: 20px;
-        right: 20px;
-        bottom: 30px;
-    }
-
     #scoreBarBase {
         width: 100%;
     }
@@ -200,7 +193,7 @@ div.buttonContainer.bottom {
 
 @media screen and (min-width: 600px) {
     #showGuessButtonContainer {
-        visibility: hidden;
+        display: none;
     }
 
     #guess {
@@ -234,7 +227,9 @@ div.buttonContainer.bottom {
         height: calc(100% - 45px);
     }
 
-    #result {
+    #guess.result {
+        width: initial;
+        height: initial;
         top: 50px;
         left: 50px;
         right: 50px;
@@ -245,7 +240,7 @@ div.buttonContainer.bottom {
         width: 60%;
     }
 
-     @media screen and (max-height: 424px) {
+    @media screen and (max-height: 424px) {
         #guess {
             top: 20px;
             height: initial;
diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index c7bac59..d022237 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -11,7 +11,6 @@
         panorama: null,
         guessMap: null,
         guessMarker: null,
-        resultMap: null,
         adaptGuess: false,
         googleLink: null,
 
@@ -22,7 +21,7 @@
                     var round = roundsLoaded[i];
                     Core.rounds.push({ realPosition: round.realPosition, guessPosition: round.guessPosition, realMarker: null, guessMarker: null, line: null });
                     if (round.guessPosition) {
-                        Core.addRealGuessPair(round.realPosition, round.guessPosition);
+                        Core.addRealGuessPair(round.realPosition, round.guessPosition, true);
                     }
                 }
             }
@@ -66,14 +65,21 @@
         prepareNewRound: function () {
             document.getElementById('scoreBar').style.width = null;
 
-            if (Core.adaptGuess) {
-                document.getElementById('guess').classList.remove('adapt');
+            if (Core.rounds.length > 0) {
+                var lastRound = Core.rounds[Core.rounds.length - 1];
+
+                lastRound.realMarker.setVisible(false);
+                lastRound.guessMarker.setVisible(false);
+                lastRound.line.setVisible(false);
             }
 
             document.getElementById('showGuessButton').style.visibility = null;
             document.getElementById('guess').style.visibility = null;
-            document.getElementById('result').style.visibility = null;
+            document.getElementById('guess').classList.remove('result')
 
+            Core.guessMap.setOptions({
+                draggableCursor: 'crosshair'
+            });
             Core.guessMap.fitBounds(guessMapBounds);
 
             Core.startNewRound();
@@ -140,15 +146,21 @@
             Core.guessMarker.setMap(null);
             Core.guessMarker = null;
 
-            document.getElementById('guess').style.visibility = 'hidden';
-            document.getElementById('result').style.visibility = 'visible';
+            if (Core.adaptGuess) {
+                document.getElementById('guess').classList.remove('adapt');
+            }
+            document.getElementById('guess').classList.add('result');
 
             Core.addRealGuessPair(Core.realPosition, guessPosition);
 
             var resultBounds = new google.maps.LatLngBounds();
             resultBounds.extend(Core.realPosition);
             resultBounds.extend(guessPosition);
-            Core.resultMap.fitBounds(resultBounds);
+
+            Core.guessMap.setOptions({
+                draggableCursor: 'grab'
+            });
+            Core.guessMap.fitBounds(resultBounds);
 
             document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
             document.getElementById('score').innerHTML = score;
@@ -164,19 +176,12 @@
             }
         },
 
-        addRealGuessPair(realPosition, guessPosition) {
-            if (Core.rounds.length > 1) {
-                var lastRound = Core.rounds[Core.rounds.length - 2];
-
-                lastRound.realMarker.setVisible(false);
-                lastRound.guessMarker.setVisible(false);
-                lastRound.line.setVisible(false);
-            }
-
+        addRealGuessPair(realPosition, guessPosition, hidden) {
             var round = Core.rounds[Core.rounds.length - 1];
 
             round.realMarker = new google.maps.Marker({
-                map: Core.resultMap,
+                map: Core.guessMap,
+                visible: !hidden,
                 position: realPosition,
                 clickable: true,
                 draggable: false
@@ -187,7 +192,8 @@
             });
 
             round.guessMarker = new google.maps.Marker({
-                map: Core.resultMap,
+                map: Core.guessMap,
+                visible: !hidden,
                 position: guessPosition,
                 clickable: false,
                 draggable: false,
@@ -201,7 +207,8 @@
             });
 
             round.line = new google.maps.Polyline({
-                map: Core.resultMap,
+                map: Core.guessMap,
+                visible: !hidden,
                 path: [
                     realPosition,
                     guessPosition
@@ -268,7 +275,7 @@
                 resultBounds.extend(round.guessPosition);
             }
 
-            Core.resultMap.fitBounds(resultBounds);
+            Core.guessMap.fitBounds(resultBounds);
 
             document.getElementById('scoreSum').innerHTML = Core.scoreSum;
 
@@ -359,12 +366,17 @@
     Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
         disableDefaultUI: true,
         clickableIcons: false,
-        draggableCursor: 'crosshair'
+        draggableCursor: 'crosshair',
+        draggingCursor: 'grabbing'
     });
 
     Core.guessMap.fitBounds(guessMapBounds);
 
     Core.guessMap.addListener('click', function (e) {
+        if (Core.rounds[Core.rounds.length - 1].guessPosition) {
+            return;
+        }
+
         if (Core.guessMarker) {
             Core.guessMarker.setPosition(e.latLng);
             return;
@@ -402,11 +414,6 @@
         Core.rewriteGoogleLink();
     });
 
-    Core.resultMap = new google.maps.Map(document.getElementById('resultMap'), {
-        disableDefaultUI: true,
-        clickableIcons: false,
-    });
-
     Core.initialize();
 
     document.getElementById('showGuessButton').onclick = function () {
diff --git a/views/game.php b/views/game.php
index 0c1138a..aa4aa2c 100644
--- a/views/game.php
+++ b/views/game.php
@@ -20,12 +20,9 @@
             <button id="closeGuessButton" class="block gray">Close</button>
         </div>
         <div id="guessMap"></div>
-        <div class="buttonContainer bottom">
+        <div id="guessButtonContainer" class="buttonContainer bottom">
             <button id="guessButton" class="block" disabled>Guess</button>
         </div>
-    </div>
-    <div id="result">
-        <div id="resultMap"></div>
         <div id="resultInfo">
             <div id="distanceInfo">
                 <p>You were <span id="distance" class="bold"></span> close.</p>
@@ -36,7 +33,9 @@
                 <p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
             </div>
             <div>
-                <div id="scoreBarBase"><div id="scoreBar"></div></div>
+                <div id="scoreBarBase">
+                    <div id="scoreBar"></div>
+                </div>
             </div>
             <div>
                 <button id="continueButton">Continue</button>

From f110bb9b18d04739e2b39b1cfea4acfebac1900c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 23:23:54 +0200
Subject: [PATCH 02/10] MAPG-20 rename guessMap to map

---
 public/static/css/mapguesser.css |  8 ++++----
 public/static/js/mapguesser.js   | 26 +++++++++++++-------------
 views/game.php                   |  2 +-
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index 5d0b36e..160436f 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -101,12 +101,12 @@ div.buttonContainer.bottom {
     display: none;
 }
 
-#guessMap {
+#map {
     width: 100%;
     border-radius: 3px;
 }
 
-#guess.result > #guessMap {
+#guess.result > #map {
     height: 70%;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
@@ -182,7 +182,7 @@ div.buttonContainer.bottom {
         visibility: hidden;
     }
 
-    #guessMap {
+    #map {
         height: calc(100% - 90px);
     }
 
@@ -223,7 +223,7 @@ div.buttonContainer.bottom {
         display: none;
     }
 
-    #guessMap {
+    #map {
         height: calc(100% - 45px);
     }
 
diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index d022237..23d0550 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -9,7 +9,7 @@
         scoreSum: 0,
         realPosition: null,
         panorama: null,
-        guessMap: null,
+        map: null,
         guessMarker: null,
         adaptGuess: false,
         googleLink: null,
@@ -77,10 +77,10 @@
             document.getElementById('guess').style.visibility = null;
             document.getElementById('guess').classList.remove('result')
 
-            Core.guessMap.setOptions({
+            Core.map.setOptions({
                 draggableCursor: 'crosshair'
             });
-            Core.guessMap.fitBounds(guessMapBounds);
+            Core.map.fitBounds(guessMapBounds);
 
             Core.startNewRound();
         },
@@ -157,10 +157,10 @@
             resultBounds.extend(Core.realPosition);
             resultBounds.extend(guessPosition);
 
-            Core.guessMap.setOptions({
+            Core.map.setOptions({
                 draggableCursor: 'grab'
             });
-            Core.guessMap.fitBounds(resultBounds);
+            Core.map.fitBounds(resultBounds);
 
             document.getElementById('distance').innerHTML = Util.printDistanceForHuman(distance);
             document.getElementById('score').innerHTML = score;
@@ -180,7 +180,7 @@
             var round = Core.rounds[Core.rounds.length - 1];
 
             round.realMarker = new google.maps.Marker({
-                map: Core.guessMap,
+                map: Core.map,
                 visible: !hidden,
                 position: realPosition,
                 clickable: true,
@@ -192,7 +192,7 @@
             });
 
             round.guessMarker = new google.maps.Marker({
-                map: Core.guessMap,
+                map: Core.map,
                 visible: !hidden,
                 position: guessPosition,
                 clickable: false,
@@ -207,7 +207,7 @@
             });
 
             round.line = new google.maps.Polyline({
-                map: Core.guessMap,
+                map: Core.map,
                 visible: !hidden,
                 path: [
                     realPosition,
@@ -275,7 +275,7 @@
                 resultBounds.extend(round.guessPosition);
             }
 
-            Core.guessMap.fitBounds(resultBounds);
+            Core.map.fitBounds(resultBounds);
 
             document.getElementById('scoreSum').innerHTML = Core.scoreSum;
 
@@ -363,16 +363,16 @@
         Core.adaptGuess = true;
     }
 
-    Core.guessMap = new google.maps.Map(document.getElementById('guessMap'), {
+    Core.map = new google.maps.Map(document.getElementById('map'), {
         disableDefaultUI: true,
         clickableIcons: false,
         draggableCursor: 'crosshair',
         draggingCursor: 'grabbing'
     });
 
-    Core.guessMap.fitBounds(guessMapBounds);
+    Core.map.fitBounds(guessMapBounds);
 
-    Core.guessMap.addListener('click', function (e) {
+    Core.map.addListener('click', function (e) {
         if (Core.rounds[Core.rounds.length - 1].guessPosition) {
             return;
         }
@@ -383,7 +383,7 @@
         }
 
         Core.guessMarker = new google.maps.Marker({
-            map: Core.guessMap,
+            map: Core.map,
             position: e.latLng,
             clickable: false,
             draggable: true,
diff --git a/views/game.php b/views/game.php
index aa4aa2c..325814f 100644
--- a/views/game.php
+++ b/views/game.php
@@ -19,7 +19,7 @@
         <div id="closeGuessButtonContainer" class="buttonContainer top">
             <button id="closeGuessButton" class="block gray">Close</button>
         </div>
-        <div id="guessMap"></div>
+        <div id="map"></div>
         <div id="guessButtonContainer" class="buttonContainer bottom">
             <button id="guessButton" class="block" disabled>Guess</button>
         </div>

From fd3cd5e673732026bac0c2872ef03d5ad4102063 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 23:29:04 +0200
Subject: [PATCH 03/10] MAPG-56 change disabled button's cursor to
 'not-allowed'

---
 public/static/css/mapguesser.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index 160436f..cee9552 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -43,7 +43,7 @@ button:enabled:hover, button:enabled:focus {
 }
 
 button:disabled {
-    cursor: no-drop;
+    cursor: not-allowed;
     color: #dddddd;
     opacity: 0.7;
 }

From 94037dda310142c1d76af5a8e5b2e55b225ae761 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 23:32:17 +0200
Subject: [PATCH 04/10] MAPG-53 check if Core.googleLink is not null before
 trying to modify it

---
 public/static/js/mapguesser.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index 23d0550..31a585a 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -298,8 +298,10 @@
             }
 
             setTimeout(function () {
-                Core.googleLink.title = 'Google Maps'
-                Core.googleLink.href = 'https://maps.google.com/maps'
+                if (Core.googleLink) {
+                    Core.googleLink.title = 'Google Maps';
+                    Core.googleLink.href = 'https://maps.google.com/maps';
+                }
             }, 1);
         },
 

From 23b18a8e13cf11556df2ce6860dba518b0ebbb47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 21:08:36 +0200
Subject: [PATCH 05/10] MAPG-55 set marker labels with round numbers

---
 public/static/js/mapguesser.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index 31a585a..e706bd9 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -267,6 +267,13 @@
             for (var i = 0; i < Core.rounds.length; ++i) {
                 var round = Core.rounds[i];
 
+                round.realMarker.setLabel({
+                    color: '#812519',
+                    fontFamily: 'Roboto',
+                    fontSize: '16px',
+                    fontWeight: '500',
+                    text: String(i+1)
+                });
                 round.realMarker.setVisible(true);
                 round.guessMarker.setVisible(true);
                 round.line.setVisible(true);

From 5c309cd05fb5ee679b958e8b239dadd00a0bb3cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 23:50:14 +0200
Subject: [PATCH 06/10] MAPG-55 set markers' z-index (real marker should always
 be over guess marker)

---
 public/static/js/mapguesser.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index e706bd9..ad971c9 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -183,6 +183,7 @@
                 map: Core.map,
                 visible: !hidden,
                 position: realPosition,
+                zIndex: 2,
                 clickable: true,
                 draggable: false
             });
@@ -195,6 +196,7 @@
                 map: Core.map,
                 visible: !hidden,
                 position: guessPosition,
+                zIndex: 1,
                 clickable: false,
                 draggable: false,
                 label: {

From cb433ce82203835e566f0deb3a79e2d43396b074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Fri, 22 May 2020 23:55:09 +0200
Subject: [PATCH 07/10] MAPG-55 add title for real marker

---
 public/static/js/mapguesser.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index ad971c9..34a48f0 100644
--- a/public/static/js/mapguesser.js
+++ b/public/static/js/mapguesser.js
@@ -183,6 +183,7 @@
                 map: Core.map,
                 visible: !hidden,
                 position: realPosition,
+                title: 'Open in Google Maps',
                 zIndex: 2,
                 clickable: true,
                 draggable: false

From e8492994ddee826bcbd0a0162590b29675f8d12a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 23 May 2020 01:25:43 +0200
Subject: [PATCH 08/10] MAPG-54 introduce round info - current round number and
 score

---
 public/static/css/mapguesser.css | 32 ++++++++++++++++++++++++++++----
 public/static/js/mapguesser.js   | 13 ++++++++++++-
 views/game.php                   |  5 ++++-
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index cee9552..f9a0eff 100644
--- a/public/static/css/mapguesser.css
+++ b/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;
         }
     }
diff --git a/public/static/js/mapguesser.js b/public/static/js/mapguesser.js
index 31a585a..292cb2c 100644
--- a/public/static/js/mapguesser.js
+++ b/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');
diff --git a/views/game.php b/views/game.php
index 325814f..5dbc6d1 100644
--- a/views/game.php
+++ b/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>

From 8fa8b501edf43228e4577c155645c1cfc7e621b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 23 May 2020 01:34:40 +0200
Subject: [PATCH 09/10] MAPG-57 decrease result's margin to minimal in case of
 low height

---
 public/static/css/mapguesser.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index f9a0eff..ef0ce20 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -274,5 +274,11 @@ div.buttonContainer.bottom {
             top: 40px;
             height: initial;
         }
+
+        #guess.result {
+            left: 20px;
+            right: 20px;
+            bottom: 30px;
+        }
     }
 }

From 3285ce2a4f286f7a2bb29c5905d0c72a9ab2b68b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Sat, 23 May 2020 02:07:50 +0200
Subject: [PATCH 10/10] MAPG-58 make resultinfo fixed height and move out
 continue button

---
 public/static/css/mapguesser.css | 31 +++++++++++++++++++++----------
 views/game.php                   | 16 ++++++++--------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/public/static/css/mapguesser.css b/public/static/css/mapguesser.css
index f9a0eff..f4e2870 100644
--- a/public/static/css/mapguesser.css
+++ b/public/static/css/mapguesser.css
@@ -52,7 +52,7 @@ button:disabled {
     opacity: 0.7;
 }
 
-button.block {
+button.fullWidth {
     padding: 0;
     width: 100%;
 }
@@ -69,6 +69,10 @@ div.buttonContainer {
     height: 35px;
 }
 
+div.buttonContainer > button {
+    margin: 0 auto;
+}
+
 div.buttonContainer.top {
     margin-bottom: 10px;
 }
@@ -119,30 +123,37 @@ div.buttonContainer.bottom {
     z-index: 2;
 }
 
-#guess.result > #closeGuessButtonContainer, #guess.result > #guessButtonContainer {
+#guess > #continueButtonContainer {
     display: none;
 }
 
+#guess.result > #closeGuessButtonContainer,
+#guess.result > #guessButtonContainer {
+    display: none;
+}
+
+#guess.result > #continueButtonContainer {
+    display: block;
+}
+
 #map {
     width: 100%;
     border-radius: 3px;
 }
 
 #guess.result > #map {
-    height: 70%;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    height: calc(100% - 170px);
 }
 
 #resultInfo {
-    height: 30%;
+    margin-top: 5px;
+    height: 120px;
     width: 100%;
-    padding: 10px 20px;
+    padding: 5px 20px;
     text-align: center;
     box-sizing: border-box;
     background-color: #ffffff;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
+    border-radius: 3px;
     display: none;
 }
 
@@ -151,7 +162,7 @@ div.buttonContainer.bottom {
 }
 
 #resultInfo > div {
-    height: 25%;
+    height: 33.33%;
     width: 100%;
     display: flex;
     justify-content: center;
diff --git a/views/game.php b/views/game.php
index 5dbc6d1..5ce1997 100644
--- a/views/game.php
+++ b/views/game.php
@@ -16,15 +16,15 @@
     </div>
     <div id="panorama"></div>
     <div id="showGuessButtonContainer">
-        <button id="showGuessButton" class="block">Show guess map</button>
+        <button id="showGuessButton" class="fullWidth">Show guess map</button>
     </div>
     <div id="guess">
         <div id="closeGuessButtonContainer" class="buttonContainer top">
-            <button id="closeGuessButton" class="block gray">Close</button>
+            <button id="closeGuessButton" class="fullWidth gray">Close</button>
         </div>
         <div id="map"></div>
         <div id="guessButtonContainer" class="buttonContainer bottom">
-            <button id="guessButton" class="block" disabled>Guess</button>
+            <button id="guessButton" class="fullWidth" disabled>Guess</button>
         </div>
         <div id="resultInfo">
             <div id="distanceInfo">
@@ -40,11 +40,11 @@
                     <div id="scoreBar"></div>
                 </div>
             </div>
-            <div>
-                <button id="continueButton">Continue</button>
-                <button id="showSummaryButton">Show summary</button>
-                <button id="startNewGameButton">Start new game</button>
-            </div>
+        </div>
+        <div id="continueButtonContainer" class="buttonContainer bottom">
+            <button id="continueButton" class="fullWidth">Continue</button>
+            <button id="showSummaryButton" class="fullWidth">Show summary</button>
+            <button id="startNewGameButton" class="fullWidth">Start new game</button>
         </div>
     </div>
     <script>