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 +24
3 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -387,6 +387,10 @@
document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = String(Game.rounds.length) + '/' + String(Game.NUMBER_OF_ROUNDS);
Game.loadPano(Game.panoId, Game.pov); Game.loadPano(Game.panoId, Game.pov);
// update the compass
const heading = Game.panorama.getPov().heading;
document.getElementById("compass").style.transform = "translateY(-50%) rotate(" + heading + "deg)";
}, },
handleErrorResponse: function (error) { handleErrorResponse: function (error) {
@ -863,6 +867,9 @@
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)"; ```
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 = "translateY(-50%) rotate(" + heading + "deg)";
}); });
if (COOKIES_CONSENT) { if (COOKIES_CONSENT) {
@ -950,4 +957,8 @@
document.getElementById('returnToStart').onclick = function () { document.getElementById('returnToStart').onclick = function () {
Game.loadPano(Game.panoId, Game.pov); Game.loadPano(Game.panoId, Game.pov);
} }
document.getElementById('compassContainer').onclick = function () {
Game.panorama.setPov({ heading: 0, pitch: Game.panorama.getPov().pitch });
}
})(); })();

8
views/game.php
View File

@ -60,6 +60,14 @@
</div> </div>
</div> </div>
<div id="navigation"> <div id="navigation">
<div id="compassContainer" class="navigationItem">
<div>
<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.
</div>
<div>
<img id="compass" src="<?= $_ENV['STATIC_ROOT'] ?>/img/compass.svg?rev=<?= REVISION ?>" alt="compass icon" class="navigationIcon" />
</div>
</div>
<div id="returnToStart" class="navigationItem"> <div id="returnToStart" class="navigationItem">
<div> <div>
<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" />