improve js client
This commit is contained in:
		| @ -196,6 +196,7 @@ export class GridLetter extends GridBox { | ||||
|  | ||||
|         if (this.revealed) { | ||||
|             this.value = oldVal; | ||||
|             this.crosswordGrid.focusNextCell(this.x, this.y); | ||||
|             return | ||||
|         } | ||||
|  | ||||
| @ -696,12 +697,17 @@ export class CrosswordGrid extends LitElement { | ||||
|  | ||||
|         if (left_end.getGridType() === gridType.HINT) { | ||||
|             var box = left_end.getHintBox(); | ||||
|             hHint = `${box.hint_id}: ${box.horizontal_hint}`; | ||||
|             if (box.hasHorizontalHint()){ | ||||
|                 hHint = `${box.hint_id}: ${box.horizontal_hint}`; | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         if (upper_end.getGridType() === gridType.HINT) { | ||||
|             var box = upper_end.getHintBox() | ||||
|             vHint = `${box.hint_id}: ${box.vertical_hint}`; | ||||
|             if (box.hasVerticalHint()) | ||||
|             { | ||||
|                 vHint = `${box.hint_id}: ${box.vertical_hint}`; | ||||
|             } | ||||
|         } | ||||
|  | ||||
|         this.infobox.horizontal_hint = hHint; | ||||
|  | ||||
| @ -7,14 +7,51 @@ | ||||
|     <!-- Works only on browsers that support Javascript modules like | ||||
|        Chrome, Safari, Firefox 60, Edge 17 --> | ||||
|  | ||||
|     <style> | ||||
|         body { | ||||
|             background-color: black; | ||||
|             font-size: 1vw; | ||||
|         } | ||||
|  | ||||
|         @media (max-aspect-ratio: 3/2) { | ||||
|             body { | ||||
|                 font-size: 1vh; | ||||
|             } | ||||
|         } | ||||
|     </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 style="background-color: black;"> | ||||
| <body> | ||||
|     <info-box id="infobox"></info-box> | ||||
|     <server-connection id="server-connection" grid_id="grid" url="ws://localhost:8765"></server-connection> | ||||
|     <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> | ||||
|      | ||||
|  | ||||
| </body> | ||||
|  | ||||
| </html> | ||||
| @ -1,4 +1,15 @@ | ||||
| import { html, css, LitElement, unsafeCSS } from 'https://unpkg.com/lit-element/lit-element.js?module'; | ||||
| import { getCookie, setCookie } from './cookie.js'; | ||||
|  | ||||
| function copyToClipboard(text) { | ||||
|     var input = document.body.appendChild(document.createElement("input")); | ||||
|     input.value = text; | ||||
|     input.focus(); | ||||
|     input.select(); | ||||
|     document.execCommand('copy'); | ||||
|     input.parentNode.removeChild(input); | ||||
|     alert("copied url to clipboard"); | ||||
| } | ||||
|  | ||||
| export class InfoBox extends LitElement { | ||||
|     static get styles() { | ||||
| @ -7,13 +18,19 @@ export class InfoBox extends LitElement { | ||||
|                 color: white; | ||||
|                 margin-left: 1em; | ||||
|                 margin-top: 0.8em; | ||||
|                  | ||||
|             } | ||||
|  | ||||
|             .hintbox { | ||||
|                 grid-column: 1; | ||||
|                 grid-row: 1; | ||||
|             } | ||||
|  | ||||
|             .infobox { | ||||
|                 font-size = 1em; | ||||
|                 z-index: 20; | ||||
|                 position: fixed; | ||||
|                 display: grid; | ||||
|                 grid-template-columns: auto min-content; | ||||
|                 top: 0em; | ||||
|                 left: 0em; | ||||
|                 right: 0em; | ||||
| @ -25,6 +42,27 @@ export class InfoBox extends LitElement { | ||||
|                 background-color: #333; | ||||
|                 color: white; | ||||
|             } | ||||
|  | ||||
|             .buttonbox { | ||||
|                 grid-column: 2; | ||||
|                 grid-row: 1; | ||||
|                 padding: 0.3em; | ||||
|             } | ||||
|  | ||||
|             .button { | ||||
|                 background-color: black; | ||||
|                 border-color: white; | ||||
|                 border-width: 0.2em; | ||||
|                 border-style: solid; | ||||
|                 min-width: 10em; | ||||
|                 min-height: 2.5em; | ||||
|                 box-shadow: none; | ||||
|                 outline: none; | ||||
|                 margin: 0.1em 0.1em; | ||||
|                 color: white; | ||||
|                 font-size: 1em; | ||||
|             } | ||||
|  | ||||
|         `; | ||||
|     } | ||||
|  | ||||
| @ -41,11 +79,28 @@ export class InfoBox extends LitElement { | ||||
|         this.horizontal_hint = ""; | ||||
|     } | ||||
|  | ||||
|     onNew(){ | ||||
|         setCookie("session",""); | ||||
|         window.location.href = location.protocol + '//' + location.host + location.pathname; | ||||
|  | ||||
|     } | ||||
|  | ||||
|     onShare(){ | ||||
|         copyToClipboard(window.location.href); | ||||
|     } | ||||
|  | ||||
|     render() { | ||||
|         return html` | ||||
|             <div class="infobox"> | ||||
|                 <div class="hinttext">▶ ${this.horizontal_hint}</div> | ||||
|                 <div class="hinttext">▼ ${this.vertical_hint}</div> | ||||
|                 <div class="hintbox"> | ||||
|                     <div class="hinttext">▶ ${this.horizontal_hint}</div> | ||||
|                     <div class="hinttext">▼ ${this.vertical_hint}</div> | ||||
|                 </div> | ||||
|                 <div class="buttonbox"> | ||||
|                     <button class="button" @click=${this.onNew}> new Crossword </button> | ||||
|                     <button class="button" @click=${this.onShare}> share </button> | ||||
|  | ||||
|                 </div> | ||||
|             </div> | ||||
|         `; | ||||
|     } | ||||
|  | ||||
		Reference in New Issue
	
	Block a user