From 2ac980bb82709049efa433b925d7929a331c5455 Mon Sep 17 00:00:00 2001 From: adrien Date: Mon, 9 Nov 2020 12:30:14 +0100 Subject: [PATCH] use input radio and checkbox instead of buttons --- app.js | 59 ++++++++++++--------------------------- style.css | 46 ++++++++++++++++++++----------- sudoku.php | 81 +++++++++++++++++++++++++++--------------------------- 3 files changed, 88 insertions(+), 98 deletions(-) diff --git a/app.js b/app.js index 6721b3d..3199429 100644 --- a/app.js +++ b/app.js @@ -11,7 +11,6 @@ let selectedValue = "" let history = [] let accessKeyModifiers = "AccessKey+" let penStyle = "ink-pen" -let highlighting = false window.onload = function() { let rowId = 0 @@ -189,38 +188,36 @@ function onblur() { } function enableButtons() { - for (button of buttons.getElementsByTagName("button")) { - if (boxes.filter(box => box.value == "").some(box => box.candidates.has(button.textContent))) { - button.disabled = false - if (button.previousTitle) { - button.title = button.previousTitle - button.previousTitle = null + for (radio of radioValues.getElementsByTagName("input")) { + if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) { + radio.disabled = false + if (radio.previousTitle) { + radio.title = radio.previousTitle + radio.previousTitle = null } } else { - button.disabled = true - button.previousTitle = button.title - button.title = "Tous les " + button.textContent + " sont posés" - if (selectedValue == button.textContent) selectedValue = "" + radio.disabled = true + console.log(radio.disabled) + radio.previousTitle = radio.title + radio.title = "Tous les " + radio.value + " sont posés" + if (selectedValue == radio.value) selectedValue = "" } } } -function highlight(value) { - if (value == selectedValue) { +function highlight(radio) { + if (radio.value == selectedValue) { selectedValue = "" + radio.checked = false } else { - selectedValue = value - } - for (button of buttons.getElementsByTagName("button")) { - if (button.textContent == selectedValue) button.classList.add("pressed") - else button.classList.remove("pressed") + selectedValue = radio.value } highlightAndTab() boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus() } function highlightAndTab() { - if (highlighting && selectedValue) { + if (highlighterCheckbox.checked && selectedValue) { boxes.forEach(box => { if (box.value == selectedValue) { box.classList.add("same-value") @@ -300,18 +297,6 @@ function oncontextmenu(event) { return false } -function useInkPen() { - inkPenButton.classList.add("pressed") - pencilButton.classList.remove("pressed") - penStyle = "ink-pen" -} - -function usePencil() { - pencilButton.classList.add("pressed") - inkPenButton.classList.remove("pressed") - penStyle = "pencil" -} - function erase(someBoxes) { for (box of someBoxes) { box.value = "" @@ -343,14 +328,4 @@ function eraseAll() { enableButtons() highlightAndTab() } -} - -function toggleHighlighting() { - highlighting = !highlighting - if (highlighting) { - highlighterButton.classList.add("pressed") - } else { - highlighterButton.classList.remove("pressed") - } - highlightAndTab() -} +} \ No newline at end of file diff --git a/style.css b/style.css index d31fb66..0fddd66 100644 --- a/style.css +++ b/style.css @@ -14,10 +14,17 @@ section, div, footer { flex-wrap: wrap; align-items: center; row-gap: 0.5rem; - column-gap: 0.5rem; - margin: 0.8rem auto; justify-content: center; text-align: center; + column-gap: 0.3rem; +} + +section, footer { + margin: 0.8rem auto; +} + +div { + margin: 0 auto; } .grid { @@ -97,7 +104,9 @@ input::-webkit-calendar-picker-indicator { background: white; color: darkblue; } -.grid input:disabled, button:enabled { +.grid input:disabled, +button:enabled, +.tools input+label { color: white; background: #6666ff; } @@ -111,7 +120,9 @@ input::-webkit-calendar-picker-indicator { color: #ffffaa; background: #6666ff; } -.grid input.same-value:disabled, button.same-value:enabled { +.grid input.same-value:disabled, +button.same-value:enabled, +.tools input:checked+label { color: #ffffaa !important; background: #00b359 !important; } @@ -122,45 +133,51 @@ input::-webkit-calendar-picker-indicator { height: 2.5rem !important; } -.select-buttons { - column-gap: 2px; +.tools input { + display:none; } -button, input[type="color"] { +button, +.tools input+label { border: 2px outset #6666ff; border-radius: 4px; font-size: 1.3rem; padding: 4px 9px 5px 9px; margin: 0px 1px 1px 1px; } -button img { +img { width: 16px; height: 16px; } -button:enabled:hover { +button:enabled:hover, +.tools input:enabled:hover+label { border-width: 1px; border-style: outset; padding: 5px 9px 5px 10px; margin: 1px 1px 1px 2px; } -button.pressed:enabled:hover { +button.pressed:enabled:hover, +.tools input:enabled:checked:hover+label { border-width: 3px; border-style: inset; padding: 4px 6px 2px 9px; margin: 1px 1px 1px 2px; } -button.pressed { +button.pressed, +.tools input:checked+label { border: 2px inset #00b359; background: #00b359; padding: 4px 8px 4px 9px; margin: 1px 1px 0px 2px; } -button:enabled:active { +button:enabled:active, +.tools input:enabled:active+label { border-width: 4px !important; border-style: inset !important; padding: 4px 4px 0px 9px !important; margin: 0px 1px 0px 2px !important; } -button:disabled { +button:disabled, +.tools input:disabled+label { color: #666; background: darkgrey; border: 1px outset darkgrey; @@ -171,9 +188,6 @@ button.warning { background: #ff5050; border-color: #ff5050; } -input[type="color"] { - padding: 0; -} a { text-decoration: none; diff --git a/sudoku.php b/sudoku.php index ee25abd..a158511 100644 --- a/sudoku.php +++ b/sudoku.php @@ -29,9 +29,8 @@ - "/> - /thumbnail.png.php?grid=&size=200"/> + "/> + /thumbnail.png.php?grid=&size=200"/> @@ -46,58 +45,60 @@ Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.
-
- - - - +
+ - - - + - - - -
-
-
+ + + + + + + + + +
+
$value\n"; + echo " \n"; } ?>
- - - - -
- -
    -
+
+