Add Jisho.org functionality to front-end

This commit is contained in:
Elnu 2023-04-15 15:26:15 -07:00
parent eb002c63e1
commit 6a968bfd51
3 changed files with 36 additions and 5 deletions

View file

@ -2,12 +2,16 @@ ws = new WebSocket("ws://localhost:8080");
const div = document.querySelector("#shiritori");
const input = document.querySelector("#shiritori-input");
const players = document.querySelector("#shiritori-players");
const iframe = document.querySelector("iframe");
console.log("yo");
let id = null;
function displayWord(_word, end, delay) {
let { word, reading } = _word;
p = document.createElement("p");
p.innerHTML = reading || word === reading ? (word === "" ? reading : `<ruby>${word}<rp>(</rp><rt>${reading}<rt/><rp>)</rp></ruby>`) : word;
p.innerHTML = `<a href="javascript:lookUpWord('${word || reading}')">${
reading || word === reading ? (word === "" ? reading : `<ruby>${word}<rp>(</rp><rt>${reading}<rt/><rp>)</rp></ruby>`) : word
}</a>`;
if (delay != 0) {
p.style.animationDelay = `${delay}s`;
}
@ -28,16 +32,22 @@ function updateInput(data) {
}
}
function lookUpWord(word) {
iframe.src = `https://jisho.org/search/${word}`;
}
ws.onmessage = e => {
const { event, data } = JSON.parse(e.data);
switch (event) {
case "greeting":
id = data.id;
updateInput(data);
lookUpWord(data.word.word);
break;
case "word":
displayWord(data.word, true, 0);
updateInput(data);
lookUpWord(data.word.word);
break;
case "history":
console.log(data);