From 84c28addfe984524bc1cebbd42e5fdb6dca6bc84 Mon Sep 17 00:00:00 2001 From: Antigravity Date: Thu, 17 Sep 2026 10:30:57 +0000 Subject: [PATCH] feat(plants): Plant purchase system in Dave's Shop & pre-battle deck selection screen --- game/css/style.css | 313 +++++++++++++++++++++++++++++++++++-- game/index.html | 86 ++++++++-- game/js/game.js | 274 +++++++++++++++++++++++++++++++- game/js/systems/auth.js | 12 +- game/js/systems/economy.js | 194 +++++++++++++++++++---- scripts/db.py | 27 +++- scripts/test_game.py | 49 ++++++ 7 files changed, 889 insertions(+), 66 deletions(-) diff --git a/game/css/style.css b/game/css/style.css index a951743..0ae852d 100644 --- a/game/css/style.css +++ b/game/css/style.css @@ -386,8 +386,39 @@ canvas#gameCanvas { /* Shop Modal Styles */ .shop-card { - max-width: 520px; - width: 90%; + max-width: 680px; + width: 95%; + max-height: 90vh; + overflow-y: auto; +} + +.shop-tabs { + display: flex; + gap: 8px; + margin-bottom: 12px; + justify-content: center; +} + +.shop-tab { + background: rgba(0, 0, 0, 0.4); + color: #cfd8dc; + border: 1.5px solid #8d6e63; + border-radius: 6px; + padding: 6px 14px; + font-size: 13px; + font-weight: bold; + cursor: pointer; + transition: all 0.2s; +} + +.shop-tab:hover { + background: rgba(255, 255, 255, 0.1); +} + +.shop-tab.active { + background: #388e3c; + color: #fff; + border-color: #81c784; } .shop-items { @@ -397,30 +428,90 @@ canvas#gameCanvas { text-align: left; } +.shop-plants-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 10px; + text-align: left; +} + .shop-item { background: rgba(0, 0, 0, 0.4); border: 2px solid #8d6e63; border-radius: 8px; - padding: 12px 16px; + padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } -.shop-item-info h3 { - font-size: 15px; - color: #ffeb3b; - margin-bottom: 4px; +.shop-plant-card { + background: rgba(0, 0, 0, 0.45); + border: 1.5px solid #8d6e63; + border-radius: 8px; + padding: 10px 12px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + transition: border-color 0.2s, transform 0.15s; } -.shop-item-info p { - font-size: 12px; - color: #ccc; - margin-bottom: 0; +.shop-plant-card:hover { + border-color: #ffeb3b; + transform: translateY(-2px); +} + +.shop-plant-icon { + font-size: 28px; + width: 44px; + height: 44px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.08); + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(255, 255, 255, 0.2); + flex-shrink: 0; +} + +.shop-plant-info { + flex: 1; + min-width: 0; +} + +.shop-plant-info h4 { + font-size: 14px; + color: #ffeb3b; + margin: 0 0 2px 0; +} + +.shop-plant-info p { + font-size: 11px; + color: #b0bec5; + margin: 0; line-height: 1.2; } +.shop-plant-cost { + font-size: 11px; + color: #ffd54f; + font-weight: bold; + margin-bottom: 2px; +} + +.badge-purchased { + background: rgba(76, 175, 80, 0.25); + border: 1px solid #81c784; + color: #a5d6a7; + font-size: 11px; + font-weight: bold; + padding: 4px 8px; + border-radius: 4px; + white-space: nowrap; +} + .btn-buy { background: #4caf50; color: #fff; @@ -444,6 +535,206 @@ canvas#gameCanvas { cursor: not-allowed; } +/* Pre-Battle Seed Selection & Inventory Modal */ +.seed-select-card { + max-width: 740px; + width: 95%; + max-height: 90vh; + overflow-y: auto; +} + +.seed-select-section-title { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; + font-weight: bold; + color: #ffeb3b; + margin-bottom: 6px; + border-bottom: 1px solid rgba(255, 235, 59, 0.3); + padding-bottom: 4px; +} + +.seed-deck-bar { + display: flex; + gap: 8px; + padding: 8px 10px; + background: rgba(0, 0, 0, 0.4); + border: 1.5px solid #81c784; + border-radius: 8px; + min-height: 76px; + align-items: center; + flex-wrap: wrap; + margin-bottom: 12px; +} + +.seed-slot-card { + position: relative; + width: 62px; + height: 68px; + background: linear-gradient(135deg, #37474f, #263238); + border: 1.5px solid #81c784; + border-radius: 6px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s; +} + +.seed-slot-card:hover { + transform: translateY(-3px) scale(1.04); + border-color: #ff5252; + box-shadow: 0 0 8px rgba(255, 82, 82, 0.5); +} + +.seed-slot-card .slot-icon { + font-size: 24px; +} + +.seed-slot-card .slot-cost { + font-size: 10px; + font-weight: bold; + color: #ffeb3b; + background: rgba(0, 0, 0, 0.6); + padding: 1px 4px; + border-radius: 3px; + margin-top: 2px; +} + +.seed-slot-card .slot-remove-badge { + position: absolute; + top: -5px; + right: -5px; + background: #f44336; + color: #fff; + font-size: 10px; + width: 16px; + height: 16px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + border: 1px solid #fff; +} + +.seed-slot-empty { + width: 62px; + height: 68px; + border: 2px dashed rgba(255, 255, 255, 0.25); + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + color: rgba(255, 255, 255, 0.35); + font-size: 11px; + font-weight: bold; +} + +.seed-inventory-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 8px; + max-height: 300px; + overflow-y: auto; + padding: 6px; + background: rgba(0, 0, 0, 0.3); + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.seed-inv-item { + background: rgba(0, 0, 0, 0.4); + border: 1.5px solid #5d4037; + border-radius: 6px; + padding: 8px 6px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + cursor: pointer; + transition: all 0.2s; + user-select: none; + min-height: 94px; +} + +.seed-inv-item:hover:not(.locked) { + border-color: #69f0ae; + transform: translateY(-2px); + background: rgba(105, 240, 174, 0.1); +} + +.seed-inv-item.in-deck { + border-color: #ffeb3b; + background: rgba(255, 235, 59, 0.15); + box-shadow: 0 0 6px rgba(255, 235, 59, 0.3); +} + +.seed-inv-item.locked { + opacity: 0.65; + border-color: #424242; + cursor: default; +} + +.seed-inv-icon { + font-size: 26px; + margin-bottom: 2px; +} + +.seed-inv-name { + font-size: 11px; + font-weight: bold; + color: #fff; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +.seed-inv-sun { + font-size: 10px; + color: #ffd54f; + margin-top: 1px; +} + +.seed-inv-status { + margin-top: 4px; + font-size: 10px; + font-weight: bold; + padding: 2px 6px; + border-radius: 3px; +} + +.seed-inv-status.status-deck { + background: #ffb300; + color: #000; +} + +.seed-inv-status.status-ready { + background: rgba(76, 175, 80, 0.3); + color: #81c784; + border: 1px solid #81c784; +} + +.seed-inv-status.status-lock { + background: rgba(244, 67, 54, 0.2); + color: #ef5350; + border: 1px solid #ef5350; +} + +.seed-select-actions { + display: flex; + gap: 12px; + justify-content: center; + align-items: center; + margin-top: 14px; + flex-wrap: wrap; +} + /* Auth Modal & Profile Dashboard Styles */ .auth-card { max-width: 440px; diff --git a/game/index.html b/game/index.html index 3c4a619..25bd05c 100644 --- a/game/index.html +++ b/game/index.html @@ -58,6 +58,7 @@
+ @@ -104,6 +105,7 @@
+ @@ -121,28 +123,78 @@