crosswords/js_client/serverConnection.js

149 lines
4.2 KiB
JavaScript
Raw Normal View History

2021-06-17 16:02:50 +02:00
import { html, css, LitElement } from 'https://unpkg.com/lit-element/lit-element.js?module';
2021-06-24 12:10:59 +02:00
import { WebsocketConnection } from './websocket.js';
import { getCookie, setCookie } from './cookie.js';
2021-06-17 16:02:50 +02:00
export class ServerConnection extends WebsocketConnection {
static get styles() {
return css``;
}
static get properties() {
return {
url: { type: String },
2021-06-23 19:11:34 +02:00
grid_id: { type: String },
lang: { type: String }
2021-06-17 16:02:50 +02:00
}
}
constructor() {
super();
this.sessionId = null;
this.isRegistered = false;
this.crossword_grid = null;
2021-07-03 20:21:45 +02:00
this.difficulty = 0;
2021-06-23 19:11:34 +02:00
2021-06-17 16:02:50 +02:00
}
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;
}
2021-07-03 20:21:45 +02:00
if (params.has('difficulty')) {
this.difficulty = parseInt(params.get('difficulty'));
}
2021-06-17 16:02:50 +02:00
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',
2021-06-23 19:11:34 +02:00
'sessionId': this.sessionId,
2021-07-03 20:21:45 +02:00
'difficulty': this.difficulty,
2021-06-23 19:11:34 +02:00
'lang': this.lang
2021-06-17 16:02:50 +02:00
});
}
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);
2021-06-25 09:48:06 +02:00
if (urlparams.has('session') && this.sessionId === urlparams.get('session')) {
2021-06-17 16:02:50 +02:00
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);