adrien/Sudoku
adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use input radio and checkbox instead of buttons

Browse Source
This commit is contained in:
Adrien MALINGREY 2020-11-09 12:30:14 +01:00
parent ccb8e91728
commit 2ac980bb82
3 changed files with 88 additions and 98 deletions

59
app.js

@ -11,7 +11,6 @@ let selectedValue = ""
let history = [] let history = []
let accessKeyModifiers = "AccessKey+" let accessKeyModifiers = "AccessKey+"
let penStyle = "ink-pen" let penStyle = "ink-pen"
let highlighting = false
window.onload = function() { window.onload = function() {
let rowId = 0 let rowId = 0
@ -189,38 +188,36 @@ function onblur() {
} }
function enableButtons() { function enableButtons() {
for (button of buttons.getElementsByTagName("button")) { for (radio of radioValues.getElementsByTagName("input")) {
if (boxes.filter(box => box.value == "").some(box => box.candidates.has(button.textContent))) { if (boxes.filter(box => box.value == "").some(box => box.candidates.has(radio.value))) {
button.disabled = false radio.disabled = false
if (button.previousTitle) { if (radio.previousTitle) {
button.title = button.previousTitle radio.title = radio.previousTitle
button.previousTitle = null radio.previousTitle = null
} }
} else { } else {
button.disabled = true radio.disabled = true
button.previousTitle = button.title console.log(radio.disabled)
button.title = "Tous les " + button.textContent + " sont posés" radio.previousTitle = radio.title
if (selectedValue == button.textContent) selectedValue = "" radio.title = "Tous les " + radio.value + " sont posés"
if (selectedValue == radio.value) selectedValue = ""
} }
} }
} }
function highlight(value) { function highlight(radio) {
if (value == selectedValue) { if (radio.value == selectedValue) {
selectedValue = "" selectedValue = ""
radio.checked = false
} else { } else {
selectedValue = value selectedValue = radio.value
}
for (button of buttons.getElementsByTagName("button")) {
if (button.textContent == selectedValue) button.classList.add("pressed")
else button.classList.remove("pressed")
} }
highlightAndTab() highlightAndTab()
boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus() boxes.filter(box => box.value == "" && box.tabIndex == 0)[0].focus()
} }
function highlightAndTab() { function highlightAndTab() {
if (highlighting && selectedValue) { if (highlighterCheckbox.checked && selectedValue) {
boxes.forEach(box => { boxes.forEach(box => {
if (box.value == selectedValue) { if (box.value == selectedValue) {
box.classList.add("same-value") box.classList.add("same-value")
@ -300,18 +297,6 @@ function oncontextmenu(event) {
return false 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) { function erase(someBoxes) {
for (box of someBoxes) { for (box of someBoxes) {
box.value = "" box.value = ""
@ -343,14 +328,4 @@ function eraseAll() {
enableButtons() enableButtons()
highlightAndTab() highlightAndTab()
} }
} }
function toggleHighlighting() {
highlighting = !highlighting
if (highlighting) {
highlighterButton.classList.add("pressed")
} else {
highlighterButton.classList.remove("pressed")
}
highlightAndTab()
}

46
style.css

@ -14,10 +14,17 @@ section, div, footer {
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
row-gap: 0.5rem; row-gap: 0.5rem;
column-gap: 0.5rem;
margin: 0.8rem auto;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
column-gap: 0.3rem;
}
section, footer {
margin: 0.8rem auto;
}
div {
margin: 0 auto;
} }
.grid { .grid {
@ -97,7 +104,9 @@ input::-webkit-calendar-picker-indicator {
background: white; background: white;
color: darkblue; color: darkblue;
} }
.grid input:disabled, button:enabled { .grid input:disabled,
button:enabled,
.tools input+label {
color: white; color: white;
background: #6666ff; background: #6666ff;
} }
@ -111,7 +120,9 @@ input::-webkit-calendar-picker-indicator {
color: #ffffaa; color: #ffffaa;
background: #6666ff; 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; color: #ffffaa !important;
background: #00b359 !important; background: #00b359 !important;
} }
@ -122,45 +133,51 @@ input::-webkit-calendar-picker-indicator {
height: 2.5rem !important; height: 2.5rem !important;
} }
.select-buttons { .tools input {
column-gap: 2px; display:none;
} }
button, input[type="color"] { button,
.tools input+label {
border: 2px outset #6666ff; border: 2px outset #6666ff;
border-radius: 4px; border-radius: 4px;
font-size: 1.3rem; font-size: 1.3rem;
padding: 4px 9px 5px 9px; padding: 4px 9px 5px 9px;
margin: 0px 1px 1px 1px; margin: 0px 1px 1px 1px;
} }
button img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
button:enabled:hover { button:enabled:hover,
.tools input:enabled:hover+label {
border-width: 1px; border-width: 1px;
border-style: outset; border-style: outset;
padding: 5px 9px 5px 10px; padding: 5px 9px 5px 10px;
margin: 1px 1px 1px 2px; margin: 1px 1px 1px 2px;
} }
button.pressed:enabled:hover { button.pressed:enabled:hover,
.tools input:enabled:checked:hover+label {
border-width: 3px; border-width: 3px;
border-style: inset; border-style: inset;
padding: 4px 6px 2px 9px; padding: 4px 6px 2px 9px;
margin: 1px 1px 1px 2px; margin: 1px 1px 1px 2px;
} }
button.pressed { button.pressed,
.tools input:checked+label {
border: 2px inset #00b359; border: 2px inset #00b359;
background: #00b359; background: #00b359;
padding: 4px 8px 4px 9px; padding: 4px 8px 4px 9px;
margin: 1px 1px 0px 2px; margin: 1px 1px 0px 2px;
} }
button:enabled:active { button:enabled:active,
.tools input:enabled:active+label {
border-width: 4px !important; border-width: 4px !important;
border-style: inset !important; border-style: inset !important;
padding: 4px 4px 0px 9px !important; padding: 4px 4px 0px 9px !important;
margin: 0px 1px 0px 2px !important; margin: 0px 1px 0px 2px !important;
} }
button:disabled { button:disabled,
.tools input:disabled+label {
color: #666; color: #666;
background: darkgrey; background: darkgrey;
border: 1px outset darkgrey; border: 1px outset darkgrey;
@ -171,9 +188,6 @@ button.warning {
background: #ff5050; background: #ff5050;
border-color: #ff5050; border-color: #ff5050;
} }
input[type="color"] {
padding: 0;
}
a { a {
text-decoration: none; text-decoration: none;

81
sudoku.php

@ -29,9 +29,8 @@
<link rel="manifest" href="manifest.json.php?grid=<?=$gridStr?>"> <link rel="manifest" href="manifest.json.php?grid=<?=$gridStr?>">
<meta property="og:title" content="Sudoku"/> <meta property="og:title" content="Sudoku"/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<meta property="og:url" content="<?=$_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . $_SERVER["DOCUMENT_URI"]; <meta property="og:url" content="<?=$_SERVER["REQUEST_SCHEME"]."://" . $_SERVER["HTTP_HOST"].$_SERVER["DOCUMENT_URI"]?>"/>
?>"/> <meta property="og:image" content="<?=$_SERVER["REQUEST_SCHEME"]."://" . $_SERVER["HTTP_HOST"].dirname($_SERVER["DOCUMENT_URI"])?>/thumbnail.png.php?grid=<?=$gridStr?>&size=200"/>
<meta property="og:image" content="<?=$_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"])?>/thumbnail.png.php?grid=<?=$gridStr?>&size=200"/>
<meta property="og:image:width" content="200"/> <meta property="og:image:width" content="200"/>
<meta property="og:image:height" content="200"/> <meta property="og:image:height" content="200"/>
<meta property="og:description" content="Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9."/> <meta property="og:description" content="Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9."/>
@ -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. Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.
</section> </section>
<form id='sudokuForm'> <form id='sudokuForm'>
<div> <table id='grid' class='grid'>
<table id='grid' class='grid'> <tbody>
<tbody>
<?php for ($row = 0; $row < 9; $row++) { ?>
<tr>
<?php <?php
for ($column = 0; $column < 9; $column++) { for ($row = 0; $row < 9; $row++) {
$value = $gridStr[9*$row+$column];
if ($value == UNKNOWN) {
?> ?>
<td><input type='number' min='1' max='9' step='1' value='' title='Valeurs possibles [Clic-droit]'/></td> <tr>
<?php } else { ?>
<td><input type='number' min='1' max='9' step='1' value='<?=$value?>' disabled/></td>
<?php <?php
} for ($column = 0; $column < 9; $column++) {
} $value = $gridStr[9*$row+$column];
if ($value == UNKNOWN) {
?> ?>
</tr> <td><input type='number' min='1' max='9' step='1' value='' title='Valeurs possibles [Clic-droit]'/></td>
<?php } ?> <?php
</tbody> } else {
</table> ?>
</div> <td><input type='number' min='1' max='9' step='1' value='<?=$value?>' disabled/></td>
<div id='buttons' class='select-buttons'> <?php
}
}
?>
</tr>
<?php
}
?>
</tbody>
</table>
</form>
<section class='tools'>
<div id='radioValues' class='radioValues'>
<?php <?php
for($value=1; $value<=9; $value++) { for($value=1; $value<=9; $value++) {
echo " <button type='button' onclick='highlight(\"$value\")' title='Écrire un $value' accesskey='$value'>$value</button>\n"; echo " <input type='radio' id='radioValue$value' value='$value' name='radioValues' onclick='highlight(this)' accesskey='$value'/><label for='radioValue$value' title='Écrire un $value'>$value</label>\n";
} }
?> ?>
</div> </div>
<div> <div>
<button id='highlighterButton' type='button' onclick='toggleHighlighting()' title='Surligner les chiffres sélectionnés'> <input id='highlighterCheckbox' type="checkbox" onclick='highlightAndTab()'/>
<img src="img/highlighter.svg" alt='Surligneur'/> <label for='highlighterCheckbox' title='Surligner les chiffres sélectionnés'><img src='img/highlighter.svg' alt='Surligneur'></label>
<input type='radio' id='inkPenRadio' name='pen' onclick='penStyle = "ink-pen"' checked/>
<label for='inkPenRadio' title='Écrire au stylo indélébile'><img src='img/ink-pen.svg' alt='Stylo'/></label>
<input type='radio' id='pencilRadio' name='pen' onclick='penStyle = "pencil"'/>
<label for='pencilRadio' title='Écrire au crayon'><img src='img/pencil.svg' alt='Crayon'/></label>
<button type='button' onclick='erasePencil()' title='Gommer le crayon'>
<img src='img/pencil-eraser.svg' alt='Gomme blanche'/>
</button> </button>
<button id='inkPenButton' type='button' onclick='useInkPen()' title='Écrire au stylo' class='pressed'> <button class='warning' type='button' onclick='eraseAll()' title='Gommer tout'>
<img src="img/ink-pen.svg" alt='Stylo'/> <img src='img/ink-eraser.svg' alt='Gomme bleue'/>
</button>
<button id='pencilButton' type='button' onclick='usePencil()' title='Écrire au crayon'>
<img src="img/pencil.svg" alt='Crayon'/>
</button>
<button type='button' onclick='erasePencil()' title='Effacer le crayon'>
<img src="img/pencil-eraser.svg" alt="Gomme blanche"/>
</button>
<button class="warning" type='button' onclick='eraseAll()' title='Effacer tout'>
<img src="img/ink-eraser.svg" alt="Gomme bleue"/>
</button> </button>
<button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'> <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>
<img src="img/undo.svg" alt="Annuler"/> <img src='img/undo.svg' alt='Annuler'/>
</button> </button>
</div> </div>
</form> </section>
<ul id="contextMenu" class="context-menu"> <ul id="contextMenu" class="context-menu"></ul>
</ul>
<footer> <footer>
<a href=''>Lien vers cette grille</a><br/> <a href=''>Lien vers cette grille</a><br/>
<a href='.................................................................................'>Grille vierge</a><br/> <a href='.................................................................................'>Grille vierge</a><br/>