Merged in develop (pull request #44)

Develop

docker/Dockerfile

@@ -23,8 +23,7 @@ RUN ./install-composer.sh
 # Install Node.js and required packages
 RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
 RUN apt install -y nodejs
-RUN npm install -g uglify-js
+RUN npm install -g uglify-js clean-css-cli html-minifier
-RUN npm install -g clean-css-cli
 
 EXPOSE 80
 VOLUME /var/www/mapguesser

public/static/css/mapguesser.css

@@ -83,12 +83,12 @@ div.buttonContainer.bottom {
 
 #loading {
     position: absolute;
-    width: 40px;
+    width: 64px;
-    height: 40px;
+    height: 64px;
     top: 50%;
     left: 50%;
-    margin-top: -20px;
+    margin-top: -32px;
-    margin-left: -20px;
+    margin-left: -32px;
     z-index: 3;
 }
 

public/static/img/loading.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve">
+    <g>
+        <linearGradient id="linear-gradient">
+            <stop offset="0%" stop-color="#ffffff" fill-opacity="0"/>
+            <stop offset="100%" stop-color="#000000" fill-opacity="1"/>
+        </linearGradient>
+        <path d="M63.85 0A63.85 63.85 0 1 1 0 63.85 63.85 63.85 0 0 1 63.85 0zm.65 19.5a44 44 0 1 1-44 44 44 44 0 0 1 44-44z" fill="url(#linear-gradient)" fill-rule="evenodd"/>
+        <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1080ms" repeatCount="indefinite"></animateTransform>
+    </g>
+</svg>

public/static/js/mapguesser.js

@@ -35,7 +35,7 @@
                 Core.loadPositionInfo(Core.realPosition);
 
                 document.getElementById('currentRound').innerHTML = String(Core.rounds.length) + '/' + String(Core.NUMBER_OF_ROUNDS);
-                document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String((Core.rounds.length-1) * Core.MAX_SCORE);
+                document.getElementById('currentScoreSum').innerHTML = String(Core.scoreSum) + '/' + String((Core.rounds.length - 1) * Core.MAX_SCORE);
             } else {
                 Core.startNewRound();
 
@@ -195,7 +195,7 @@
                 visible: !hidden,
                 position: realPosition,
                 title: 'Open in Google Maps',
-                zIndex: 2,
+                zIndex: Core.rounds.length * 2,
                 clickable: true,
                 draggable: false
             });
@@ -208,7 +208,7 @@
                 map: Core.map,
                 visible: !hidden,
                 position: guessPosition,
-                zIndex: 1,
+                zIndex: Core.rounds.length,
                 clickable: false,
                 draggable: false,
                 label: {
@@ -286,7 +286,7 @@
                     fontFamily: 'Roboto',
                     fontSize: '16px',
                     fontWeight: '500',
-                    text: String(i+1)
+                    text: String(i + 1)
                 });
                 round.realMarker.setVisible(true);
                 round.guessMarker.setVisible(true);
@@ -470,4 +470,9 @@
     document.getElementById('startNewGameButton').onclick = function () {
         Core.startNewGame();
     }
+
+    window.onbeforeunload = function (e) {
+        e.preventDefault();
+        e.returnValue = '';
+    };
 })();

scripts/install.sh

@@ -5,7 +5,7 @@ ROOT_DIR=$(dirname $(readlink -f "$0"))/..
 . ${ROOT_DIR}/.env
 
 if [ -f ${ROOT_DIR}/installed ]; then
-    echo "Mapguesser is already installed! To force reinstall, delete file 'installed' from the root directory!"
+    echo "MapGuesser is already installed! To force reinstall, delete file 'installed' from the root directory!"
     exit 1
 fi
 
@@ -14,10 +14,9 @@ echo "Installing MapGuesser DB..."
 mysql --host=${DB_HOST} --user=${DB_USER} --password=${DB_PASSWORD} ${DB_NAME} < ${ROOT_DIR}/db/mapguesser.sql
 
 if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
-    echo "Uglifying JS and CSS files..."
+    echo "Minifying JS, CSS and SVG files..."
 
-    uglifyjs ${ROOT_DIR}/public/static/js/mapguesser.js -c -m -o ${ROOT_DIR}/public/static/js/mapguesser.js
+    ${ROOT_DIR}/scripts/minify.sh
-    cleancss ${ROOT_DIR}/public/static/css/mapguesser.css -o ${ROOT_DIR}/public/static/css/mapguesser.css
 fi
 
 touch ${ROOT_DIR}/installed

scripts/minify.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+ROOT_DIR=$(dirname $(readlink -f "$0"))/..
+
+. ${ROOT_DIR}/.env
+
+uglifyjs ${ROOT_DIR}/public/static/js/mapguesser.js -c -m -o ${ROOT_DIR}/public/static/js/mapguesser.js
+cleancss ${ROOT_DIR}/public/static/css/mapguesser.css -o ${ROOT_DIR}/public/static/css/mapguesser.css
+html-minifier ${ROOT_DIR}/public/static/img/loading.svg --collapse-whitespace --remove-comments -o ${ROOT_DIR}/public/static/img/loading.svg

scripts/update.sh

@@ -5,8 +5,7 @@ ROOT_DIR=$(dirname $(readlink -f "$0"))/..
 . ${ROOT_DIR}/.env
 
 if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
-    echo "Uglifying JS and CSS files..."
+    echo "Minifying JS, CSS and SVG files..."
 
-    uglifyjs ${ROOT_DIR}/public/static/js/mapguesser.js -c -m -o ${ROOT_DIR}/public/static/js/mapguesser.js
+    ${ROOT_DIR}/scripts/minify.sh
-    cleancss ${ROOT_DIR}/public/static/css/mapguesser.css -o ${ROOT_DIR}/public/static/css/mapguesser.css
 fi

views/game.php

@@ -9,7 +9,7 @@
 </head>
 <body>
     <div id="loading">
-        <img src="static/img/loading.gif">
+        <img src="static/img/loading.svg">
     </div>
     <div id="roundInfo">
         <p>Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>