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

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

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

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

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

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

@ -16,7 +16,7 @@
initialize: function () {
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('currentScoreSum').innerHTML = '0/0';
@ -27,7 +27,7 @@
MapGuesser.httpRequest('GET', '/game/' + mapId + '/newPlace.json', function () {
document.getElementById('loading').style.visibility = 'hidden';
document.getElementById('guessCover').style.visibility = 'hidden';
document.getElementById('panoCover').style.visibility = 'hidden';
if (this.response.error) {
//TODO: handle this error
@ -98,7 +98,7 @@
lastRound.line.setVisible(false);
}
document.getElementById('guessCover').style.visibility = 'hidden';
document.getElementById('panoCover').style.visibility = 'hidden';
document.getElementById('showGuessButton').style.visibility = null;
document.getElementById('guess').style.visibility = null;
document.getElementById('guess').classList.remove('result')
@ -152,7 +152,7 @@
document.getElementById('guess').classList.remove('adapt');
}
document.getElementById('loading').style.visibility = 'visible';
document.getElementById('guessCover').style.visibility = 'visible';
document.getElementById('panoCover').style.visibility = 'visible';
var data = new FormData();
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)) {
Game.adaptGuess = true;
}

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

@ -1,4 +1,49 @@
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) {
var xhr = new XMLHttpRequest();

18
src/Controller/HomeController.php
View File

@ -1,12 +1,30 @@
<?php namespace MapGuesser\Controller;
use MapGuesser\Interfaces\Request\IRequest;
use MapGuesser\Interfaces\Response\IContent;
use MapGuesser\Interfaces\Response\IRedirect;
use MapGuesser\Response\JsonContent;
use MapGuesser\Response\Redirect;
class HomeController
{
private IRequest $request;
public function __construct(IRequest $request)
{
$this->request = $request;
}
public function getIndex(): IRedirect
{
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>
</form>
</div>
<div id="map"></div>
<div id="control">
<button id="saveButton" class="fullWidth" disabled>Save</button>
</div>
<div id="panorama"></div>
<div id="noPano">
<p class="bold">No panorama is available for this location.</p>
</div>
<div id="placeControl">
<button id="applyButton" class="fullWidth">Apply</button>
<button id="closeButton" class="gray fullWidth marginTop">Close</button>
<button id="deleteButton" class="red fullWidth marginTop">Delete</button>
<div class="full">
<div id="map"></div>
<div id="panorama"></div>
<div id="noPano">
<p class="bold">No panorama is available for this location.</p>
</div>
<div id="control">
<button id="saveButton" class="fullWidth" disabled>Save</button>
</div>
<div id="placeControl">
<button id="applyButton" class="fullWidth">Apply</button>
<button id="closeButton" class="gray fullWidth marginTop">Close</button>
<button id="deleteButton" class="red fullWidth marginTop">Delete</button>
</div>
</div>
<script>
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>
</p>
</header>
<div id="guessCover"></div>
<div id="panorama"></div>
<div id="showGuessButtonContainer">
<button id="showGuessButton" class="fullWidth">Show guess map</button>
</div>
<div id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
<button id="closeGuessButton" class="fullWidth gray">Close</button>
<div class="full">
<div id="panoCover"></div>
<div id="panorama"></div>
<div id="showGuessButtonContainer">
<button id="showGuessButton" class="fullWidth">Show guess map</button>
</div>
<div id="map"></div>
<div id="guessButtonContainer" class="buttonContainer marginTop">
<button id="guessButton" class="fullWidth" disabled>Guess</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 id="guess">
<div id="closeGuessButtonContainer" class="buttonContainer marginBottom">
<button id="closeGuessButton" class="fullWidth gray">Close</button>
</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 id="map"></div>
<div id="guessButtonContainer" class="buttonContainer marginTop">
<button id="guessButton" class="fullWidth" disabled>Guess</button>
</div>
<div>
<div id="scoreBarBase">
<div id="scoreBar"></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 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 id="continueButtonContainer" class="buttonContainer marginTop">
<button id="continueButton" class="fullWidth">Continue</button>
<button id="showSummaryButton" class="fullWidth">Show summary</button>
<button id="startNewGameButton" class="fullWidth">Play this map again</button>
<div id="continueButtonContainer" class="buttonContainer marginTop">
<button id="continueButton" class="fullWidth">Continue</button>
<button id="showSummaryButton" class="fullWidth">Show summary</button>
<button id="startNewGameButton" class="fullWidth">Play this map again</button>
</div>
</div>
</div>
<script>

33
views/templates/main_footer.php
View File

@ -1,7 +1,10 @@
<script>
const STATIC_ROOT = '<?= $_ENV['STATIC_ROOT'] ?>';
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 src="<?= $_ENV['STATIC_ROOT'] ?>/js/mapguesser.js?rev=<?= REVISION ?>"></script>
<?php if (isset($jsFiles)) : ?>
@ -17,22 +20,14 @@
<?php if (!isset($_COOKIE['COOKIES_CONSENT'])): ?>
<script>
(function () {
var MapGuesser = {
cookiesAgreed: false,
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;
}
// we don't want user to agree cookies when clicking on the notice itself
document.getElementById('cookiesNotice').onclick = function (e) {
e.stopPropagation();
};
document.getElementById('agreeCookies').onclick = function () {
document.getElementById('agreeCookiesButton').onclick = function () {
MapGuesser.agreeCookies();
document.getElementById('cookiesNotice').style.display = 'none';
};
@ -41,6 +36,14 @@
};
})();
</script>
<?php else: ?>
<?php if (!empty($_ENV['GOOGLE_ANALITICS_ID'])): ?>
<script>
(function () {
MapGuesser.initGoogleAnalitics();
})();
</script>
<?php endif; ?>
<?php endif; ?>
</body>
</html>

2
views/templates/main_header.php
View File

@ -27,7 +27,7 @@
<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.
</p>
<button id="agreeCookies" class="small marginTop">Agree</button>
<button id="agreeCookiesButton" class="small marginTop">Agree</button>
</div>
<?php endif; ?>
<div id="loading">

1
web.php
View File

@ -13,6 +13,7 @@ if (!empty($_ENV['DEV'])) {
Container::$routeCollection = new MapGuesser\Routing\RouteCollection();
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) {
$routeCollection->get('login', '', [MapGuesser\Controller\LoginController::class, 'getLoginForm']);
$routeCollection->post('login-action', '', [MapGuesser\Controller\LoginController::class, 'login']);