Merge branch 'develop' from GitHub into develop

ZATACKA.html

@@ -133,7 +133,7 @@ <h1>Achtung, die Kurve!</h1>
     <script src="js/lib/Message.js"></script>
     <script src="js/lib/InfoMessage.js"></script>
     <script src="js/lib/WarningMessage.js"></script>
-    <script src="js/locales/Zatacka.en_US.properties"></script>
+    <script src="js/locales/Zatacka.en_US.js"></script>
     <script src="js/lib/preferences/Preference.js"></script>
     <script src="js/lib/preferences/MultichoicePreference.js"></script>
     <script src="js/lib/preferences/BooleanPreference.js"></script>

index.html

@@ -40,6 +40,7 @@
     <script src="js/SupportCheck_ES6.js"></script>
     <script src="js/strings.js"></script>
     <script src="js/lib/Utilities.js"></script>
+    <script src="js/locales/Zatacka.en_US.js"></script>
     <script src="js/SplashScreen.js"></script>
 
 </head>
@@ -61,12 +62,8 @@ <h1>Achtung, die Kurve!</h1>
     </div>
     <div id="wrapper">
         <main>
-            <p id="startHint">
-                Press Space to start
-            </p>
-            <p id="fullscreenHint">
-                Press F11 to toggle fullscreen
-            </p>
+            <p id="start-hint"></p>
+            <p id="fullscreen-hint"></p>
             <footer>
                 <a href="http://github.com/SimonAlling/kurve">Source Code</a>
             </footer>

js/SplashScreen.js

@@ -18,8 +18,24 @@
         }
     }
 
+    function showStartHint() {
+        const startHintElement = byID(STRINGS.id_start_hint);
+        if (isHTMLElement(startHintElement)) {
+            startHintElement.textContent = TEXT.hint_start;
+        }
+    }
+
+    function showFullscreenHint() {
+        const fullscreenHintElement = byID(STRINGS.id_fullscreen_hint);
+        if (isHTMLElement(fullscreenHintElement)) {
+            fullscreenHintElement.textContent = TEXT.getFullscreenHint(PLATFORM.getFullscreenShortcut());
+        }
+    }
+
     function addEventListeners() {
         document.addEventListener("keydown", splashScreenKeyHandler);
+        document.addEventListener("DOMContentLoaded", showStartHint);
+        document.addEventListener("DOMContentLoaded", showFullscreenHint);
     }
 
     addEventListeners();

js/lib/Utilities.js

@@ -56,6 +56,10 @@ function isString(s) {
     return typeOf(s) === "string";
 }
 
+function isNonEmptyString(s) {
+    return isString(s) && s.length > 0;
+}
+
 function arePositiveNumbers(numbers) {
     return numbers.every(isPositiveNumber);
 }
@@ -185,3 +189,40 @@ function isKeyList(keys) {
 function isFKey(key) {
     return F_KEYS.includes(key);
 }
+
+const PLATFORM = (() => {
+    const strings = {
+        os_id_windows: "Win",
+        os_id_mac: "Mac",
+        os_id_linux: "Linux",
+        os_id_unix: "X11",
+
+        os_name_windows: "Windows",
+        os_name_mac: "Mac",
+        os_name_linux: "Linux",
+        os_name_unix: "UNIX",
+        os_name_unknown: "Unknown",
+    };
+
+    return {
+        getOS: () => {
+            const ua = window.navigator.userAgent || window.navigator.appVersion;
+            if (isNonEmptyString(ua)) {
+                if (ua.indexOf(strings.os_id_windows) > -1) { return strings.os_name_windows; }
+                if (ua.indexOf(strings.os_id_mac)     > -1) { return strings.os_name_mac;     }
+                if (ua.indexOf(strings.os_id_linux)   > -1) { return strings.os_name_linux;   }
+                if (ua.indexOf(strings.os_id_unix)    > -1) { return strings.os_name_unix;    }
+            }
+            return strings.os_name_unknown;
+        },
+        getFullscreenShortcut: () => {
+            switch (PLATFORM.getOS()) {
+                case strings.os_name_mac:
+                    return TEXT.keyboard_fullscreen_mac;
+                    break;
+                default:
+                    return TEXT.keyboard_fullscreen_standard;
+            }
+        },
+    };
+})();

js/locales/Zatacka.en_US.js

@@ -0,0 +1,22 @@
+"use strict";
+
+const TEXT = (() => {
+    const KEY_SHIFT = "⇧";
+    const KEY_CMD   = "⌘";
+
+    return Object.freeze({
+        hint_start: `Press Space to start`,
+        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.`,
+        hint_quit: `Press Space or Enter to start over.`,
+        hint_alt: `Alt plus some other keys may cause undesired behavior (e.g. switching windows).`,
+        hint_ctrl: `Ctrl plus some other keys may cause undesired behavior (e.g. closing the tab).`,
+        hint_mouse: `Make sure to keep the mouse cursor inside the browser window.`,
+
+        keyboard_fullscreen_mac: `${KEY_CMD} + ${KEY_SHIFT} + F`,
+        keyboard_fullscreen_standard: "F11",
+
+        getFullscreenHint: (shortcut) => `Press ${shortcut} to toggle fullscreen`,
+    });
+})();

js/strings.js

@@ -1,19 +1,24 @@
 "use strict";
 
-const STRINGS = Object.freeze({
-    game_url: "ZATACKA.html",
+const STRINGS = (() => {
+    return Object.freeze({
+        game_url: "ZATACKA.html",
 
-    class_hidden: "hidden",
-    class_active: "active",
-    class_nocursor: "nocursor",
+        class_hidden: "hidden",
+        class_active: "active",
+        class_nocursor: "nocursor",
 
-    pref_key_cursor: "cursor",
-    pref_value_cursor_always_visible: "always_visible",
-    pref_value_cursor_hidden_when_mouse_used_by_player: "hidden_when_mouse_used_by_player",
-    pref_value_cursor_always_hidden: "always_hidden",
+        id_start_hint: "start-hint",
+        id_fullscreen_hint: "fullscreen-hint",
 
-    pref_key_hints: "hints",
-    pref_value_hints_all: "all",
-    pref_value_hints_warnings_only: "warnings",
-    pref_value_hints_none: "none",
-});
+        pref_key_cursor: "cursor",
+        pref_value_cursor_always_visible: "always_visible",
+        pref_value_cursor_hidden_when_mouse_used_by_player: "hidden_when_mouse_used_by_player",
+        pref_value_cursor_always_hidden: "always_hidden",
+
+        pref_key_hints: "hints",
+        pref_value_hints_all: "all",
+        pref_value_hints_warnings_only: "warnings",
+        pref_value_hints_none: "none",
+    });
+})();

kurve.se.css

@@ -23,11 +23,11 @@ main {
     margin: 0 0 1em 0;
 }
 
-#startHint {
+#start-hint {
     font-size: 1.2em;
 }
 
-#fullscreenHint {
+#fullscreen-hint {
     font-size: 0.9em;
 }