small changes

style.css

@@ -25,6 +25,7 @@ div {
     margin: 0.5rem auto;
 }
 
+
 .grid {
     border-spacing: 0;
     border: 1px solid black;
@@ -32,54 +33,70 @@ div {
     margin: auto;
     cursor: url(img/ink-pen.svg) 2 22, text;
 }
+
 .grid td, tr {
     padding: 0;
 }
+
 .grid tr:first-child td:first-child {
     border-top-left-radius: 5px;
 }
+
 .grid tr:first-child td:first-child input {
     border-top-left-radius: 4px;
 }
+
 .grid tr:first-child td:last-child {
     border-top-right-radius: 5px;
 }
+
 .grid tr:first-child td:last-child input {
     border-top-right-radius: 4px;
 }
+
 .grid tr:last-child td:first-child {
     border-bottom-left-radius: 5px;
 }
+
 .grid tr:last-child td:first-child > input {
     border-bottom-left-radius: 4px;
 }
+
 .grid tr:last-child td:last-child {
     border-bottom-right-radius: 5px;
 }
+
 .grid tr:last-child td:last-child input {
     border-bottom-right-radius: 4px;
 }
+
 .grid tr:nth-child(3n+1) td {
     border-top: 1px solid black;
 }
+
 .grid tr:nth-child(3n+2) td {
     border-top: 1px solid grey;
     border-bottom: 1px solid grey;
 }
+
 .grid tr:nth-child(3n) td {
     border-bottom: 1px solid black;
 }
+
 .grid td:nth-child(3n+1) {
     border-left: 1px solid black;
 }
+
 .grid td:nth-child(3n+2) {
     border-left: 1px solid grey;
     border-right: 1px solid grey;
 }
+
 .grid td:nth-child(3n+3) {
     border-right: 1px solid black;
 }
 
+
 .grid input {
     width: 2.5rem;
     height: 2.5rem;
@@ -91,51 +108,62 @@ div {
     transition: background 0.5s;
     -moz-appearance: textfield;
 }
+
 input[type="number"]::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
 input[type="number"]::-webkit-calendar-picker-indicator {
     display: none;
 }
+
 .grid input:enabled {
     background: white;
     color: darkblue;
     cursor: inherit;
 }
+
 .grid input.pencil,
 .grid input::placeholder {
     color: #666 !important;
     font-size: 0.9rem !important;
 }
+
 .grid input:disabled {
     color: white !important;
     background: #6666ff !important;
     cursor: not-allowed !important;
 }
+
 .grid input.forbidden:enabled {
     background: #ffffaa !important;
     cursor: not-allowed;
 }
+
 .grid input.same-value:enabled {
     background: #ffff33;
     cursor: not-allowed !important;
 }
+
 .grid input.forbidden:disabled {
     color: #ffffaa;
     background: #6666ff;
 }
+
 .grid input.same-value:disabled,
 .tools button.same-value:enabled,
 .tools input:enabled:checked + label {
     color: #ffffaa !important;
     background: #00b359 !important;
 }
+
 .grid input.one-candidate {
     cursor: help !important;
 }
 
+
 .tools button,
 .tools input + label {
     color: white;
@@ -149,17 +177,20 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     margin:  0px 1px 1px 1px;
     cursor: pointer;
 }
+
 .tools img {
     display: block;
     width: 24px;
     height: 24px;
 }
+
 .tools input {
     position: fixed;
     opacity: 0;
     width: 0;
     pointer-events: none;
 }
+
 .tools button:enabled:hover,
 .tools button:enabled:focus,
 .tools input:enabled:hover + label,
@@ -169,6 +200,7 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     padding: 5px 5px 5px 6px;
     margin:  1px 1px 1px 2px;
 }
+
 .tools input:enabled:checked:hover + label,
 .tools input:enabled:checked:focus + label {
     border-width: 3px;
@@ -176,6 +208,7 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     padding: 4px 2px 2px 5px;
     margin:  1px 1px 1px 2px;
 }
+
 .tools input:enabled:checked + label {
     text-shadow: -1px -1px #005f2f;
     border: 2px inset #00b359;
@@ -183,6 +216,7 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     padding: 4px 4px 4px 5px;
     margin:  1px 1px 0px 2px;
 }
+
 .tools button:enabled:active,
 .tools input:enabled:active + label {
     border-width: 4px !important;
@@ -190,6 +224,7 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     padding: 4px 0px 0px 5px !important;
     margin:  0px 1px 0px 2px !important;
 }
+
 .tools button:disabled,
 .tools input:disabled + label {
     text-shadow: -1px -1px #555;
@@ -200,11 +235,13 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     margin:  0px 1px 1px 1px;
     cursor: not-allowed;
 }
+
 .tools button.warning {
     background: #ff5050;
     border-color: #ff5050;
 }
 
+
 .context-menu {
     display: none;
     z-index: 1000;
@@ -221,6 +258,7 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     padding: 0;
     margin: 0;
 }
+
 .context-menu li {
     padding: 6px 10px;
     cursor: default;
@@ -228,21 +266,27 @@ input[type="number"]::-webkit-calendar-picker-indicator {
     transition: all .3s ease;
     font-size: 1rem;
 }
+
 .context-menu li:hover {
     background-color: #DEF;
 }
+
 .context-menu li.error {
     color: #888
 }
+
 .context-menu li.error:hover {
     background-color: #EEE;
 }
 
+
 a {
     text-decoration: none;
 }
 
+
 .credits {
     font-size: 0.8rem;
     margin: 0;
 }
+

sudoku.js

@@ -168,6 +168,39 @@ function saveGame() {
     fixGridLink.href = saveGame
 }
 
+function checkBox(box) {
+    box.neighbourhood.concat([box]).forEach(neighbour => {
+        searchCandidatesOf(neighbour)
+        neighbour.setCustomValidity("")
+    })
+
+    for (neighbour1 of box.neighbourhood) {
+        if (neighbour1.value) {
+            for (area of [
+                { name: "région", neighbours: regions[neighbour1.regionId] },
+                { name: "ligne", neighbours: rows[neighbour1.rowId] },
+                { name: "colonne", neighbours: columns[neighbour1.columnId] },
+            ])
+                for (neighbour2 of area.neighbours)
+                    if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
+                        for (neighbour of [neighbour1, neighbour2]) {
+                            neighbour.setCustomValidity(`Il y a un autre ${neighbour.value} dans cette ${area.name}.`)
+                        }
+                    }
+        } else {
+            if (neighbour1.candidates.size == 0) {
+                neighbour1.setCustomValidity("Aucun chiffre possible !")
+            }
+        }
+    }
+
+    if (box.form.checkValidity()) { // Correct grid
+        if (boxes.filter(box => box.value == "").length == 0)
+            setTimeout(() => alert(`Bravo ! Vous avez résolu la grille.`), 500)
+    } else { // Errors on grid
+        box.form.reportValidity()
+    }
+
 function refreshUI() {
     enableRadio()
     highlight()
@@ -234,40 +267,6 @@ function showEasyBoxes() {
     })
 }
 
-function checkBox(box) {
-    box.neighbourhood.concat([box]).forEach(neighbour => {
-        searchCandidatesOf(neighbour)
-        neighbour.setCustomValidity("")
-    })
-
-    for (neighbour1 of box.neighbourhood) {
-        if (neighbour1.value) {
-            for (area of [
-                { name: "région", neighbours: regions[neighbour1.regionId] },
-                { name: "ligne", neighbours: rows[neighbour1.rowId] },
-                { name: "colonne", neighbours: columns[neighbour1.columnId] },
-            ])
-                for (neighbour2 of area.neighbours)
-                    if (neighbour2 != neighbour1 && neighbour2.value == neighbour1.value) {
-                        for (neighbour of [neighbour1, neighbour2]) {
-                            neighbour.setCustomValidity(`Il y a un autre ${neighbour.value} dans cette ${area.name}.`)
-                        }
-                    }
-        } else {
-            if (neighbour1.candidates.size == 0) {
-                neighbour1.setCustomValidity("Aucun chiffre possible !")
-            }
-        }
-    }
-
-    if (box.form.checkValidity()) { // Correct grid
-        if (boxes.filter(box => box.value == "").length == 0)
-            setTimeout(() => alert(`Bravo ! Vous avez résolu la grille.`), 500)
-    } else { // Errors on grid
-        box.form.reportValidity()
-    }
-}
-
 function onblur() {
     if (this.classList.contains("pencil")) {
         this.placeholder = this.value

thumbnail.php

@@ -6,7 +6,10 @@
     else
         $currentGrid = ".528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...";
     header ("Content-type: image/png");
+    if (isset($_GET['size']))
         $size = (int) $_GET['size'];
+    else
+        $size = 196;
 
     $thumbnail = imagecreate($size, $size);
     $transparent = imagecolorallocate($thumbnail, 1, 1, 1);