adding german option

This commit is contained in:
2021-06-23 19:11:34 +02:00
parent 8a8fc90a1f
commit 5e6d69835f
12 changed files with 590 additions and 190 deletions

57
js_client/english.html Normal file
View File

@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<!-- 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 -->
<style>
body {
background-color: black;
font-size: 1.5vh;
}
@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
var pageInPortraintMode;
// Listen for window resizes to detect orientation changes
window.addEventListener("resize", windowSizeChanged);
// Set the global orientation variable as soon as the page loads
addEventListener("load", function() {
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");
})
// Adjust viewport values only if orientation has changed (not on every window resize)
function windowSizeChanged() {
if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (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");
}
}
</script>
</head>
<body>
<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>
<crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid>
<script type="module" src="./main.js"></script>
</body>
</html>

57
js_client/german.html Normal file
View File

@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<!-- 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 -->
<style>
body {
background-color: black;
font-size: 1.5vh;
}
@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
var pageInPortraintMode;
// Listen for window resizes to detect orientation changes
window.addEventListener("resize", windowSizeChanged);
// Set the global orientation variable as soon as the page loads
addEventListener("load", function() {
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");
})
// Adjust viewport values only if orientation has changed (not on every window resize)
function windowSizeChanged() {
if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (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");
}
}
</script>
</head>
<body>
<info-box id="infobox"></info-box>
<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>
<script type="module" src="./main.js"></script>
</body>
</html>

View File

@ -116,7 +116,13 @@ customElements.define('grid-box', GridBox);
export class GridLetter extends GridBox {
static get styles() {
return css`
.letter {
display: grid;
}
input[type='text'] {
grid-column: 1;
grid-row: 1;
width: 1.5em;
height: 1.5em;
text-align: center;
@ -131,18 +137,47 @@ export class GridLetter extends GridBox {
}
input[type='text']:focus {
grid-column: 1;
grid-row: 1;
background-color: LightYellow;
border-color: Yellow;
}
input[type='text']:read-only {
grid-column: 1;
grid-row: 1;
background-color: LightGreen;
}
input[type='text']:selection {
grid-column: 1;
grid-row: 1;
background: transparent;
}
.circle {
margin: auto;
text-align: left;
vertical-align: bottom;
bottom: 0;
position: relative;
z-index: 0;
pointer-events: none;
grid-column: 1;
grid-row: 1;
border: 0.1em solid lightGray;
color: black;
height: 80%;
width: 80%;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background: transparent;
}
`;
}
@ -159,7 +194,10 @@ export class GridLetter extends GridBox {
super();
this._value = '';
this.is_focused = false;
this.key_delay = false;
this.firstKeydownOver = true;
this.solutionIndex = -1;
this.lastFocusedX = -1;
this.lastFocusedY = -1;
this.updateGridElement();
}
@ -179,7 +217,9 @@ export class GridLetter extends GridBox {
onInput(e) {
if (!this.is_focused) {
e.handled = true;
return;
}
@ -213,7 +253,7 @@ export class GridLetter extends GridBox {
}
if (!e.handled && this.value.length === 0) {
this.crosswordGrid.focusPrevCell(this.x, this.y);
this.crosswordGrid.focusPrevCell(this.x, this.y, this.lastFocusedX, this.lastFocusedY);
e.handled = true;
}
else if (!e.handled && this.value.length === 1) {
@ -233,7 +273,7 @@ export class GridLetter extends GridBox {
})
}
if (!e.handled){
if (!e.handled) {
e.target.select();
@ -242,28 +282,43 @@ export class GridLetter extends GridBox {
}
onKeydown(e) {
if (!this.is_focused) {
onKeyup(e) {
if (!this.firstKeydownOver) {
e.handled = true;
return;
}
var key = e.key;
if (this.value.length == 0 || this.revealed) {
if (key === 'Backspace' || key === 'Delete') {
this.crosswordGrid.focusPrevCell(this.x, this.y, this.lastFocusedX, this.lastFocus);
e.handled = true;
return
}
else if (this.revealed) {
this.crosswordGrid.focusNextCell(this.x, this.y);
e.handled = true;
return
}
}
}
onKeydown(e) {
this.firstKeydownOver = true;
if (!this.is_focused) {
e.handled = true;
return;
}
this.key_delay = false;
var key = e.key;
console.log(key);
if (this.value.length == 0) {
if (key === 'Backspace' || key === 'Delete') {
this.crosswordGrid.focusPrevCell(this.x, this.y);
e.handled = true;
return
}
}
// check arrow keys
if (key === "ArrowLeft") {
// left
@ -301,14 +356,20 @@ export class GridLetter extends GridBox {
onFocus(e) {
e.target.select();
this.is_focused = true;
this.key_delay = true;
this.crosswordGrid.updateHints(this.x, this.y);
}
focus() {
focus(lastX = -1, lastY = -1) {
if (lastX > 0 && lastY > 0) {
this.lastFocusedX = lastX;
this.lastFocusedY = lastY;
}
var element = this.shadowRoot.getElementById(`${this.x}-${this.y}`);
this.firstKeydownOver = false;
element.focus();
}
blur() {
@ -323,13 +384,13 @@ export class GridLetter extends GridBox {
if (this.grid_id != null) {
this.gridElement.setGridLetter(this);
this.solutionIndex = this.crosswordGrid.getSolutionIndex(this.x, this.y)
}
}
updateLetter(letter, revealed) {
this.value = letter;
if (revealed)
{
if (revealed) {
console.log("rec")
this.shadowRoot.getElementById(`${this.x}-${this.y}`).readOnly = true;
this.blur();
@ -339,7 +400,25 @@ export class GridLetter extends GridBox {
render() {
this.updateGridElement();
return html`<input type="text" id="${this.x}-${this.y}" value="${this.value}" @input=${this.onInput} @focus=${this.onFocus} @keydown=${this.onKeydown} autocomplete="off"></input>`;
var solutionOverlay = html``;
if (this.solutionIndex >= 0) {
solutionOverlay = html`
<div class="circle">${this.solutionIndex}</div>
`;
}
return html`
<div class="letter">
<input type="text" id="${this.x}-${this.y}" value="${this.value}" @input=${this.onInput} @focus=${this.onFocus} @keydown=${this.onKeydown} @keyup=${this.onKeyup} autocomplete="off"></input>
${solutionOverlay}
</div>
`;
}
}
@ -508,7 +587,7 @@ export class CrosswordGrid extends LitElement {
id: { type: String },
width: { type: Number },
height: { type: Number },
infobox_id: {type: String}
infobox_id: { type: String }
}
}
@ -527,6 +606,18 @@ export class CrosswordGrid extends LitElement {
this.infobox = null;
this.serverConnection = null;
this.solution_locations = null;
}
getSolutionIndex(x, y) {
var i = 0;
for (i = 0; i < this.solution_locations.length; i++) {
if (this.solution_locations[i][0] == y && this.solution_locations[i][1] == x) {
return i;
}
}
return -1;
}
createGridByJson(json_grid) {
@ -536,6 +627,8 @@ export class CrosswordGrid extends LitElement {
const width = json_grid.w;
const height = json_grid.h;
this.solution_locations = json_grid.solution
var y;
var x;
@ -573,7 +666,7 @@ export class CrosswordGrid extends LitElement {
if (this.grid[y][x].getGridType() === gridType.LETTER) {
this.grid[y][x].getGridLetter().blur();
}
this.grid[y][x + 1].getGridLetter().focus();
this.grid[y][x + 1].getGridLetter().focus(x, y);
return true;
@ -601,7 +694,7 @@ export class CrosswordGrid extends LitElement {
if (this.grid[y][x].getGridType() === gridType.LETTER) {
this.grid[y][x].getGridLetter().blur();
}
this.grid[y + 1][x].getGridLetter().focus();
this.grid[y + 1][x].getGridLetter().focus(x, y);
return true;
}
@ -642,7 +735,11 @@ export class CrosswordGrid extends LitElement {
}
}
focusPrevCell(x, y) {
focusPrevCell(x, y, lastX = -1, lastY = -1) {
if (lastX > 0 && lastY > 0) {
this.grid[lastY][lastX].getGridLetter().focus();
return;
}
if (this.lastMoveVertical) {
if (this.focusPrevCellVertical(x, y)) {
return;
@ -675,9 +772,9 @@ export class CrosswordGrid extends LitElement {
super.update()
}
updateHints(x,y) {
updateHints(x, y) {
var cell = this.grid[y][x];
if (cell.getGridType() != gridType.LETTER){
if (cell.getGridType() != gridType.LETTER) {
console.error("cannot get hints for non letter cell");
}
@ -697,15 +794,14 @@ export class CrosswordGrid extends LitElement {
if (left_end.getGridType() === gridType.HINT) {
var box = left_end.getHintBox();
if (box.hasHorizontalHint()){
if (box.hasHorizontalHint()) {
hHint = `${box.hint_id}: ${box.horizontal_hint}`;
}
}
if (upper_end.getGridType() === gridType.HINT) {
var box = upper_end.getHintBox()
if (box.hasVerticalHint())
{
if (box.hasVerticalHint()) {
vHint = `${box.hint_id}: ${box.vertical_hint}`;
}
}
@ -728,10 +824,10 @@ export class CrosswordGrid extends LitElement {
var vertical_hint = this.json_grid.grid[el.y][el.x].vertical_hint;
var horizontal_hint = this.json_grid.grid[el.y][el.x].horizontal_hint;
if (!vertical_hint){
if (!vertical_hint) {
vertical_hint = "";
}
if (!horizontal_hint){
if (!horizontal_hint) {
horizontal_hint = "";
}
@ -745,19 +841,19 @@ export class CrosswordGrid extends LitElement {
}
}
updateLetter(x,y,letter,revealed) {
updateLetter(x, y, letter, revealed) {
var cell = this.grid[y][x];
if (cell.getGridType() != gridType.LETTER){
if (cell.getGridType() != gridType.LETTER) {
console.error("received bad message");
}
cell.getGridLetter().updateLetter(letter, revealed)
}
registerServerConnection(connection){
registerServerConnection(connection) {
this.serverConnection = connection
}
sendMessage(msg){
sendMessage(msg) {
if (!this.serverConnection) {
console.error("no server connection registered")
}

View File

@ -10,47 +10,71 @@
<style>
body {
background-color: black;
font-size: 1vw;
font-size: 1.5vh;
text-align: center;
margin: auto;
}
@media (max-aspect-ratio: 3/2) {
body {
font-size: 1vh;
font-size: 1.5vh;
}
}
html {
width: 100%;
height: 100%;
}
body {
min-width: 100%;
min-height: 100%;
}
.centerbox {
background-color: black;
border-style: none;
box-shadow: none;
outline: none;
position: absolute;
width: 15em;
height: 10em;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 1em;
color: white;
font-size: 1em;
}
.box {
background-color: black;
border-color: white;
border-width: 0.2em;
border-style: solid;
max-width: 15em;
max-height: 3em;
box-shadow: none;
outline: none;
position: relative;
margin: 1em;
padding: 1em;
color: white;
font-size: 1em;
}
</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
var pageInPortraintMode;
// Listen for window resizes to detect orientation changes
window.addEventListener("resize", windowSizeChanged);
// Set the global orientation variable as soon as the page loads
addEventListener("load", function() {
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");
})
// Adjust viewport values only if orientation has changed (not on every window resize)
function windowSizeChanged() {
if (((pageInPortraintMode === true) && (window.innerHeight < window.innerWidth)) || ((pageInPortraintMode === false) && (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");
}
}
</script>
</head>
<body>
<info-box id="infobox"></info-box>
<server-connection id="server-connection" grid_id="grid" url="wss://the-cake-is-a-lie.net:8765"></server-connection>
<crossword-grid id="grid" infobox_id="infobox" width="10" height="10"></crossword-grid>
<script type="module" src="./main.js"></script>
<div class="centerbox">
<h3>Select the language:</h3>
<a href="./german.html"> <div class="box"> German </div> </a>
<a href="./english.html"> <div class="box"> English </div> </a>
</div>
</body>

View File

@ -79,13 +79,13 @@ export class InfoBox extends LitElement {
this.horizontal_hint = "";
}
onNew(){
setCookie("session","");
onNew() {
setCookie("session", "");
window.location.href = location.protocol + '//' + location.host + location.pathname;
}
onShare(){
onShare() {
copyToClipboard(window.location.href);
}

View File

@ -10,7 +10,8 @@ export class ServerConnection extends WebsocketConnection {
static get properties() {
return {
url: { type: String },
grid_id: { type: String }
grid_id: { type: String },
lang: { type: String }
}
}
@ -19,6 +20,7 @@ export class ServerConnection extends WebsocketConnection {
this.sessionId = null;
this.isRegistered = false;
this.crossword_grid = null;
}
update(props) {
@ -51,7 +53,8 @@ export class ServerConnection extends WebsocketConnection {
console.log("register", this.sessionId);
this.sendMessage({
'type': 'register',
'sessionId': this.sessionId
'sessionId': this.sessionId,
'lang': this.lang
});
}

90
js_client/solutionBox.js Normal file
View File

@ -0,0 +1,90 @@
import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module';
export class SolutionBox extends LitElement {
static get styles() {
return css`
.letter {
display: grid;
}
input[type='text'] {
grid-column: 1;
grid-row: 1;
width: 1.5em;
height: 1.5em;
text-align: center;
border-style: solid;
border-width: 0.2 em;
border-color: black;
outline: none;
color: black;
font-size: 2em;
user-select: none;
text-transform: capitalize;
}
input[type='text']:read-only {
grid-column: 1;
grid-row: 1;
background-color: LightGreen;
}
input[type='text']:selection {
grid-column: 1;
grid-row: 1;
background: transparent;
}
.circle {
margin: auto;
text-align: left;
vertical-align: bottom;
bottom: 0;
position: relative;
z-index: 0;
pointer-events: none;
grid-column: 1;
grid-row: 1;
border: 0.1em solid lightGray;
color: black;
height: 80%;
width: 80%;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
background: transparent;
}
`;
}
static get properties() {
return {
length: { type: Number }
};
}
constructor() {
super();
this.length = 0;
this.values = [];
}
update(props) {
if (props.has("length")) {
var i;
for (i = 0; i < this.length; i++) {
this.values.push("");
}
}
super.update()
}
render() {
return html`
`;
}
}