From 23cb87c4f7323a3bfa87a0fd1a00bfc60f0d3b78 Mon Sep 17 00:00:00 2001
From: dominiccreates <dominiccreatess@gmail.com>
Date: Sat, 20 Jun 2026 06:14:07 -0700
Subject: [PATCH] Add quick-pick chip buttons for wager input and styling

---
 .../src/games/clash/ClashZkArena.tsx          |  6 ++++++
 clash-frontend/src/games/clash/styles.css     | 21 +++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/clash-frontend/src/games/clash/ClashZkArena.tsx b/clash-frontend/src/games/clash/ClashZkArena.tsx
index 46eac8d..47fed90 100644
--- a/clash-frontend/src/games/clash/ClashZkArena.tsx
+++ b/clash-frontend/src/games/clash/ClashZkArena.tsx
@@ -1676,7 +1676,13 @@ export function ClashZkArena({
             <div className="field-with-unit">
               <input value={pointsStr} onChange={(e) => setPointsStr(e.target.value)} placeholder="0.1" />
               <span>XLM</span>
+              <div className="chip-row">
+                <button type="button" className="chip-btn" onClick={() => setPointsStr("0.1")}>0.1</button>
+                <button type="button" className="chip-btn" onClick={() => setPointsStr("0.5")}>0.5</button>
+                <button type="button" className="chip-btn" onClick={() => setPointsStr("1")}>1</button>
+              </div>
             </div>
+            
             <label>Opponent Username</label>
             <input value={opponentUsername} onChange={(e) => setOpponentUsername(e.target.value)} placeholder="captain_name" />
             {error && <p className="inline-error">{error}</p>}
diff --git a/clash-frontend/src/games/clash/styles.css b/clash-frontend/src/games/clash/styles.css
index d0cbfa3..a3ccf8d 100644
--- a/clash-frontend/src/games/clash/styles.css
+++ b/clash-frontend/src/games/clash/styles.css
@@ -284,6 +284,27 @@
 .field-with-unit input { padding-right: 3rem; }
 .field-with-unit span { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: #f5a623; font-size: 0.72rem; }
 
+/* Chip buttons for quick wager selections */
+.chip-btn {
+  margin-left: 0.4rem;
+  background: rgba(0,212,255,0.1);
+  border: 1px solid #00d4ff;
+  color: #00d4ff;
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  transition: background 0.2s ease;
+}
+.chip-btn:hover:not(:disabled) {
+  background: rgba(0,212,255,0.3);
+}
+.chip-row {
+  display: flex;
+  gap: 0.4rem;
+  margin-top: 0.4rem;
+}
+
 .btn-arena-primary {
   width: 100%;
   background: #e5133a;