diff --git a/public/static/css/game.css b/public/static/css/game.css index e5d910a..9c0556e 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -149,15 +149,43 @@ color: #701919; } +#navigation { + position: absolute; + z-index: 2; +} +#navigation .navigationItem { + margin-top: 10px; + opacity: 70%; +} +#navigation .navigationItem:hover { + opacity: 100%; +} +#navigation span { + 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: 60px; bottom: 30px; - right: 20px; + right: 60px; z-index: 2; } #guess { @@ -172,6 +200,14 @@ #scoreBarBase { width: 100%; } + #navigation { + bottom: 30px; + left: 10px; + width: 45px; + } + #navigation .navigationItem { + height: 45px; + } } @media screen and (min-width: 600px) { @@ -215,6 +251,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 +273,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..09b47d2 100644 --- a/public/static/js/game.js +++ b/public/static/js/game.js @@ -864,11 +864,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 () { diff --git a/views/game.php b/views/game.php index b197f8c..5622c85 100644 --- a/views/game.php +++ b/views/game.php @@ -59,6 +59,16 @@ + @endsection @section(pageScript)