PWA saves curent grid for when offline

This commit is contained in:
Adrien MALINGREY 2020-11-13 01:40:29 +01:00
parent 576cd3619f
commit b20c6b72bd
7 changed files with 83 additions and 71 deletions

View File

@ -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"
}]

View File

@ -1,12 +1,19 @@
location /sudoku/ {
alias /var/www/sudoku/;
index index.php;
try_files $uri $uri/ @sudoku;
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 index.php;
fastcgi_index gen-grid.php;
include fastcgi_params;
fastcgi_param REMOTE_USER $remote_user;
fastcgi_param PATH_INFO $fastcgi_path_info;
@ -14,10 +21,10 @@ location /sudoku/ {
}
}
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;
}

View File

@ -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(

View File

@ -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,12 +91,12 @@ 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 {
@ -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;

View File

@ -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()
}

View File

@ -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 :