MAPG-103 unify some styles and show map name in the header

public/static/css/game.css

@@ -100,6 +100,9 @@
 }
 
 @media screen and (max-width: 599px) {
+    #mapName {
+        display: none;
+    }
     #showGuessButtonContainer {
         position: absolute;
         left: 20px;

public/static/css/mapguesser.css

@@ -98,7 +98,7 @@ sub {
 }
 
 svg.inline, img.inline {
-    display: inline-block;
+    display: inline;
     width: 1em;
     height: 1em;
     vertical-align: -0.15em;
@@ -233,6 +233,19 @@ div.header>div.grid>:nth-child(2) {
     text-align: right;
 }
 
+div.header>div.grid>:nth-child(2)>span {
+    padding-left: 6px;
+}
+
+div.header>div.grid>:nth-child(2)>span>a:link, div.header>div.grid>:nth-child(2)>span>a:visited {
+    color: inherit;
+}
+
+div.header>div.grid>:nth-child(2)>span:not(:last-child) {
+    border-right: solid white 1px;
+    padding-right: 6px;
+}
+
 div.main {
     padding: 6px 12px;
 }

src/Controller/GameController.php

@@ -7,14 +7,18 @@ use MapGuesser\Util\Geo\Bounds;
 use MapGuesser\Response\HtmlContent;
 use MapGuesser\Response\JsonContent;
 use MapGuesser\Interfaces\Response\IContent;
+use MapGuesser\Repository\MapRepository;
 
 class GameController
 {
     private IRequest $request;
 
+    private MapRepository $mapRepository;
+
     public function __construct(IRequest $request)
     {
         $this->request = $request;
+        $this->mapRepository = new MapRepository();
     }
 
     public function getGame(): IContent
@@ -33,7 +37,9 @@ class GameController
 
     private function prepareGame(int $mapId)
     {
-        $bounds = $this->getMapBounds($mapId);
+        $map = $this->mapRepository->getById($mapId);
+
+        $bounds = Bounds::createDirectly($map['bound_south_lat'], $map['bound_west_lng'], $map['bound_north_lat'], $map['bound_east_lng']);
 
         $session = $this->request->session();
 
@@ -45,19 +51,6 @@ class GameController
             ]);
         }
 
-        return ['mapId' => $mapId, 'bounds' => $bounds->toArray()];
-    }
-
-    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;
+        return ['mapId' => $mapId, 'mapName' => $map['name'], 'bounds' => $bounds->toArray()];
     }
 }

src/Repository/MapRepository.php

@@ -0,0 +1,16 @@
+<?php namespace MapGuesser\Repository;
+
+use MapGuesser\Database\Query\Select;
+use MapGuesser\Interfaces\Database\IResultSet;
+
+class MapRepository
+{
+    public function getById(int $mapId)
+    {
+        $select = new Select(\Container::$dbConnection, 'maps');
+        $select->columns(['id', 'name', 'description', 'bound_south_lat', 'bound_west_lng', 'bound_north_lat', 'bound_east_lng']);
+        $select->whereId($mapId);
+
+        return $select->execute()->fetch(IResultSet::FETCH_ASSOC);
+    }
+}

views/game.php

@@ -8,7 +8,11 @@
                 <span>MapGuesser</span>
             </a>
         </h1>
-        <p>Round: <span id="currentRound" class="mono bold"></span> | Score: <span id="currentScoreSum" class="mono bold"></span></p>
+        <p>
+            <span id="mapName" class="bold"><?= $mapName ?></span><!--
+         --><span>Round <span id="currentRound" class="bold"></span></span><!--
+         --><span>Score <span id="currentScoreSum" class="bold"></span></span>
+        </p>
     </div>
 </div>
 <div id="cover"></div>

views/templates/main_header.php

@@ -10,7 +10,7 @@
             <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 href="https://fonts.googleapis.com/css2?family=Roboto: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">
     <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/32x32.png">