Add Browser Safe Mode

The BSM means that Kurve is run in its own window without history to avoid
mid-game disruptions caused by user mistakes. It relies on
`window.open()`. If popups are blocked, we show a fallback message with a
link to click instead.

index.html

@@ -64,6 +64,7 @@ <h1>Achtung, die Kurve!</h1>
         <main>
             <p id="start-hint"></p>
             <p id="fullscreen-hint"></p>
+            <p id="popup-hint"></p>
             <footer>
                 <a href="http://github.com/SimonAlling/kurve">Source Code</a>
             </footer>

js/SplashScreen.js

@@ -8,7 +8,11 @@
     }
 
     function proceedToGame() {
-        document.location.href = STRINGS.game_url;
+        const newWindow = window.open(STRINGS.game_url);
+        if (!newWindow || newWindow.closed || typeof newWindow.closed === "undefined") {
+            // Browser is blocking popups.
+            showPopupHint();
+        }
     }
 
     function splashScreenKeyHandler(event) {
@@ -32,6 +36,13 @@
         }
     }
 
+    function showPopupHint() {
+        const popupHintElement = byID(STRINGS.id_popup_hint);
+        if (isHTMLElement(popupHintElement)) {
+            popupHintElement.innerHTML = TEXT.hint_popup;
+        }
+    }
+
     function addEventListeners() {
         document.addEventListener("keydown", splashScreenKeyHandler);
         document.addEventListener("DOMContentLoaded", showStartHint);

js/locales/Zatacka.en_US.js

@@ -7,6 +7,7 @@ const TEXT = (() => {
     return Object.freeze({
         hint_unload: `Are you sure you want to unload the page?`,
         hint_start: `Press Space to start`,
+        hint_popup: `It is recommended to run Kurve in its own window without history (to avoid switching tabs or navigating back in history mid-game). To do that, please allow popups or <a href="ZATACKA.html" target="_blank">click here</a>.`,
         hint_pick: `Pick your desired color by pressing the corresponding LEFT key (e.g. M for Orange).`,
         hint_proceed: `Press Space or Enter to start!`,
         hint_next: `Press Space or Enter to proceed, or Esc to quit.`,

js/strings.js

@@ -18,6 +18,7 @@ const STRINGS = (() => Object.freeze({
 
     id_start_hint: "start-hint",
     id_fullscreen_hint: "fullscreen-hint",
+    id_popup_hint: "popup-hint",
 
     pref_key_cursor: "cursor",
     pref_value_cursor_always_visible: "always_visible",

kurve.se.css

@@ -27,13 +27,17 @@ main {
     font-size: 1.2em;
 }
 
-#fullscreen-hint {
+#fullscreen-hint, #popup-hint {
     font-size: 0.9em;
 }
 
+#popup-hint a {
+    text-decoration: underline;
+}
+
 main footer {
     bottom: 0;
-    height: 80px;
+    height: 40px;
     position: absolute;
     width: 100%;
 }