From 1ff2aedc2d0795c106b76e51343c84563831b357 Mon Sep 17 00:00:00 2001
From: ElnuDev <elnu@elnu.com>
Date: Fri, 14 Apr 2023 19:06:30 -0700
Subject: [PATCH] Improve styling

---
 demo/shiritori.js | 13 ++++++++-----
 demo/style.css    | 19 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

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 : `<ruby>${word}<rp>(</rp><rt>${reading}<rt/><rp>)</rp></ruby>`) : 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;