diff --git a/index.html b/index.html
index 089a101..b4f78c4 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
Achtung, die Kurve!
+
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 click here.`,
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%;
}