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

Merged in feature/MAPG-178-add-google-analytics (pull request #151)

Browse Source 
Feature/MAPG-178 add google analytics
This commit is contained in:
Bence Pőcze 2020-06-25 12:06:43 +00:00
commit b75eb16b3d
12 changed files with 171 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@ -14,3 +14,4 @@ MAIL_HOST=mail
MAIL_PORT=2500 MAIL_PORT=2500
GOOGLE_OAUTH_CLIENT_ID=your_google_oauth_client_id GOOGLE_OAUTH_CLIENT_ID=your_google_oauth_client_id
GOOGLE_OAUTH_CLIENT_SECRET=your_google_oauth_client_secret GOOGLE_OAUTH_CLIENT_SECRET=your_google_oauth_client_secret
GOOGLE_ANALITICS_ID=your_google_analytics_id

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

@ -1,12 +1,15 @@
#panorama { #panorama {
width: 100%; position: absolute;
height: calc(100% - 40px); top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1; z-index: 1;
} }
#guessCover { #panoCover {
position: absolute; position: absolute;
top: 40px; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -111,7 +114,7 @@
z-index: 2; z-index: 2;
} }
#guess { #guess {
top: 50px; top: 10px;
left: 20px; left: 20px;
opacity: 0.95; opacity: 0.95;
visibility: hidden; visibility: hidden;
@ -157,7 +160,7 @@
#guess.result { #guess.result {
width: initial; width: initial;
height: initial; height: initial;
top: 50px; top: 10px;
left: 50px; left: 50px;
right: 50px; right: 50px;
bottom: 50px; bottom: 50px;
@ -167,11 +170,11 @@
} }
@media screen and (max-height: 424px) { @media screen and (max-height: 424px) {
#guess { #guess {
top: 50px; top: 10px;
height: initial; height: initial;
} }
#guess.adapt:hover { #guess.adapt:hover {
top: 50px; top: 10px;
height: initial; height: initial;
} }
#guess.result { #guess.result {

23
public/static/css/map_editor.css
View File

@ -1,9 +1,13 @@
#map { #map {
width: 100%; position: absolute;
height: calc(100% - 40px); top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1; z-index: 1;
} }
/* modify the cursor for the Leaflet map */
.leaflet-container { .leaflet-container {
cursor: crosshair; cursor: crosshair;
} }
@ -30,7 +34,7 @@
#control { #control {
position: absolute; position: absolute;
top: 50px; top: 10px;
right: 10px; right: 10px;
width: 125px; width: 125px;
z-index: 3; z-index: 3;
@ -50,31 +54,34 @@
@media screen and (max-width: 999px) and (min-height: 600px) { @media screen and (max-width: 999px) and (min-height: 600px) {
#map.selected { #map.selected {
height: calc(50% - 20px); height: 50%;
} }
#panorama, #noPano { #panorama, #noPano {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
height: calc(50% - 20px); height: 50%;
} }
#placeControl { #placeControl {
top: calc(50% + 30px); top: calc(50% + 10px);
} }
} }
@media screen and (min-width: 1000px), (max-height: 599px) { @media screen and (min-width: 1000px), (max-height: 599px) {
#map.selected { #map.selected {
top: 0;
bottom: 0;
left: 0;
width: 50%; width: 50%;
} }
#panorama, #noPano { #panorama, #noPano {
top: 40px; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 50%; width: 50%;
} }
#placeControl { #placeControl {
top: 50px; top: 10px;
} }
#modified.selected { #modified.selected {
right: calc(50% + 10px); right: calc(50% + 10px);

6
public/static/css/mapguesser.css
View File

@ -324,6 +324,12 @@ main {
padding: 6px 12px; padding: 6px 12px;
} }
div.full {
position: relative;
width: 100%;
height: calc(100% - 40px);
}
footer { footer {
background-color: #444444; background-color: #444444;
padding: 6px 12px; padding: 6px 12px;

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

18
src/Controller/HomeController.php
View File

@ -1,12 +1,30 @@
<?php namespace MapGuesser\Controller; <?php namespace MapGuesser\Controller;
use MapGuesser\Interfaces\Request\IRequest;
use MapGuesser\Interfaces\Response\IContent;
use MapGuesser\Interfaces\Response\IRedirect; use MapGuesser\Interfaces\Response\IRedirect;
use MapGuesser\Response\JsonContent;
use MapGuesser\Response\Redirect; use MapGuesser\Response\Redirect;
class HomeController class HomeController
{ {
private IRequest $request;
public function __construct(IRequest $request)
{
$this->request = $request;
}
public function getIndex(): IRedirect public function getIndex(): IRedirect
{ {
return new Redirect(\Container::$routeCollection->getRoute('maps')->generateLink(), IRedirect::TEMPORARY); return new Redirect(\Container::$routeCollection->getRoute('maps')->generateLink(), IRedirect::TEMPORARY);
} }
public function startSession(): IContent
{
// session starts with the request, this method just sends valid data to the client
$data = ['antiCsrfToken' => $this->request->session()->get('anti_csrf_token')];
return new JsonContent($data);
}
} }

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

1
web.php
View File

@ -13,6 +13,7 @@ if (!empty($_ENV['DEV'])) {
Container::$routeCollection = new MapGuesser\Routing\RouteCollection(); Container::$routeCollection = new MapGuesser\Routing\RouteCollection();
Container::$routeCollection->get('index', '', [MapGuesser\Controller\MapsController::class, 'getMaps']); Container::$routeCollection->get('index', '', [MapGuesser\Controller\MapsController::class, 'getMaps']);
Container::$routeCollection->get('startSession', 'startSession.json', [MapGuesser\Controller\HomeController::class, 'startSession']);
Container::$routeCollection->group('login', function (MapGuesser\Routing\RouteCollection $routeCollection) { Container::$routeCollection->group('login', function (MapGuesser\Routing\RouteCollection $routeCollection) {
$routeCollection->get('login', '', [MapGuesser\Controller\LoginController::class, 'getLoginForm']); $routeCollection->get('login', '', [MapGuesser\Controller\LoginController::class, 'getLoginForm']);
$routeCollection->post('login-action', '', [MapGuesser\Controller\LoginController::class, 'login']); $routeCollection->post('login-action', '', [MapGuesser\Controller\LoginController::class, 'login']);