improve js client
This commit is contained in:
parent
786d773063
commit
8a8fc90a1f
@ -196,6 +196,7 @@ export class GridLetter extends GridBox {
|
|||||||
|
|
||||||
if (this.revealed) {
|
if (this.revealed) {
|
||||||
this.value = oldVal;
|
this.value = oldVal;
|
||||||
|
this.crosswordGrid.focusNextCell(this.x, this.y);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -696,12 +697,17 @@ export class CrosswordGrid extends LitElement {
|
|||||||
|
|
||||||
if (left_end.getGridType() === gridType.HINT) {
|
if (left_end.getGridType() === gridType.HINT) {
|
||||||
var box = left_end.getHintBox();
|
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) {
|
if (upper_end.getGridType() === gridType.HINT) {
|
||||||
var box = upper_end.getHintBox()
|
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;
|
this.infobox.horizontal_hint = hHint;
|
||||||
|
|||||||
@ -7,11 +7,48 @@
|
|||||||
<!-- Works only on browsers that support Javascript modules like
|
<!-- Works only on browsers that support Javascript modules like
|
||||||
Chrome, Safari, Firefox 60, Edge 17 -->
|
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>
|
</head>
|
||||||
|
|
||||||
<body style="background-color: black;">
|
<body>
|
||||||
<info-box id="infobox"></info-box>
|
<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>
|
<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>
|
||||||
|
|
||||||
|
|||||||
@ -1,4 +1,15 @@
|
|||||||
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 { 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 {
|
export class InfoBox extends LitElement {
|
||||||
static get styles() {
|
static get styles() {
|
||||||
@ -7,13 +18,19 @@ export class InfoBox extends LitElement {
|
|||||||
color: white;
|
color: white;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
margin-top: 0.8em;
|
margin-top: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hintbox {
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infobox {
|
.infobox {
|
||||||
|
font-size = 1em;
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto min-content;
|
||||||
top: 0em;
|
top: 0em;
|
||||||
left: 0em;
|
left: 0em;
|
||||||
right: 0em;
|
right: 0em;
|
||||||
@ -25,6 +42,27 @@ export class InfoBox extends LitElement {
|
|||||||
background-color: #333;
|
background-color: #333;
|
||||||
color: white;
|
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 = "";
|
this.horizontal_hint = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onNew(){
|
||||||
|
setCookie("session","");
|
||||||
|
window.location.href = location.protocol + '//' + location.host + location.pathname;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onShare(){
|
||||||
|
copyToClipboard(window.location.href);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div class="infobox">
|
<div class="infobox">
|
||||||
<div class="hinttext">▶ ${this.horizontal_hint}</div>
|
<div class="hintbox">
|
||||||
<div class="hinttext">▼ ${this.vertical_hint}</div>
|
<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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user