From b34442bf9a45234863bf3f3c47f18fe0897b3cdb Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Tue, 4 Nov 2025 19:00:21 +0100
Subject: [PATCH] feat(frontend): enhance luck card editor with button-based
 value selection

---
 .../components/DeckCreator/LuckCardEditor.jsx | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
index e035aa79..d607cfcc 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
@@ -150,22 +150,35 @@ export default function LuckCardEditor({ card, onChange }) {
             </div>
           </div>
           
-          {/* Consequence Value - csak kör kihagyás és extra kör */}
-          {(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
+          {/* Consequence Value */}
+          {[0, 1, 2, 3].includes(cardData.consequence?.type) && (
             <div>
               <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                {cardData.consequence?.type === 2 ? 'Körök kihagyása' : 'Extra körök száma'}
+                {[0, 1].includes(cardData.consequence?.type) ? 'Lépések száma' : (cardData.consequence?.type === 2 ? 'Kihagyott körök' : 'Extra körök száma')}
               </label>
-              <input
-                type="number"
-                min="1"
-                max="5"
-                value={cardData.consequence?.value ?? 1}
-                onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
-                className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
-              />
-              <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
-                Érték: 1-5 között
+              
+              <div className="flex flex-wrap gap-2 mt-2">
+                {Array.from({ length: [0, 1].includes(cardData.consequence?.type) ? 10 : 5 }, (_, i) => i + 1).map(num => (
+                  <button
+                    key={num}
+                    type="button"
+                    onClick={() => updateConsequence('value', num)}
+                    className={`
+                      w-10 h-10 rounded-lg font-semibold transition-all duration-200
+                      flex items-center justify-center
+                      ${(cardData.consequence?.value ?? 1) === num
+                        ? 'bg-[color:var(--color-luck)] text-white ring-2 ring-offset-2 ring-offset-[color:var(--color-surface)] ring-[color:var(--color-luck)]'
+                        : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
+                      }
+                    `}
+                  >
+                    {num}
+                  </button>
+                ))}
+              </div>
+
+              <div className="text-xs text-[color:var(--color-text-muted)] mt-3">
+                Érték: {[0, 1].includes(cardData.consequence?.type) ? '1-10' : '1-5'} között
               </div>
             </div>
           )}
-- 
2.52.0