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

Feature In-Game Compass #27

Merged
balazs merged 11 commits from feature/in-game-compass into develop 2021-04-29 19:15:44 +02:00
Conversation 2 Commits 11 Files Changed 3 +20
3 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e33d8c02e9 - Show all commits

5
public/static/img/compass.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<polygon id="needleNorth" points="50,0 33,50 66,50" style="fill:red;stroke:black;stroke-width:1" />
<polygon id="needleSouth" points="50,100 33,50 66,50" style="fill:white;stroke:black;stroke-width:1" />
Sorry, your browser does not support inline SVG.
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 328 B

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

@ -382,6 +382,10 @@
// needs to be set visible after the show guess map hid it in mobile view // needs to be set visible after the show guess map hid it in mobile view
document.getElementById("navigation").style.visibility = 'visible'; document.getElementById("navigation").style.visibility = 'visible';
// update the compass
const heading = Game.panorama.getPov().heading;
document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
}, },
handleErrorResponse: function (error) { handleErrorResponse: function (error) {
@ -858,6 +862,9 @@
Game.panorama.addListener('pov_changed', function () { Game.panorama.addListener('pov_changed', function () {
Game.rewriteGoogleLink(); Game.rewriteGoogleLink();
const heading = Game.panorama.getPov().heading;
document.getElementById("compass").style.transform = "rotate(" + heading + "deg)";
bence commented 2021-04-29 00:43:09 +02:00
Outdated
Review
Copy Link

I would give the id compass to the compass img itself so only the compass graphic would rotate. But then this line should look like this to keep the default translate of the image:

        document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
I would give the id `compass` to the compass `img` itself so only the compass graphic would rotate. But then this line should look like this to keep the default translate of the image: ```js document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)"; ```
}); });
if (COOKIES_CONSENT) { if (COOKIES_CONSENT) {

8
views/game.php
View File

@ -60,6 +60,14 @@
</div> </div>
</div> </div>
<div id="navigation"> <div id="navigation">
<div id="compass" class="navigationItem">
<span>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
bence commented 2021-04-29 00:45:30 +02:00
Review
Copy Link

So I meant here that this should have the id: <img id="compass" ...

It is not a practical issue but for me it seems to be better if not the whole parent div rotates.

So I meant [here](https://gitea.e5tv.hu/esoko/mapguesser/pulls/27/files#issuecomment-201) that this should have the id: `<img id="compass" ...` It is not a practical issue but for me it seems to be better if not the whole parent div rotates.
</span>
<span>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
</span>
</div>
<div id="returnToStart" class="navigationItem"> <div id="returnToStart" class="navigationItem">
<span> <span>
<img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" /> <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />