Merged in feature/MAPG-86-make-routing-better (pull request #73)

Feature/MAPG-86 make routing better

main.php

@@ -18,8 +18,10 @@ if (!empty($_ENV['DEV'])) {
 class Container
 {
     static MapGuesser\Interfaces\Database\IConnection $dbConnection;
+    static MapGuesser\Routing\RouteCollection $routeCollection;
 }
 
 Container::$dbConnection = new MapGuesser\Database\Mysql\Connection($_ENV['DB_HOST'], $_ENV['DB_USER'], $_ENV['DB_PASSWORD'], $_ENV['DB_NAME']);
+Container::$routeCollection = new MapGuesser\Routing\RouteCollection();
 
 session_start();

public/index.php

@@ -4,36 +4,36 @@ require '../main.php';
 
 // very basic routing
 $host = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['SERVER_NAME'];
-$url = $_SERVER['REQUEST_URI'];
+$method = strtolower($_SERVER['REQUEST_METHOD']);
+$url = substr($_SERVER['REQUEST_URI'], strlen('/'));
 if (($pos = strpos($url, '?')) !== false) {
     $url = substr($url, 0, $pos);
 }
-switch($url) {
+$url = rawurldecode($url);
-    case '/maps':
+
-        $controller = new MapGuesser\Controller\MapsController();
+Container::$routeCollection->get('index', '', [MapGuesser\Controller\HomeController::class, 'getIndex']);
-        break;
+Container::$routeCollection->get('maps', 'maps', [MapGuesser\Controller\MapsController::class, 'getMaps']);
-    case '/game':
+Container::$routeCollection->group('game', function (MapGuesser\Routing\RouteCollection $routeCollection) {
-        $mapId = isset($_GET['map']) ? (int) $_GET['map'] : 0;
+    $routeCollection->get('game', '{mapId}', [MapGuesser\Controller\GameController::class, 'getGame']);
-        $controller = new MapGuesser\Controller\GameController($mapId);
+    $routeCollection->get('game-json', '{mapId}/json', [MapGuesser\Controller\GameController::class, 'getGameJson']);
-        break;
+    $routeCollection->get('position-json', '{mapId}/position.json', [MapGuesser\Controller\PositionController::class, 'getPosition']);
-    case '/game.json':
+    $routeCollection->post('guess-json', '{mapId}/guess.json', [MapGuesser\Controller\PositionController::class, 'evaluateGuess']);
-        $mapId = isset($_GET['map']) ? (int) $_GET['map'] : 0;
+});
-        $controller = new MapGuesser\Controller\GameController($mapId, true);
+
-        break;
+$match = Container::$routeCollection->match($method, explode('/', $url));
-    case '/position.json':
+
-        $mapId = isset($_GET['map']) ? (int) $_GET['map'] : 0;
+if ($match !== null) {
-        $controller = new MapGuesser\Controller\PositionController($mapId);
+    list($route, $params) = $match;
-        break;
+
-    case '/':
+    $response = $route->callController($params);
-        header('Location: ' . $host  . '/maps', true, 302);
+
-        die;
+    if ($response instanceof MapGuesser\Interfaces\Response\IContent) {
-    default:
+        header('Content-Type: ' . $response->getContentType() . '; charset=UTF-8');
-        echo 'Error 404';
+        echo $response->render();
-        die;
+    } elseif ($response instanceof MapGuesser\Interfaces\Response\IRedirect) {
+        header('Location: ' . $host . '/' . $response->getUrl(), true, $response->getHttpCode());
+    }
+} else {
+    header('Content-Type: text/html; charset=UTF-8', true, 404);
+    require ROOT . '/views/error/404.php';
 }
-
-$view = $controller->run();
-
-header('Content-Type: ' . $view->getContentType() . '; charset=UTF-8');
-
-echo $view->render();

public/static/js/game.js

@@ -53,7 +53,7 @@
                 Core.startNewRound();
             };
 
-            xhr.open('GET', 'position.json?map=' + mapId, true);
+            xhr.open('GET', '/game/' + mapId + '/position.json', true);
             xhr.send();
         },
 
@@ -135,7 +135,7 @@
                 Core.resetGame();
             };
 
-            xhr.open('GET', 'game.json?map=' + mapId, true);
+            xhr.open('GET', '/game/' + mapId + '/position.json', true);
             xhr.send();
         },
 
@@ -160,7 +160,6 @@
             document.getElementById('cover').style.visibility = 'visible';
 
             var data = new FormData();
-            data.append('guess', '1');
             data.append('lat', String(guessPosition.lat));
             data.append('lng', String(guessPosition.lng));
 
@@ -209,7 +208,7 @@
                 Core.panoId = this.response.panoId;
             };
 
-            xhr.open('POST', 'position.json?map=' + mapId, true);
+            xhr.open('POST', '/game/' + mapId + '/guess.json', true);
             xhr.send(data);
         },
 

src/Controller/GameController.php

@@ -1,51 +1,48 @@
 <?php namespace MapGuesser\Controller;
 
 use MapGuesser\Database\Query\Select;
-use MapGuesser\Interfaces\Controller\IController;
 use MapGuesser\Interfaces\Database\IResultSet;
 use MapGuesser\Util\Geo\Bounds;
-use MapGuesser\View\HtmlView;
+use MapGuesser\Response\HtmlContent;
-use MapGuesser\View\JsonView;
+use MapGuesser\Response\JsonContent;
-use MapGuesser\Interfaces\View\IView;
+use MapGuesser\Interfaces\Response\IContent;
 
-class GameController implements IController
+class GameController
 {
-    private int $mapId;
+    public function getGame(array $parameters): IContent
-
-    private bool $jsonResponse;
-
-    public function __construct(int $mapId, $jsonResponse = false)
     {
-        $this->mapId = $mapId;
+        $mapId = (int) $parameters['mapId'];
-        $this->jsonResponse = $jsonResponse;
+        $data = $this->prepareGame($mapId);
+        return new HtmlContent('game', $data);
     }
 
-    public function run(): IView
+    public function getGameJson(array $parameters): IContent
     {
-        $bounds = $this->getMapBounds();
+        $mapId = (int) $parameters['mapId'];
+        $data = $this->prepareGame($mapId);
+        return new JsonContent($data);
+    }
 
-        if (!isset($_SESSION['state']) || $_SESSION['state']['mapId'] !== $this->mapId) {
+    private function prepareGame(int $mapId)
+    {
+        $bounds = $this->getMapBounds($mapId);
+
+        if (!isset($_SESSION['state']) || $_SESSION['state']['mapId'] !== $mapId) {
             $_SESSION['state'] = [
-                'mapId' => $this->mapId,
+                'mapId' => $mapId,
                 'area' => $bounds->calculateApproximateArea(),
                 'rounds' => []
             ];
         }
 
-        $data = ['mapId' => $this->mapId, 'bounds' => $bounds->toArray()];
+        return ['mapId' => $mapId, 'bounds' => $bounds->toArray()];
-
-        if ($this->jsonResponse) {
-            return new JsonView($data);
-        } else {
-            return new HtmlView('game', $data);
-        }
     }
 
-    private function getMapBounds(): Bounds
+    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($this->mapId);
+        $select->whereId($mapId);
 
         $map = $select->execute()->fetch(IResultSet::FETCH_ASSOC);
 

src/Controller/HomeController.php

@@ -0,0 +1,12 @@
+<?php namespace MapGuesser\Controller;
+
+use MapGuesser\Interfaces\Response\IRedirect;
+use MapGuesser\Response\Redirect;
+
+class HomeController
+{
+    public function getIndex(): IRedirect
+    {
+        return new Redirect([\Container::$routeCollection->getRoute('maps'), []], IRedirect::TEMPORARY);
+    }
+}

src/Controller/MapsController.php

@@ -2,15 +2,14 @@
 
 use MapGuesser\Database\Query\Select;
 use MapGuesser\Database\RawExpression;
-use MapGuesser\Interfaces\Controller\IController;
 use MapGuesser\Interfaces\Database\IResultSet;
-use MapGuesser\Interfaces\View\IView;
+use MapGuesser\Interfaces\Response\IContent;
 use MapGuesser\Util\Geo\Bounds;
-use MapGuesser\View\HtmlView;
+use MapGuesser\Response\HtmlContent;
 
-class MapsController implements IController
+class MapsController
 {
-    public function run(): IView
+    public function getMaps(): IContent
     {
         $select = new Select(\Container::$dbConnection, 'maps');
         $select->columns([
@@ -38,7 +37,7 @@ class MapsController implements IController
         }
 
         $data = ['maps' => $maps];
-        return new HtmlView('maps', $data);
+        return new HtmlContent('maps', $data);
     }
 
     private function formatMapAreaForHuman(float $area): array

src/Controller/PositionController.php

@@ -2,75 +2,30 @@
 
 use MapGuesser\Database\Query\Select;
 use MapGuesser\Http\Request;
-use MapGuesser\Interfaces\Controller\IController;
 use MapGuesser\Interfaces\Database\IResultSet;
 use MapGuesser\Util\Geo\Position;
-use MapGuesser\View\JsonView;
+use MapGuesser\Response\JsonContent;
-use MapGuesser\Interfaces\View\IView;
+use MapGuesser\Interfaces\Response\IContent;
 
-class PositionController implements IController
+class PositionController
 {
     const NUMBER_OF_ROUNDS = 5;
     const MAX_SCORE = 1000;
 
-    private int $mapId;
+    public function getPosition(array $parameters): IContent
-
-    public function __construct(int $mapId)
     {
-        $this->mapId = $mapId;
+        $mapId = (int) $parameters['mapId'];
-    }
 
-    public function run(): IView
+        if (!isset($_SESSION['state']) || $_SESSION['state']['mapId'] !== $mapId) {
-    {
-        if (!isset($_SESSION['state']) || $_SESSION['state']['mapId'] !== $this->mapId) {
             $data = ['error' => 'No valid session found!'];
-            return new JsonView($data);
+            return new JsonContent($data);
         }
 
         if (count($_SESSION['state']['rounds']) === 0) {
-            $newPosition = $this->getNewPosition();
+            $newPosition = $this->getNewPosition($mapId);
             $_SESSION['state']['rounds'][] = $newPosition;
 
             $data = ['panoId' => $newPosition['panoId']];
-        } elseif (isset($_POST['guess'])) {
-            $last = &$_SESSION['state']['rounds'][count($_SESSION['state']['rounds']) - 1];
-
-            $position = $last['position'];
-            $guessPosition = new Position((float) $_POST['lat'], (float) $_POST['lng']);
-
-            $last['guessPosition'] = $guessPosition;
-
-            $distance = $this->calculateDistance($position, $guessPosition);
-            $score = $this->calculateScore($distance, $_SESSION['state']['area']);
-
-            $last['distance'] = $distance;
-            $last['score'] = $score;
-
-            if (count($_SESSION['state']['rounds']) < static::NUMBER_OF_ROUNDS) {
-                $exclude = [];
-
-                foreach ($_SESSION['state']['rounds'] as $round) {
-                    $exclude = array_merge($exclude, $round['placesWithoutPano'], [$round['placeId']]);
-                }
-
-                $newPosition = $this->getNewPosition($exclude);
-                $_SESSION['state']['rounds'][] = $newPosition;
-
-                $panoId = $newPosition['panoId'];
-            } else {
-                $_SESSION['state']['rounds'] = [];
-
-                $panoId = null;
-            }
-
-            $data = [
-                'result' => [
-                    'position' => $position->toArray(),
-                    'distance' => $distance,
-                    'score' => $score
-                ],
-                'panoId' => $panoId
-            ];
         } else {
             $rounds = count($_SESSION['state']['rounds']);
             $last = $_SESSION['state']['rounds'][$rounds - 1];
@@ -92,15 +47,65 @@ class PositionController implements IController
             ];
         }
 
-        return new JsonView($data);
+        return new JsonContent($data);
     }
 
-    private function getNewPosition(array $exclude = []): array
+    public function evaluateGuess(array $parameters): IContent
+    {
+        $mapId = (int) $parameters['mapId'];
+
+        if (!isset($_SESSION['state']) || $_SESSION['state']['mapId'] !== $mapId) {
+            $data = ['error' => 'No valid session found!'];
+            return new JsonContent($data);
+        }
+
+        $last = &$_SESSION['state']['rounds'][count($_SESSION['state']['rounds']) - 1];
+
+        $position = $last['position'];
+        $guessPosition = new Position((float) $_POST['lat'], (float) $_POST['lng']);
+
+        $last['guessPosition'] = $guessPosition;
+
+        $distance = $this->calculateDistance($position, $guessPosition);
+        $score = $this->calculateScore($distance, $_SESSION['state']['area']);
+
+        $last['distance'] = $distance;
+        $last['score'] = $score;
+
+        if (count($_SESSION['state']['rounds']) < static::NUMBER_OF_ROUNDS) {
+            $exclude = [];
+
+            foreach ($_SESSION['state']['rounds'] as $round) {
+                $exclude = array_merge($exclude, $round['placesWithoutPano'], [$round['placeId']]);
+            }
+
+            $newPosition = $this->getNewPosition($mapId, $exclude);
+            $_SESSION['state']['rounds'][] = $newPosition;
+
+            $panoId = $newPosition['panoId'];
+        } else {
+            $_SESSION['state']['rounds'] = [];
+
+            $panoId = null;
+        }
+
+        $data = [
+            'result' => [
+                'position' => $position->toArray(),
+                'distance' => $distance,
+                'score' => $score
+            ],
+            'panoId' => $panoId
+        ];
+        return new JsonContent($data);
+    }
+
+    private function getNewPosition(int $mapId, array $exclude = []): array
     {
         $placesWithoutPano = [];
 
         do {
-            $place = $this->selectNewPlace($exclude);
+            $place = $this->selectNewPlace($mapId, $exclude);
             $position = new Position($place['lat'], $place['lng']);
             $panoId = $this->getPanorama($position);
 
@@ -117,12 +122,12 @@ class PositionController implements IController
         ];
     }
 
-    private function selectNewPlace(array $exclude): array
+    private function selectNewPlace(int $mapId, array $exclude): array
     {
         $select = new Select(\Container::$dbConnection, 'places');
         $select->columns(['id', 'lat', 'lng']);
         $select->where('id', 'NOT IN', $exclude);
-        $select->where('map_id', '=', $this->mapId);
+        $select->where('map_id', '=', $mapId);
 
         $numberOfPlaces = $select->count();// TODO: what if 0
         $randomOffset = random_int(0, $numberOfPlaces - 1);

src/Interfaces/Controller/IController.php

@@ -1,8 +0,0 @@
-<?php namespace MapGuesser\Interfaces\Controller;
-
-use MapGuesser\Interfaces\View\IView;
-
-interface IController
-{
-    public function run(): IView;
-}

src/Interfaces/Response/IContent.php

@@ -1,6 +1,6 @@
-<?php namespace MapGuesser\Interfaces\View;
+<?php namespace MapGuesser\Interfaces\Response;
 
-interface IView
+interface IContent
 {
     public function &getData(): array;
 

src/Interfaces/Response/IRedirect.php

@@ -0,0 +1,12 @@
+<?php namespace MapGuesser\Interfaces\Response;
+
+interface IRedirect
+{
+    const PERMANENT = 1;
+
+    const TEMPORARY = 2;
+
+    public function getUrl(): string;
+
+    public function getHttpCode(): int;
+}

src/Response/ContentBase.php

@@ -1,8 +1,8 @@
-<?php namespace MapGuesser\View;
+<?php namespace MapGuesser\Response;
 
-use MapGuesser\Interfaces\View\IView;
+use MapGuesser\Interfaces\Response\IContent;
 
-abstract class ViewBase implements IView
+abstract class ContentBase implements IContent
 {
     protected array $data;
 

src/Response/HtmlContent.php

@@ -1,6 +1,6 @@
-<?php namespace MapGuesser\View;
+<?php namespace MapGuesser\Response;
 
-class HtmlView extends ViewBase
+class HtmlContent extends ContentBase
 {
     private string $template;
 

src/Response/JsonContent.php

@@ -1,6 +1,6 @@
-<?php namespace MapGuesser\View;
+<?php namespace MapGuesser\Response;
 
-class JsonView extends ViewBase
+class JsonContent extends ContentBase
 {
     public function __construct(array &$data = [])
     {

src/Response/Redirect.php

@@ -0,0 +1,41 @@
+<?php namespace MapGuesser\Response;
+
+use MapGuesser\Interfaces\Response\IRedirect;
+
+class Redirect implements IRedirect
+{
+    private $target;
+
+    private int $type;
+
+    public function __construct($target, int $type = IRedirect::TEMPORARY)
+    {
+        $this->target = $target;
+        $this->type = $type;
+    }
+
+    public function getUrl(): string
+    {
+        if (is_array($this->target)) {
+            $link = $this->target[0]->generateLink($this->target[1]);
+        } else {
+            $link = $this->target;
+        }
+
+        return $link;
+    }
+
+    public function getHttpCode(): int
+    {
+        switch ($this->type) {
+            case IRedirect::PERMANENT:
+                return 301;
+
+            case IRedirect::TEMPORARY:
+                return 302;
+
+            default:
+                return 302;
+        }
+    }
+}

src/Routing/Route.php

@@ -0,0 +1,76 @@
+<?php namespace MapGuesser\Routing;
+
+class Route
+{
+    private string $id;
+
+    private array $pattern;
+
+    private array $handler;
+
+    public function __construct(string $id, array $pattern, array $handler)
+    {
+        $this->id = $id;
+        $this->pattern = $pattern;
+        $this->handler = $handler;
+    }
+
+    public function getId(): string
+    {
+        return $this->id;
+    }
+
+    public function generateLink(array $parameters = []): string
+    {
+        $link = [];
+
+        foreach ($this->pattern as $fragment) {
+            if (preg_match('/^{(\\w+)(\\?)?}$/', $fragment, $matches)) {
+                if (isset($parameters[$matches[1]])) {
+                    $link[] = $parameters[$matches[1]];
+                    unset($parameters[$matches[1]]);
+                } elseif (!isset($matches[2])) {//TODO: why? parameter not found but not optional
+                    $link[] = $fragment;
+                }
+            } else {
+                $link[] = $fragment;
+            }
+        }
+
+        $queryParams = [];
+        foreach ($parameters as $key => $value) {
+            if ($value === null) {
+                continue;
+            }
+
+            $queryParams[$key] = $value;
+        }
+
+        $query = count($queryParams) > 0 ? '?' . http_build_query($queryParams) : '';
+
+        return implode('/', $link) . $query;
+    }
+
+    public function callController(array $parameters)
+    {
+        $controllerName = $this->handler[0];
+        $controller = new $controllerName();
+
+        return call_user_func([$controller, $this->handler[1]], $parameters);
+    }
+
+    public function testAgainst(array $path): ?array
+    {
+        $parameters = [];
+
+        foreach ($path as $i => $fragment) {
+            if (preg_match('/^{(\\w+)(?:\\?)?}$/', $this->pattern[$i], $matches)) {
+                $parameters[$matches[1]] = $fragment;
+            } elseif ($fragment != $this->pattern[$i]) {
+                return null;
+            }
+        }
+
+        return $parameters;
+    }
+}

src/Routing/RouteCollection.php

@@ -0,0 +1,83 @@
+<?php namespace MapGuesser\Routing;
+
+use Closure;
+
+class RouteCollection
+{
+    private array $routes = [];
+
+    private array $searchTable = [
+        'get' => [],
+        'post' => []
+    ];
+
+    private array $groupStack = [];
+
+    public function get(string $id, string $pattern, array $handler): void
+    {
+        $this->addRoute('get', $id, $pattern, $handler);
+    }
+
+    public function post(string $id, string $pattern, array $handler): void
+    {
+        $this->addRoute('post', $id, $pattern, $handler);
+    }
+
+    public function group(string $pattern, Closure $group): void
+    {
+        $this->groupStack[] = $pattern;
+
+        $group($this);
+
+        array_pop($this->groupStack);
+    }
+
+    public function getRoute(string $id): ?Route
+    {
+        if (!isset($this->routes[$id])) {
+            return null;
+        }
+
+        return $this->routes[$id];
+    }
+
+    public function match(string $method, array $uri): ?array
+    {
+        $groupNumber = count($uri);
+
+        if (!isset($this->searchTable[$method][$groupNumber])) {
+            return null;
+        }
+
+        foreach ($this->searchTable[$method][$groupNumber] as $route) {
+            if (($parameters = $route->testAgainst($uri)) !== null) {
+                return [$route, $parameters];
+            }
+        }
+
+        return null;
+    }
+
+    private function addRoute(string $method, string $id, string $pattern, array $handler): void
+    {
+        if (isset($this->routes[$id])) {
+            throw new \Exception('Route already exists: ' . $id);
+        }
+
+        $pattern = array_merge($this->groupStack, explode('/', $pattern));
+        $route = new Route($id, $pattern, $handler);
+
+        $groupNumber = count($pattern);
+
+        $this->searchTable[$method][$groupNumber][] = $route;
+
+        while (preg_match('/^{\\w+\\?}$/', end($pattern))) {
+            $groupNumber--;
+            array_pop($pattern);
+
+            $this->searchTable[$method][$groupNumber][] = $route;
+        }
+
+        $this->routes[$id] = $route;
+    }
+}

views/error/404.php

@@ -0,0 +1,7 @@
+<?php require ROOT . '/views/templates/main_header.php'; ?>
+<?php require ROOT . '/views/templates/header.php'; ?>
+<div class="main">
+    <h2>404 | Page not found</h2>
+    <p>The requested URL was not found on this server. <a href="/" title="MapGuesser">Back to start.</a></p>
+</div>
+<?php require ROOT . '/views/templates/main_footer.php'; ?>

views/game.php

@@ -1,9 +1,9 @@
-<?php require 'templates/main_header.php'; ?>
+<?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
     <div class="grid">
         <h1>
-            <a href="maps" title="Back to playable maps">
+            <a href="/maps" title="Back to playable maps">
-                <?php require 'templates/icon.php'; ?>
+                <?php require ROOT . '/views/templates/icon.php'; ?>
                 <span>MapGuesser</span>
             </a>
         </h1>
@@ -49,5 +49,5 @@
     var mapBounds = <?= json_encode($bounds) ?>;
 </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
-<script src="static/js/game.js"></script>
+<script src="/static/js/game.js"></script>
-<?php require 'templates/main_footer.php'; ?>
+<?php require ROOT . '/views/templates/main_footer.php'; ?>

views/maps.php

@@ -1,10 +1,5 @@
-<?php require 'templates/main_header.php'; ?>
+<?php require ROOT . '/views/templates/main_header.php'; ?>
-<div class="header">
+<?php require ROOT . '/views/templates/header.php'; ?>
-    <h1>
-        <?php require 'templates/icon.php'; ?>
-        MapGuesser
-    </h1>
-</div>
 <div class="main">
     <h2>Playable maps</h2>
     <div class="mapContainer">
@@ -34,7 +29,7 @@
                     </div>
                     <p class="small justify marginTop"><?= $map['description'] ?></p>
                 </div>
-                <a class="button fullWidth" href="game?map=<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
+                <a class="button fullWidth" href="game/<?= $map['id']; ?>" title="Play map '<?= $map['name'] ?>'">Play this map</a>
             </div>
         <?php endforeach; ?>
         <?php if (count($maps) < 4): ?>
@@ -44,4 +39,4 @@
         <?php endif; ?>
     </div>
 </div>
-<?php require 'templates/main_footer.php'; ?>
+<?php require ROOT . '/views/templates/main_footer.php'; ?>

views/templates/header.php

@@ -0,0 +1,8 @@
+<div class="header">
+    <h1>
+        <a href="/" title="MapGuesser">
+            <?php require ROOT . '/views/templates/icon.php'; ?>
+            MapGuesser
+        </a>
+    </h1>
+</div>

views/templates/main_header.php

@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>MapGuesser</title>
-    <link href="static/css/mapguesser.css" rel="stylesheet">
+    <link href="/static/css/mapguesser.css" rel="stylesheet">
     <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="192x192" href="/static/img/favicon/192x192.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="static/img/favicon/96x96.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon/32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon/16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon/16x16.png">
 </head>
 <body>
     <div id="loading">
-        <img src="static/img/loading.svg">
+        <img src="/static/img/loading.svg">
     </div>