From 40fc917164a67ed5b99484c38d14180bf186399c Mon Sep 17 00:00:00 2001 From: Jonas Weinz Date: Fri, 25 Jun 2021 09:48:06 +0200 Subject: [PATCH] many small client improvements --- js_client/app.js | 15 +++++++ js_client/big_icon.png | Bin 0 -> 9713 bytes js_client/cookie.js | 2 +- js_client/english.html | 64 ++++++++++++++++-------------- js_client/favicon.png | Bin 0 -> 3367 bytes js_client/german.html | 61 +++++++++++++++-------------- js_client/grid.js | 71 +++++++++++++++++++++++----------- js_client/gridBoxes.js | 2 + js_client/index.html | 13 ++++++- js_client/manifest.json | 16 ++++++++ js_client/serverConnection.js | 2 +- js_client/sw.js | 51 ++++++++++++++++++++++++ 12 files changed, 215 insertions(+), 82 deletions(-) create mode 100644 js_client/app.js create mode 100644 js_client/big_icon.png create mode 100644 js_client/favicon.png create mode 100644 js_client/manifest.json create mode 100644 js_client/sw.js diff --git a/js_client/app.js b/js_client/app.js new file mode 100644 index 0000000..1128b1b --- /dev/null +++ b/js_client/app.js @@ -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'); + } +} \ No newline at end of file diff --git a/js_client/big_icon.png b/js_client/big_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f479724e684c93224dd658b8949e4010df326493 GIT binary patch literal 9713 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Ü+10uyI(sxv9Xy&L${JLD=r6_GJoR;T zc?Wpyo>MsfwzV7`CW`5KlUrnR*9j~mE=$e+yxugDb0xL~b^^r1c*$};RwKNShFJwq OAvGoRy-Ed3%zpvDdihTP literal 0 HcmV?d00001 diff --git a/js_client/cookie.js b/js_client/cookie.js index 56b35eb..3ba19fc 100644 --- a/js_client/cookie.js +++ b/js_client/cookie.js @@ -2,7 +2,7 @@ export function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); - document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/; SameSite=Strict"; } export function getCookie(cname) { diff --git a/js_client/english.html b/js_client/english.html index 805ef92..41a6414 100644 --- a/js_client/english.html +++ b/js_client/english.html @@ -2,39 +2,46 @@ - - - + + - - // Original viewport definition, note the "id" that I use to modify the viewport later on: - - - - + + - - - - + + + + + diff --git a/js_client/favicon.png b/js_client/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..4af4d5fdc00b033d51a26a0dfae7d8e621dcf1d4 GIT binary patch literal 3367 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 F{wETpDDnUR literal 0 HcmV?d00001 diff --git a/js_client/german.html b/js_client/german.html index d035c95..86031bd 100644 --- a/js_client/german.html +++ b/js_client/german.html @@ -2,39 +2,44 @@ - - - + + - - // Original viewport definition, note the "id" that I use to modify the viewport later on: - - - - + + - - - - + + + + diff --git a/js_client/grid.js b/js_client/grid.js index 16110ec..b039d1c 100644 --- a/js_client/grid.js +++ b/js_client/grid.js @@ -1,6 +1,6 @@ import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module'; import './infoBox.js' -import {GridElement, GridLetter, GridBox, gridType} from './gridBoxes.js' +import { GridElement, GridLetter, GridBox, gridType } from './gridBoxes.js' import './solutionBox.js' export class CrosswordGrid extends LitElement { @@ -88,10 +88,11 @@ export class CrosswordGrid extends LitElement { this.solution_locations = json_grid.solution - if (this.solutionBox) + if (this.solutionBox) { this.solutionBox.length = this.solution_locations.length; this.solutionBox.requestUpdate(); console.log("update box"); + } var y; var x; @@ -126,14 +127,19 @@ export class CrosswordGrid extends LitElement { this.requestUpdate(); - + } - focusNextCellHorizontal(x, y) { + focusNextCellHorizontal(x, y, skip_revealed = false) { if (x + 1 < this.width && this.grid[y][x + 1].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); @@ -143,11 +149,16 @@ export class CrosswordGrid extends LitElement { return false; } - focusPrevCellHorizontal(x, y) { + focusPrevCellHorizontal(x, y, skip_revealed = false) { if (x - 1 >= 0 && this.grid[y][x - 1].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(); @@ -157,10 +168,13 @@ export class CrosswordGrid extends LitElement { 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 (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); @@ -170,10 +184,13 @@ export class CrosswordGrid extends LitElement { return false; } - focusPrevCellVertical(x, y) { + focusPrevCellVertical(x, y, skip_revealed = false) { if (y - 1 >= 0 && this.grid[y - 1][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(); @@ -186,18 +203,18 @@ export class CrosswordGrid extends LitElement { focusNextCell(x, y) { if (this.lastMoveVertical) { - if (this.focusNextCellVertical(x, y)) { + if (this.focusNextCellVertical(x, y, true)) { return; } - if (this.focusNextCellHorizontal(x, y)) { + if (this.focusNextCellHorizontal(x, y, true)) { this.lastMoveVertical = false; } } else { - if (this.focusNextCellHorizontal(x, y)) { + if (this.focusNextCellHorizontal(x, y, true)) { return; } - if (this.focusNextCellVertical(x, y)) { + if (this.focusNextCellVertical(x, y, true)) { this.lastMoveVertical = true; } } @@ -209,18 +226,18 @@ export class CrosswordGrid extends LitElement { return; } if (this.lastMoveVertical) { - if (this.focusPrevCellVertical(x, y)) { + if (this.focusPrevCellVertical(x, y, true)) { return; } - if (this.focusPrevCellHorizontal(x, y)) { + if (this.focusPrevCellHorizontal(x, y, true)) { this.lastMoveVertical = false; } } else { - if (this.focusPrevCellHorizontal(x, y)) { + if (this.focusPrevCellHorizontal(x, y, true)) { return; } - if (this.focusPrevCellVertical(x, y)) { + if (this.focusPrevCellVertical(x, y, true)) { this.lastMoveVertical = true; } } @@ -335,23 +352,33 @@ export class CrosswordGrid extends LitElement { this.serverConnection.sendMessage(msg) } - setSolutionLetter(solutionNumber, letter, revealed = false){ + setSolutionLetter(solutionNumber, letter, revealed = false) { this.solutionBox.setLetter(solutionNumber, letter, revealed); const x = this.solution_locations[solutionNumber][1]; const y = this.solution_locations[solutionNumber][0]; console.log("update solution letter"); + var old_val = this.grid[y][x].getGridLetter().value; this.grid[y][x].getGridLetter().value = letter; + if (old_val != letter && !revealed) { + this.sendMessage({ + 'type': 'update', + 'x': x, + 'y': y, + 'letter': letter + }); + } + } - + render() { this.num_hints = 0; console.log("refreshing grid"); var solution_length = 0; - if (this.solution_locations){ + if (this.solution_locations) { solution_length = this.solution_locations.length; } diff --git a/js_client/gridBoxes.js b/js_client/gridBoxes.js index 89cee66..d3e568e 100644 --- a/js_client/gridBoxes.js +++ b/js_client/gridBoxes.js @@ -397,6 +397,8 @@ export class GridLetter extends GridBox { updateLetter(letter, revealed) { this.value = letter; + var element = this.shadowRoot.getElementById(`${this.x}-${this.y}`); + element.value = letter; if (revealed) { console.log("rec") this.shadowRoot.getElementById(`${this.x}-${this.y}`).readOnly = true; diff --git a/js_client/index.html b/js_client/index.html index 1b95484..ae51bfa 100644 --- a/js_client/index.html +++ b/js_client/index.html @@ -2,6 +2,11 @@ + + + + +