From 723706e6c7f10c68f5c0b0a9cd92d6a2d9df90bd Mon Sep 17 00:00:00 2001
From: Simon Alling <alling.simon@gmail.com>
Date: Sun, 12 Mar 2017 01:14:45 +0100
Subject: [PATCH] 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                  |  1 +
 js/SplashScreen.js          | 13 ++++++++++++-
 js/locales/Zatacka.en_US.js |  1 +
 js/strings.js               |  1 +
 kurve.se.css                |  8 ++++++--
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 089a101..b4f78c4 100644
--- a/index.html
+++ b/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>
diff --git a/js/SplashScreen.js b/js/SplashScreen.js
index 5abd904..c3d13c7 100644
--- a/js/SplashScreen.js
+++ b/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);
diff --git a/js/locales/Zatacka.en_US.js b/js/locales/Zatacka.en_US.js
index b4b9bad..b6d706f 100644
--- a/js/locales/Zatacka.en_US.js
+++ b/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.`,
diff --git a/js/strings.js b/js/strings.js
index af50fce..e625383 100644
--- a/js/strings.js
+++ b/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",
diff --git a/kurve.se.css b/kurve.se.css
index 07704ba..c61d09f 100644
--- a/kurve.se.css
+++ b/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%;
 }