From b9927f79fc2f5307fc6ed7d6d5bb85dadf5dcd92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Wed, 28 Apr 2021 17:58:48 +0200 Subject: [PATCH 1/7] added a new button to the view for the return to starting point feature --- public/static/css/game.css | 56 ++++++++++++++++++++++++- public/static/img/circle_background.svg | 3 ++ public/static/img/house-fill.svg | 5 +++ public/static/js/game.js | 2 + views/game.php | 10 +++++ 5 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 public/static/img/circle_background.svg create mode 100644 public/static/img/house-fill.svg 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) -- 2.45.2 From 5c8f3d6fb9bd361d17639506b5da7f9b54d8c386 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Wed, 28 Apr 2021 18:26:46 +0200 Subject: [PATCH 2/7] returns to start when clicked on home symbol --- public/static/css/game.css | 2 +- public/static/js/game.js | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/public/static/css/game.css b/public/static/css/game.css index 9c0556e..8df1352 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -201,7 +201,7 @@ width: 100%; } #navigation { - bottom: 30px; + bottom: 25px; left: 10px; width: 45px; } diff --git a/public/static/js/game.js b/public/static/js/game.js index 09b47d2..a21a66c 100644 --- a/public/static/js/game.js +++ b/public/static/js/game.js @@ -379,6 +379,9 @@ document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS); Game.loadPano(Game.panoId, Game.pov); + + // needs to be set visible after the show guess map hid it in mobile view + document.getElementById("navigation").style.visibility = 'visible'; }, handleErrorResponse: function (error) { @@ -938,4 +941,8 @@ } }); } + + document.getElementById('returnToStart').onclick = function () { + Game.loadPano(Game.panoId, Game.pov); + } })(); -- 2.45.2 From 3d52c967b6eaac97d95493cb8026d6d77ce4139d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Wed, 28 Apr 2021 18:30:58 +0200 Subject: [PATCH 3/7] reformatted: added new line breaks to the game.css --- public/static/css/game.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/static/css/game.css b/public/static/css/game.css index 8df1352..90b50d6 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -153,21 +153,26 @@ 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%; -- 2.45.2 From ffc4aaf1100ba20bffcff1dec710865a7ebbdfc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Thu, 29 Apr 2021 08:24:20 +0200 Subject: [PATCH 4/7] fixed findings --- public/static/css/game.css | 7 ++++--- public/static/js/game.js | 6 +++--- views/game.php | 8 ++++---- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/public/static/css/game.css b/public/static/css/game.css index 90b50d6..1f827e4 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -157,13 +157,14 @@ #navigation .navigationItem { margin-top: 10px; opacity: 70%; + cursor: pointer; } #navigation .navigationItem:hover { opacity: 100%; } -#navigation span { +#navigation div { position: absolute; } @@ -188,9 +189,9 @@ } #showGuessButtonContainer { position: absolute; - left: 60px; + left: 65px; bottom: 30px; - right: 60px; + right: 20px; z-index: 2; } #guess { diff --git a/public/static/js/game.js b/public/static/js/game.js index a21a66c..2d556a5 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(); }, @@ -379,9 +382,6 @@ document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS); Game.loadPano(Game.panoId, Game.pov); - - // needs to be set visible after the show guess map hid it in mobile view - document.getElementById("navigation").style.visibility = 'visible'; }, handleErrorResponse: function (error) { diff --git a/views/game.php b/views/game.php index 5622c85..e0f7b5d 100644 --- a/views/game.php +++ b/views/game.php @@ -61,12 +61,12 @@ @endsection -- 2.45.2 From 3f4fa83d877c78656d9b4f961e4d476059849081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Thu, 29 Apr 2021 09:04:50 +0200 Subject: [PATCH 5/7] reverted replacing spans with divs --- public/static/css/game.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/static/css/game.css b/public/static/css/game.css index 1f827e4..6224fa2 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -164,7 +164,7 @@ opacity: 100%; } -#navigation div { +#navigation span { position: absolute; } -- 2.45.2 From 312269636443fb92a617015055e3ab207cc69fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Thu, 29 Apr 2021 09:07:44 +0200 Subject: [PATCH 6/7] added the visibility reset to resetRound and reverted the span div replacement in the view --- public/static/js/game.js | 5 ++++- views/game.php | 8 ++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/public/static/js/game.js b/public/static/js/game.js index 2d556a5..202c172 100644 --- a/public/static/js/game.js +++ b/public/static/js/game.js @@ -361,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' diff --git a/views/game.php b/views/game.php index e0f7b5d..5622c85 100644 --- a/views/game.php +++ b/views/game.php @@ -61,12 +61,12 @@ @endsection -- 2.45.2 From 8f0cfd4489f049ee7ced9fcb483bd310d084bfa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Vigh?= Date: Thu, 29 Apr 2021 12:08:04 +0200 Subject: [PATCH 7/7] replaced spans with divs again and fixed the css issue --- public/static/css/game.css | 2 +- views/game.php | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/static/css/game.css b/public/static/css/game.css index 6224fa2..bc87bbb 100644 --- a/public/static/css/game.css +++ b/public/static/css/game.css @@ -164,7 +164,7 @@ opacity: 100%; } -#navigation span { +#navigation .navigationItem div { position: absolute; } diff --git a/views/game.php b/views/game.php index 5622c85..e0f7b5d 100644 --- a/views/game.php +++ b/views/game.php @@ -61,12 +61,12 @@ @endsection -- 2.45.2