diff --git a/public/static/css/game.css b/public/static/css/game.css index e5d910a..bc87bbb 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -149,13 +149,47 @@ color: #701919; } +#navigation { + position: absolute; + z-index: 2; +} + +#navigation .navigationItem { + margin-top: 10px; + opacity: 70%; + cursor: pointer; +} + +#navigation .navigationItem:hover { + opacity: 100%; +} + +#navigation .navigationItem div { + position: absolute; +} + +#navigation .circleBackground { + width: 100%; + height: 100%; + opacity: 50%; +} + +#navigation .navigationIcon { + width: 75%; + height: 75%; + margin: auto; + margin-top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); +} + @media screen and (max-width: 599px) { #mapName { display: none; } #showGuessButtonContainer { position: absolute; - left: 20px; + left: 65px; bottom: 30px; right: 20px; z-index: 2; @@ -172,6 +206,14 @@ #scoreBarBase { width: 100%; } + #navigation { + bottom: 25px; + left: 10px; + width: 45px; + } + #navigation .navigationItem { + height: 45px; + } } @media screen and (min-width: 600px) { @@ -215,6 +257,14 @@ #scoreBarBase { width: 60%; } + #navigation { + bottom: 50px; + left: 20px; + width: 60px; + } + #navigation .navigationItem { + height: 60px; + } @media screen and (max-height: 424px) { #guess { top: 10px; @@ -229,5 +279,13 @@ right: 20px; bottom: 30px; } + #navigation { + bottom: 30px; + left: 10px; + width: 45px; + } + #navigation .navigationItem { + height: 45px; + } } } diff --git a/public/static/img/circle_background.svg b/public/static/img/circle_background.svg new file mode 100644 index 0000000..204fed7 --- /dev/null +++ b/public/static/img/circle_background.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/public/static/img/house-fill.svg b/public/static/img/house-fill.svg new file mode 100644 index 0000000..5ca4328 --- /dev/null +++ b/public/static/img/house-fill.svg @@ -0,0 +1,5 @@ + + \ No newline at end of file diff --git a/public/static/js/game.js b/public/static/js/game.js index e36f7e9..202c172 100644 --- a/public/static/js/game.js +++ b/public/static/js/game.js @@ -334,6 +334,9 @@ document.getElementById('guess').style.visibility = null; document.getElementById('guess').classList.remove('result'); + // needs to be set visible after the show guess map hid it in mobile view + document.getElementById("navigation").style.visibility = 'visible'; + Game.initialize(); }, @@ -358,7 +361,10 @@ document.getElementById('panoCover').style.visibility = 'hidden'; document.getElementById('showGuessButton').style.visibility = null; document.getElementById('guess').style.visibility = null; - document.getElementById('guess').classList.remove('result') + document.getElementById('guess').classList.remove('result'); + + // needs to be set visible after the show guess map hid it in mobile view + document.getElementById("navigation").style.visibility = 'visible'; Game.map.setOptions({ draggableCursor: 'crosshair' @@ -864,11 +870,13 @@ document.getElementById('showGuessButton').onclick = function () { this.style.visibility = 'hidden'; document.getElementById('guess').style.visibility = 'visible'; + document.getElementById('navigation').style.visibility = 'hidden'; } document.getElementById('closeGuessButton').onclick = function () { document.getElementById('showGuessButton').style.visibility = null; document.getElementById('guess').style.visibility = null; + document.getElementById('navigation').style.visibility = 'visible'; } document.getElementById('guessButton').onclick = function () { @@ -936,4 +944,8 @@ } }); } + + document.getElementById('returnToStart').onclick = function () { + Game.loadPano(Game.panoId, Game.pov); + } })(); diff --git a/views/game.php b/views/game.php index b197f8c..e0f7b5d 100644 --- a/views/game.php +++ b/views/game.php @@ -59,6 +59,16 @@ +
@endsection @section(pageScript)