generate favicon

app.js

@@ -34,6 +34,14 @@ window.onload = function() {
         }
         rowId++
     }
+    
+    let savedGame = localStorage[location.href]
+    if (savedGame) {
+        boxes.forEach((box, i) => {
+            if (!box.disabled && savedGame[i] != '.') box.value = savedGame[i]
+        })
+    }
+    
     boxes.forEach(box => {
         box.neighbourhood = new Set(rows[box.rowId].concat(columns[box.columnId]).concat(regions[box.regionId]))
         box.neighbourhood.delete(box)
@@ -59,8 +67,18 @@ window.onload = function() {
 function searchCandidatesOf(box) {
     box.candidates = new Set(VALUES)
     box.neighbourhood.forEach(neighbour => box.candidates.delete(neighbour.value))
-    if (!box.disabled)
+    if (!box.disabled) {
-        box.title = box.candidates.size + (box.candidates.size <= 1 ? " possibilité [Clic-droit]" : " possibilités [Clic-droit]")
+        switch (box.candidates.size) {
+            case 0:
+                box.title = "Aucune possibilité !"
+            break
+            case 1:
+                box.title = "1 possibilité [Clic-droit]"
+            break
+            default:
+                box.title = box.candidates.size + " possibilités [Clic-droit]"
+        }
+    }
 }
 
 function onfocus() {
@@ -74,7 +92,7 @@ function onfocus() {
 }
 
 function oninput() {
-    history.push({box: this, value: this.previousValue, placeholder: this.previousPlaceholder})
+    history.push({box: this, value: this.previousValue || "", placeholder: this.previousPlaceholder || ""})
     undoButton.disabled = false
     if (penStyle != "pencil") {
         refresh(this)
@@ -92,6 +110,8 @@ function undo() {
 }
 
 function refresh(box) {
+    localStorage[location.href] = boxes.map(box => box.value || ".").join("")
+    
     box.neighbourhood.concat([box]).forEach(neighbour => {
         searchCandidatesOf(neighbour)
         neighbour.setCustomValidity("")
@@ -239,7 +259,7 @@ function oncontextmenu(event) {
         })
     } else {
         li = document.createElement("li")
-        li.innerText = "Aucun chiffre possible"
+        li.innerText = "Aucune possibilité !"
         li.classList.add("error")
         contextMenu.appendChild(li)
     }

favicon.php

@@ -1,61 +0,0 @@
-<?php
-    header ("Content-type: image/png");
-    const UNKNOWN = ".";
-    $gridStr = strip_tags($_GET['grid']);
-    $size = (int) $_GET['size'];
-    $icon = imagecreate($size, $size);
-    $transparent = imagecolorallocate($icon, 1, 1, 1);
-    imagecolortransparent($icon, $transparent);
-    $gridBorder = imagecolorallocate($icon, 0, 0, 0);
-    $known = imagecolorallocate($icon, 102, 102, 255);
-    $unknown = imagecolorallocate($icon, 255, 255, 255);
-    
-    if ($size == 16) {
-        ImageLine($icon,  2,  1, 12,  1, $gridBorder);
-        ImageLine($icon,  2,  5, 12,  5, $gridBorder);
-        ImageLine($icon,  2,  9, 12,  9, $gridBorder);
-        ImageLine($icon,  2, 13, 12, 13, $gridBorder);
-        ImageLine($icon,  1,  2,  1, 12, $gridBorder);
-        ImageLine($icon,  5,  2,  5, 12, $gridBorder);
-        ImageLine($icon,  9,  2,  9, 12, $gridBorder);
-        ImageLine($icon, 13,  2, 13, 12, $gridBorder);
-        $x = 1;
-        $y = 0;
-        foreach(str_split($gridStr) as $i => $value) {
-            $x++;
-            if ($i % 3 == 0) $x++;
-            if ($i % 9 == 0) {
-                $y++;
-                $x = 2;
-            }
-            if ($i % 27 == 0) $y++;
-            if ($value == UNKNOWN) $pixelColor = $unknown;
-            else $pixelColor = $known;
-            ImageSetPixel($icon, $x, $y, $pixelColor);
-        }
-    } else {
-        $boxSize = floor(($size-5) / 9);
-        $start = 1;
-        $end = 9*$boxSize + 2;
-        for ($y=0; $y < $size; $y += 3*$boxSize + 1)
-            ImageLine($icon,  $start,  $y, $end,  $y, $gridBorder);
-        for ($x=0; $x < $size; $x += 3*$boxSize +1)
-            ImageLine($icon,  $x,  $start,  $x, $end, $gridBorder);
-        $x = 0;
-        $y = 0;
-        $boxSizeMinusOne = $boxSize - 1;
-        foreach(str_split($gridStr) as $i => $value) {
-            if ($i % 3 == 0) $x++;
-            if ($i % 27 == 0) $y++;
-            if ($value == UNKNOWN) $color = $unknown;
-            else $color = $known;
-            imagefilledrectangle($icon, $x, $y, $x+$boxSizeMinusOne, $y+$boxSizeMinusOne, $color);
-            $x += $boxSize;
-            if ($i % 9 == 8) {
-                $y += $boxSize;
-                $x = 0;
-            }
-        }
-    }
-    imagepng($icon);
-?>

nginx-example.conf

@@ -19,5 +19,5 @@ location @sudoku {
     include fastcgi_params;
     fastcgi_param REMOTE_USER $remote_user;
     fastcgi_param PATH_INFO $fastcgi_path_info;
-    fastcgi_param SCRIPT_FILENAME sudoku/game.php;
+    fastcgi_param SCRIPT_FILENAME sudoku/sudoku.php;
 }

style.css

@@ -78,6 +78,7 @@ section, div, footer {
     height: 2.5rem;
     font-size: 1.5rem;
     border: 0;
+    border-radius: 0;
     padding: 0;
     text-align: center;
     transition: background 0.5s;

sudoku.php

@@ -6,15 +6,36 @@
     if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
 ?>
 <!DOCTYPE html>
-<html lang='fr'>
+<html lang='fr' prefix="og: https://ogp.me/ns#">
     <head>
         <meta charset='utf-8' />
         <meta name='viewport' content='width=device-width' />
         <title>Sudoku</title>
         <link rel='stylesheet' type='text/css' href='style.css' />
         <script src='app.js'></script>
-        <link rel="icon" type="image/png" href="favicon.php?size=16&grid=<?=$gridStr?>" sizes="16x16">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=57"  sizes="57x57">
-        <link rel="icon" type="image/png" href="favicon.php?size=32&grid=<?=$gridStr?>" sizes="32x32">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=114" sizes="114x114">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=72"  sizes="72x72">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=144" sizes="144x144">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=60"  sizes="60x60">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=120" sizes="120x120">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=76"  sizes="76x76">
+        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=152" sizes="152x152">
+        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=196" sizes="196x196">
+        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=160" sizes="160x160">
+        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=96"  sizes="96x96">
+        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=16"  sizes="16x16">
+        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=32"  sizes="32x32">
+        <meta property="og:title" content="Sudoku"/>
+        <meta property="og:type" content="website"/>
+        <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.php?grid=<?=$gridStr?>&size=200"/>
+        <meta property="og:image:width" 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:locale" content="fr_FR"/>
+		<meta property="og:site_name" content="<?=$_SERVER["HTTP_HOST"]?>"/>
     </head>
     <body>
         <header>
@@ -94,12 +115,12 @@
 </html>
 <?php
     } else {
-    	$grid = new Grid();
+        $grid = new Grid();
-    	$grid->generate();
+        $grid->generate();
 
         header("HTTP/1.0 400 Bad Request", true, 400);
 
-    	$urlDir = $_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"]);
+        $urlDir = $_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"]);
         $urlExample = $urlDir . "/" . $grid->toString();
 ?>
 <!DOCTYPE html>

test.php

@@ -0,0 +1,3 @@
+<?php
+    echo $_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . $_SERVER["DOCUMENT_URI"];
+?>

thumbnail.php

@@ -0,0 +1,112 @@
+<?php
+    header ("Content-type: image/png");
+    const UNKNOWN = ".";
+    $gridStr = strip_tags($_GET['grid']);
+    $size = (int) $_GET['size'];
+    $thumbnail = imagecreate($size, $size);
+    $transparent = imagecolorallocate($thumbnail, 1, 1, 1);
+    imagecolortransparent($thumbnail, $transparent);
+    $black = imagecolorallocate($thumbnail, 0, 0, 0);
+    $grey = imagecolorallocate($thumbnail, 128, 128, 128);
+    $blue = imagecolorallocate($thumbnail, 102, 102, 255);
+    $white = imagecolorallocate($thumbnail, 255, 255, 255);
+    
+    if ($size <= 36) {
+        $boxSize = floor(($size-4) / 9);
+        $gridSize = 9*$boxSize + 4;
+        $start = floor(($size-$gridSize) / 2);
+        $end = $start + $gridSize;
+        $lineStart = $start + 1;
+        $lineEnd = $end - 2;
+        for ($i = $start; $i < $end; $i += 3*$boxSize + 1) {
+            ImageLine($thumbnail,  $lineStart,  $i, $lineEnd,  $i, $black);
+            ImageLine($thumbnail,  $i,  $lineStart,  $i, $lineEnd, $black);
+        }
+        $x = $start;
+        $y = $start;
+        $boxSizeMinusOne = $boxSize - 1;
+        foreach(str_split($gridStr) as $i => $value) {
+            if ($i % 3 == 0) $x++;
+            if ($i % 27 == 0) $y++;
+            if ($value == UNKNOWN) {
+                $bgColor = $white;
+            } else {
+                $bgColor = $blue;
+            }
+            imagefilledrectangle($thumbnail, $x, $y, $x+$boxSizeMinusOne, $y+$boxSizeMinusOne, $bgColor);
+            $x += $boxSize;
+            if ($i % 9 == 8) {
+                $y += $boxSize;
+                $x = $start;
+            }
+        }
+    } else if ($size < 82) {
+        $boxSize = floor(($size-1) / 9);
+        $gridSize = 9*$boxSize + 1;
+        $start = floor(($size-$gridSize) / 2);
+        $end = $start + $gridSize;
+        $lineStart = $start + 1;
+        $lineEnd = $end - 2;
+        for ($i = $start + $boxSize; $i < $end - $boxSize; $i += $boxSize) {
+            ImageLine($thumbnail,  $lineStart,  $i, $lineEnd,  $i, $grey);
+            ImageLine($thumbnail,  $i,  $lineStart,  $i, $lineEnd, $grey);
+        }
+        for ($i = $start; $i < $end; $i += 3*$boxSize) {
+            ImageLine($thumbnail,  $lineStart,  $i, $lineEnd,  $i, $black);
+            ImageLine($thumbnail,  $i,  $lineStart,  $i, $lineEnd, $black);
+        }
+        $x = $start + 1;
+        $y = $start + 1;
+        $boxSizeMinusTwo = $boxSize - 2;
+        foreach(str_split($gridStr) as $i => $value) {
+            if ($value == UNKNOWN) {
+                $bgColor = $white;
+            } else {
+                $bgColor = $blue;
+            }
+            imagefilledrectangle($thumbnail, $x, $y, $x+$boxSizeMinusTwo, $y+$boxSizeMinusTwo, $bgColor);
+            $x += $boxSize;
+            if ($i % 9 == 8) {
+                $y += $boxSize;
+                $x = $start + 1;
+            }
+        }
+    } else {
+        $boxSize = floor(($size-1) / 9);
+        $gridSize = 9*$boxSize + 1;
+        $start = floor(($size-$gridSize) / 2);
+        $end = $start + $gridSize;
+        $lineStart = $start + 1;
+        $lineEnd = $end - 2;
+        $fontSize = floor($boxSize/2) - 4;
+        $fdx = floor(($boxSize - imagefontwidth($fontSize)) / 2);
+        $fdy = ceil(($boxSize - imagefontheight($fontSize)) / 2) - 1;
+        $fontColor = $white;
+        for ($i = $start + $boxSize; $i < $end - $boxSize; $i += $boxSize) {
+            ImageLine($thumbnail,  $lineStart,  $i, $lineEnd,  $i, $grey);
+            ImageLine($thumbnail,  $i,  $lineStart,  $i, $lineEnd, $grey);
+        }
+        for ($i = $start; $i < $end; $i += 3*$boxSize) {
+            ImageLine($thumbnail,  $lineStart,  $i, $lineEnd,  $i, $black);
+            ImageLine($thumbnail,  $i,  $lineStart,  $i, $lineEnd, $black);
+        }
+        $x = $start + 1;
+        $y = $start + 1;
+        $boxSizeMinusTwo = $boxSize - 2;
+        foreach(str_split($gridStr) as $i => $value) {
+            if ($value == UNKNOWN) {
+                $bgColor = $white;
+            } else {
+                $bgColor = $blue;
+            }
+            imagefilledrectangle($thumbnail, $x, $y, $x+$boxSizeMinusTwo, $y+$boxSizeMinusTwo, $bgColor);
+            if ($value != UNKNOWN) imagestring($thumbnail, $fontSize, $x + $fdx, $y + $fdy, $value, $fontColor);
+            $x += $boxSize;
+            if ($i % 9 == 8) {
+                $y += $boxSize;
+                $x = $start + 1;
+            }
+        }
+    }
+    imagepng($thumbnail);
+?>