96 lines
1.9 KiB
JavaScript
96 lines
1.9 KiB
JavaScript
const app = new Vue({
|
|
el: `#app`,
|
|
data: {
|
|
io: null,
|
|
gameActive: false,
|
|
current: null,
|
|
incorrect: 0,
|
|
max_incorrect: 0,
|
|
channel: null,
|
|
close_timeout_id: null,
|
|
},
|
|
computed: {
|
|
showOverlay() {
|
|
return this.channel
|
|
&& this.gameActive
|
|
&& this.current
|
|
&& this.max_incorrect > 0;
|
|
},
|
|
totalHealth() {
|
|
return this.max_incorrect;
|
|
},
|
|
lostHealth() {
|
|
return this.incorrect;
|
|
},
|
|
currentHealth() {
|
|
return this.totalHealth - this.lostHealth;
|
|
},
|
|
parsedText() {
|
|
return this.current.split(` █ `).join(`<br>`);
|
|
},
|
|
},
|
|
methods: {
|
|
connected() {
|
|
this.io.on(`finish`, this.finishGame);
|
|
this.io.on(`update`, this.newState);
|
|
this.io.on(`state`, this.activity);
|
|
|
|
this.io.emit(`state`, this.channel);
|
|
},
|
|
/*
|
|
{
|
|
active: boolean,
|
|
current: string,
|
|
incorrect: {
|
|
current: number,
|
|
max: number,
|
|
},
|
|
}
|
|
*/
|
|
activity(d) {
|
|
console.log(`active listeners`, d)
|
|
if (d.active) {
|
|
this.newState(d);
|
|
this.gameActive = true;
|
|
};
|
|
},
|
|
newState(d) {
|
|
clearTimeout(this.close_timeout_id);
|
|
this.close_timeout_id = null;
|
|
this.current = d.current;
|
|
this.incorrect = d.incorrect.current;
|
|
this.max_incorrect = d.incorrect.max;
|
|
},
|
|
finishGame(d) {
|
|
if (d.win == null) {
|
|
this.close_timeout_id = setTimeout(() => {
|
|
this.current = null;
|
|
this.incorrect = 0;
|
|
this.max_incorrect = 0;
|
|
this.gameActive = false;
|
|
}, 5_000);
|
|
}
|
|
|
|
if (d.win) {
|
|
this.incorrect = -2;
|
|
};
|
|
|
|
this.incorrect = this.max_incorrect;
|
|
this.current = d.solution;
|
|
this.close_timeout_id = setTimeout(() => {
|
|
this.current = null;
|
|
this.incorrect = 0;
|
|
this.max_incorrect = 0;
|
|
this.gameActive = false;
|
|
}, 5_000);
|
|
},
|
|
},
|
|
mounted() {
|
|
const url = new URL(window.location.href);
|
|
let path = url.pathname.split(`/`);
|
|
this.channel = path[1];
|
|
|
|
this.io = io(window.location.host, { path: path[0] });
|
|
this.io.on(`connect`, this.connected);
|
|
},
|
|
});
|