added a new button to the view for the return to starting point feature

public/static/css/game.css

@@ -149,15 +149,43 @@
     color: #701919;
 }
 
+#navigation {
+    position: absolute;
+    z-index: 2;
+}
+#navigation .navigationItem {
+    margin-top: 10px;
+    opacity: 70%;
+}
+#navigation .navigationItem:hover {
+    opacity: 100%;
+}
+#navigation span {
+    position: absolute;
+}
+#navigation .circleBackground {
+    width: 100%;
+    height: 100%;
+    opacity: 50%;
+}
+#navigation .navigationIcon {
+    width: 75%;
+    height: 75%;
+    margin: auto;
+    margin-top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+}
+
 @media screen and (max-width: 599px) {
     #mapName {
         display: none;
     }
     #showGuessButtonContainer {
         position: absolute;
-        left: 20px;
+        left: 60px;
         bottom: 30px;
-        right: 20px;
+        right: 60px;
         z-index: 2;
     }
     #guess {
@@ -172,6 +200,14 @@
     #scoreBarBase {
         width: 100%;
     }
+    #navigation {
+        bottom: 30px;
+        left: 10px;
+        width: 45px;
+    }
+    #navigation .navigationItem {
+        height: 45px;
+    }
 }
 
 @media screen and (min-width: 600px) {
@@ -215,6 +251,14 @@
     #scoreBarBase {
         width: 60%;
     }
+    #navigation {
+        bottom: 50px;
+        left: 20px;
+        width: 60px;
+    }
+    #navigation .navigationItem {
+        height: 60px;
+    }
     @media screen and (max-height: 424px) {
         #guess {
             top: 10px;
@@ -229,5 +273,13 @@
             right: 20px;
             bottom: 30px;
         }
+        #navigation {
+            bottom: 30px;
+            left: 10px;
+            width: 45px;
+        }
+        #navigation .navigationItem {
+            height: 45px;
+        }
     }
 }

public/static/img/circle_background.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16">
+  <circle cx="50%" cy="50%" r="50%" fill="black" />
+</svg>

public/static/img/house-fill.svg

@@ -0,0 +1,5 @@
+<!-- Original image: Copyright (c) 2019 The Bootstrap Authors. License can be found in 'USED_SOFTWARE' in section 'Bootstrap Icons'. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="#3183ce" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+</svg>

public/static/js/game.js

@@ -864,11 +864,13 @@
     document.getElementById('showGuessButton').onclick = function () {
         this.style.visibility = 'hidden';
         document.getElementById('guess').style.visibility = 'visible';
+        document.getElementById('navigation').style.visibility = 'hidden';
     }
 
     document.getElementById('closeGuessButton').onclick = function () {
         document.getElementById('showGuessButton').style.visibility = null;
         document.getElementById('guess').style.visibility = null;
+        document.getElementById('navigation').style.visibility = 'visible';
     }
 
     document.getElementById('guessButton').onclick = function () {

views/game.php

@@ -59,6 +59,16 @@
             <button id="startNewGameButton" class="fullWidth">Play this map again</button>
         </div>
     </div>
+    <div id="navigation">
+        <div id="returnToStart" class="navigationItem">
+            <span>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/circle_background.svg?rev=<?= REVISION ?>" alt="Circle Background" class="circleBackground" />
+            </span>
+            <span>
+                <img src="<?= $_ENV['STATIC_ROOT'] ?>/img/house-fill.svg?rev=<?= REVISION ?>" alt="Return to Start icon" class="navigationIcon" />
+            </span>
+        </div>
+    </div>
 @endsection
 
 @section(pageScript)