anagrams: Make the "return word" a badge at the upper right of the word

This makes it much more clear what this icon is, (it was confusing
when it was inline next to the existing '+').

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 2999555454aa51a7e7f11def1818c1479aa993ab..fb7f2dab7a54036e53ff1e9866c496edc20282a5 100644 (file)
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -161,18 +161,33 @@
 
 /* Stolen word display in claim area */
 .claimed-word {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  margin-right: 0.5em;
   margin-bottom: 4px;
 }
 
-.claimed-word .separator {
+.claimed-word .remove-word-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  font-size: 11px;
+  background: #888;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.separator {
   font-size: 18px;
   font-weight: bold;
   color: #666;
-  margin: 0 2px;
+  margin: 0 4px;
 }
 
 /* Player word areas */

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 84197bc091f12acca1f42c107ff6fac0a43496d4..13e3fb3713233941d6ff73e59ab55a9a099890aa 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -955,19 +955,19 @@ class Game extends React.Component {
 
         {claimed_words.length > 0 ? (
           <div>
-            {claimed_words.map(cw => (
+            {claimed_words.map((cw, i) => [
+              i > 0 ? <span key={"sep" + cw.word_id}
+                            className="separator">+</span> : null,
               <span key={cw.word_id} className="claimed-word">
-                {cw.word_obj.word.split("").map((ch, i) => (
-                  <Tile key={i} letter={ch} />
+                {cw.word_obj.word.split("").map((ch, j) => (
+                  <Tile key={j} letter={ch} />
                 ))}
-                <span className="separator">+</span>
-                <span style={{ cursor: "pointer", fontSize: "0.9em",
-                               color: "#888" }}
+                <span className="remove-word-btn"
                       onClick={() => this.return_word(cw.word_id)}>
                   &#x2715;
                 </span>
               </span>
-            ))}
+            ])}
           </div>
         ) : null}