Add Jisho.org functionality to front-end
This commit is contained in:
parent
eb002c63e1
commit
6a968bfd51
3 changed files with 36 additions and 5 deletions
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue