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 @@
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" />