jonas/crosswords
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many small client improvements

Browse Source
This commit is contained in:
Jonas Weinz 2021-06-25 09:48:06 +02:00
parent 0122ca2e4f
commit 40fc917164
12 changed files with 215 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
js_client/app.js Normal file
View File

@ -0,0 +1,15 @@
window.addEventListener('load', e => {
registerSW();
});
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (e) {
alert('ServiceWorker registration failed. Sorry about that.');
}
} else {
document.querySelector('.alert').removeAttribute('hidden');
}
}

BIN
js_client/big_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

2
js_client/cookie.js
View File

@ -2,7 +2,7 @@ export function setCookie(cname, cvalue, exdays) {
var d = new Date(); var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString(); var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/; SameSite=Strict";
} }
export function getCookie(cname) { export function getCookie(cname) {

54
js_client/english.html
View File

@ -2,27 +2,34 @@
<html> <html>
<head> <head>
<!-- Polyfills only needed for Firefox and Edge. --> <link rel="icon" type="image/png" href="./favicon.png" />
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script> <link rel="manifest" href="./manifest.json">
<!-- Works only on browsers that support Javascript modules like <script type="module" src="./app.js"></script>
<script type="module" src="./sw.js"></script>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 --> Chrome, Safari, Firefox 60, Edge 17 -->
<style> <style>
body { body {
background-color: black; background-color: black;
font-size: 1.5vh;
}
@media (max-aspect-ratio: 3/2) { font-size: 1.5vh;
body { }
font-size: 1.5vh;
}
}
</style>
// Original viewport definition, note the "id" that I use to modify the viewport later on:
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<script> @media (max-aspect-ratio: 3/2) {
body {
font-size: 1.5vh;
}
}
</style>
// Original viewport definition, note the "id" that I use to modify the viewport later on:
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script>
// Global boolean variable that holds the current orientation // Global boolean variable that holds the current orientation
var pageInPortraintMode; var pageInPortraintMode;
@ -30,7 +37,7 @@
window.addEventListener("resize", windowSizeChanged); window.addEventListener("resize", windowSizeChanged);
// Set the global orientation variable as soon as the page loads // Set the global orientation variable as soon as the page loads
addEventListener("load", function() { addEventListener("load", function () {
pageInPortraintMode = window.innerHeight > window.innerWidth; pageInPortraintMode = window.innerHeight > window.innerWidth;
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0"); document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
}) })
@ -42,15 +49,16 @@
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0"); document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
} }
} }
</script> </script>
</head> </head>
<body> <body>
<info-box id="infobox"></info-box> <info-box id="infobox"></info-box>
<server-connection id="server-connection" lang="en" grid_id="grid" url="wss://the-cake-is-a-lie.net:8765"></server-connection> <server-connection id="server-connection" lang="en" grid_id="grid" url="wss://the-cake-is-a-lie.net:8765">
<crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid> </server-connection>
<script type="module" src="./main.js"></script> <crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid>
<script type="module" src="./main.js"></script>
</body> </body>

BIN
js_client/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

51
js_client/german.html
View File

@ -2,27 +2,32 @@
<html> <html>
<head> <head>
<!-- Polyfills only needed for Firefox and Edge. --> <link rel="icon" type="image/png" href="./favicon.png" />
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script> <link rel="manifest" href="./manifest.json">
<!-- Works only on browsers that support Javascript modules like <script type="module" src="./app.js"></script>
<script type="module" src="./sw.js"></script>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 --> Chrome, Safari, Firefox 60, Edge 17 -->
<style> <style>
body { body {
background-color: black; background-color: black;
font-size: 1.5vh; font-size: 1.5vh;
} }
@media (max-aspect-ratio: 3/2) { @media (max-aspect-ratio: 3/2) {
body { body {
font-size: 1.5vh; font-size: 1.5vh;
} }
} }
</style> </style>
// Original viewport definition, note the "id" that I use to modify the viewport later on: // Original viewport definition, note the "id" that I use to modify the viewport later on:
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <meta name="viewport" id="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<script> <script>
// Global boolean variable that holds the current orientation // Global boolean variable that holds the current orientation
var pageInPortraintMode; var pageInPortraintMode;
@ -30,7 +35,7 @@
window.addEventListener("resize", windowSizeChanged); window.addEventListener("resize", windowSizeChanged);
// Set the global orientation variable as soon as the page loads // Set the global orientation variable as soon as the page loads
addEventListener("load", function() { addEventListener("load", function () {
pageInPortraintMode = window.innerHeight > window.innerWidth; pageInPortraintMode = window.innerHeight > window.innerWidth;
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0"); document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
}) })
@ -42,15 +47,15 @@
document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0"); document.getElementById("viewport").setAttribute("content", "width=" + window.innerWidth + ", height=" + window.innerHeight + ", initial-scale=1.0, maximum-scale=1.0, user-scalable=0");
} }
} }
</script> </script>
</head> </head>
<body> <body>
<info-box id="infobox"></info-box> <info-box id="infobox"></info-box>
<server-connection id="server-connection" lang="de" grid_id="grid" url="ws://localhost:8765"></server-connection> <server-connection id="server-connection" lang="de" grid_id="grid" url="ws://localhost:8765"></server-connection>
<crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid> <crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid>
<script type="module" src="./main.js"></script> <script type="module" src="./main.js"></script>
</body> </body>

67
js_client/grid.js
View File

@ -1,6 +1,6 @@
import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module'; import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
import './infoBox.js' import './infoBox.js'
import {GridElement, GridLetter, GridBox, gridType} from './gridBoxes.js' import { GridElement, GridLetter, GridBox, gridType } from './gridBoxes.js'
import './solutionBox.js' import './solutionBox.js'
export class CrosswordGrid extends LitElement { export class CrosswordGrid extends LitElement {
@ -88,10 +88,11 @@ export class CrosswordGrid extends LitElement {
this.solution_locations = json_grid.solution this.solution_locations = json_grid.solution
if (this.solutionBox) if (this.solutionBox) {
this.solutionBox.length = this.solution_locations.length; this.solutionBox.length = this.solution_locations.length;
this.solutionBox.requestUpdate(); this.solutionBox.requestUpdate();
console.log("update box"); console.log("update box");
}
var y; var y;
var x; var x;
@ -129,11 +130,16 @@ export class CrosswordGrid extends LitElement {
} }
focusNextCellHorizontal(x, y) { focusNextCellHorizontal(x, y, skip_revealed = false) {
if (x + 1 < this.width && this.grid[y][x + 1].getGridType() === gridType.LETTER) { if (x + 1 < this.width && this.grid[y][x + 1].getGridType() === gridType.LETTER) {
if (this.grid[y][x].getGridType() === gridType.LETTER) { if (this.grid[y][x].getGridType() === gridType.LETTER) {
this.grid[y][x].getGridLetter().blur(); //this.grid[y][x].getGridLetter().blur();
} }
if (skip_revealed && this.grid[y][x + 1].getGridLetter().revealed) {
return this.focusNextCellHorizontal(x + 1, y, true);
}
this.grid[y][x + 1].getGridLetter().focus(x, y); this.grid[y][x + 1].getGridLetter().focus(x, y);
@ -143,11 +149,16 @@ export class CrosswordGrid extends LitElement {
return false; return false;
} }
focusPrevCellHorizontal(x, y) { focusPrevCellHorizontal(x, y, skip_revealed = false) {
if (x - 1 >= 0 && this.grid[y][x - 1].getGridType() === gridType.LETTER) { if (x - 1 >= 0 && this.grid[y][x - 1].getGridType() === gridType.LETTER) {
if (this.grid[y][x].getGridType() === gridType.LETTER) { if (this.grid[y][x].getGridType() === gridType.LETTER) {
this.grid[y][x].getGridLetter().blur(); //this.grid[y][x].getGridLetter().blur();
} }
if (skip_revealed && this.grid[y][x - 1].getGridLetter().revealed) {
return this.focusPrevCellHorizontal(x - 1, y, true);
}
this.grid[y][x - 1].getGridLetter().focus(); this.grid[y][x - 1].getGridLetter().focus();
@ -157,10 +168,13 @@ export class CrosswordGrid extends LitElement {
return false; return false;
} }
focusNextCellVertical(x, y) { focusNextCellVertical(x, y, skip_revealed = false) {
if (y + 1 < this.height && this.grid[y + 1][x].getGridType() === gridType.LETTER) { if (y + 1 < this.height && this.grid[y + 1][x].getGridType() === gridType.LETTER) {
if (this.grid[y][x].getGridType() === gridType.LETTER) { if (this.grid[y][x].getGridType() === gridType.LETTER) {
this.grid[y][x].getGridLetter().blur(); //this.grid[y][x].getGridLetter().blur();
}
if (skip_revealed && this.grid[y + 1][x].getGridLetter().revealed) {
return this.focusNextCellVertical(x, y + 1, true);
} }
this.grid[y + 1][x].getGridLetter().focus(x, y); this.grid[y + 1][x].getGridLetter().focus(x, y);
@ -170,10 +184,13 @@ export class CrosswordGrid extends LitElement {
return false; return false;
} }
focusPrevCellVertical(x, y) { focusPrevCellVertical(x, y, skip_revealed = false) {
if (y - 1 >= 0 && this.grid[y - 1][x].getGridType() === gridType.LETTER) { if (y - 1 >= 0 && this.grid[y - 1][x].getGridType() === gridType.LETTER) {
if (this.grid[y][x].getGridType() === gridType.LETTER) { if (this.grid[y][x].getGridType() === gridType.LETTER) {
this.grid[y][x].getGridLetter().blur(); //this.grid[y][x].getGridLetter().blur();
}
if (skip_revealed && this.grid[y - 1][x].getGridLetter().revealed) {
return this.focusPrevCellVertical(x, y - 1, true);
} }
this.grid[y - 1][x].getGridLetter().focus(); this.grid[y - 1][x].getGridLetter().focus();
@ -186,18 +203,18 @@ export class CrosswordGrid extends LitElement {
focusNextCell(x, y) { focusNextCell(x, y) {
if (this.lastMoveVertical) { if (this.lastMoveVertical) {
if (this.focusNextCellVertical(x, y)) { if (this.focusNextCellVertical(x, y, true)) {
return; return;
} }
if (this.focusNextCellHorizontal(x, y)) { if (this.focusNextCellHorizontal(x, y, true)) {
this.lastMoveVertical = false; this.lastMoveVertical = false;
} }
} }
else { else {
if (this.focusNextCellHorizontal(x, y)) { if (this.focusNextCellHorizontal(x, y, true)) {
return; return;
} }
if (this.focusNextCellVertical(x, y)) { if (this.focusNextCellVertical(x, y, true)) {
this.lastMoveVertical = true; this.lastMoveVertical = true;
} }
} }
@ -209,18 +226,18 @@ export class CrosswordGrid extends LitElement {
return; return;
} }
if (this.lastMoveVertical) { if (this.lastMoveVertical) {
if (this.focusPrevCellVertical(x, y)) { if (this.focusPrevCellVertical(x, y, true)) {
return; return;
} }
if (this.focusPrevCellHorizontal(x, y)) { if (this.focusPrevCellHorizontal(x, y, true)) {
this.lastMoveVertical = false; this.lastMoveVertical = false;
} }
} }
else { else {
if (this.focusPrevCellHorizontal(x, y)) { if (this.focusPrevCellHorizontal(x, y, true)) {
return; return;
} }
if (this.focusPrevCellVertical(x, y)) { if (this.focusPrevCellVertical(x, y, true)) {
this.lastMoveVertical = true; this.lastMoveVertical = true;
} }
} }
@ -335,13 +352,23 @@ export class CrosswordGrid extends LitElement {
this.serverConnection.sendMessage(msg) this.serverConnection.sendMessage(msg)
} }
setSolutionLetter(solutionNumber, letter, revealed = false){ setSolutionLetter(solutionNumber, letter, revealed = false) {
this.solutionBox.setLetter(solutionNumber, letter, revealed); this.solutionBox.setLetter(solutionNumber, letter, revealed);
const x = this.solution_locations[solutionNumber][1]; const x = this.solution_locations[solutionNumber][1];
const y = this.solution_locations[solutionNumber][0]; const y = this.solution_locations[solutionNumber][0];
console.log("update solution letter"); console.log("update solution letter");
var old_val = this.grid[y][x].getGridLetter().value;
this.grid[y][x].getGridLetter().value = letter; this.grid[y][x].getGridLetter().value = letter;
if (old_val != letter && !revealed) {
this.sendMessage({
'type': 'update',
'x': x,
'y': y,
'letter': letter
});
}
} }
@ -351,7 +378,7 @@ export class CrosswordGrid extends LitElement {
console.log("refreshing grid"); console.log("refreshing grid");
var solution_length = 0; var solution_length = 0;
if (this.solution_locations){ if (this.solution_locations) {
solution_length = this.solution_locations.length; solution_length = this.solution_locations.length;
} }

2
js_client/gridBoxes.js
View File

@ -397,6 +397,8 @@ export class GridLetter extends GridBox {
updateLetter(letter, revealed) { updateLetter(letter, revealed) {
this.value = letter; this.value = letter;
var element = this.shadowRoot.getElementById(`${this.x}-${this.y}`);
element.value = letter;
if (revealed) { if (revealed) {
console.log("rec") console.log("rec")
this.shadowRoot.getElementById(`${this.x}-${this.y}`).readOnly = true; this.shadowRoot.getElementById(`${this.x}-${this.y}`).readOnly = true;

13
js_client/index.html
View File

@ -2,6 +2,11 @@
<html> <html>
<head> <head>
<link rel="icon" type="image/png" href="./favicon.png" />
<link rel="manifest" href="./manifest.json">
<script type="module" src="./app.js"></script>
<script type="module" src="./sw.js"></script>
<!-- Polyfills only needed for Firefox and Edge. --> <!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<!-- Works only on browsers that support Javascript modules like <!-- Works only on browsers that support Javascript modules like
@ -72,8 +77,12 @@
<div class="centerbox"> <div class="centerbox">
<h3>Select the language:</h3> <h3>Select the language:</h3>
<a href="./german.html"> <div class="box"> German </div> </a> <a href="./german.html">
<a href="./english.html"> <div class="box"> English </div> </a> <div class="box"> German </div>
</a>
<a href="./english.html">
<div class="box"> English </div>
</a>
</div> </div>
</body> </body>

16
js_client/manifest.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "Crosswords",
"short_name": "crosswords",
"start_url": "./",
"display": "standalone",
"background_color": "#000000",
"description": "Simple Collaborative Crossword",
"theme_color": "#000000",
"icons": [
{
"src": "./big_icon.png",
"sizes": "256x256",
"type": "image/png"
}
]
}

2
js_client/serverConnection.js
View File

@ -73,7 +73,7 @@ export class ServerConnection extends WebsocketConnection {
console.log("stored session", sessionId, "as cookie") console.log("stored session", sessionId, "as cookie")
setCookie("session", sessionId, 2); setCookie("session", sessionId, 2);
const urlparams = new URLSearchParams(window.location.search); const urlparams = new URLSearchParams(window.location.search);
if (urlparams.has('session') && this.sessionId === urlparams.get('session')){ if (urlparams.has('session') && this.sessionId === urlparams.get('session')) {
return; return;
} }
urlparams.set('session', sessionId); urlparams.set('session', sessionId);

51
js_client/sw.js Normal file
View File

@ -0,0 +1,51 @@
const cacheName = 'pwa-conf-v4';
const staticAssets = [
'./app.js ',
'./big_icon.png',
'./english.html',
'./german.html',
'./grid.js',
'./infoBox.js',
'./manifest.json',
'./serverConnection.js',
'./cookie.js',
'./favicon.png',
'./gridBoxes.js',
'./index.html',
'./main.js',
'./solutionBox.js',
'./websocket.js'
];
self.addEventListener('install', async event => {
const cache = await caches.open(cacheName);
await cache.addAll(staticAssets);
});
self.addEventListener('fetch', event => {
const req = event.request;
event.respondWith(networkFirst(req));
});
async function cacheFirst(req) {
const cache = await caches.open(cacheName);
const cachedResponse = await cache.match(req);
return cachedResponse || fetch(req);
}
async function networkFirst(req) {
return fetch(req).catch(function() {
return caches.match(req);
})
}