adrien/Sudoku
adrien/Sudoku
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

PWA saves curent grid for when offline

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
index.php → gen-grid.php
View File

49
manifest.json.php
View File

@ -1,33 +1,32 @@
<?php <?php
$gridStr = strip_tags($_GET['grid']); $gridStr = strip_tags($_GET['grid']);
?> ?>
{ {
"short_name": "Sudoku", "short_name": "Sudoku",
"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.", "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": [{ "icons": [{
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48", "src": "thumbnail.png?grid=<?=$gridStr?>&size=48",
"sizes": "48x48", "sizes": "48x48",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72", "src": "thumbnail.png?grid=<?=$gridStr?>&size=72",
"sizes": "72x72", "sizes": "72x72",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96", "src": "thumbnail.png?grid=<?=$gridStr?>&size=96",
"sizes": "96x96", "sizes": "96x96",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144", "src": "thumbnail.png?grid=<?=$gridStr?>&size=144",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168", "src": "thumbnail.png?grid=<?=$gridStr?>&size=168",
"sizes": "168x168", "sizes": "168x168",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192", "src": "thumbnail.png?grid=<?=$gridStr?>&size=192",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}], }],
@ -44,27 +43,27 @@
"description": "Continuer cette grille de sudoku", "description": "Continuer cette grille de sudoku",
"url": "<?=$gridStr?>", "url": "<?=$gridStr?>",
"icons": [{ "icons": [{
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48", "src": "thumbnail.png?grid=<?=$gridStr?>&size=48",
"sizes": "48x48", "sizes": "48x48",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72", "src": "thumbnail.png?grid=<?=$gridStr?>&size=72",
"sizes": "72x72", "sizes": "72x72",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96", "src": "thumbnail.png?grid=<?=$gridStr?>&size=96",
"sizes": "96x96", "sizes": "96x96",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144", "src": "thumbnail.png?grid=<?=$gridStr?>&size=144",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168", "src": "thumbnail.png?grid=<?=$gridStr?>&size=168",
"sizes": "168x168", "sizes": "168x168",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192", "src": "thumbnail.png?grid=<?=$gridStr?>&size=192",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}] }]
@ -75,27 +74,27 @@
"description": "Grille de sudoku vierge", "description": "Grille de sudoku vierge",
"url": ".................................................................................", "url": ".................................................................................",
"icons": [{ "icons": [{
"src": "thumbnail.png.php?grid=.................................................................................&size=48", "src": "thumbnail.png?grid=.................................................................................&size=48",
"sizes": "48x48", "sizes": "48x48",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=.................................................................................&size=72", "src": "thumbnail.png?grid=.................................................................................&size=72",
"sizes": "72x72", "sizes": "72x72",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=.................................................................................&size=96", "src": "thumbnail.png?grid=.................................................................................&size=96",
"sizes": "96x96", "sizes": "96x96",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=.................................................................................&size=144", "src": "thumbnail.png?grid=.................................................................................&size=144",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=.................................................................................&size=168", "src": "thumbnail.png?grid=.................................................................................&size=168",
"sizes": "168x168", "sizes": "168x168",
"type": "image/png" "type": "image/png"
}, { }, {
"src": "thumbnail.png.php?grid=.................................................................................&size=192", "src": "thumbnail.png?grid=.................................................................................&size=192",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}] }]
@ -106,27 +105,27 @@
"description": "Nouvelle grille de sudoku", "description": "Nouvelle grille de sudoku",
"url": ".", "url": ".",
"icons": [{ "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", "sizes": "48x48",
"type": "image/png" "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", "sizes": "72x72",
"type": "image/png" "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", "sizes": "96x96",
"type": "image/png" "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", "sizes": "144x144",
"type": "image/png" "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", "sizes": "168x168",
"type": "image/png" "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", "sizes": "192x192",
"type": "image/png" "type": "image/png"
}] }]

43
nginx-example.conf
View File

@ -1,23 +1,30 @@
location /sudoku/ { location /sudoku/ {
alias /var/www/sudoku/; alias /var/www/sudoku/;
index index.php;
try_files $uri $uri/ @sudoku;
location ~ [^/]\.php(/|$) { if ($scheme = http) {
fastcgi_split_path_info ^(.+?\.php)(/.*)$; rewrite ^ https://$server_name$request_uri? permanent;
fastcgi_pass unix:/var/run/php/php7.3-fpm-sudoku.sock; }
fastcgi_index index.php;
include fastcgi_params; index gen-grid.php;
fastcgi_param REMOTE_USER $remote_user;
fastcgi_param PATH_INFO $fastcgi_path_info; try_files $uri $uri/ @add-php-extention;
fastcgi_param SCRIPT_FILENAME $request_filename;
} 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 { location @add-php-extention {
fastcgi_pass unix:/var/run/php/php7.3-fpm-sudoku.sock; rewrite ^([^?#]*)(\?.*)?(#.*)?$ $1.php$2$3 last;
include fastcgi_params; }
fastcgi_param REMOTE_USER $remote_user;
fastcgi_param PATH_INFO $fastcgi_path_info; location @sudoku-grid {
fastcgi_param SCRIPT_FILENAME sudoku/sudoku.php; rewrite ^/sudoku/(.*).php$ /sudoku/sudoku.php?grid=$1 last;
} }

6
service-worker.js → service-worker.js.php
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. Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License"); 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 OFFLINE_VERSION = 1;
const CACHE_NAME = "offline"; const CACHE_NAME = "offline";
// Customize this with a different URL if needed. // Customize this with a different URL if needed.
const OFFLINE_URL = "."; const OFFLINE_URL = "<?=$location?>";
self.addEventListener("install", (event) => { self.addEventListener("install", (event) => {
event.waitUntil( event.waitUntil(

11
style.css
View File

@ -30,7 +30,7 @@ div {
border: 1px solid black; border: 1px solid black;
border-radius: 6px; border-radius: 6px;
margin: auto; margin: auto;
cursor: url(img/ink-pen.svg) 2 22, auto; cursor: url(img/ink-pen.svg) 2 22, text;
} }
.grid td, tr { .grid td, tr {
padding: 0; padding: 0;
@ -91,15 +91,15 @@ div {
transition: background 0.5s; transition: background 0.5s;
-moz-appearance: textfield; -moz-appearance: textfield;
} }
input::-webkit-outer-spin-button, input[type="number"]::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
input::-webkit-calendar-picker-indicator { input[type="number"]::-webkit-calendar-picker-indicator {
display: none; display: none;
} }
.grid input:enabled{ .grid input:enabled {
background: white; background: white;
color: darkblue; color: darkblue;
cursor: inherit; cursor: inherit;
@ -108,9 +108,6 @@ input::-webkit-calendar-picker-indicator {
.grid input::placeholder { .grid input::placeholder {
color: #666 !important; color: #666 !important;
font-size: 0.9rem !important; font-size: 0.9rem !important;
text-align: bottom;
height: 2.2rem;
padding: 0.3rem 0 0 0;
} }
.grid input:disabled { .grid input:disabled {
color: white; color: white;

7
app.js → sudoku.js
View File

@ -78,7 +78,7 @@ window.onload = function () {
refreshUI() refreshUI()
if ("serviceWorker" in navigator) { 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 { } else {
valueToInsert = radio.value 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() highlight()
} }

38
sudoku.php
View File

@ -1,7 +1,7 @@
<?php <?php
require("classes.php"); require("classes.php");
$gridStr = basename(strip_tags($_SERVER["DOCUMENT_URI"])); $gridStr = strip_tags($_GET['grid']);
// URL contains grid // URL contains grid
if (preg_match("#^[1-9.]{81}$#", $gridStr)) { if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
?> ?>
@ -12,25 +12,25 @@
<meta name='viewport' content='width=device-width' /> <meta name='viewport' content='width=device-width' />
<title>Sudoku</title> <title>Sudoku</title>
<link rel='stylesheet' type='text/css' href='style.css' /> <link rel='stylesheet' type='text/css' href='style.css' />
<script src='app.js'></script> <script src='sudoku.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?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?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?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?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?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?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?grid=<?=$gridStr?>&size=76" sizes="76x76">
<link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=152" sizes="152x152"> <link rel="apple-touch-icon" href="thumbnail.png?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?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?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?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?grid=<?=$gridStr?>&size=16" sizes="16x16">
<link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=32" sizes="32x32"> <link rel="icon" type="image/png" href="thumbnail.png?grid=<?=$gridStr?>&size=32" sizes="32x32">
<link rel="manifest" href="manifest.json.php?grid=<?=$gridStr?>"> <link rel="manifest" href="manifest.json?grid=<?=$gridStr?>">
<meta property="og:title" content="Sudoku"/> <meta property="og:title" content="Sudoku"/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>
<meta property="og:url" content="<?=$_SERVER["REQUEST_SCHEME"]."://" . $_SERVER["HTTP_HOST"].$_SERVER["DOCUMENT_URI"]?>"/> <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:width" content="200"/>
<meta property="og:image:height" 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: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> <head>
<meta charset='utf-8' /> <meta charset='utf-8' />
<meta name='viewport' content='width=device-width' /> <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='stylesheet' type='text/css' href='style.css' />
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
</head> </head>
<body> <body>
<header> <header>
<h1>Grille incorrecte</h1> <h1>Adresse incorrecte</h1>
</header> </header>
L'adresse URL doit être de la forme : <?=$urlDir?>/<em>grille</em>,<br/> 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 : <em>grille</em> étant une suite de 81 caractères représentant la grille de gauche à droite puis de haut en bas, soit :