Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
SimonAlling committed Jun 11, 2016
2 parents 5bc5ae0 + db7f6f1 commit ddfe3e3
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 79 deletions.
38 changes: 19 additions & 19 deletions ZATACKA.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,23 @@
<meta property="og:image" content="http://kurve.se/resources/kurve-share.png" />

<link rel="stylesheet" href="Zatacka.css" />
<link rel="apple-touch-icon" sizes="57x57" href="/resources/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/resources/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/resources/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/resources/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/resources/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/resources/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/resources/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/resources/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/resources/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/resources/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/resources/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/icon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/resources/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="57x57" href="/resources/icon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/resources/icon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/resources/icon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/resources/icon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/resources/icon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/resources/icon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/resources/icon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/resources/icon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/resources/icon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/resources/icon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/resources/icon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/resources/icon/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/resources/icon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />

<script src="js/SupportCheck_JS.js"></script>
<script src="js/SupportCheck_ES6.js"></script>
Expand All @@ -52,7 +52,7 @@ <h1>Achtung, die Kurve!</h1>
<div id="fatalError_ES6" class="fatalError">
<div>
<p>Your browser does not support modern JavaScript.</p>
<p class="fatalErrorExtraInfo">Please use <a href="https://google.com/chrome/" title="Google Chrome">Chrome</a>, <a href="https://getfirefox.com" title="Mozilla Firefox">Firefox</a>, or another modern browser.</p>
<p class="fatalErrorExtraInfo">Please use <a href="https://google.com/chrome/" title="Google Chrome">Chrome&nbsp;49+</a>, <a href="https://getfirefox.com" title="Mozilla Firefox">Firefox&nbsp;45+</a>, or another modern browser.</p>
</div>
</div>
<div id="wrapper">
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions Zatacka.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
57 changes: 33 additions & 24 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,28 +18,29 @@

<link rel="stylesheet" href="Zatacka.css" />
<link rel="stylesheet" href="kurve.se.css" />
<link rel="apple-touch-icon" sizes="57x57" href="/resources/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/resources/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/resources/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/resources/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/resources/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/resources/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/resources/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/resources/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/resources/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/resources/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/resources/icon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/icon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/resources/icon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="57x57" href="/resources/icon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/resources/icon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/resources/icon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/resources/icon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/resources/icon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/resources/icon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/resources/icon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/resources/icon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/resources/icon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/resources/icon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/resources/icon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/resources/icon/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/resources/icon/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />

<script src="js/SupportCheck_JS.js"></script>
<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>
Expand All @@ -56,22 +57,30 @@ <h1>Achtung, die Kurve!</h1>
<div id="fatalError_ES6" class="fatalError">
<div>
<p>Your browser does not support modern JavaScript.</p>
<p class="fatalErrorExtraInfo">Please use <a href="https://google.com/chrome/" title="Google Chrome">Chrome</a>, <a href="https://getfirefox.com" title="Mozilla Firefox">Firefox</a>, or another modern browser.</p>
<p class="fatalErrorExtraInfo">Please use <a href="https://google.com/chrome/" title="Google Chrome">Chrome&nbsp;49+</a>, <a href="https://getfirefox.com" title="Mozilla Firefox">Firefox&nbsp;45+</a>, or another modern browser.</p>
</div>
</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>
</main>
</div>
<!-- For preloading of images: -->
<div id="preload">
<img src="resources/kurve-lobby-controls-ready.png" />
<img src="resources/kurve-digits-red.png" />
<img src="resources/kurve-digits-yellow.png" />
<img src="resources/kurve-digits-orange.png" />
<img src="resources/kurve-digits-green.png" />
<img src="resources/kurve-digits-pink.png" />
<img src="resources/kurve-digits-blue.png" />
<img src="resources/kurve-konec-hry.png" />
<img src="resources/kurve-checkbox-tickmark.png" />
</div>

</body>

Expand Down
16 changes: 16 additions & 0 deletions js/SplashScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
1 change: 1 addition & 0 deletions js/SupportCheck_ES6.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
41 changes: 41 additions & 0 deletions js/lib/Utilities.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
},
};
})();
22 changes: 22 additions & 0 deletions js/locales/Zatacka.en_US.js
Original file line number Diff line number Diff line change
@@ -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`,
});
})();
11 changes: 0 additions & 11 deletions js/locales/Zatacka.en_US.properties

This file was deleted.

33 changes: 19 additions & 14 deletions js/strings.js
Original file line number Diff line number Diff line change
@@ -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",
});
})();
21 changes: 10 additions & 11 deletions kurve.se.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,11 +19,15 @@ main {
width: 640px;
}

#startHint {
#wrapper p {
margin: 0 0 1em 0;
}

#start-hint {
font-size: 1.2em;
}

#fullscreenHint {
#fullscreen-hint {
font-size: 0.9em;
}

Expand All @@ -42,3 +37,7 @@ main footer {
position: absolute;
width: 100%;
}

#preload {
display: none;
}

0 comments on commit ddfe3e3

Please sign in to comment.