Use a full tile's worth of space between words in the score display.

Previously, the inter-word display was a tiny gap and things all ran
together.

Both the tile size and the gap between tiles are variables for
consistent computation.

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 2c7304f3dd94543a7906046c2d80fb57f85c2d94..2999555454aa51a7e7f11def1818c1479aa993ab 100644 (file)
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -1,3 +1,8 @@
+:root {
+  --word-tile-size: 32px;
+  --word-tile-gap: 2px;
+}
+
 .game-info {
   margin-bottom: 1em;
 }
@@ -187,10 +192,16 @@
   font-size: 1em;
 }
 
+.player-words-row {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 2px;
+  column-gap: calc(var(--word-tile-size) + var(--word-tile-gap));
+}
+
 .word-display {
   display: inline-flex;
-  gap: 2px;
-  margin: 2px 4px 2px 0;
+  gap: var(--word-tile-gap);
   cursor: default;
 }
 
@@ -199,8 +210,8 @@
 }
 
 .word-display .tile {
-  width: 32px;
-  height: 32px;
+  width: var(--word-tile-size);
+  height: var(--word-tile-size);
   font-size: 16px;
   cursor: inherit;
 }

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index b6476867072e700564da9c9ffb1525f95aebc338..ede6c2e724ff34a64d72185256da30cce047a546 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -1033,14 +1033,16 @@ class Game extends React.Component {
               {pw.words.length === 0 ? (
                 <span className="status">No words yet</span>
               ) : (
-                pw.words.map(w => (
-                  <WordDisplay key={w.id}
-                    word={w}
-                    stealable={claim_active}
-                    onSteal={claim_active
-                      ? () => this.steal_word(sid, w) : null}
-                  />
-                ))
+                <div className="player-words-row">
+                  {pw.words.map(w =>
+                    <WordDisplay key={w.id}
+                      word={w}
+                      stealable={claim_active}
+                      onSteal={claim_active
+                        ? () => this.steal_word(sid, w) : null}
+                    />
+                  )}
+                </div>
               )}
             </div>
           );
@@ -1074,13 +1076,15 @@ class Game extends React.Component {
         {sorted.map(entry => (
           <div key={entry.name + "-words"} className="player-word-section">
             <h3>{entry.name}</h3>
-            {entry.words.map((w, i) => (
-              <span key={i} className="word-display">
-                {w.split("").map((ch, j) => (
-                  <Tile key={j} letter={ch} />
-                ))}
-              </span>
-            ))}
+            <div className="player-words-row">
+              {entry.words.map((w, i) =>
+                <span key={i} className="word-display">
+                  {w.split("").map((ch, j) => (
+                    <Tile key={j} letter={ch} />
+                  ))}
+                </span>
+              )}
+            </div>
           </div>
         ))}
       </div>