better notes
This commit is contained in:
parent
f97758f275
commit
661a25638e
94
app.js
94
app.js
@ -20,8 +20,9 @@ window.onload = function() {
|
||||
if (!box.disabled) {
|
||||
box.onfocus = onfocus
|
||||
box.oninput = oninput
|
||||
box.oncontextmenu = oncontextmenu
|
||||
box.onblur = onblur
|
||||
}
|
||||
box.oncontextmenu = oncontextmenu
|
||||
box.rowId = rowId
|
||||
box.columnId = columnId
|
||||
box.regionId = regionId
|
||||
@ -43,12 +44,12 @@ window.onload = function() {
|
||||
highlightAndTab()
|
||||
|
||||
if (/Win/.test(navigator.platform) || /Linux/.test(navigator.platform)) accessKeyModifiers = "Alt+Maj+"
|
||||
else if (/Mac/.test(navigator.platform)) accessKeyModifiers = "⌃⌥ "
|
||||
else if (/Mac/.test(navigator.platform)) accessKeyModifiers = "⌃⌥"
|
||||
for(node of document.querySelectorAll("*[accesskey]")) {
|
||||
node.title += " [" + (node.accessKeyLabel || accessKeyModifiers + node.accessKey) + "]"
|
||||
}
|
||||
|
||||
document.body.onclick = function (event) {
|
||||
document.onclick = function (event) {
|
||||
contextMenu.style.display = "none"
|
||||
}
|
||||
suggestionTimer = setTimeout(showSuggestion, 30000)
|
||||
@ -60,31 +61,34 @@ function searchCandidatesOf(box) {
|
||||
}
|
||||
|
||||
function onfocus() {
|
||||
this.previousValue = this.value
|
||||
this.select()
|
||||
if (penStyle == "pencil" && this.value == "") {
|
||||
this.value = this.placeholder
|
||||
this.placeholder = ""
|
||||
this.classList.add("pencil")
|
||||
} else {
|
||||
this.select()
|
||||
}
|
||||
}
|
||||
|
||||
function oninput() {
|
||||
history.push({box: this, value: this.previousValue, className: this.className})
|
||||
history.push({box: this, value: this.previousValue, placeholder: this.previousPlaceholder})
|
||||
undoButton.disabled = false
|
||||
refresh(this)
|
||||
if (penStyle != "pencil") {
|
||||
refresh(this)
|
||||
}
|
||||
}
|
||||
|
||||
function undo() {
|
||||
if (history.length) {
|
||||
previousState = history.pop()
|
||||
previousState.box.value = previousState.value
|
||||
previousState.box.className = previousState.className
|
||||
previousState.box.placeholder = previousState.placeholder
|
||||
refresh(previousState.box)
|
||||
if (history.length < 1) undoButton.disabled = true
|
||||
}
|
||||
}
|
||||
|
||||
function refresh(box) {
|
||||
box.classList.remove("ink-pen", "pencil")
|
||||
if (box.value.length)
|
||||
box.classList.add(penStyle)
|
||||
|
||||
box.neighbourhood.concat([box]).forEach(neighbour => {
|
||||
searchCandidatesOf(neighbour)
|
||||
neighbour.setCustomValidity("")
|
||||
@ -128,6 +132,16 @@ function refresh(box) {
|
||||
}
|
||||
}
|
||||
|
||||
function onblur() {
|
||||
if (this.classList.contains("pencil")) {
|
||||
this.placeholder = this.value
|
||||
this.value = ""
|
||||
this.classList.remove("pencil")
|
||||
}
|
||||
this.previousValue = this.value
|
||||
this.previousPlaceholder = this.placeholder
|
||||
}
|
||||
|
||||
function enableButtons() {
|
||||
for (button of buttons.getElementsByTagName("button")) {
|
||||
if (boxes.filter(box => box.value == "").some(box => box.candidates.has(button.textContent))) {
|
||||
@ -209,28 +223,26 @@ function oncontextmenu(event) {
|
||||
event.preventDefault()
|
||||
while (contextMenu.firstChild) contextMenu.firstChild.remove()
|
||||
const box = event.target
|
||||
if (box.value == "") {
|
||||
if (box.candidates.size) {
|
||||
candidatesArray = Array.from(box.candidates).sort().forEach(candidate => {
|
||||
li = document.createElement("li")
|
||||
li.innerText = candidate
|
||||
li.onclick = function (event) {
|
||||
contextMenu.style.display = "none"
|
||||
box.value = event.target.innerText
|
||||
refresh(box)
|
||||
}
|
||||
contextMenu.appendChild(li)
|
||||
})
|
||||
} else {
|
||||
if (box.candidates.size) {
|
||||
candidatesArray = Array.from(box.candidates).sort().forEach(candidate => {
|
||||
li = document.createElement("li")
|
||||
li.innerText = "Aucun chiffre possible"
|
||||
li.classList.add("error")
|
||||
li.innerText = candidate
|
||||
li.onclick = function (event) {
|
||||
contextMenu.style.display = "none"
|
||||
box.value = event.target.innerText
|
||||
oninput.apply(box)
|
||||
}
|
||||
contextMenu.appendChild(li)
|
||||
}
|
||||
contextMenu.style.left = `${event.pageX}px`
|
||||
contextMenu.style.top = `${event.pageY}px`
|
||||
contextMenu.style.display = "block"
|
||||
})
|
||||
} else {
|
||||
li = document.createElement("li")
|
||||
li.innerText = "Aucun chiffre possible"
|
||||
li.classList.add("error")
|
||||
contextMenu.appendChild(li)
|
||||
}
|
||||
contextMenu.style.left = `${event.pageX}px`
|
||||
contextMenu.style.top = `${event.pageY}px`
|
||||
contextMenu.style.display = "block"
|
||||
return false
|
||||
}
|
||||
|
||||
@ -258,11 +270,23 @@ function erase(someBoxes) {
|
||||
}
|
||||
|
||||
function erasePencil() {
|
||||
if (confirm("Effacer les chiffres écrits au crayon ?"))
|
||||
erase(grid.getElementsByClassName("pencil"))
|
||||
if (confirm("Effacer les chiffres écrits au crayon ?")) {
|
||||
boxes.filter(box => !box.disabled).forEach(box => {
|
||||
box.placeholder = ""
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function eraseAll() {
|
||||
if (confirm("Effacer tous les chiffres (écrits au crayon et au stylo) ?"))
|
||||
erase(boxes.filter(box => !box.disabled && box.value.length))
|
||||
if (confirm("Effacer tous les chiffres écrits au crayon et au stylo ?")) {
|
||||
boxes.filter(box => !box.disabled).forEach(box => {
|
||||
box.value = ""
|
||||
box.placeholder = ""
|
||||
box.setCustomValidity("")
|
||||
box.required = false
|
||||
})
|
||||
boxes.forEach(searchCandidatesOf)
|
||||
enableButtons()
|
||||
highlightAndTab()
|
||||
}
|
||||
}
|
||||
|
||||
12
game.php
12
game.php
@ -19,6 +19,9 @@
|
||||
<header>
|
||||
<h1>Sudoku</h1>
|
||||
</header>
|
||||
<section>
|
||||
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>
|
||||
<form id='sudokuForm'>
|
||||
<div>
|
||||
<table id='grid' class='grid'>
|
||||
@ -33,14 +36,12 @@
|
||||
if ($value == UNKNOWN) {
|
||||
$value = "";
|
||||
$disabled = "";
|
||||
$class = "ink-pen";
|
||||
} else {
|
||||
$disabled = "disabled";
|
||||
$class = "";
|
||||
}
|
||||
?>
|
||||
<td>
|
||||
<input type='number' min='1' max='9' step='1' value='<?=$value?>' title='Valeurs possibles [Clic-droit]' class="<?=$class?>" <?=$disabled?>/>
|
||||
<input type='number' min='1' max='9' step='1' value='<?=$value?>' title='Valeurs possibles [Clic-droit]' <?=$disabled?>/>
|
||||
</td>
|
||||
<?php
|
||||
}
|
||||
@ -69,7 +70,7 @@
|
||||
<button type='button' onclick='erasePencil()' title='Effacer le crayon'>
|
||||
<img src="img/pencil-eraser.png" alt="Gomme blanche" width=16 height=16/>
|
||||
</button>
|
||||
<button type='button' onclick='eraseAll()' title='Effacer tout'>
|
||||
<button class="warning" type='button' onclick='eraseAll()' title='Effacer tout'>
|
||||
<img src="img/ink-eraser.png" alt="Gomme bleue" width=16 height=16/>
|
||||
</button>
|
||||
<button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>
|
||||
@ -78,9 +79,6 @@
|
||||
<!--<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/> -->
|
||||
</div>
|
||||
</form>
|
||||
<section>
|
||||
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>
|
||||
<ul id="contextMenu" class="context-menu">
|
||||
</ul>
|
||||
<footer>
|
||||
|
||||
52
style.css
52
style.css
@ -1,19 +1,21 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
width: min-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 0.5em;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
section, div, footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
row-gap: 0.5em;
|
||||
column-gap: 0.5em;
|
||||
margin: 0.8em auto;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
margin: 0.8rem auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@ -72,9 +74,9 @@ section, div, footer {
|
||||
}
|
||||
|
||||
.grid input {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
font-size: 1.5em;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
font-size: 1.5rem;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
@ -91,6 +93,7 @@ input::-webkit-calendar-picker-indicator {
|
||||
}
|
||||
.grid input:enabled {
|
||||
background: white;
|
||||
color: darkblue;
|
||||
}
|
||||
.grid input:disabled, button:enabled {
|
||||
color: white;
|
||||
@ -110,17 +113,11 @@ input::-webkit-calendar-picker-indicator {
|
||||
color: #ffff99 !important;
|
||||
background: #00cc66 !important;
|
||||
}
|
||||
input::placeholder {
|
||||
color: #888;
|
||||
}
|
||||
.grid input.ink-pen {
|
||||
color: darkblue;
|
||||
}
|
||||
.grid input.pencil {
|
||||
color: #888;
|
||||
font-size: 0.8em;
|
||||
width: 2.8em;
|
||||
height: 2.8em;
|
||||
.grid input.pencil, input::placeholder {
|
||||
color: #888 !important;
|
||||
font-size: 1rem !important;
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
}
|
||||
|
||||
.highlight-buttons {
|
||||
@ -129,7 +126,7 @@ input::placeholder {
|
||||
button, input[type="color"] {
|
||||
border: 2px outset #6666ff;
|
||||
border-radius: 4px;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.3rem;
|
||||
padding: 4px 9px 5px 9px;
|
||||
margin: 0px 1px 1px 1px;
|
||||
}
|
||||
@ -139,7 +136,6 @@ button:enabled:hover {
|
||||
padding: 5px 9px 5px 10px;
|
||||
margin: 1px 1px 1px 2px;
|
||||
}
|
||||
button:enabled:active,
|
||||
button.pressed:enabled:hover {
|
||||
border-width: 3px;
|
||||
border-style: inset;
|
||||
@ -152,11 +148,11 @@ button.pressed {
|
||||
padding: 4px 8px 4px 9px;
|
||||
margin: 1px 1px 0px 2px;
|
||||
}
|
||||
button.pressed:enabled:active {
|
||||
border-width: 4px;
|
||||
border-style: inset;
|
||||
padding: 4px 4px 0px 9px;
|
||||
margin: 0px 1px 0px 2px;
|
||||
button:enabled:active {
|
||||
border-width: 4px !important;
|
||||
border-style: inset !important;
|
||||
padding: 4px 4px 0px 9px !important;
|
||||
margin: 0px 1px 0px 2px !important;
|
||||
}
|
||||
button:disabled {
|
||||
color: #666;
|
||||
@ -165,6 +161,10 @@ button:disabled {
|
||||
padding: 5px 10px 6px 10px;
|
||||
margin: 0px 1px 1px 1px;
|
||||
}
|
||||
button.warning {
|
||||
background: #ff5050;
|
||||
border-color: #ff5050;
|
||||
}
|
||||
input[type="color"] {
|
||||
padding: 0;
|
||||
}
|
||||
@ -196,7 +196,7 @@ a {
|
||||
list-style-type: none;
|
||||
transition: all .3s ease;
|
||||
user-select: none;
|
||||
font-size: 0.8em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.context-menu li:hover {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user