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

MAPG-178 add Google Analytics

Browse Source 
style adaptations
cookie notice improvements
This commit is contained in:
Bence Pőcze 2020-06-25 14:02:39 +02:00
parent e7ee7bbe8e
commit f8a570d0d5
6 changed files with 119 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@
initialize: function () { initialize: function () {
document.getElementById('loading').style.visibility = 'visible'; document.getElementById('loading').style.visibility = 'visible';
document.getElementById('guessCover').style.visibility = 'visible'; document.getElementById('panoCover').style.visibility = 'visible';
document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS); document.getElementById('currentRound').innerHTML = '1/' + String(Game.NUMBER_OF_ROUNDS);
document.getElementById('currentScoreSum').innerHTML = '0/0'; document.getElementById('currentScoreSum').innerHTML = '0/0';
@ -27,7 +27,7 @@
MapGuesser.httpRequest('GET', '/game/' + mapId + '/newPlace.json', function () { MapGuesser.httpRequest('GET', '/game/' + mapId + '/newPlace.json', function () {
document.getElementById('loading').style.visibility = 'hidden'; document.getElementById('loading').style.visibility = 'hidden';
document.getElementById('guessCover').style.visibility = 'hidden'; document.getElementById('panoCover').style.visibility = 'hidden';
if (this.response.error) { if (this.response.error) {
//TODO: handle this error //TODO: handle this error
@ -98,7 +98,7 @@
lastRound.line.setVisible(false); lastRound.line.setVisible(false);
} }
document.getElementById('guessCover').style.visibility = 'hidden'; document.getElementById('panoCover').style.visibility = 'hidden';
document.getElementById('showGuessButton').style.visibility = null; document.getElementById('showGuessButton').style.visibility = null;
document.getElementById('guess').style.visibility = null; document.getElementById('guess').style.visibility = null;
document.getElementById('guess').classList.remove('result') document.getElementById('guess').classList.remove('result')
@ -152,7 +152,7 @@
document.getElementById('guess').classList.remove('adapt'); document.getElementById('guess').classList.remove('adapt');
} }
document.getElementById('loading').style.visibility = 'visible'; document.getElementById('loading').style.visibility = 'visible';
document.getElementById('guessCover').style.visibility = 'visible'; document.getElementById('panoCover').style.visibility = 'visible';
var data = new FormData(); var data = new FormData();
data.append('lat', String(guessPosition.lat)); data.append('lat', String(guessPosition.lat));
@ -370,6 +370,14 @@
} }
}; };
MapGuesser.sessionAvailableHooks.reinitializeGame = function () {
MapGuesser.httpRequest('GET', '/game/' + mapId + '/json', function () {
mapBounds = this.response.bounds;
Game.initialize();
});
};
if (!('ontouchstart' in document.documentElement)) { if (!('ontouchstart' in document.documentElement)) {
Game.adaptGuess = true; Game.adaptGuess = true;
} }

45
public/static/js/mapguesser.js
View File

@ -1,4 +1,49 @@
var MapGuesser = { var MapGuesser = {
cookiesAgreed: false,
sessionAvailableHooks: {},
initGoogleAnalitics: function () {
if (typeof GOOGLE_ANALITICS_ID === 'undefined') {
return;
}
// Global site tag (gtag.js) - Google Analytics
var script = document.createElement('script');
script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GOOGLE_ANALITICS_ID;
script.async = true;
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', GOOGLE_ANALITICS_ID);
},
agreeCookies: function () {
if (MapGuesser.cookiesAgreed) {
return;
}
var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
MapGuesser.initGoogleAnalitics();
MapGuesser.httpRequest('GET', '/startSession.json', function () {
ANTI_CSRF_TOKEN = this.response.antiCsrfToken;
for (var hookId in MapGuesser.sessionAvailableHooks) {
if (!MapGuesser.sessionAvailableHooks.hasOwnProperty(hookId)) {
continue;
}
MapGuesser.sessionAvailableHooks[hookId]();
}
});
MapGuesser.cookiesAgreed = true;
},
httpRequest: function (method, url, callback, data) { httpRequest: function (method, url, callback, data) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();

26
views/admin/map_editor.php
View File

@ -59,18 +59,20 @@ $jsFiles = [
</div> </div>
</form> </form>
</div> </div>
<div id="map"></div> <div class="full">
<div id="control"> <div id="map"></div>
<button id="saveButton" class="fullWidth" disabled>Save</button> <div id="panorama"></div>
</div> <div id="noPano">
<div id="panorama"></div> <p class="bold">No panorama is available for this location.</p>
<div id="noPano"> </div>
<p class="bold">No panorama is available for this location.</p> <div id="control">
</div> <button id="saveButton" class="fullWidth" disabled>Save</button>
<div id="placeControl"> </div>
<button id="applyButton" class="fullWidth">Apply</button> <div id="placeControl">
<button id="closeButton" class="gray fullWidth marginTop">Close</button> <button id="applyButton" class="fullWidth">Apply</button>
<button id="deleteButton" class="red fullWidth marginTop">Delete</button> <button id="closeButton" class="gray fullWidth marginTop">Close</button>
<button id="deleteButton" class="red fullWidth marginTop">Delete</button>
</div>
</div> </div>
<script> <script>
var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>'; var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';

56
views/game.php
View File

@ -21,38 +21,40 @@ $jsFiles = [
--><span>Score <span id="currentScoreSum" class="bold"></span></span> --><span>Score <span id="currentScoreSum" class="bold"></span></span>
</p> </p>
</header> </header>
<div id="guessCover"></div> <div class="full">
<div id="panorama"></div> <div id="panoCover"></div>
<div id="showGuessButtonContainer"> <div id="panorama"></div>
<button id="showGuessButton" class="fullWidth">Show guess map</button> <div id="showGuessButtonContainer">
</div> <button id="showGuessButton" class="fullWidth">Show guess map</button>
<div id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
<button id="closeGuessButton" class="fullWidth gray">Close</button>
</div> </div>
<div id="map"></div> <div id="guess">
<div id="guessButtonContainer" class="buttonContainer marginTop"> <div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
<button id="guessButton" class="fullWidth" disabled>Guess</button> <button id="closeGuessButton" class="fullWidth gray">Close</button>
</div>
<div id="resultInfo">
<div id="distanceInfo">
<p>You were <span id="distance" class="bold"></span> close.</p>
<p class="bold">Game finished.</p>
</div> </div>
<div id="scoreInfo"> <div id="map"></div>
<p>You earned <span id="score" class="bold"></span> points.</p> <div id="guessButtonContainer" class="buttonContainer marginTop">
<p>You got <span id="scoreSum" class="bold"></span> points in total.</p> <button id="guessButton" class="fullWidth" disabled>Guess</button>
</div> </div>
<div> <div id="resultInfo">
<div id="scoreBarBase"> <div id="distanceInfo">
<div id="scoreBar"></div> <p>You were <span id="distance" class="bold"></span> close.</p>
<p class="bold">Game finished.</p>
</div>
<div id="scoreInfo">
<p>You earned <span id="score" class="bold"></span> points.</p>
<p>You got <span id="scoreSum" class="bold"></span> points in total.</p>
</div>
<div>
<div id="scoreBarBase">
<div id="scoreBar"></div>
</div>
</div> </div>
</div> </div>
</div> <div id="continueButtonContainer" class="buttonContainer marginTop">
<div id="continueButtonContainer" class="buttonContainer marginTop"> <button id="continueButton" class="fullWidth">Continue</button>
<button id="continueButton" class="fullWidth">Continue</button> <button id="showSummaryButton" class="fullWidth">Show summary</button>
<button id="showSummaryButton" class="fullWidth">Show summary</button> <button id="startNewGameButton" class="fullWidth">Play this map again</button>
<button id="startNewGameButton" class="fullWidth">Play this map again</button> </div>
</div> </div>
</div> </div>
<script> <script>

33
views/templates/main_footer.php
View File

@ -1,7 +1,10 @@
<script> <script>
const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>'; const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
const REVISION = '<?= REVISION ?>'; const REVISION = '<?= REVISION ?>';
const ANTI_CSRF_TOKEN = '<?= $_SESSION['anti_csrf_token'] ?>'; var ANTI_CSRF_TOKEN = '<?= \Container::$request->session()->get('anti_csrf_token') ?>';
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
const GOOGLE_ANALITICS_ID = '<?= $_ENV['GOOGLE_ANALITICS_ID'] ?>';
<?php endif; ?>
</script> </script>
<script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script> <script src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
<?php if (isset($jsFiles)) : ?> <?php if (isset($jsFiles)) : ?>
@ -17,22 +20,14 @@
<?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?> <?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
<script> <script>
(function () { (function () {
var MapGuesser = { // we don't want user to agree cookies when clicking on the notice itself
cookiesAgreed: false, document.getElementById('cookiesNotice').onclick = function (e) {
e.stopPropagation();
agreeCookies: function () {
if (MapGuesser.cookiesAgreed) {
return;
}
var expirationDate = new Date(new Date().getTime() + 20 * 365 * 24 * 60 * 60 * 1000).toUTCString();
document.cookie = 'COOKIES_CONSENT=1; expires=' + expirationDate + '; path=/';
MapGuesser.cookiesAgreed = true;
}
}; };
document.getElementById('agreeCookies').onclick = function () { document.getElementById('agreeCookiesButton').onclick = function () {
MapGuesser.agreeCookies();
document.getElementById('cookiesNotice').style.display = 'none'; document.getElementById('cookiesNotice').style.display = 'none';
}; };
@ -41,6 +36,14 @@
}; };
})(); })();
</script> </script>
<?php else: ?>
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
<script>
(function () {
MapGuesser.initGoogleAnalitics();
})();
</script>
<?php endif; ?>
<?php endif; ?> <?php endif; ?>
</body> </body>
</html> </html>

2
views/templates/main_header.php
View File

@ -27,7 +27,7 @@
<p class="small"> <p class="small">
<?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies. <?= $_ENV['APP_NAME'] ?> uses cookies to improve user experience. By using the app or clicking 'Agree', you consent to our use of cookies.
</p> </p>
<button id="agreeCookies" class="small marginTop">Agree</button> <button id="agreeCookiesButton" class="small marginTop">Agree</button>
</div> </div>
<?php endif; ?> <?php endif; ?>
<div id="loading"> <div id="loading">