jonas/crosswords
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve js client

Browse Source
This commit is contained in:
Jonas Weinz 2021-06-21 10:18:31 +02:00
parent 786d773063
commit 8a8fc90a1f
3 changed files with 106 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js_client/grid.js
View File

@ -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;

41
js_client/index.html
View File

@ -7,11 +7,48 @@
<!-- 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>

61
js_client/infoBox.js
View File

@ -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>
`;
}