web app

2020-11-02 21:12:43 +01:00 · 2020-11-02 21:12:43 +01:00 · e23dfc9f7f
commit e23dfc9f7f
parent 1826e1e671
6 changed files with 220 additions and 38 deletions
--- a/app.js
+++ b/app.js
@ -62,6 +62,10 @@ window.onload = function() {
        contextMenu.style.display = "none"
    }
    suggestionTimer = setTimeout(showSuggestion, 30000)
+    
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("service-worker.js")
+    }
 }

 function searchCandidatesOf(box) {
--- a/manifest.json.php
+++ b/manifest.json.php
@ -0,0 +1,104 @@
+<?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",
+        "sizes": "48x48",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72",
+        "sizes": "72x72",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96",
+        "sizes": "96x96",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144",
+        "sizes": "144x144",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168",
+        "sizes": "168x168",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192",
+        "sizes": "192x192",
+        "type": "image/png"
+    }],
+    "start_url": ".",
+    "background_color": "#fff",
+    "display": "standalone",
+    "scope": ".",
+    "theme_color": "#fff",
+    "orientation": "portrait-primary",
+    "shortcuts": [
+        {
+            "name": "Sudoku : cette grille",
+            "short_name": "Sudoku",
+            "description": "Continuer cette grille de sudoku",
+            "url": "<?=$gridStr?>",
+            "icons": [{
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48",
+                    "sizes": "48x48",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72",
+                    "sizes": "72x72",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96",
+                    "sizes": "96x96",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144",
+                    "sizes": "144x144",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168",
+                    "sizes": "168x168",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192",
+                    "sizes": "192x192",
+                    "type": "image/png"
+            }]
+        },
+        {
+            "name": "Nouvelle grille de sudoku",
+            "short_name": "Nouveau sudoku",
+            "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",
+                    "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",
+                    "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",
+                    "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",
+                    "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",
+                    "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",
+                    "sizes": "192x192",
+                    "type": "image/png"
+            }]
+        }
+    ]
+}
--- a/service-worker.js
+++ b/service-worker.js
@ -0,0 +1,86 @@
+/*
+Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = ".";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});
--- a/style.css
+++ b/style.css
@ -101,17 +101,17 @@ input::-webkit-calendar-picker-indicator {
    background: #6666ff;
 }
 .grid input.forbidden-value:enabled {
-    background: #ffff99;
+    background: #ffffaa;
 }
 .grid input.same-value:enabled {
    background: #ffff33;
 }
 .grid input.forbidden-value:disabled {
-    color: #ffff99;
+    color: #ffffaa;
    background: #6666ff;
 }
 .grid input.same-value:disabled, button.same-value:enabled {
-    color: #ffff99 !important;
+    color: #ffffaa !important;
    background: #00b359 !important;
 }
 .grid input.pencil, input::placeholder {
--- a/sudoku.php
+++ b/sudoku.php
@ -1,7 +1,7 @@
 <?php
    require("classes.php");

-    $gridStr = basename(strip_tags($_SERVER["REQUEST_URI"]));
+    $gridStr = basename(strip_tags($_SERVER["DOCUMENT_URI"]));
    // URL contains grid
    if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
 ?>
@ -13,24 +13,25 @@
        <title>Sudoku</title>
        <link rel='stylesheet' type='text/css' href='style.css' />
        <script src='app.js'></script>
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=57"  sizes="57x57">
-        <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">
+        <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?>">
        <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" content="<?=$_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"])?>/thumbnail.png.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."/>
@ -48,34 +49,22 @@
            <div>
                <table id='grid' class='grid'>
                    <tbody>
-<?php
-        for ($row = 0; $row < 9; $row++) {
-?>
+<?php   for ($row = 0; $row < 9; $row++) {                                   ?>
                        <tr>
 <?php
            for ($column = 0; $column < 9; $column++) {
                $value = $gridStr[9*$row+$column];
-?>
-                            <td>
-<?php
                if ($value == UNKNOWN) {
 ?>
-                                <input type='number' min='1' max='9' step='1' value='' title='Valeurs possibles [Clic-droit]'/>
-<?php
-                } else {
-?>
-                                <input type='number' min='1' max='9' step='1' value='<?=$value?>' disabled/>
+                            <td><input type='number' min='1' max='9' step='1' value='' title='Valeurs possibles [Clic-droit]'/></td>
+<?php           } else {                                                     ?>
+                            <td><input type='number' min='1' max='9' step='1' value='<?=$value?>' disabled/></td>
 <?php
                }                                                            
-?>
-                            </td>
-<?php
            }
 ?>
                        </tr>
-<?php
-        }
-?>
+<?php   }                                                                    ?>
                    </tbody>
                </table>
            </div>
@ -102,7 +91,6 @@
                <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>
                    <img src="img/undo.png" alt="Annuler" width=16 height=16/>
                </button>
-                <!--<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/> -->
            </div>
        </form>
        <ul id="contextMenu" class="context-menu">
--- a/thumbnail.png.php
+++ b/thumbnail.png.php