anagrams: Use gloabl styling for the "Claim a Word" button

Trying to have some consistent styling across the games here.

diff --git a/anagrams/anagrams.css b/anagrams/anagrams.css
index 7aa59a883e86626141e7b4b6c2077952e7cbd194..76bd4b76330871fdc4a0682b1de00d8b0ea81d73 100644 (file)
--- a/anagrams/anagrams.css
+++ b/anagrams/anagrams.css
@@ -34,53 +34,31 @@
   flex-wrap: wrap;
 }
 
-.controls button {
-  padding: 0.4em 1em;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1em;
-}
-
-.claim-btn {
-  background: #27ae60;
-  border: 2px solid #27ae60;
-  color: white;
-  font-size: 1.1em;
-  padding: 0.5em 1.5em;
-}
-
-.claim-btn:disabled {
-  background: #95a5a6;
-  border-color: #95a5a6;
-  cursor: default;
-}
-
-.claim-btn.queued {
+.controls button.queued {
   background: #e67e22;
-  border-color: #e67e22;
 }
 
-/* Bag button */
-.bag-btn {
+/* Bag icon */
+.bag {
   display: inline-flex;
   align-items: center;
-  gap: 0.3em;
-  padding: 0.4em 0.8em;
-  background: #8e6c3e;
-  border: 2px solid #6b4f2d;
-  border-radius: 6px;
-  color: white;
-  font-size: 0.95em;
+  gap: 0.2em;
   cursor: pointer;
+  user-select: none;
 }
 
-.bag-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
+.bag .bag-icon {
+  font-size: 2em;
 }
 
-.bag-btn .bag-icon {
-  font-size: 1.2em;
+.bag .bag-count {
+  font-size: 0.9em;
+  color: #666;
+}
+
+.bag.disabled {
+  opacity: 0.4;
+  cursor: default;
 }
 
 /* Center letter pool */

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index f5495b79cc17a5e64f40dedb304b0094b8308fa9..b90ca21ab6575081fa5eec17ba7cad2915774fc8 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -701,7 +701,7 @@ class Game extends React.Component {
 
     return (
       <div key="ctrl" className="controls">
-        <button className={"claim-btn" + (is_queued ? " queued" : "")}
+        <button className={is_queued ? "queued" : ""}
                 disabled={!can_claim && !is_queued}
                 onClick={() => this.start_claim()}>
           {is_queued ? "Queued..." :
@@ -709,12 +709,14 @@ class Game extends React.Component {
            "Claim a Word"}
         </button>
 
-        <button className="bag-btn"
-                disabled={state.bag_remaining === 0 || !!state.claim_player}
-                onClick={() => this.deal_letter()}>
+        <span className={"bag" + (state.bag_remaining === 0 || !!state.claim_player ? " disabled" : "")}
+              onClick={state.bag_remaining > 0 && !state.claim_player
+                ? () => this.deal_letter() : null}>
           <span className="bag-icon">&#x1F45C;</span>
-          {state.bag_remaining !== null ? state.bag_remaining : "?"}
-        </button>
+          <span className="bag-count">
+            {state.bag_remaining !== null ? state.bag_remaining : "?"}
+          </span>
+        </span>
       </div>
     );
   }