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 34a48f0..6632974 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); @@ -287,7 +298,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 @@ MapGuesser - +
+
+

Round: | Score:

+