adding german option
This commit is contained in:
		
							
								
								
									
										57
									
								
								js_client/english.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										57
									
								
								js_client/english.html
									
									
									
									
									
										Normal 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
									
								
							
							
						
						
									
										57
									
								
								js_client/german.html
									
									
									
									
									
										Normal 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> | ||||
| @ -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") | ||||
|         } | ||||
|  | ||||
| @ -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> | ||||
|  | ||||
|  | ||||
| @ -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); | ||||
|     } | ||||
|  | ||||
|  | ||||
| @ -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
									
								
							
							
						
						
									
										90
									
								
								js_client/solutionBox.js
									
									
									
									
									
										Normal 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` | ||||
|  | ||||
|         `; | ||||
|     } | ||||
| } | ||||
		Reference in New Issue
	
	Block a user