Implement working database
This commit is contained in:
parent
8427eb082b
commit
4076a4c556
5 changed files with 110 additions and 32 deletions
|
@ -4,6 +4,18 @@ const input = document.querySelector("#shiritori-input");
|
|||
const players = document.querySelector("#shiritori-players");
|
||||
let id = null;
|
||||
|
||||
function displayWord(_word, end) {
|
||||
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;
|
||||
if (end) {
|
||||
div.append(p);
|
||||
} else {
|
||||
div.prepend(p);
|
||||
}
|
||||
div.scrollTop = div.offsetHeight;
|
||||
}
|
||||
|
||||
ws.onmessage = e => {
|
||||
const { event, data } = JSON.parse(e.data);
|
||||
switch (event) {
|
||||
|
@ -12,14 +24,17 @@ ws.onmessage = e => {
|
|||
break;
|
||||
case "word":
|
||||
let waiting = data.author === id;
|
||||
p = document.createElement("p");
|
||||
p.innerHTML = data.reading || data.word === data.reading ? (data.word === "" ? data.reading : `<ruby>${data.word}<rp>(</rp><rt>${data.reading}<rt/><rp>)</rp></ruby>`) : data.word;
|
||||
div.appendChild(p);
|
||||
div.scrollTop = div.offsetHeight;
|
||||
displayWord(data.word, true);
|
||||
input.placeholder = waiting ? "Waiting for other players..." : `${data.next_char}…`;
|
||||
input.disabled = waiting;
|
||||
if (!waiting) input.focus();
|
||||
break;
|
||||
case "history":
|
||||
console.log(data);
|
||||
data.words.forEach(word => {
|
||||
displayWord(word, false);
|
||||
})
|
||||
break;
|
||||
case "playerCount":
|
||||
let otherPlayers = data.players - 1;
|
||||
players.innerHTML = `${otherPlayers === 0 ? "No" : otherPlayers} other player${otherPlayers === 1 ? "" : "s"} online.`;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue