esoko/mapguesser
esoko/mapguesser
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

feature/return-to-starting-point-button #26

Merged
balazs merged 9 commits from feature/return-to-starting-point-button into develop 2021-04-29 18:55:22 +02:00
Conversation 1 Commits 9 Files Changed 5 +90 -2
5 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/static/css/game.css
View File

@ -149,13 +149,47 @@
color: #701919;
}
#navigation {
position: absolute;
z-index: 2;
}
#navigation .navigationItem {
margin-top: 10px;
opacity: 70%;
cursor: pointer;
bence commented 2021-04-29 00:19:10 +02:00
Outdated
Review
Copy Link
    cursor: pointer;

Then it will feel like a link.

```css cursor: pointer; ``` Then it will feel like a link.
}
#navigation .navigationItem:hover {
opacity: 100%;
}
bence commented 2021-04-29 00:32:38 +02:00
Outdated
Review
Copy Link

For semantical reasons I would use div instead of span because span is intended to be an inline element, however this a block element here.

    #navigation .navigationItem div {
For semantical reasons I would use `div` instead of `span` because `span` is intended to be an inline element, however this a block element here. ```css #navigation .navigationItem div { ```
balazs commented 2021-04-29 09:09:07 +02:00
Outdated
Review
Copy Link

I don't know why, but it breaks the visualization. I didn't see any difference in the CSS tree, when I tried it.

I don't know why, but it breaks the visualization. I didn't see any difference in the CSS tree, when I tried it.
balazs commented 2021-04-29 12:14:12 +02:00
Outdated
Review
Copy Link

I've realized I've left out the .navigationItem and that's why not the right div was selected. (I see now, that you wrote it correctly in your suggestion)

I've realized I've left out the .navigationItem and that's why not the right div was selected. (I see now, that you wrote it correctly in your suggestion)
#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;
bence commented 2021-04-29 00:13:05 +02:00
Outdated
Review
Copy Link

I would modify this as follows:

        left: 65px;

        right: 20px;

Then only left would change to leave space for the return to start button (and it would have a slightly bigger space).

I would modify this as follows: ```css left: 65px; ``` ```css right: 20px; ``` Then only `left` would change to leave space for the return to start button (and it would have a slightly bigger space). ![](https://i.ibb.co/7VRQz3Q/Bildschirmfoto-vom-2021-04-29-00-10-55.png)
balazs commented 2021-04-29 08:12:23 +02:00
Outdated
Review
Copy Link

I didn't want to break the symmetry, and I was thinking putting buttons to the right as well. But if you prefer the button to be larger over the symmetry, it's fine by me.

I didn't want to break the symmetry, and I was thinking putting buttons to the right as well. But if you prefer the button to be larger over the symmetry, it's fine by me.
bence commented 2021-04-29 18:27:07 +02:00
Outdated
Review
Copy Link

If further buttons are planned, it is OK for me.

If further buttons are planned, it is OK for me.
bence commented 2021-04-29 18:27:46 +02:00
Outdated
Review
Copy Link

However I see you already changed the position, then I wouldn't change back.

However I see you already changed the position, then I wouldn't change back.
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;
}
}
}

3
public/static/img/circle_background.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
<circle cx="50%" cy="50%" r="50%" fill="black" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 146 B

5
public/static/img/house-fill.svg Normal file
View File

@ -0,0 +1,5 @@
<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="#3183ce" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 556 B

14
public/static/js/game.js
View File

@ -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);
}
})();

10
views/game.php
View File

@ -59,6 +59,16 @@
<button id="startNewGameButton" class="fullWidth">Play this map again</button>
</div>
</div>
<div id="navigation">
<div id="returnToStart" class="navigationItem">
<div>
bence commented 2021-04-29 00:33:58 +02:00
Outdated
Review
Copy Link

https://gitea.e5tv.hu/esoko/mapguesser/pulls/26/files#issuecomment-197

<div>
[https://gitea.e5tv.hu/esoko/mapguesser/pulls/26/files#issuecomment-197](https://gitea.e5tv.hu/esoko/mapguesser/pulls/26/files#issuecomment-197) ```html <div> ```
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
</div>
<div>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
</div>
</div>
</div>
@endsection
@section(pageScript)