crosswords/js_client/serverConnection.js

149 lines
4.2 KiB
JavaScript

import { html, css, LitElement } from 'https://unpkg.com/lit-element/lit-element.js?module';
import { WebsocketConnection } from './websocket.js';
import { getCookie, setCookie } from './cookie.js';
export class ServerConnection extends WebsocketConnection {
static get styles() {
return css``;
}
static get properties() {
return {
url: { type: String },
grid_id: { type: String },
lang: { type: String }
}
}
constructor() {
super();
this.sessionId = null;
this.isRegistered = false;
this.crossword_grid = null;
this.difficulty = 0;
}
update(props) {
if (props.has("grid_id")) {
this.crossword_grid = document.getElementById(this.grid_id);
this.crossword_grid.registerServerConnection(this);
}
super.update(props)
}
updateLocalSessionId() {
// look whether the session id is given in url params
// or stored as cookie
const queryString = window.location.search;
const params = new URLSearchParams(queryString);
if (params.has('session')) {
this.sessionId = params.get('session');
return;
}
if (params.has('difficulty')) {
this.difficulty = parseInt(params.get('difficulty'));
}
const cookie_session = getCookie('session');
if (cookie_session != "") {
this.sessionId = cookie_session;
return;
}
}
register() {
this.updateLocalSessionId();
console.log("register", this.sessionId);
this.sendMessage({
'type': 'register',
'sessionId': this.sessionId,
'difficulty': this.difficulty,
'lang': this.lang
});
}
onopen(event) {
super.onopen(event);
console.log("overloaded", this);
this.register();
}
handleRegistration(sessionId) {
if (!sessionId) {
console.warn("got undefined session id");
return;
}
this.sessionId = sessionId;
console.log("stored session", sessionId, "as cookie")
setCookie("session", sessionId, 2);
const urlparams = new URLSearchParams(window.location.search);
if (urlparams.has('session') && this.sessionId === urlparams.get('session')) {
return;
}
urlparams.set('session', sessionId);
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?session=' + sessionId;
window.history.pushState({ path: newurl }, '', newurl);
}
handleCrossword(crossword) {
this.crossword_grid.createGridByJson(crossword);
}
handleUpdate(updates) {
var i = 0;
for (i = 0; i < updates.length; i++) {
const item = updates[i];
const x = item['x'];
const y = item['y'];
if (item.hasOwnProperty("user_input")) {
const letter = item['user_input'];
this.crossword_grid.updateLetter(x, y, letter, false);
}
if (item.hasOwnProperty("revealed")) {
console.log("update");
const letter = item['revealed'];
this.crossword_grid.updateLetter(x, y, letter, true);
}
}
}
onmessage(event) {
super.onmessage(event)
try {
const msg = JSON.parse(event.data);
if (!msg.type) {
throw "missing type"
}
switch (msg.type) {
case 'register': {
this.handleRegistration(msg.sessionId);
break;
}
case 'crossword': {
this.handleCrossword(msg.crossword);
break;
}
case 'update': {
this.handleUpdate(msg.updates);
break
}
}
}
catch (err) {
console.error("could not parse servermessage", err);
return
}
}
}
customElements.define('server-connection', ServerConnection);