From b20c6b72bdef138d523fc46e8bf519c9d8462ec7 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Fri, 13 Nov 2020 01:40:29 +0100
Subject: [PATCH] PWA saves curent grid for when offline

---
 index.php => gen-grid.php                  |  0
 manifest.json.php                          | 49 +++++++++++-----------
 nginx-example.conf                         | 43 +++++++++++--------
 service-worker.js => service-worker.js.php |  6 ++-
 style.css                                  | 11 ++---
 app.js => sudoku.js                        |  7 +++-
 sudoku.php                                 | 38 ++++++++---------
 7 files changed, 83 insertions(+), 71 deletions(-)
 rename index.php => gen-grid.php (100%)
 rename service-worker.js => service-worker.js.php (95%)
 rename app.js => sudoku.js (96%)

diff --git a/index.php b/gen-grid.php
similarity index 100%
rename from index.php
rename to gen-grid.php
diff --git a/manifest.json.php b/manifest.json.php
index a782ef2..157b635 100644
--- a/manifest.json.php
+++ b/manifest.json.php
@@ -1,33 +1,32 @@
 <?php
     $gridStr = strip_tags($_GET['grid']);
 ?>
-
 {
     "short_name": "Sudoku",
     "name": "Sudoku",
     "description": "Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.",
     "icons": [{
-        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48",
+        "src": "thumbnail.png?grid=<?=$gridStr?>&size=48",
         "sizes": "48x48",
         "type": "image/png"
     }, {
-        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72",
+        "src": "thumbnail.png?grid=<?=$gridStr?>&size=72",
         "sizes": "72x72",
         "type": "image/png"
     }, {
-        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96",
+        "src": "thumbnail.png?grid=<?=$gridStr?>&size=96",
         "sizes": "96x96",
         "type": "image/png"
     }, {
-        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144",
+        "src": "thumbnail.png?grid=<?=$gridStr?>&size=144",
         "sizes": "144x144",
         "type": "image/png"
     }, {
-        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168",
+        "src": "thumbnail.png?grid=<?=$gridStr?>&size=168",
         "sizes": "168x168",
         "type": "image/png"
     }, {
-        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192",
+        "src": "thumbnail.png?grid=<?=$gridStr?>&size=192",
         "sizes": "192x192",
         "type": "image/png"
     }],
@@ -44,27 +43,27 @@
             "description": "Continuer cette grille de sudoku",
             "url": "<?=$gridStr?>",
             "icons": [{
-                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48",
+                    "src": "thumbnail.png?grid=<?=$gridStr?>&size=48",
                     "sizes": "48x48",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72",
+                    "src": "thumbnail.png?grid=<?=$gridStr?>&size=72",
                     "sizes": "72x72",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96",
+                    "src": "thumbnail.png?grid=<?=$gridStr?>&size=96",
                     "sizes": "96x96",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144",
+                    "src": "thumbnail.png?grid=<?=$gridStr?>&size=144",
                     "sizes": "144x144",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168",
+                    "src": "thumbnail.png?grid=<?=$gridStr?>&size=168",
                     "sizes": "168x168",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192",
+                    "src": "thumbnail.png?grid=<?=$gridStr?>&size=192",
                     "sizes": "192x192",
                     "type": "image/png"
             }]
@@ -75,27 +74,27 @@
             "description": "Grille de sudoku vierge",
             "url": ".................................................................................",
             "icons": [{
-                    "src": "thumbnail.png.php?grid=.................................................................................&size=48",
+                    "src": "thumbnail.png?grid=.................................................................................&size=48",
                     "sizes": "48x48",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.................................................................................&size=72",
+                    "src": "thumbnail.png?grid=.................................................................................&size=72",
                     "sizes": "72x72",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.................................................................................&size=96",
+                    "src": "thumbnail.png?grid=.................................................................................&size=96",
                     "sizes": "96x96",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.................................................................................&size=144",
+                    "src": "thumbnail.png?grid=.................................................................................&size=144",
                     "sizes": "144x144",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.................................................................................&size=168",
+                    "src": "thumbnail.png?grid=.................................................................................&size=168",
                     "sizes": "168x168",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.................................................................................&size=192",
+                    "src": "thumbnail.png?grid=.................................................................................&size=192",
                     "sizes": "192x192",
                     "type": "image/png"
             }]
@@ -106,27 +105,27 @@
             "description": "Nouvelle grille de sudoku",
             "url": ".",
             "icons": [{
-                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=48",
+                    "src": "thumbnail.png?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=48",
                     "sizes": "48x48",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=72",
+                    "src": "thumbnail.png?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=72",
                     "sizes": "72x72",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=96",
+                    "src": "thumbnail.png?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=96",
                     "sizes": "96x96",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=144",
+                    "src": "thumbnail.png?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=144",
                     "sizes": "144x144",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=168",
+                    "src": "thumbnail.png?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=168",
                     "sizes": "168x168",
                     "type": "image/png"
                 }, {
-                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=192",
+                    "src": "thumbnail.png?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=192",
                     "sizes": "192x192",
                     "type": "image/png"
             }]
diff --git a/nginx-example.conf b/nginx-example.conf
index b5a5295..6a97888 100644
--- a/nginx-example.conf
+++ b/nginx-example.conf
@@ -1,23 +1,30 @@
 location /sudoku/ {
-	alias /var/www/sudoku/;
-	index index.php;
-	try_files $uri $uri/ @sudoku;
+        alias /var/www/sudoku/;
 
-	location ~ [^/]\.php(/|$) {
-		fastcgi_split_path_info ^(.+?\.php)(/.*)$;
-		fastcgi_pass unix:/var/run/php/php7.3-fpm-sudoku.sock;
-		fastcgi_index index.php;
-		include fastcgi_params;
-		fastcgi_param REMOTE_USER $remote_user;
-		fastcgi_param PATH_INFO $fastcgi_path_info;
-		fastcgi_param SCRIPT_FILENAME $request_filename;
-	}
+        if ($scheme = http) {
+                rewrite ^ https://$server_name$request_uri? permanent;
+        }
+
+        index gen-grid.php;
+
+        try_files $uri $uri/ @add-php-extention;
+
+        location ~ [^/]\.php(/|$) {
+                try_files $uri @sudoku-grid;
+                fastcgi_split_path_info ^(.+?\.php)(/.*)$;
+                fastcgi_pass unix:/var/run/php/php7.3-fpm-sudoku.sock;
+                fastcgi_index gen-grid.php;
+                include fastcgi_params;
+                fastcgi_param REMOTE_USER $remote_user;
+                fastcgi_param PATH_INFO $fastcgi_path_info;
+                fastcgi_param SCRIPT_FILENAME $request_filename;
+        }
 }
 
-location @sudoku {
-    fastcgi_pass unix:/var/run/php/php7.3-fpm-sudoku.sock;
-    include fastcgi_params;
-    fastcgi_param REMOTE_USER $remote_user;
-    fastcgi_param PATH_INFO $fastcgi_path_info;
-    fastcgi_param SCRIPT_FILENAME sudoku/sudoku.php;
+location @add-php-extention {
+        rewrite ^([^?#]*)(\?.*)?(#.*)?$ $1.php$2$3 last;
+}
+
+location @sudoku-grid {
+        rewrite ^/sudoku/(.*).php$ /sudoku/sudoku.php?grid=$1 last;
 }
diff --git a/service-worker.js b/service-worker.js.php
similarity index 95%
rename from service-worker.js
rename to service-worker.js.php
index 5b1e5ce..37ede2c 100644
--- a/service-worker.js
+++ b/service-worker.js.php
@@ -1,3 +1,7 @@
+<?php
+    $location = strip_tags($_GET['location']);
+    header ("Content-type: application/javascript");
+?>
 /*
 Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
  Licensed under the Apache License, Version 2.0 (the "License");
@@ -16,7 +20,7 @@ Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
 const OFFLINE_VERSION = 1;
 const CACHE_NAME = "offline";
 // Customize this with a different URL if needed.
-const OFFLINE_URL = ".";
+const OFFLINE_URL = "<?=$location?>";
 
 self.addEventListener("install", (event) => {
   event.waitUntil(
diff --git a/style.css b/style.css
index a086ffe..54deeb0 100644
--- a/style.css
+++ b/style.css
@@ -30,7 +30,7 @@ div {
     border: 1px solid black;
     border-radius: 6px;
     margin: auto;
-    cursor: url(img/ink-pen.svg) 2 22, auto;
+    cursor: url(img/ink-pen.svg) 2 22, text;
 }
 .grid td, tr {
     padding: 0;
@@ -91,15 +91,15 @@ div {
     transition: background 0.5s;
     -moz-appearance: textfield;
 }
-input::-webkit-outer-spin-button,
+input[type="number"]::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
-input::-webkit-calendar-picker-indicator {
+input[type="number"]::-webkit-calendar-picker-indicator {
     display: none;
 }
-.grid input:enabled{
+.grid input:enabled {
     background: white;
     color: darkblue;
     cursor: inherit;
@@ -108,9 +108,6 @@ input::-webkit-calendar-picker-indicator {
 .grid input::placeholder {
     color: #666 !important;
     font-size: 0.9rem !important;
-    text-align: bottom;
-    height: 2.2rem;
-    padding: 0.3rem 0 0 0;
 }
 .grid input:disabled {
     color: white;
diff --git a/app.js b/sudoku.js
similarity index 96%
rename from app.js
rename to sudoku.js
index 167a61c..a98540e 100644
--- a/app.js
+++ b/sudoku.js
@@ -78,7 +78,7 @@ window.onload = function () {
     refreshUI()
 
     if ("serviceWorker" in navigator) {
-        navigator.serviceWorker.register("service-worker.js")
+        navigator.serviceWorker.register(`service-worker.js?location=${location.href}`)
     }
 }
 
@@ -256,6 +256,11 @@ function insert(radio) {
     } else {
         valueToInsert = radio.value
     }
+    if (inkPenRadio.checked) customCursor = "url(img/ink-pen.svg) 2 22"
+    if (pencilRadio.checked) customCursor = "url(img/pencil.svg) 2 22"
+    if (eraserRadio.checked) customCursor = "url(img/eraser.svg) 2 22"
+    fallbackCursor = valueToInsert? "copy": "text"
+    grid.style.cursor = `${customCursor}, ${fallbackCursor}`
     highlight()
 }
 
diff --git a/sudoku.php b/sudoku.php
index 1c023bc..5b20929 100644
--- a/sudoku.php
+++ b/sudoku.php
@@ -1,7 +1,7 @@
 <?php
     require("classes.php");
 
-    $gridStr = basename(strip_tags($_SERVER["DOCUMENT_URI"]));
+    $gridStr = strip_tags($_GET['grid']);
     // URL contains grid
     if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
 ?>
@@ -12,25 +12,25 @@
         <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="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=57"  sizes="57x57">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=114" sizes="114x114">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=72"  sizes="72x72">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=144" sizes="144x144">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=60"  sizes="60x60">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=120" sizes="120x120">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=76"  sizes="76x76">
-        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=152" sizes="152x152">
-        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=196" sizes="196x196">
-        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=160" sizes="160x160">
-        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=96"  sizes="96x96">
-        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=16"  sizes="16x16">
-        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=32"  sizes="32x32">
-        <link rel="manifest" href="manifest.json.php?grid=<?=$gridStr?>">
+        <script src='sudoku.js'></script>
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=57"  sizes="57x57">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=114" sizes="114x114">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=72"  sizes="72x72">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=144" sizes="144x144">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=60"  sizes="60x60">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=120" sizes="120x120">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=76"  sizes="76x76">
+        <link rel="apple-touch-icon" href="thumbnail.png?grid=<?=$gridStr?>&size=152" sizes="152x152">
+        <link rel="icon" type="image/png" href="thumbnail.png?grid=<?=$gridStr?>&size=196" sizes="196x196">
+        <link rel="icon" type="image/png" href="thumbnail.png?grid=<?=$gridStr?>&size=160" sizes="160x160">
+        <link rel="icon" type="image/png" href="thumbnail.png?grid=<?=$gridStr?>&size=96"  sizes="96x96">
+        <link rel="icon" type="image/png" href="thumbnail.png?grid=<?=$gridStr?>&size=16"  sizes="16x16">
+        <link rel="icon" type="image/png" href="thumbnail.png?grid=<?=$gridStr?>&size=32"  sizes="32x32">
+        <link rel="manifest" href="manifest.json?grid=<?=$gridStr?>">
         <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.png.php?grid=<?=$gridStr?>&size=200"/>
+        <meta property="og:image" content="<?=$_SERVER["REQUEST_SCHEME"]."://" . $_SERVER["HTTP_HOST"].dirname($_SERVER["DOCUMENT_URI"])?>/thumbnail.png?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."/>
@@ -126,13 +126,13 @@
     <head>
         <meta charset='utf-8' />
         <meta name='viewport' content='width=device-width' />
-        <title>Grille incorrecte</title>
+        <title>Adresse incorrecte</title>
         <link rel='stylesheet' type='text/css' href='style.css' />
         <link rel="icon" type="image/png" href="favicon.png">
     </head>
     <body>
         <header>
-            <h1>Grille incorrecte</h1>
+            <h1>Adresse incorrecte</h1>
         </header>
         L'adresse URL doit être de la forme : <?=$urlDir?>/<em>grille</em>,<br/>
         <em>grille</em> étant une suite de 81 caractères représentant la grille de gauche à droite puis de haut en bas, soit :