Merged in feature/MAPG-101-db-migrations (pull request #83)

Feature/MAPG-101 db migrations

.env.example

@@ -5,3 +5,4 @@ DB_PASSWORD=mapguesser
 DB_NAME=mapguesser
 GOOGLE_MAPS_SERVER_API_KEY=your_google_maps_server_api_key
 GOOGLE_MAPS_JS_API_KEY=your_google_maps_js_api_key
+LEAFLET_TILESERVER_URL=a_leaflet_compatible_tileserver_url

composer.json

@@ -4,7 +4,8 @@
   "description": "MapGuesser Application",
   "license": "GNU GPL 3.0",
   "require": {
-    "vlucas/phpdotenv": "^4.1"
+    "vlucas/phpdotenv": "^4.1",
+    "symfony/console": "^5.1"
   },
   "require-dev": {},
   "autoload": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "29431cf83ee884f01ee954b1068c0ccc",
+    "content-hash": "13a0eaff2786786caff2be86ac704fc7",
     "packages": [
         {
             "name": "phpoption/phpoption",
@@ -61,6 +61,148 @@
             ],
             "time": "2020-03-21T18:07:53+00:00"
         },
+        {
+            "name": "psr/container",
+            "version": "1.0.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/container.git",
+                "reference": "b7ce3b176482dbbc1245ebf52b181af44c2cf55f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/container/zipball/b7ce3b176482dbbc1245ebf52b181af44c2cf55f",
+                "reference": "b7ce3b176482dbbc1245ebf52b181af44c2cf55f",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Container\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common Container Interface (PHP FIG PSR-11)",
+            "homepage": "https://github.com/php-fig/container",
+            "keywords": [
+                "PSR-11",
+                "container",
+                "container-interface",
+                "container-interop",
+                "psr"
+            ],
+            "time": "2017-02-14T16:28:37+00:00"
+        },
+        {
+            "name": "symfony/console",
+            "version": "v5.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/console.git",
+                "reference": "00bed125812716d09b163f0727ef33bb49bf3448"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/console/zipball/00bed125812716d09b163f0727ef33bb49bf3448",
+                "reference": "00bed125812716d09b163f0727ef33bb49bf3448",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "symfony/polyfill-mbstring": "~1.0",
+                "symfony/polyfill-php73": "^1.8",
+                "symfony/polyfill-php80": "^1.15",
+                "symfony/service-contracts": "^1.1|^2",
+                "symfony/string": "^5.1"
+            },
+            "conflict": {
+                "symfony/dependency-injection": "<4.4",
+                "symfony/dotenv": "<5.1",
+                "symfony/event-dispatcher": "<4.4",
+                "symfony/lock": "<4.4",
+                "symfony/process": "<4.4"
+            },
+            "provide": {
+                "psr/log-implementation": "1.0"
+            },
+            "require-dev": {
+                "psr/log": "~1.0",
+                "symfony/config": "^4.4|^5.0",
+                "symfony/dependency-injection": "^4.4|^5.0",
+                "symfony/event-dispatcher": "^4.4|^5.0",
+                "symfony/lock": "^4.4|^5.0",
+                "symfony/process": "^4.4|^5.0",
+                "symfony/var-dumper": "^4.4|^5.0"
+            },
+            "suggest": {
+                "psr/log": "For using the console logger",
+                "symfony/event-dispatcher": "",
+                "symfony/lock": "",
+                "symfony/process": ""
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "5.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Console\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony Console Component",
+            "homepage": "https://symfony.com",
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-30T20:35:19+00:00"
+        },
         {
             "name": "symfony/polyfill-ctype",
             "version": "v1.17.0",
@@ -133,6 +275,535 @@
             ],
             "time": "2020-05-12T16:14:59+00:00"
         },
+        {
+            "name": "symfony/polyfill-intl-grapheme",
+            "version": "v1.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-grapheme.git",
+                "reference": "e094b0770f7833fdf257e6ba4775be4e258230b2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-grapheme/zipball/e094b0770f7833fdf257e6ba4775be4e258230b2",
+                "reference": "e094b0770f7833fdf257e6ba4775be4e258230b2",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.3"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.17-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Grapheme\\": ""
+                },
+                "files": [
+                    "bootstrap.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's grapheme_* functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "grapheme",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-12T16:47:27+00:00"
+        },
+        {
+            "name": "symfony/polyfill-intl-normalizer",
+            "version": "v1.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-normalizer.git",
+                "reference": "1357b1d168eb7f68ad6a134838e46b0b159444a9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-normalizer/zipball/1357b1d168eb7f68ad6a134838e46b0b159444a9",
+                "reference": "1357b1d168eb7f68ad6a134838e46b0b159444a9",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.3"
+            },
+            "suggest": {
+                "ext-intl": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.17-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Normalizer\\": ""
+                },
+                "files": [
+                    "bootstrap.php"
+                ],
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for intl's Normalizer class and related functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "intl",
+                "normalizer",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-12T16:14:59+00:00"
+        },
+        {
+            "name": "symfony/polyfill-mbstring",
+            "version": "v1.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-mbstring.git",
+                "reference": "fa79b11539418b02fc5e1897267673ba2c19419c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/fa79b11539418b02fc5e1897267673ba2c19419c",
+                "reference": "fa79b11539418b02fc5e1897267673ba2c19419c",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.3"
+            },
+            "suggest": {
+                "ext-mbstring": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.17-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Polyfill\\Mbstring\\": ""
+                },
+                "files": [
+                    "bootstrap.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for the Mbstring extension",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "mbstring",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-12T16:47:27+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php73",
+            "version": "v1.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php73.git",
+                "reference": "a760d8964ff79ab9bf057613a5808284ec852ccc"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-php73/zipball/a760d8964ff79ab9bf057613a5808284ec852ccc",
+                "reference": "a760d8964ff79ab9bf057613a5808284ec852ccc",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.17-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php73\\": ""
+                },
+                "files": [
+                    "bootstrap.php"
+                ],
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 7.3+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-12T16:47:27+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php80",
+            "version": "v1.17.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php80.git",
+                "reference": "5e30b2799bc1ad68f7feb62b60a73743589438dd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-php80/zipball/5e30b2799bc1ad68f7feb62b60a73743589438dd",
+                "reference": "5e30b2799bc1ad68f7feb62b60a73743589438dd",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.0.8"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.17-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php80\\": ""
+                },
+                "files": [
+                    "bootstrap.php"
+                ],
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ion Bazan",
+                    "email": "ion.bazan@gmail.com"
+                },
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-12T16:47:27+00:00"
+        },
+        {
+            "name": "symfony/service-contracts",
+            "version": "v2.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/service-contracts.git",
+                "reference": "66a8f0957a3ca54e4f724e49028ab19d75a8918b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/66a8f0957a3ca54e4f724e49028ab19d75a8918b",
+                "reference": "66a8f0957a3ca54e4f724e49028ab19d75a8918b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "psr/container": "^1.0"
+            },
+            "suggest": {
+                "symfony/service-implementation": ""
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\Service\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to writing services",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-20T17:43:50+00:00"
+        },
+        {
+            "name": "symfony/string",
+            "version": "v5.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/string.git",
+                "reference": "90c2a5103f07feb19069379f3abdcdbacc7753a9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/string/zipball/90c2a5103f07feb19069379f3abdcdbacc7753a9",
+                "reference": "90c2a5103f07feb19069379f3abdcdbacc7753a9",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "symfony/polyfill-ctype": "~1.8",
+                "symfony/polyfill-intl-grapheme": "~1.0",
+                "symfony/polyfill-intl-normalizer": "~1.0",
+                "symfony/polyfill-mbstring": "~1.0",
+                "symfony/polyfill-php80": "~1.15"
+            },
+            "require-dev": {
+                "symfony/error-handler": "^4.4|^5.0",
+                "symfony/http-client": "^4.4|^5.0",
+                "symfony/translation-contracts": "^1.1|^2",
+                "symfony/var-exporter": "^4.4|^5.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "5.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\String\\": ""
+                },
+                "files": [
+                    "Resources/functions.php"
+                ],
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony String component",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "grapheme",
+                "i18n",
+                "string",
+                "unicode",
+                "utf-8",
+                "utf8"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2020-05-20T17:43:50+00:00"
+        },
         {
             "name": "vlucas/phpdotenv",
             "version": "v4.1.5",

database/migrations/data/20200602_2306_migrations.php

@@ -0,0 +1 @@
+<?php //empty on purpose

database/migrations/structure/20200602_2306_migrations.sql

@@ -0,0 +1,6 @@
+CREATE TABLE `migrations` (
+  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
+  `migration` varchar(255) NOT NULL,
+  `type` enum('structure', 'data') NOT NULL,
+  PRIMARY KEY (`id`)
+) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4;

database/migrations/structure/20200602_2331_geo_digits.sql

@@ -0,0 +1,17 @@
+ALTER TABLE
+  `maps`
+MODIFY
+  `bound_south_lat` decimal(9, 7) NOT NULL,
+MODIFY
+  `bound_west_lng` decimal(10, 7) NOT NULL,
+MODIFY
+  `bound_north_lat` decimal(9, 7) NOT NULL,
+MODIFY
+  `bound_east_lng` decimal(10, 7) NOT NULL;
+
+ALTER TABLE
+  `places`
+MODIFY
+  `lat` decimal(9, 7) NOT NULL,
+MODIFY
+  `lng` decimal(10, 7) NOT NULL;

mapg

@@ -0,0 +1,10 @@
+#!/usr/bin/env php
+<?php
+
+require 'main.php';
+
+$app = new Symfony\Component\Console\Application('MapGuesser Console', '');
+
+$app->add(new MapGuesser\Cli\DatabaseMigration());
+
+$app->run();

public/index.php

@@ -3,7 +3,7 @@
 require '../main.php';
 
 // very basic routing
-$host = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['SERVER_NAME'];
+$host = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'];
 $method = strtolower($_SERVER['REQUEST_METHOD']);
 $url = substr($_SERVER['REQUEST_URI'], strlen('/'));
 if (($pos = strpos($url, '?')) !== false) {
@@ -19,6 +19,11 @@ Container::$routeCollection->group('game', function (MapGuesser\Routing\RouteCol
     $routeCollection->get('position-json', '{mapId}/position.json', [MapGuesser\Controller\PositionController::class, 'getPosition']);
     $routeCollection->post('guess-json', '{mapId}/guess.json', [MapGuesser\Controller\PositionController::class, 'evaluateGuess']);
 });
+Container::$routeCollection->group('admin', function (MapGuesser\Routing\RouteCollection $routeCollection) {
+    $routeCollection->get('admin.maps', 'maps', [MapGuesser\Controller\MapAdminController::class, 'getMaps']);
+    $routeCollection->get('admin.mapEditor', 'mapEditor/{mapId}', [MapGuesser\Controller\MapAdminController::class, 'getMapEditor']);
+    $routeCollection->get('admin.place', 'place.json/{placeId}', [MapGuesser\Controller\MapAdminController::class, 'getPlace']);
+});
 
 $match = Container::$routeCollection->match($method, explode('/', $url));
 

public/static/.gitignore

@@ -0,0 +1 @@
+node_modules

public/static/css/game.css

@@ -0,0 +1,190 @@
+#roundInfo {
+    line-height: inherit;
+    text-align: right;
+}
+
+#roundInfo p {
+    font-size: 16px;
+    line-height: inherit;
+}
+
+#panorama {
+    width: 100%;
+    height: calc(100% - 40px);
+    z-index: 1;
+}
+
+#cover {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #000000;
+    opacity: 0.5;
+    z-index: 3;
+}
+
+#guess {
+    position: absolute;
+    bottom: 30px;
+    right: 20px;
+    z-index: 2;
+}
+
+#guess.result {
+    z-index: 4;
+}
+
+#guess>#continueButtonContainer {
+    display: none;
+}
+
+#guess.result>#closeGuessButtonContainer, #guess.result>#guessButtonContainer {
+    display: none;
+}
+
+#guess.result>#continueButtonContainer {
+    display: block;
+}
+
+#map {
+    width: 100%;
+    border-radius: 3px;
+}
+
+#guess.result>#map {
+    height: calc(100% - 170px);
+}
+
+#resultInfo {
+    margin-top: 5px;
+    width: 100%;
+    height: 120px;
+    padding: 5px 20px;
+    text-align: center;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    border-radius: 3px;
+    display: none;
+}
+
+#guess.result>#resultInfo {
+    display: block;
+}
+
+#resultInfo>div {
+    width: 100%;
+    height: 33.33%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#resultInfo p {
+    font-size: 24px;
+    line-height: 1;
+}
+
+#distanceInfo>p:nth-child(2), #scoreInfo>p:nth-child(2) {
+    display: none;
+}
+
+#scoreBarBase {
+    height: 24px;
+    margin: 0 auto;
+    background-color: #eeeeee;
+    border-radius: 3px;
+}
+
+#scoreBar {
+    width: 0;
+    height: 100%;
+    border-radius: 3px;
+    transition-property: width;
+    transition-duration: 2.0s;
+}
+
+#showSummaryButton, #startNewGameButton {
+    display: none;
+}
+
+@media screen and (max-width: 599px) {
+    #showGuessButtonContainer {
+        position: absolute;
+        left: 20px;
+        bottom: 30px;
+        right: 20px;
+        z-index: 2;
+    }
+    #guess {
+        top: 50px;
+        left: 20px;
+        opacity: 0.95;
+        visibility: hidden;
+    }
+    #map {
+        height: calc(100% - 90px);
+    }
+    #scoreBarBase {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    #showGuessButtonContainer {
+        display: none;
+    }
+    #guess {
+        width: 500px;
+        height: 375px;
+        opacity: 0.95;
+    }
+    #guess.adapt {
+        top: initial;
+        width: 250px;
+        height: 200px;
+        opacity: 0.5;
+        transition-property: width, height, opacity;
+        transition-duration: 0.1s;
+        transition-delay: 0.8s;
+    }
+    #guess.adapt:hover {
+        width: 500px;
+        height: 375px;
+        opacity: 0.95;
+        transition-delay: 0s;
+    }
+    #closeGuessButtonContainer {
+        display: none;
+    }
+    #map {
+        height: calc(100% - 45px);
+    }
+    #guess.result {
+        width: initial;
+        height: initial;
+        top: 50px;
+        left: 50px;
+        right: 50px;
+        bottom: 50px;
+    }
+    #scoreBarBase {
+        width: 60%;
+    }
+    @media screen and (max-height: 424px) {
+        #guess {
+            top: 50px;
+            height: initial;
+        }
+        #guess.adapt:hover {
+            top: 50px;
+            height: initial;
+        }
+        #guess.result {
+            left: 20px;
+            right: 20px;
+            bottom: 30px;
+        }
+    }
+}

public/static/css/map_editor.css

@@ -0,0 +1,76 @@
+#map {
+    width: 100%;
+    height: calc(100% - 50px);
+    z-index: 1;
+}
+
+#panorama {
+    position: absolute;
+    z-index: 1;
+    visibility: hidden;
+}
+
+#noPano {
+    display: flex;
+    position: absolute;
+    z-index: 2;
+    visibility: hidden;
+    background: #cccccc;
+}
+
+#noPano>p {
+    margin: auto;
+}
+
+#control {
+    position: absolute;
+    width: 125px;
+    z-index: 3;
+}
+
+#placeControl {
+    position: absolute;
+    z-index: 3;
+    width: 100px;
+    visibility: hidden;
+}
+
+@media screen and (max-width: 999px) and (min-height: 600px) {
+    #map.selected {
+        height: calc(50% - 25px);
+    }
+    #panorama, #noPano {
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: calc(50% - 25px);
+    }
+    #control {
+        right: 10px;
+        top: 60px;
+    }
+    #placeControl {
+        right: 10px;
+        top: calc(50% + 35px);
+    }
+}
+
+@media screen and (min-width: 1000px), (max-height: 599px) {
+    #map.selected {
+        width: 50%;
+    }
+    #panorama, #noPano {
+        top: 50px;
+        bottom: 0;
+        right: 0;
+        width: 50%;
+    }
+    #control, #placeControl {
+        right: 10px;
+        top: 60px;
+    }
+    #control.selected {
+        right: calc(50% + 10px);
+        top: 60px;
+    }
+}

public/static/css/mapguesser.css

@@ -93,7 +93,10 @@ sub {
     margin-bottom: 10px;
 }
 
-svg.inline {
+svg.inline, img.inline {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
     vertical-align: -0.15em;
 }
 
@@ -147,6 +150,14 @@ button.gray:hover, button.gray:focus, a.button.gray:hover, a.button.gray:focus {
     background-color: #555555;
 }
 
+button.red, a.button.red {
+    background-color: #aa5e5e;
+}
+
+button.red:hover, button.red:focus, a.button.red:hover, a.button.red:focus {
+    background-color: #7f2929;
+}
+
 div.header {
     background-color: #333333;
     height: 50px;
@@ -177,51 +188,6 @@ div.buttonContainer>button {
     margin: 0 auto;
 }
 
-div.mapContainer {
-    display: grid;
-}
-
-div.mapItem {
-    width: 350px;
-    background-color: #eeeeee;
-    border-radius: 3px;
-    margin: 10px auto;
-}
-
-div.mapItem>div.title {
-    background-color: #28a745;
-    color: white;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-    padding: 4px 8px;
-}
-
-div.mapItem>div.title>p.title {
-    font-weight: 500;
-    font-size: 18px;
-}
-
-div.mapItem>img {
-    width: 100%;
-}
-
-div.mapItem>div.inner {
-    padding: 8px;
-}
-
-div.mapItem>div.inner>div.info {
-    display: grid;
-    grid-template-columns: auto auto;
-}
-
-div.mapItem>div.inner>div.info>p:nth-child(1) {
-    text-align: left;
-}
-
-div.mapItem>div.inner>div.info>p:nth-child(2) {
-    text-align: right;
-}
-
 #loading {
     position: absolute;
     width: 64px;
@@ -234,147 +200,6 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     visibility: hidden;
 }
 
-#roundInfo {
-    line-height: inherit;
-    text-align: right;
-}
-
-#roundInfo p {
-    font-size: 16px;
-    line-height: inherit;
-}
-
-#panorama {
-    width: 100%;
-    height: calc(100% - 40px);
-    z-index: 1;
-}
-
-#cover {
-    position: absolute;
-    top: 40px;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background-color: #000000;
-    opacity: 0.5;
-    z-index: 3;
-}
-
-#guess {
-    position: absolute;
-    bottom: 30px;
-    right: 20px;
-    z-index: 2;
-}
-
-#guess.result {
-    z-index: 4;
-}
-
-#guess>#continueButtonContainer {
-    display: none;
-}
-
-#guess.result>#closeGuessButtonContainer, #guess.result>#guessButtonContainer {
-    display: none;
-}
-
-#guess.result>#continueButtonContainer {
-    display: block;
-}
-
-#map {
-    width: 100%;
-    border-radius: 3px;
-}
-
-#guess.result>#map {
-    height: calc(100% - 170px);
-}
-
-#resultInfo {
-    margin-top: 5px;
-    width: 100%;
-    height: 120px;
-    padding: 5px 20px;
-    text-align: center;
-    box-sizing: border-box;
-    background-color: #ffffff;
-    border-radius: 3px;
-    display: none;
-}
-
-#guess.result>#resultInfo {
-    display: block;
-}
-
-#resultInfo>div {
-    width: 100%;
-    height: 33.33%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-#resultInfo p {
-    font-size: 24px;
-    line-height: 1;
-}
-
-#distanceInfo>p:nth-child(2), #scoreInfo>p:nth-child(2) {
-    display: none;
-}
-
-#scoreBarBase {
-    height: 24px;
-    margin: 0 auto;
-    background-color: #eeeeee;
-    border-radius: 3px;
-}
-
-#scoreBar {
-    width: 0;
-    height: 100%;
-    border-radius: 3px;
-    transition-property: width;
-    transition-duration: 2.0s;
-}
-
-#showSummaryButton, #startNewGameButton {
-    display: none;
-}
-
-@media screen and (min-width: 1504px) {
-    div.mapContainer {
-        grid-template-columns: auto auto auto auto;
-    }
-}
-
-@media screen and (min-width: 1134px) and (max-width: 1503px) {
-    div.mapContainer {
-        grid-template-columns: auto auto auto;
-    }
-}
-
-@media screen and (min-width: 764px) and (max-width: 1133px) {
-    div.mapContainer {
-        grid-template-columns: auto auto;
-    }
-}
-
-@media screen and (max-width: 763px) {
-    div.mapContainer {
-        grid-template-columns: auto;
-    }
-}
-
-@media screen and (max-width: 374px) {
-    div.mapItem {
-        width: initial;
-    }
-}
-
 @media screen and (max-width: 599px) {
     div.header.small h1 span {
         display: none;
@@ -383,81 +208,4 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
         padding: 0;
         width: 100%;
     }
-    #showGuessButtonContainer {
-        position: absolute;
-        left: 20px;
-        bottom: 30px;
-        right: 20px;
-        z-index: 2;
-    }
-    #guess {
-        top: 50px;
-        left: 20px;
-        opacity: 0.95;
-        visibility: hidden;
-    }
-    #map {
-        height: calc(100% - 90px);
-    }
-    #scoreBarBase {
-        width: 100%;
-    }
-}
-
-@media screen and (min-width: 600px) {
-    #showGuessButtonContainer {
-        display: none;
-    }
-    #guess {
-        width: 500px;
-        height: 375px;
-        opacity: 0.95;
-    }
-    #guess.adapt {
-        top: initial;
-        width: 250px;
-        height: 200px;
-        opacity: 0.5;
-        transition-property: width, height, opacity;
-        transition-duration: 0.1s;
-        transition-delay: 0.8s;
-    }
-    #guess.adapt:hover {
-        width: 500px;
-        height: 375px;
-        opacity: 0.95;
-        transition-delay: 0s;
-    }
-    #closeGuessButtonContainer {
-        display: none;
-    }
-    #map {
-        height: calc(100% - 45px);
-    }
-    #guess.result {
-        width: initial;
-        height: initial;
-        top: 50px;
-        left: 50px;
-        right: 50px;
-        bottom: 50px;
-    }
-    #scoreBarBase {
-        width: 60%;
-    }
-    @media screen and (max-height: 424px) {
-        #guess {
-            top: 50px;
-            height: initial;
-        }
-        #guess.adapt:hover {
-            top: 50px;
-            height: initial;
-        }
-        #guess.result {
-            left: 20px;
-            right: 20px;
-            bottom: 30px;
-        }
-    }
 }

public/static/css/maps.css

@@ -0,0 +1,74 @@
+#mapContainer {
+    display: grid;
+}
+
+div.mapItem {
+    width: 350px;
+    background-color: #eeeeee;
+    border-radius: 3px;
+    margin: 10px auto;
+}
+
+div.mapItem>div.title {
+    background-color: #28a745;
+    color: white;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    padding: 4px 8px;
+}
+
+div.mapItem>div.title>p.title {
+    font-weight: 500;
+    font-size: 18px;
+}
+
+div.mapItem>img {
+    width: 100%;
+}
+
+div.mapItem>div.inner {
+    padding: 8px;
+}
+
+div.mapItem>div.inner>div.info {
+    display: grid;
+    grid-template-columns: auto auto;
+}
+
+div.mapItem>div.inner>div.info>p:nth-child(1) {
+    text-align: left;
+}
+
+div.mapItem>div.inner>div.info>p:nth-child(2) {
+    text-align: right;
+}
+
+@media screen and (min-width: 1504px) {
+    #mapContainer {
+        grid-template-columns: auto auto auto auto;
+    }
+}
+
+@media screen and (min-width: 1134px) and (max-width: 1503px) {
+    #mapContainer {
+        grid-template-columns: auto auto auto;
+    }
+}
+
+@media screen and (min-width: 764px) and (max-width: 1133px) {
+    #mapContainer {
+        grid-template-columns: auto auto;
+    }
+}
+
+@media screen and (max-width: 763px) {
+    #mapContainer {
+        grid-template-columns: auto;
+    }
+}
+
+@media screen and (max-width: 374px) {
+    div.mapItem {
+        width: initial;
+    }
+}

public/static/img/favicon/SOURCE

@@ -0,0 +1,2 @@
+The PNGs in this folder are generated from '../icon.svg'.
+Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'.

public/static/img/icon.svg

@@ -1,4 +1,3 @@
-<!-- The PNGs in this folder are generated from this SVG. -->
 <!-- Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
 <svg viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />

public/static/img/markers/marker-blue.svg

@@ -0,0 +1,16 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#3183ce"
+        fill-rule="evenodd"
+        stroke="#19456d"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+    <circle
+        fill="#19456d"
+        fill-rule="evenodd"
+        cx="6"
+        cy="6"
+        r="3" />
+</svg>

public/static/img/markers/marker-gray-empty.svg

@@ -0,0 +1,10 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#828282"
+        fill-rule="evenodd"
+        stroke="#383838"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+</svg>

public/static/img/markers/marker-gray.svg

@@ -0,0 +1,16 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#828282"
+        fill-rule="evenodd"
+        stroke="#383838"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+    <circle
+        fill="#383838"
+        fill-rule="evenodd"
+        cx="6"
+        cy="6"
+        r="3" />
+</svg>

public/static/img/markers/marker-green-empty.svg

@@ -0,0 +1,10 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#28a745"
+        fill-rule="evenodd"
+        stroke="#285624"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+</svg>

public/static/img/markers/marker-green.svg

@@ -0,0 +1,16 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#28a745"
+        fill-rule="evenodd"
+        stroke="#285624"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+    <circle
+        fill="#285624"
+        fill-rule="evenodd"
+        cx="6"
+        cy="6"
+        r="3" />
+</svg>

public/static/img/markers/marker-red.svg

@@ -0,0 +1,16 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        fill="#d24d4d"
+        fill-rule="evenodd"
+        stroke="#752929"
+        stroke-width="0.3"
+        stroke-linecap="round"
+        d="m 5.9999998,15.849652 c 0,0 5.8511182,-5.579947 5.8511182,-9.8134832 a 5.8511179,5.8880898 0 0 0 -11.7022358,0 c 0,4.2335362 5.8511176,9.8134832 5.8511176,9.8134832" />
+    <circle
+        fill="#752929"
+        fill-rule="evenodd"
+        cx="6"
+        cy="6"
+        r="3" />
+</svg>

public/static/js/game.js

@@ -222,7 +222,13 @@
                 title: 'Open in Google Maps',
                 zIndex: Core.rounds.length * 2,
                 clickable: true,
-                draggable: false
+                draggable: false,
+                icon: {
+                    url: '/static/img/markers/marker-green.svg',
+                    size: new google.maps.Size(24, 32),
+                    scaledSize: new google.maps.Size(24, 32),
+                    anchor: new google.maps.Point(12, 32)
+                },
             });
 
             round.realMarker.addListener('click', function () {
@@ -236,10 +242,17 @@
                 zIndex: Core.rounds.length,
                 clickable: false,
                 draggable: false,
+                icon: {
+                    url: '/static/img/markers/marker-gray-empty.svg',
+                    size: new google.maps.Size(24, 32),
+                    scaledSize: new google.maps.Size(24, 32),
+                    anchor: new google.maps.Point(12, 32),
+                    labelOrigin: new google.maps.Point(12, 14)
+                },
                 label: {
                     color: '#ffffff',
                     fontFamily: 'Roboto',
-                    fontSize: '18px',
+                    fontSize: '16px',
                     fontWeight: '500',
                     text: '?'
                 }
@@ -300,8 +313,15 @@
             for (var i = 0; i < Core.rounds.length; ++i) {
                 var round = Core.rounds[i];
 
+                round.realMarker.setIcon({
+                    url: '/static/img/markers/marker-green-empty.svg',
+                    size: new google.maps.Size(24, 32),
+                    scaledSize: new google.maps.Size(24, 32),
+                    anchor: new google.maps.Point(12, 32),
+                    labelOrigin: new google.maps.Point(12, 14)
+                });
                 round.realMarker.setLabel({
-                    color: '#812519',
+                    color: '#285624',
                     fontFamily: 'Roboto',
                     fontSize: '16px',
                     fontWeight: '500',
@@ -385,10 +405,17 @@
             position: e.latLng,
             clickable: false,
             draggable: true,
+            icon: {
+                url: '/static/img/markers/marker-gray-empty.svg',
+                size: new google.maps.Size(24, 32),
+                scaledSize: new google.maps.Size(24, 32),
+                anchor: new google.maps.Point(12, 32),
+                labelOrigin: new google.maps.Point(12, 14)
+            },
             label: {
                 color: '#ffffff',
                 fontFamily: 'Roboto',
-                fontSize: '18px',
+                fontSize: '16px',
                 fontWeight: '500',
                 text: '?'
             }

public/static/js/map_editor.js

@@ -0,0 +1,145 @@
+(function () {
+    var MapEditor = {
+        map: null,
+        panorama: null,
+        selectedMarker: null,
+
+        getPlace: function (placeId) {
+            var xhr = new XMLHttpRequest();
+            xhr.responseType = 'json';
+            xhr.onload = function () {
+                document.getElementById('loading').style.visibility = 'hidden';
+
+                if (!this.response.panoId) {
+                    document.getElementById('noPano').style.visibility = 'visible';
+                    return;
+                }
+
+                MapEditor.loadPano(this.response.panoId);
+            };
+
+            xhr.open('GET', '/admin/place.json/' + placeId, true);
+            xhr.send();
+        },
+
+        loadPano: function (panoId) {
+            MapEditor.panorama.setVisible(true);
+            MapEditor.panorama.setPov({ heading: 0, pitch: 0 });
+            MapEditor.panorama.setZoom(0);
+            MapEditor.panorama.setPano(panoId);
+        },
+
+        select: function (marker) {
+            document.getElementById('loading').style.visibility = 'visible';
+
+            document.getElementById('map').classList.add('selected');
+            document.getElementById('control').classList.add('selected');
+            document.getElementById('noPano').style.visibility = 'hidden';
+            document.getElementById('panorama').style.visibility = 'visible';
+            document.getElementById('placeControl').style.visibility = 'visible';
+
+            MapEditor.resetSelected();
+            MapEditor.selectedMarker = marker;
+
+            marker.setIcon(L.icon({
+                iconUrl: '/static/img/markers/marker-blue.svg',
+                iconSize: [24, 32],
+                iconAnchor: [12, 32]
+            }));
+            marker.setZIndexOffset(2000);
+
+            MapEditor.map.invalidateSize(true);
+            MapEditor.map.panTo(marker.getLatLng());
+
+            MapEditor.panorama.setVisible(false);
+
+            MapEditor.getPlace(marker.placeId);
+        },
+
+        resetSelected: function () {
+            if (!MapEditor.selectedMarker) {
+                return;
+            }
+
+            MapEditor.selectedMarker.setIcon(L.icon({
+                iconUrl: '/static/img/markers/marker-green.svg',
+                iconSize: [24, 32],
+                iconAnchor: [12, 32]
+            }));
+            MapEditor.selectedMarker.setZIndexOffset(1000);
+        }
+    };
+
+    var Util = {
+        getHighResData: function () {
+            if (window.devicePixelRatio >= 4) {
+                return { ppi: 320, tileSize: 128, zoomOffset: 1 };
+            } else if (window.devicePixelRatio >= 2) {
+                return { ppi: 250, tileSize: 256, zoomOffset: 0 };
+            } else {
+                return { ppi: 72, tileSize: 512, zoomOffset: -1 };
+            }
+        }
+    };
+
+    MapEditor.map = L.map('map', {
+        attributionControl: false,
+        zoomControl: false
+    });
+
+    var highResData = Util.getHighResData();
+
+    L.tileLayer(tileUrl, {
+        subdomains: '1234',
+        ppi: highResData.ppi,
+        tileSize: highResData.tileSize,
+        zoomOffset: highResData.zoomOffset,
+        minZoom: 0,
+        maxZoom: 20
+    }).addTo(MapEditor.map);
+
+    MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
+
+    for (var i = 0; i < places.length; ++i) {
+        var marker = L.marker({ lat: places[i].lat, lng: places[i].lng }, {
+            icon: L.icon({
+                iconUrl: '/static/img/markers/marker-green.svg',
+                iconSize: [24, 32],
+                iconAnchor: [12, 32]
+            }),
+            zIndexOffset: 1000
+        })
+            .addTo(MapEditor.map)
+            .on('click', function () {
+                if (MapEditor.selectedMarker === this) {
+                    return;
+                }
+
+                MapEditor.select(this);
+            });
+
+        marker.placeId = places[i].id;
+    }
+
+    MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
+        // switch off fullscreenControl because positioning doesn't work
+        fullscreenControl: false,
+        fullscreenControlOptions: {
+            position: google.maps.ControlPosition.LEFT_TOP
+        },
+        motionTracking: false
+    });
+
+    document.getElementById('cancelButton').onclick = function () {
+        document.getElementById('map').classList.remove('selected');
+        document.getElementById('control').classList.remove('selected');
+        document.getElementById('noPano').style.visibility = 'hidden';
+        document.getElementById('panorama').style.visibility = 'hidden';
+        document.getElementById('placeControl').style.visibility = 'hidden';
+
+        MapEditor.resetSelected();
+        MapEditor.selectedMarker = null;
+
+        MapEditor.map.invalidateSize(true);
+    };
+})();

public/static/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "leaflet": "^1.6.0"
+  }
+}

public/static/yarn.lock

@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+leaflet@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"
+  integrity sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ==

scripts/install.sh

@@ -9,13 +9,17 @@ if [ -f ${ROOT_DIR}/installed ]; then
     exit 1
 fi
 
-echo "Installing MapGuesser DB..."
+echo "Installing Yarn packages..."
+(cd ${ROOT_DIR}/public/static && yarn install)
 
+echo "Installing MapGuesser DB..."
 mysql --host=${DB_HOST} --user=${DB_USER} --password=${DB_PASSWORD} ${DB_NAME} < ${ROOT_DIR}/db/mapguesser.sql
 
+echo "Migrating DB..."
+(cd ${ROOT_DIR} && ./mapg migrate)
+
 if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
     echo "Minifying JS, CSS and SVG files..."
-
     ${ROOT_DIR}/scripts/minify.sh
 fi
 

scripts/minify.sh

@@ -4,6 +4,8 @@ ROOT_DIR=$(dirname $(readlink -f "$0"))/..
 
 . ${ROOT_DIR}/.env
 
-uglifyjs ${ROOT_DIR}/public/static/js/game.js -c -m -o ${ROOT_DIR}/public/static/js/game.js
-cleancss ${ROOT_DIR}/public/static/css/mapguesser.css -o ${ROOT_DIR}/public/static/css/mapguesser.css
-svgo ${ROOT_DIR}/public/static/img/loading.svg -o ${ROOT_DIR}/public/static/img/loading.svg
+find ${ROOT_DIR}/public/static/js -type f -iname '*.js' -exec uglifyjs {} -c -m -o {} \;
+
+find ${ROOT_DIR}/public/static/css -type f -iname '*.css' -exec cleancss {} -o {} \;
+
+find ${ROOT_DIR}/public/static/img -type f -iname '*.svg' -exec svgo {} -o {} \;

scripts/update.sh

@@ -7,8 +7,13 @@ ROOT_DIR=$(dirname $(readlink -f "$0"))/..
 echo "Installing Composer packages..."
 (cd ${ROOT_DIR} && composer install)
 
+echo "Installing Yarn packages..."
+(cd ${ROOT_DIR}/public/static && yarn install)
+
+echo "Migrating DB..."
+(cd ${ROOT_DIR} && ./mapg migrate)
+
 if [ -z "${DEV}" ] || [ "${DEV}" -eq "0" ]; then
     echo "Minifying JS, CSS and SVG files..."
-
     ${ROOT_DIR}/scripts/minify.sh
 fi

src/Cli/DatabaseMigration.php

@@ -0,0 +1,118 @@
+<?php namespace MapGuesser\Cli;
+
+use MapGuesser\Database\Query\Modify;
+use MapGuesser\Database\Query\Select;
+use MapGuesser\Interfaces\Database\IResultSet;
+use Symfony\Component\Console\Command\Command;
+use Symfony\Component\Console\Input\InputInterface;
+use Symfony\Component\Console\Output\OutputInterface;
+
+class DatabaseMigration extends Command
+{
+    public function configure()
+    {
+        $this->setName('migrate')
+            ->setDescription('Migration of database changes.');
+    }
+
+    public function execute(InputInterface $input, OutputInterface $output): int
+    {
+        $db = \Container::$dbConnection;
+
+        $db->startTransaction();
+
+        $success = [];
+        try {
+            foreach ($this->readDir('structure') as $file) {
+                $db->multiQuery(file_get_contents($file));
+
+                $success[] = $this->saveToDB($file, 'structure');
+            }
+
+            foreach ($this->readDir('data') as $file) {
+                require $file;
+
+                $success[] = $this->saveToDB($file, 'data');
+            }
+        } catch (\Exception $e) {
+            $db->rollback();
+
+            $output->writeln('<error>Migration failed!</error>');
+            $output->writeln('');
+
+            $output->writeln((string) $e);
+            $output->writeln('');
+
+            return 1;
+        }
+
+        $db->commit();
+
+        $output->writeln('<info>Migration was successful!</info>');
+        $output->writeln('');
+
+        if (count($success) > 0) {
+            foreach ($success as $migration) {
+                $output->writeln($migration);
+            }
+
+            $output->writeln('');
+        }
+
+        return 0;
+    }
+
+    private function readDir(string $type): array
+    {
+        $done = [];
+
+        $migrationTableExists = \Container::$dbConnection->query('SELECT count(*)
+            FROM information_schema.tables
+            WHERE table_schema = \'' . $_ENV['DB_NAME'] . '\'
+            AND table_name = \'migrations\';')
+            ->fetch(IResultSet::FETCH_NUM)[0];
+
+        if ($migrationTableExists != 0) {
+            $select = new Select(\Container::$dbConnection, 'migrations');
+            $select->columns(['migration']);
+            $select->where('type', '=', $type);
+            $select->orderBy('migration');
+
+            $result = $select->execute();
+
+            while ($migration = $result->fetch(IResultSet::FETCH_ASSOC)) {
+                $done[] = $migration['migration'];
+            }
+        }
+
+        $path = ROOT . '/database/migrations/' . $type;
+        $dir = opendir($path);
+
+        $files = [];
+        while ($file = readdir($dir)) {
+            $filePath = $path . '/' . $file;
+
+            if (!is_file($filePath) || in_array(pathinfo($file, PATHINFO_FILENAME), $done)) {
+                continue;
+            }
+
+            $files[] = $filePath;
+        }
+
+        natsort($files);
+
+        return $files;
+    }
+
+    private function saveToDB(string $file, string $type): string
+    {
+        $baseName = pathinfo($file, PATHINFO_FILENAME);
+
+        $modify = new Modify(\Container::$dbConnection, 'migrations');
+        $modify->set('migration', $baseName);
+        $modify->set('type', $type);
+        $modify->save();
+
+        return $baseName . ' (' . $type . ')';
+    }
+}

src/Controller/MapAdminController.php

@@ -0,0 +1,85 @@
+<?php namespace MapGuesser\Controller;
+
+use MapGuesser\Database\Query\Select;
+use MapGuesser\Http\Request;
+use MapGuesser\Interfaces\Database\IResultSet;
+use MapGuesser\Interfaces\Response\IContent;
+use MapGuesser\Response\HtmlContent;
+use MapGuesser\Response\JsonContent;
+use MapGuesser\Util\Geo\Bounds;
+
+class MapAdminController
+{
+    public function getMaps(): IContent {
+        //TODO
+
+        return new HtmlContent('admin/maps');
+    }
+
+    public function getMapEditor(array $parameters): IContent {
+        $mapId = (int) $parameters['mapId'];
+
+        $bounds = $this->getMapBounds($mapId);
+
+        $places = $this->getPlaces($mapId);
+
+        $data = ['mapId' => $mapId, 'bounds' => $bounds->toArray(), 'places' => &$places];
+        return new HtmlContent('admin/map_editor', $data);
+    }
+
+    public function getPlace(array $parameters) {
+        $placeId = (int) $parameters['placeId'];
+
+        $select = new Select(\Container::$dbConnection, 'places');
+        $select->columns(['id', 'lat', 'lng']);
+        $select->whereId($placeId);
+
+        $place = $select->execute()->fetch(IResultSet::FETCH_ASSOC);
+
+        $request = new Request('https://maps.googleapis.com/maps/api/streetview/metadata', Request::HTTP_GET);
+        $request->setQuery([
+            'key' => $_ENV['GOOGLE_MAPS_SERVER_API_KEY'],
+            'location' => $place['lat'] . ',' . $place['lng'],
+            'source' => 'outdoor'
+        ]);
+
+        $response = $request->send();
+
+        $panoData = json_decode($response->getBody(), true);
+
+        if ($panoData['status'] !== 'OK') {
+            $panoId = null;
+        } else {
+            $panoId = $panoData['pano_id'];
+        }
+
+        $data = ['panoId' => $panoId];
+        return new JsonContent($data);
+    }
+
+    private function getMapBounds(int $mapId): Bounds
+    {
+        $select = new Select(\Container::$dbConnection, 'maps');
+        $select->columns(['bound_south_lat', 'bound_west_lng', 'bound_north_lat', 'bound_east_lng']);
+        $select->whereId($mapId);
+
+        $map = $select->execute()->fetch(IResultSet::FETCH_ASSOC);
+
+        $bounds = Bounds::createDirectly($map['bound_south_lat'], $map['bound_west_lng'], $map['bound_north_lat'], $map['bound_east_lng']);
+
+        return $bounds;
+    }
+
+    private function &getPlaces(int $mapId): array
+    {
+        $select = new Select(\Container::$dbConnection, 'places');
+        $select->columns(['id', 'lat', 'lng']);
+        $select->where('map_id', '=', $mapId);
+        $select->orderBy('lng');
+        //$select->limit(100);
+
+        $places = $select->execute()->fetchAll(IResultSet::FETCH_ASSOC);
+
+        return $places;
+    }
+}

src/Database/Query/Modify.php

@@ -16,7 +16,7 @@ class Modify
 
     private array $original = [];
 
-    private bool $autoIncrement = false;
+    private bool $autoIncrement = true;
 
     public function __construct(IConnection $connection, string $table)
     {

views/admin/map_editor.php

@@ -0,0 +1,27 @@
+<?php $cssFiles = ['/static/node_modules/leaflet/dist/leaflet.css', '/static/css/map_editor.css']; ?>
+<?php require ROOT . '/views/templates/main_header.php'; ?>
+<?php require ROOT . '/views/templates/header.php'; ?>
+<div id="map"></div>
+<div id="control">
+    <button id="saveButton" class="fullWidth">Save</button>
+    <a class="button gray fullWidth marginTop" href="/admin/maps" title="Back to maps">Back to maps</a>
+</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="cancelButton" class="gray fullWidth marginTop">Cancel</button>
+    <button id="deleteButton" class="red fullWidth marginTop">Delete</button>
+</div>
+<script>
+    var tileUrl = '<?= $_ENV['LEAFLET_TILESERVER_URL'] ?>';
+    var mapId = '<?= $mapId ?>';
+    var mapBounds = <?= json_encode($bounds) ?>;
+    var places = <?= json_encode($places) ?>;
+</script>
+<script src="/static/node_modules/leaflet/dist/leaflet.js"></script>
+<script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
+<script src="/static/js/map_editor.js"></script>
+<?php require ROOT . '/views/templates/main_footer.php'; ?>

views/admin/maps.php

@@ -0,0 +1,7 @@
+<?php require ROOT . '/views/templates/main_header.php'; ?>
+<?php require ROOT . '/views/templates/header.php'; ?>
+<div class="main">
+    <h2>Maps</h2>
+    <p>TODO</p>
+</div>
+<?php require ROOT . '/views/templates/main_footer.php'; ?>

views/game.php

@@ -1,9 +1,10 @@
+<?php $cssFiles = ['/static/css/game.css']; ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
     <div class="grid">
         <h1>
             <a href="/maps" title="Back to playable maps">
-                <?php require ROOT . '/views/templates/icon.php'; ?>
+                <img class="inline" src="/static/img/icon.svg">
                 <span>MapGuesser</span>
             </a>
         </h1>

views/maps.php

@@ -1,8 +1,9 @@
+<?php $cssFiles = ['/static/css/maps.css']; ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <?php require ROOT . '/views/templates/header.php'; ?>
 <div class="main">
     <h2>Playable maps</h2>
-    <div class="mapContainer">
+    <div id="mapContainer">
         <?php foreach ($maps as $map) : ?>
             <div class="mapItem">
                 <div class="title">

views/templates/header.php

@@ -1,7 +1,7 @@
 <div class="header">
     <h1>
         <a href="/" title="MapGuesser">
-            <?php require ROOT . '/views/templates/icon.php'; ?>
+            <img class="inline" src="/static/img/icon.svg">
             MapGuesser
         </a>
     </h1>

views/templates/icon.php

@@ -1,4 +0,0 @@
-<?php /* Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. */ ?>
-<svg class="inline" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M15.817.613A.5.5 0 0 1 16 1v13a.5.5 0 0 1-.402.49l-5 1a.502.502 0 0 1-.196 0L5.5 14.51l-4.902.98A.5.5 0 0 1 0 15V2a.5.5 0 0 1 .402-.49l5-1a.5.5 0 0 1 .196 0l4.902.98 4.902-.98a.5.5 0 0 1 .415.103zM10 2.41l-4-.8v11.98l4 .8V2.41zm1 11.98l4-.8V1.61l-4 .8v11.98zm-6-.8V1.61l-4 .8v11.98l4-.8z" />
-</svg>

views/templates/main_header.php

@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MapGuesser</title>
     <link href="/static/css/mapguesser.css" rel="stylesheet">
+    <?php if (isset($cssFiles)) : ?>
+        <?php foreach ($cssFiles as $cssFile) : ?>
+            <link href="<?= $cssFile ?>" rel="stylesheet">
+        <?php endforeach; ?>
+    <?php endif; ?>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&family=Roboto+Mono:wght@300;500&display=swap" rel="stylesheet">
     <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/192x192.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/96x96.png">