Improve styling

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;

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;