From a0343d0e636e21cee2b9f92f63dc378d90d819a2 Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Wed, 8 Jun 2016 22:30:02 +0200 Subject: [PATCH 1/5] Add image preloading during splash screen --- index.html | 12 ++++++++++++ kurve.se.css | 4 ++++ 2 files changed, 16 insertions(+) diff --git a/index.html b/index.html index 40f0f4e..2054827 100644 --- a/index.html +++ b/index.html @@ -72,6 +72,18 @@

Achtung, die Kurve!

+ +
+ + + + + + + + + +
diff --git a/kurve.se.css b/kurve.se.css index fdbd225..7f3d805 100644 --- a/kurve.se.css +++ b/kurve.se.css @@ -42,3 +42,7 @@ main footer { position: absolute; width: 100%; } + +#preload { + display: none; +} From adf5800407ca5c25bb7b0e8ad5af7fb91d6026ab Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Wed, 8 Jun 2016 22:32:34 +0200 Subject: [PATCH 2/5] Add slashes to empty tags --- ZATACKA.html | 34 +++++++++++++++++----------------- index.html | 34 +++++++++++++++++----------------- 2 files changed, 34 insertions(+), 34 deletions(-) diff --git a/ZATACKA.html b/ZATACKA.html index 9f46a87..3cd6a55 100644 --- a/ZATACKA.html +++ b/ZATACKA.html @@ -17,23 +17,23 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 2054827..4b89122 100644 --- a/index.html +++ b/index.html @@ -18,23 +18,23 @@ - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + From 40f284e718a2d2e9a9dfe042888813cdf0d69493 Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Fri, 10 Jun 2016 18:15:56 +0200 Subject: [PATCH 3/5] OS-dependent shortcut hint; better text handling This commit improves the text and string handling by creating STRINGS and TEXT in IIFEs instead of declaring them as object literals. For the user, this commit means that Mac users will see an appropriate shortcut for toggling fullscreen (Cmd + Shift + F on Mac; F11 on other OSes). For this purpose, I have also added simple OS detection. --- ZATACKA.html | 2 +- index.html | 9 +++---- js/SplashScreen.js | 16 +++++++++++ js/lib/Utilities.js | 41 +++++++++++++++++++++++++++++ js/locales/Zatacka.en_US.js | 22 ++++++++++++++++ js/locales/Zatacka.en_US.properties | 11 -------- js/strings.js | 33 +++++++++++++---------- kurve.se.css | 4 +-- 8 files changed, 104 insertions(+), 34 deletions(-) create mode 100644 js/locales/Zatacka.en_US.js delete mode 100644 js/locales/Zatacka.en_US.properties diff --git a/ZATACKA.html b/ZATACKA.html index 3cd6a55..8964911 100644 --- a/ZATACKA.html +++ b/ZATACKA.html @@ -133,7 +133,7 @@

Achtung, die Kurve!

- + diff --git a/index.html b/index.html index 4b89122..70cea21 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,7 @@ + @@ -61,12 +62,8 @@

Achtung, die Kurve!

-

- Press Space to start -

-

- Press F11 to toggle fullscreen -

+

+

diff --git a/js/SplashScreen.js b/js/SplashScreen.js index 219eff5..5abd904 100644 --- a/js/SplashScreen.js +++ b/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(); diff --git a/js/lib/Utilities.js b/js/lib/Utilities.js index 35cb4cd..3409783 100644 --- a/js/lib/Utilities.js +++ b/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; + } + }, + }; +})(); diff --git a/js/locales/Zatacka.en_US.js b/js/locales/Zatacka.en_US.js new file mode 100644 index 0000000..517de6f --- /dev/null +++ b/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 (e.g. Tab) may cause undesired behavior (e.g. switching windows).`, + hint_ctrl: `Ctrl plus some other keys (e.g. W) 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`, + }); +})(); diff --git a/js/locales/Zatacka.en_US.properties b/js/locales/Zatacka.en_US.properties deleted file mode 100644 index 1987a99..0000000 --- a/js/locales/Zatacka.en_US.properties +++ /dev/null @@ -1,11 +0,0 @@ -"use strict"; - -const TEXT = Object.freeze({ - 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 (e.g. Tab) may cause undesired behavior (e.g. switching windows).`, - hint_ctrl: `Ctrl plus some other keys (e.g. W) may cause undesired behavior (e.g. closing the tab).`, - hint_mouse: `Make sure to keep the mouse cursor inside the browser window.`, -}); diff --git a/js/strings.js b/js/strings.js index 6f485ec..212f8b6 100644 --- a/js/strings.js +++ b/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", + }); +})(); diff --git a/kurve.se.css b/kurve.se.css index 7f3d805..fc1f93f 100644 --- a/kurve.se.css +++ b/kurve.se.css @@ -28,11 +28,11 @@ main { width: 640px; } -#startHint { +#start-hint { font-size: 1.2em; } -#fullscreenHint { +#fullscreen-hint { font-size: 0.9em; } From 3da2256d17758d032bb07602992e4f55c6113835 Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Fri, 10 Jun 2016 19:47:06 +0200 Subject: [PATCH 4/5] Shorten Ctrl and Alt warnings --- js/locales/Zatacka.en_US.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/locales/Zatacka.en_US.js b/js/locales/Zatacka.en_US.js index 517de6f..6dcd1b8 100644 --- a/js/locales/Zatacka.en_US.js +++ b/js/locales/Zatacka.en_US.js @@ -10,8 +10,8 @@ const TEXT = (() => { 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 (e.g. Tab) may cause undesired behavior (e.g. switching windows).`, - hint_ctrl: `Ctrl plus some other keys (e.g. W) may cause undesired behavior (e.g. closing the tab).`, + 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`, From 34c4cbb390a409c8ba514899b35fcd2efe559c24 Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Sat, 11 Jun 2016 12:07:56 +0200 Subject: [PATCH 5/5] Improve ES6 support check + message The support check now catches browsers without support for `class`, and the error message now specifies the recommended versions of Chrome and Firefox, so that for example a Firefox user does not get "Please use Firefox ..." --- ZATACKA.html | 2 +- Zatacka.css | 9 +++++++++ index.html | 2 +- js/SupportCheck_ES6.js | 1 + kurve.se.css | 13 ++++--------- 5 files changed, 16 insertions(+), 11 deletions(-) diff --git a/ZATACKA.html b/ZATACKA.html index 3cd6a55..84df979 100644 --- a/ZATACKA.html +++ b/ZATACKA.html @@ -52,7 +52,7 @@

Achtung, die Kurve!

Your browser does not support modern JavaScript.

-

Please use Chrome, Firefox, or another modern browser.

+

Please use Chrome 49+, Firefox 45+, or another modern browser.

diff --git a/Zatacka.css b/Zatacka.css index d27f850..55642fe 100644 --- a/Zatacka.css +++ b/Zatacka.css @@ -25,6 +25,15 @@ h1 { display: none; } +a:link, a:visited { + color: inherit; + text-decoration: none; +} + +a:hover, a:focus, a:active { + text-decoration: none; +} + input[type="checkbox"] { display: none; } diff --git a/index.html b/index.html index 4b89122..487f6d3 100644 --- a/index.html +++ b/index.html @@ -56,7 +56,7 @@

Achtung, die Kurve!

Your browser does not support modern JavaScript.

-

Please use Chrome, Firefox, or another modern browser.

+

Please use Chrome 49+, Firefox 45+, or another modern browser.

diff --git a/js/SupportCheck_ES6.js b/js/SupportCheck_ES6.js index 2d3231f..58ce775 100644 --- a/js/SupportCheck_ES6.js +++ b/js/SupportCheck_ES6.js @@ -4,6 +4,7 @@ // fail to hide the JS enabled error message. // Hide ES6 error message if browser passes ES6 support check: +class DummyClassForES6SupportCheck {} ((x = `x`, y = `${x}`) => { let a = "a"; const b = "b"; diff --git a/kurve.se.css b/kurve.se.css index 7f3d805..56bf818 100644 --- a/kurve.se.css +++ b/kurve.se.css @@ -5,19 +5,10 @@ body { color: rgba(255, 255, 255, 0.5); } -a:link, a:visited { - color: inherit; - text-decoration: none; -} - a:hover, a:focus, a:active { color: rgba(255, 255, 255, 1.0); } -p { - margin: 0 0 1em 0; -} - main { background: black url("resources/kurve-splash.png"); box-sizing: border-box; @@ -28,6 +19,10 @@ main { width: 640px; } +#wrapper p { + margin: 0 0 1em 0; +} + #startHint { font-size: 1.2em; }