diff --git a/demo/shiritori.js b/demo/shiritori.js index dfd8c28..f43f5bf 100644 --- a/demo/shiritori.js +++ b/demo/shiritori.js @@ -4,10 +4,13 @@ const input = document.querySelector("#shiritori-input"); const players = document.querySelector("#shiritori-players"); let id = null; -function displayWord(_word, end) { +function displayWord(_word, end, delay) { let { word, reading } = _word; p = document.createElement("p"); p.innerHTML = reading || word === reading ? (word === "" ? reading : `${word}(${reading})`) : word; + if (delay != 0) { + p.style.animationDelay = `${delay}s`; + } if (end) { div.append(p); } else { @@ -24,16 +27,16 @@ ws.onmessage = e => { break; case "word": let waiting = data.author === id; - displayWord(data.word, true); + displayWord(data.word, true, 0); input.placeholder = waiting ? "Waiting for other players..." : `${data.next_mora}…`; input.disabled = waiting; if (!waiting) input.focus(); break; case "history": console.log(data); - data.words.forEach(word => { - displayWord(word, false); - }) + for (let i = 0; i < data.words.length; i++) { + displayWord(data.words[i], false, 0.1 * i); + } break; case "playerCount": let otherPlayers = data.players - 1; diff --git a/demo/style.css b/demo/style.css index 3f1984b..5b1a5e7 100644 --- a/demo/style.css +++ b/demo/style.css @@ -12,11 +12,28 @@ div#content { } div#shiritori p { margin: 0; + animation-duration: 1s; + animation-name: slidein; + animation-fill-mode: forwards; + opacity: 0; +} +@keyframes slidein { + from { + transform: translateX(-32px); + opacity: 0; + } + + to { + transform: none; + opacity: 1; + } } div#shiritori { padding: 2px; - height: 8em; + height: 24em; + font-size: 0.875em; overflow-y: scroll; + text-align: center; } div#shiritori, input#shiritori-input { padding: 0.25em;