Merge pull request 'feat(frontend): enhance luck card editor with button-based value selection' (#91) from cdjavitasok into main

Reviewed-on: #91

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 */}
+          {/* Consequence Value */}
-          {(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
+          {[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"
+              <div className="flex flex-wrap gap-2 mt-2">
-                min="1"
+                {Array.from({ length: [0, 1].includes(cardData.consequence?.type) ? 10 : 5 }, (_, i) => i + 1).map(num => (
-                max="5"
+                  <button
-                value={cardData.consequence?.value ?? 1}
+                    key={num}
-                onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
+                    type="button"
-                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"
+                    onClick={() => updateConsequence('value', num)}
-              />
+                    className={`
-              <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+                      w-10 h-10 rounded-lg font-semibold transition-all duration-200
-                Érték: 1-5 között
+                      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>
           )}