Merge branch 'develop'

CNAME

@@ -0,0 +1 @@
+kurve.se

Zatacka.css

@@ -46,10 +46,10 @@ input[type="radio"] + label {
     position: relative;
 }
 
-/* Actual checkbox: */
+/* Actual checkbox or radio button: */
 input[type="checkbox"] + label::before,
 input[type="radio"] + label::before {
-    background-position: center center;
+    background-image: url("resources/kurve-icons.png");
     background-repeat: no-repeat;
     box-sizing: border-box;
     content: "";
@@ -61,21 +61,25 @@ input[type="radio"] + label::before {
     width: 12px;
 }
 
+/* Actual checkbox: */
 input[type="checkbox"] + label::before {
     border: 1px white solid;
-}
-
-input[type="radio"] + label::before {
-    background-image: url("resources/kurve-radio-button.png");
+    background-position: 0 0;
 }
 
 /* Actual checkbox when checked: */
 input[type="checkbox"]:checked + label::before {
-    background-image: url("resources/kurve-checkbox-tickmark.png");
+    background-position: 0 -48px;
+}
+
+/* Actual radio button: */
+input[type="radio"] + label::before {
+    background-position: 0 -64px;
 }
 
+/* Actual radio button when checked: */
 input[type="radio"]:checked + label::before {
-    background-image: url("resources/kurve-radio-button-checked.png");
+    background-position: 0 -80px;
 }
 
 input[type="checkbox"] + label,
@@ -297,11 +301,11 @@ select {
 #lobby #controls .blue.ready      { background-position: -160px -250px; }
 
 #button-show-settings {
-    background-position: 0 -16px;
+    background-position: 0 -32px;
 }
 
 #button-hide-settings {
-    background-position: 0 0;
+    background-position: 0 -16px;
 }
 
 #settings {
@@ -315,6 +319,23 @@ select {
     opacity: 0.6;
 }
 
+#settings-form > div.half-width {
+    display: inline-block;
+    width: calc(50% - 8px); /* 50% - half the margin-right */
+    margin-top: 0; /* otherwise it will stack with the margin-bottom above */
+    margin-right: 16px;
+}
+
+#settings-form > div.half-width.right-hand-side {
+    /* A half-width div on the right hand side must have no margin-right, so it fits in the available horizontal space. */
+    margin-right: 0;
+}
+
+#settings-form > div.half-width + div {
+    /* A full-width div right after a half-width one must have no margin-top; otherwise their margins will stack. */
+    margin-top: 0;
+}
+
 #settings-form > div:hover {
     opacity: 1;
 }

index.html

@@ -80,7 +80,7 @@ <h1>Achtung, die Kurve!</h1>
         <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" />
+        <img src="resources/kurve-icons.png" />
     </div>
 
 </body>

js/GUIController.js

@@ -16,6 +16,7 @@ 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.
 
     let currentMessages = [];
 
@@ -61,6 +62,15 @@ function GUIController(cfg) {
         }
     }
 
+    function settingsEntryShouldBeHalfWidth(preference) {
+        if (preference instanceof MultichoicePreference) {
+            const longestValueLabel = preference.labels.reduce((acc, current) => current.length > acc.length ? current : acc);
+            return longestValueLabel.length <= MULTICHOICE_LABEL_MAX_LENGTH_FOR_HALFWIDTH_FIELDSET;
+        } else {
+            return false;
+        }
+    }
+
     function settingsEntryHTMLElement(preference, preferenceValue) {
         if (!preference instanceof Preference) {
             throw new TypeError(`${preference} is not a preference.`);
@@ -108,6 +118,9 @@ function GUIController(cfg) {
                 fieldset.appendChild(radioButtonLabel);
             });
             div.appendChild(fieldset);
+            if (settingsEntryShouldBeHalfWidth(preference)) {
+                div.classList.add(STRINGS.class_half_width);
+            }
         }
 
         // Range
@@ -200,8 +213,23 @@ function GUIController(cfg) {
 
     function updateSettingsForm(preferencesWithData) {
         flush(settingsForm);
-        preferencesWithData.forEach((preferenceWithData) => {
-            settingsForm.appendChild(settingsEntryHTMLElement(preferenceWithData.preference, preferenceWithData.value));
+        let settingsEntries = preferencesWithData.map((preferenceWithData) => settingsEntryHTMLElement(preferenceWithData.preference, preferenceWithData.value));
+        // Add special class to half-width divs on the right hand side:
+        let consecutiveHalfWidthDivs = 0;
+        for (let i = 0; i < settingsEntries.length; i++) {
+            const currentEntry = settingsEntries[i];
+            if (currentEntry.classList.contains(STRINGS.class_half_width)) {
+                consecutiveHalfWidthDivs++;
+                if (consecutiveHalfWidthDivs % 2 === 0) {
+                    // Even number of consecutive half-width divs, so this one will be on the right hand side.
+                    currentEntry.classList.add(STRINGS.class_right_hand_side);
+                }
+            } else {
+                consecutiveHalfWidthDivs = 0;
+            }
+        }
+        settingsEntries.forEach((settingsEntry) => {
+            settingsForm.appendChild(settingsEntry);
         });
     }
 

js/strings.js

@@ -8,6 +8,8 @@ const STRINGS = (() => Object.freeze({
     class_hidden: "hidden",
     class_active: "active",
     class_description: "description",
+    class_half_width: "half-width",
+    class_right_hand_side: "right-hand-side",
     class_nocursor: "nocursor",
     class_hints_warnings_only: "hints-warnings-only",
     class_hints_none: "hints-none",