From f867537099611d522bbfb1a453ed21b49311e4f7 Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Sun, 12 Mar 2017 14:18:09 +0100 Subject: [PATCH 1/3] Convert checkbox/radio graphics to sprites --- Zatacka.css | 24 ++++++++++++++---------- index.html | 2 +- resources/kurve-icons.png | Bin 1105 -> 1187 bytes 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/Zatacka.css b/Zatacka.css index da1760b..a534fe3 100644 --- a/Zatacka.css +++ b/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 { diff --git a/index.html b/index.html index b4f78c4..7fc5267 100644 --- a/index.html +++ b/index.html @@ -80,7 +80,7 @@

Achtung, die Kurve!

- + diff --git a/resources/kurve-icons.png b/resources/kurve-icons.png index b9bd2c4bc3edb6b758baab952d2a2f09fbc85e90..9fc64c15cab4fba2c740b68fc13326078e77f954 100644 GIT binary patch delta 293 zcmV+=0owl22%`zGhy#BC1xZ9fRCwC#m0b>mAPj^%#Or#RJ@D)UB9xZ8ZlY^8_(Wi& zKl1^g#9xvrn1U|^7A&>`8p%GB1?YBRoh>0+NwX{hnyBrvt^&^JTp#EKOD6NKqGSux zl4J|hlG-S!-1ZsVbGoTI(2bMB0M{S{1lqO5=V-J8dM`y%g=ByA+?G@gs=L3s9BBV* zci7|dWGA=Wz&u1VUCf4va0zT+9AeAu(9J7=VJt8gfd>pMa>M0fH%H64Ou8T_9s<8d zNAJ>3K2We2o8bw3t{X34sKALN>9_!U(_Y#rxG&!4Rb*fe8Wpzs3CP{R!(oWRgMOBO r!-Iae-74_UJWL(I6imSsjK22(Q;c6&=h}l+00000NkvXXu0mjfyda1k delta 210 zcmZ3?d68p72Xj5cW=|K#kcwMxCLQEEY{221d*%My>u;LxI?q;fm{xjei?FTYCoVSU z#J`eqOgksIIdJYYRzDEnYI{4X=fnq|fR(R*yjlK0rONJ^PYT1VEd~>x9<)iSH0b~0 zdNFgi@t>Kqy&dwH6}O$_&4}Nk@FMp1v+^(Nm=;fO_^Ny}J@4=?N3XrVv@-(!<*zCD zes%inJzE0PPbl6!qsEZSExjeLF!T3|XY=`%H862$EPxXX7HkYH+YJ)0q`De20D-5g KpUXO@geCw@{$Ira From 28641c352ec525aefad99c554289223a24460f2f Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Sun, 12 Mar 2017 15:39:11 +0100 Subject: [PATCH 2/3] Add half-width settings (MultichoicePreference) Some settings entries contain so little text that we can fit (at least) two of them next to each other. As of this commit, this is done automatically for `MultichoicePreference`s with short labels. --- Zatacka.css | 17 +++++++++++++++++ js/GUIController.js | 32 ++++++++++++++++++++++++++++++-- js/strings.js | 2 ++ 3 files changed, 49 insertions(+), 2 deletions(-) diff --git a/Zatacka.css b/Zatacka.css index a534fe3..090c3a2 100644 --- a/Zatacka.css +++ b/Zatacka.css @@ -319,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; } diff --git a/js/GUIController.js b/js/GUIController.js index 40c8cc9..ac8130e 100644 --- a/js/GUIController.js +++ b/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); }); } diff --git a/js/strings.js b/js/strings.js index e625383..c19d8c0 100644 --- a/js/strings.js +++ b/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", From e9595e496aed191118f63a74f674fe1f2b121f89 Mon Sep 17 00:00:00 2001 From: Simon Alling Date: Sun, 12 Mar 2017 16:24:49 +0100 Subject: [PATCH 3/3] Add CNAME file --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..3fa0997 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +kurve.se