save at will (not automatically)

img/save.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#DCF4FF;" d="M512,492H0V20h403.213L512,128.787V492z"/>
+<polygon style="fill:#CCEFFF;" points="403.213,20 256,20 256,492 512,492 512,128.787 "/>
+<path style="fill:#0A4EAF;" d="M403.213,20H396v175H116V20H0v472h116V315c0-16.568,13.431-30,30-30h220c16.569,0,30,13.432,30,30
+	v177h116V128.787L403.213,20z"/>
+<g>
+	<rect x="296" y="20" style="fill:#063E8B;" width="40" height="115"/>
+	<path style="fill:#063E8B;" d="M403.213,20H396v175H256v90h110c16.569,0,30,13.432,30,30v177h116V128.787L403.213,20z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

sudoku.js

@@ -10,6 +10,7 @@ let suggestionTimer = null
 let valueToInsert = ""
 let history = []
 let accessKeyModifiers = "AccessKey+"
+let changesToSave = false
 
 function shuffle(iterable) {
     array = Array.from(iterable)
@@ -142,6 +143,7 @@ function onclick() {
 function oninput() {
     history.push({ box: this, value: this.previousValue, placeholder: this.previousPlaceholder })
     undoButton.disabled = false
+    changesToSave = true
     if (pencilRadio.checked) {
         this.value = Array.from(new Set(this.value)).sort().join("")
         this.previousValue = ""
@@ -157,17 +159,10 @@ function oninput() {
 }
 
 function refreshBox(box) {
-    saveGame()
     checkBox(box)
     refreshUI()
 }
 
-function saveGame() {
-    let saveGame = boxes.map(box => box.value || UNKNOWN).join("")
-    localStorage[location.pathname] = saveGame
-    fixGridLink.href = saveGame
-}
-
 function checkBox(box) {
     box.neighbourhood.concat([box]).forEach(neighbour => {
         searchCandidatesOf(neighbour)
@@ -200,6 +195,7 @@ function checkBox(box) {
     } else { // Errors on grid
         box.form.reportValidity()
     }
+}
 
 function refreshUI() {
     enableRadio()
@@ -316,6 +312,20 @@ function restart() {
     }
 }
 
+function save() {
+    let saveGame = boxes.map(box => box.value || UNKNOWN).join("")
+    localStorage[location.pathname] = saveGame
+    fixGridLink.href = saveGame
+    changesToSave = false
+}
+
+window.onbeforeunload = function(event) {
+    if (changesToSave) {
+        event.preventDefault()
+        event.returnValue = ""
+    }
+}
+
 function showSuggestion() {
     const easyBoxes = boxes.filter(box => box.value == "" && box.candidates.size == 1)
     if (easyBoxes.length) {

sudoku.php

@@ -101,6 +101,7 @@
                 <input type='radio' id='eraserRadio' name='tool' onclick='grid.style.cursor = "url(img/eraser.svg) 2 22, auto"'/><label for='eraserRadio' title='Effacer une case'><img src='img/eraser.svg' alt='Gomme'/></label>
                 <button type='button' class='warning' onclick='restart()' title='Recommencer'><img src='img/restart.svg' alt='Recommencer'/></button>
                 <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'><img src='img/undo.svg' alt='Annuler'/></button>
+                <button id='undoButton' type='button' onclick='save()' title='Sauvegarder' accesskey='s'><img src='img/save.svg' alt='Disquette'/></button>
             </div>
         </section>
         <section>