Merge branch 'develop'

ZATACKA.html

@@ -87,7 +87,7 @@ <h1>Achtung, die Kurve!</h1>
                         <div class="blue ready"></div>
                     </li>
                 </ul>
-                <a id="button-show-settings" class="corner icon-button"></a>
+                <a id="button-show-settings" class="corner icon-button" title="Settings"></a>
             </div>
             <div id="KONEC_HRY" class="hidden overlay">
                 <ul id="results">
@@ -101,7 +101,7 @@ <h1>Achtung, die Kurve!</h1>
             </div>
             <div id="messages" class="unobtrusive overlay"></div>
             <div id="settings" class="hidden overlay">
-                <a id="button-hide-settings" class="corner icon-button"></a>
+                <a id="button-hide-settings" class="corner icon-button" title="Close"></a>
                 <form id="settings-form"></form>
             </div>
             <div id="dialogs" class="hidden overlay"></div>

Zatacka.css

@@ -325,20 +325,38 @@ button:hover {
 
 #button-hide-settings {
     background-position: 0 -16px;
+    z-index: 10; /* so it stays in front of the right hand side :hover blocker */
 }
 
 #settings {
-    background-color: rgba(0, 0, 0, 0.95);
+    background-color: black;
+    overflow: hidden;
 }
 
 #settings {
     padding: 50px 80px 50px 80px;
 }
 
+#settings-form {
+    height: 100%;
+}
+
 #settings-form > div {
     box-sizing: border-box;
     margin: 12px 0;
-    opacity: 0.7;
+    transition-property: opacity;
+    opacity: 0.6;
+    vertical-align: top; /* so half-width divs are aligned properly */
+}
+
+#settings-form > div:hover {
+    opacity: 1;
+}
+
+#settings-form > div,
+#settings-form > div::before,
+#settings-form > div .description {
+    transition-duration: 200ms;
 }
 
 #settings-form > div.half-width {
@@ -358,14 +376,6 @@ button:hover {
     margin-top: 0;
 }
 
-#settings-form > div:hover {
-    opacity: 1;
-}
-
-#settings-form > div:hover .description {
-    visibility: visible;
-}
-
 #settings-form fieldset {
     border: 1px solid white;
     padding: 2px 8px 6px 8px;
@@ -385,17 +395,80 @@ button:hover {
 
 #settings-form .description {
     box-sizing: border-box;
-    bottom: 0;
     font-size: 0.75em;
-    height: 50px;
     left: 0;
-    opacity: 0.8;
-    padding: 0 80px;
+    bottom: 30px; /* Match with #settings::after height! */
+    margin-left: calc(80px - 16px + 1px);
+    padding-bottom: 4px;
+    padding-left: 16px;
+    padding-right: 4px;
     position: absolute;
-    visibility: hidden;
+    max-width: calc(100% - 160px + 16px - 1px);
+    border-bottom-style: solid;
+}
+
+#settings-form > div.half-width.right-hand-side .description {
+    left: unset;
+    right: 0;
+    padding-left: 4px;
+    padding-right: 16px;
+    margin-left: unset;
+    margin-right: calc(80px - 16px + 1px);
+}
+
+/* To clip the connection to the description: */
+#settings::after {
+    background-color: black;
+    content: "";
+    display: block;
+    height: 30px; /* Match with .description bottom! */
     width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+#settings-form > div::before,
+#settings-form > div .description {
+    opacity: 0;
+    border-width: 1px; /* apparently necessary, otherwise it is always the same (wrong) thickness regardless of scale */
+    transition-property: opacity;
+    border-color: rgba(255, 255, 255, 0.6);
+}
+
+#settings-form > div:hover::before,
+#settings-form > div:hover .description {
+    opacity: 0.9;
 }
 
+#settings-form > div:hover::before,
+#settings-form > div:hover .description {
+    transition-property: opacity;
+    transition-delay: 500ms;
+    transition-duration: 1s;
+}
+
+#settings-form > div::before {
+    border-left-style: solid;
+    border-top-style: solid;
+    content: "";
+    height: 1000%;
+    left: 64px;
+    margin-top: 7px;
+    position: absolute;
+    width: 7px;
+    pointer-events: none;
+}
+
+#settings-form > div.half-width.right-hand-side::before {
+    border-left-style: none;
+    border-right-style: solid;
+    content: "";
+    left: unset;
+    right: 64px;
+}
+
+
 #settings-form select {
     background: black;
     border: 1px solid white;

js/GUIController.js

@@ -28,7 +28,7 @@ export function GUIController(cfg) {
     const settingsForm = byID("settings-form");
 
     const ORIGINAL_LEFT_WIDTH = left.offsetWidth;
-    const MULTICHOICE_LABEL_MAX_LENGTH_FOR_HALFWIDTH_FIELDSET = 22; // More characters than this will result in a full-width div/fieldset.
+    const MULTICHOICE_LABEL_MAX_LENGTH_FOR_HALFWIDTH_FIELDSET = 20; // More characters than this will result in a full-width div/fieldset.
     const FLOAT_RANGE_PREFERENCE_STEP = 0.01;
 
     const BUTTON_TAG_NAME = "button";

js/Main.js

@@ -98,11 +98,19 @@ const Zatacka = (() => {
             default: true,
         },
         {
-            type: BooleanPreference,
-            key: STRINGS.pref_key_allow_blurry_scaling,
-            label: TEXT.pref_label_allow_blurry_scaling,
-            description: TEXT.pref_label_description_allow_blurry_scaling,
-            default: false,
+            type: MultichoicePreference,
+            key: STRINGS.pref_key_scaling,
+            label: TEXT.pref_label_scaling,
+            description: TEXT.pref_label_description_scaling,
+            values: [
+                STRINGS.pref_value_scaling_prefer_quality,
+                STRINGS.pref_value_scaling_prefer_size,
+            ],
+            labels: [
+                TEXT.pref_label_scaling_prefer_quality,
+                TEXT.pref_label_scaling_prefer_size,
+            ],
+            default: STRINGS.pref_value_scaling_prefer_quality,
         },
         {
             type: MultichoicePreference,
@@ -196,6 +204,10 @@ const Zatacka = (() => {
         }
     }
 
+    function setScalingMode(mode) {
+        guiController.setBlurryScaling(mode === STRINGS.pref_value_scaling_prefer_size);
+    }
+
     function setPreventSpawnkill(mode) {
         if (game.isStarted()) {
             throw new Error("Cannot change edge padding when the game is running.");
@@ -477,23 +489,32 @@ const Zatacka = (() => {
     }
 
     function applySettings() {
+        let preference_value_edge_fix;
+        let preference_value_hints;
+        let preference_value_prevent_spawnkill;
+        let preference_value_scaling;
         try {
-            // Edge fix:
-            setEdgeMode(preferenceManager.getSaved(STRINGS.pref_key_edge_fix));
-            // Hints:
-            guiController.setMessageMode(preferenceManager.getSaved(STRINGS.pref_key_hints));
-            // Prevent spawnkill:
-            game.setPreventSpawnkill(preferenceManager.getSaved(STRINGS.pref_key_prevent_spawnkill));
-            // Blurry scaling:
-            guiController.setBlurryScaling(preferenceManager.getSaved(STRINGS.pref_key_allow_blurry_scaling));
+            preference_value_edge_fix = preferenceManager.getSaved(STRINGS.pref_key_edge_fix);
+            preference_value_hints = preferenceManager.getSaved(STRINGS.pref_key_hints);
+            preference_value_prevent_spawnkill = preferenceManager.getSaved(STRINGS.pref_key_prevent_spawnkill);
+            preference_value_scaling = preferenceManager.getSaved(STRINGS.pref_key_scaling);
         } catch(e) {
             logWarning("Could not load settings from localStorage. Using cached settings instead.");
-            setEdgeMode(preferenceManager.getCached(STRINGS.pref_key_edge_fix));
-            guiController.setMessageMode(preferenceManager.getCached(STRINGS.pref_key_hints));
-            game.setPreventSpawnkill(preferenceManager.getCached(STRINGS.pref_key_prevent_spawnkill));
-            guiController.setBlurryScaling(preferenceManager.getCached(STRINGS.pref_key_allow_blurry_scaling));
+            preference_value_edge_fix = preferenceManager.getCached(STRINGS.pref_key_edge_fix);
+            preference_value_hints = preferenceManager.getCached(STRINGS.pref_key_hints);
+            preference_value_prevent_spawnkill = preferenceManager.getCached(STRINGS.pref_key_prevent_spawnkill);
+            preference_value_scaling = preferenceManager.getCached(STRINGS.pref_key_scaling);
             handleSettingsAccessError(e);
         }
+
+        // Edge fix:
+        setEdgeMode(preference_value_edge_fix);
+        // Hints:
+        guiController.setMessageMode(preference_value_hints);
+        // Prevent spawnkill:
+        game.setPreventSpawnkill(preference_value_prevent_spawnkill);
+        // Blurry scaling:
+        setScalingMode(preference_value_scaling);
     }
 
     function handleSettingsAccessError(error) {

js/lib/preferences/PreferenceManager.js

@@ -14,9 +14,9 @@ export function PreferenceManager(preferencesData) {
     let CACHED_PREFERENCES_WITH_VALUES = getAllPreferencesWithDefaultValues();
     CACHED_PREFERENCES_WITH_VALUES.forEach((preferenceWithValue) => {
         const key = preferenceWithValue.preference.key;
+        const defaultValue = preferenceWithValue.preference.getDefaultValue();
         try {
             const savedValue = getSaved(key);
-            const defaultValue = preferenceWithValue.preference.getDefaultValue();
             if (savedValue === null) {
                 log(`Using default value '${defaultValue}' for preference '${key}' since there was no saved value.`);
             }

js/locales/Zatacka.en_US.js

@@ -30,34 +30,36 @@ export default (() => {
         label_text_confirm_quit: `Are you sure you want to quit?`,
         label_text_confirm_reload: `Are you sure you want to reload the application?`,
 
-        pref_label_cursor: `Cursor`,
-        pref_label_description_cursor: `Control how the cursor behaves when the game is running.`,
+        pref_label_cursor: `Mouse pointer`,
+        pref_label_description_cursor: `Control how the pointer behaves when the game is live. (It is always visible in the menu.) "Used by player" means that a player is using the mouse to control their Kurve.`,
         pref_label_cursor_always_visible: `Always visible`,
         pref_label_cursor_hidden_when_mouse_used_by_player: `Hidden when mouse used by player`,
         pref_label_cursor_always_hidden: `Always hidden`,
 
-        pref_label_edge_fix: `Edge fix`,
-        pref_label_description_edge_fix: `Shrink the playing field slightly to make the edge visible if the monitor is exactly the same height or width as the game.`,
+        pref_label_edge_fix: `Invisible border fix`,
+        pref_label_description_edge_fix: `Shrink the playing field slightly to make the gray border visible if the monitor is exactly the same height and/or width as the game (in pixels).`,
         pref_label_edge_fix_full: `Full`,
         pref_label_edge_fix_minimal: `Minimal`,
         pref_label_edge_fix_off: `Off`,
 
-        pref_label_hints: `Hints`,
-        pref_label_description_hints: `Hints may be redundant for experienced Kurve players.`,
-        pref_label_hints_all: `All`,
+        pref_label_hints: `Messages`,
+        pref_label_description_hints: `Hints (white text) are unnecessary for experienced Kurve players. Warnings (yellow) can be useful for players new to playing Kurve in the browser.`,
+        pref_label_hints_all: `Hints and warnings`,
         pref_label_hints_warnings_only: `Warnings only`,
         pref_label_hints_none: `None`,
 
         pref_label_prevent_spawnkill: `Prevent spawnkills`,
-        pref_label_description_prevent_spawnkill: `Enforce a minimum distance between player spawns.`,
+        pref_label_description_prevent_spawnkill: `Enforce a minimum distance between players at round start.`,
 
         pref_label_confirm_quit: `Confirm quit`,
-        pref_label_description_confirm_quit: `Ask for confirmation before quitting to the main menu.`,
+        pref_label_description_confirm_quit: `Ask for confirmation before quitting to the main menu (Esc).`,
 
         pref_label_confirm_reload: `Confirm reload`,
-        pref_label_description_confirm_reload: `Ask for confirmation before reloading the application.`,
+        pref_label_description_confirm_reload: `Ask for confirmation before reloading the application (F5).`,
 
-        pref_label_allow_blurry_scaling: `Allow blurry scaling`,
-        pref_label_description_allow_blurry_scaling: `Let the game use the available screen area more efficiently at the expense of visual quality. Can be useful if the game is very small on your screen.`,
+        pref_label_scaling: `Scaling`,
+        pref_label_description_scaling: `Visual quality ensures a crisp, pixelmapped image. On-screen size may result in blurry graphics and other visual errors, but can be useful if the game is very small on your screen.`,
+        pref_label_scaling_prefer_quality: `Prefer visual quality`,
+        pref_label_scaling_prefer_size: `Prefer on-screen size`,
     });
 })();

js/strings.js

@@ -48,5 +48,8 @@ export default Object.freeze({
     pref_key_confirm_quit: "confirm_quit",
     pref_key_confirm_reload: "confirm_reload",
     pref_key_prevent_spawnkill: "prevent_spawnkill",
-    pref_key_allow_blurry_scaling: "allow_blurry_scaling",
+
+    pref_key_scaling: "scaling",
+    pref_value_scaling_prefer_quality: "prefer_quality",
+    pref_value_scaling_prefer_size: "prefer_size",
 });