From 46ad6caefd830bf73a9eb6ee06ff8ad3ab58a116 Mon Sep 17 00:00:00 2001
From: GitG0r0 <145980798+GitG0r0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 19:52:45 +0200
Subject: [PATCH] =?UTF-8?q?refactor(deck-creator):=20statisztika=20panel?=
 =?UTF-8?q?=20elt=C3=A1vol=C3=ADt=C3=A1sa=20=C3=A9s=20layout=20optimaliz?=
 =?UTF-8?q?=C3=A1l=C3=A1sa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Statisztika panel eltávolítva
- Grid elrendezés egyszerűsítve
- Felesleges kód eltávolítva
- Jobb helykihasználás az űrlap elemeknek
---
 .../src/components/DeckCreator/DeckHeader.jsx | 289 ++++++++----------
 1 file changed, 127 insertions(+), 162 deletions(-)

diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
index 408b0251..22d8dcd1 100644
--- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
@@ -44,10 +44,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
     onUpdate({ [field]: value })
   }
 
-  const cardsCount = deck.cards?.length || 0
-  const taskCards = deck.cards?.filter(card => card.type === 'task')?.length || 0
-  const jokerCards = deck.cards?.filter(card => card.type === 'joker')?.length || 0
-  const luckCards = deck.cards?.filter(card => card.type === 'luck')?.length || 0
+  // Remove unused card count variables
 
   return (
     <div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
@@ -77,172 +74,140 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
       </div>
 
       {/* Main Content Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
-        {/* Deck Basic Info */}
-        <div className="lg:col-span-2 space-y-4">
-          {/* Deck Name */}
+      <div className="space-y-4">
+        {/* Deck Name */}
+        <div>
+          <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+            📦 Pakli neve
+          </label>
+          <input
+            type="text"
+            value={deck.name}
+            onChange={(e) => handleInputChange('name', e.target.value)}
+            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-success)] focus:border-transparent outline-none transition-all duration-200"
+            placeholder="Add meg a pakli nevét..."
+          />
+        </div>
+
+        {/* Type, Privacy and Description Row */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {/* Deck Type */}
           <div>
             <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-              📦 Pakli neve
+              🎯 Típus
+            </label>
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
+                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-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
+                style={{
+                  paddingLeft: "2.5rem"
+                }}
+              >
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  {React.createElement(currentDeckType.icon, {
+                    style: { color: currentDeckType.color }
+                  })}
+                </div>
+                {currentDeckType.label}
+                <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                  <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </button>
+              
+              {isTypeDropdownOpen && (
+                <div 
+                  className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
+                  ref={typeDropdownRef}
+                >
+                  {deckTypes.map(type => (
+                    <button
+                      key={type.value}
+                      onClick={() => {
+                        handleInputChange('type', type.value);
+                        setIsTypeDropdownOpen(false);
+                      }}
+                      className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
+                    >
+                      {React.createElement(type.icon, {
+                        style: { color: type.color }
+                      })}
+                      <span>{type.label}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Privacy */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              👁️ Láthatóság
+            </label>
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
+                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-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
+                style={{
+                  paddingLeft: "2.5rem"
+                }}
+              >
+                <div className="absolute left-4 top-1/2 -translate-y-1/2">
+                  {React.createElement(currentPrivacy.icon, {
+                    className: "text-[color:var(--color-text)]"
+                  })}
+                </div>
+                {currentPrivacy.label}
+                <div className="absolute right-4 top-1/2 -translate-y-1/2">
+                  <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </button>
+              
+              {isPrivacyDropdownOpen && (
+                <div 
+                  className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
+                  ref={privacyDropdownRef}
+                >
+                  {privacyOptions.map(option => (
+                    <button
+                      key={option.value}
+                      onClick={() => {
+                        handleInputChange('privacy', option.value);
+                        setIsPrivacyDropdownOpen(false);
+                      }}
+                      className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
+                    >
+                      {React.createElement(option.icon, {
+                        className: "text-[color:var(--color-text)]"
+                      })}
+                      <span>{option.label}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Description */}
+          <div>
+            <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
+              📝 Leírás
             </label>
             <input
               type="text"
-              value={deck.name}
-              onChange={(e) => handleInputChange('name', e.target.value)}
+              value={deck.description}
+              onChange={(e) => handleInputChange('description', e.target.value)}
               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-success)] focus:border-transparent outline-none transition-all duration-200"
-              placeholder="Add meg a pakli nevét..."
+              placeholder="Rövid leírás..."
             />
           </div>
-
-          {/* Type and Privacy Row */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {/* Deck Type */}
-            <div>
-              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                🎯 Típus
-              </label>
-              <div className="relative">
-                <button
-                  type="button"
-                  onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
-                  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-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
-                  style={{
-                    paddingLeft: "2.5rem"
-                  }}
-                >
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                    {React.createElement(currentDeckType.icon, {
-                      style: { color: currentDeckType.color }
-                    })}
-                  </div>
-                  {currentDeckType.label}
-                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                    <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                </button>
-                
-                {isTypeDropdownOpen && (
-                  <div 
-                    className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
-                    ref={typeDropdownRef}
-                  >
-                    {deckTypes.map(type => (
-                      <button
-                        key={type.value}
-                        onClick={() => {
-                          handleInputChange('type', type.value);
-                          setIsTypeDropdownOpen(false);
-                        }}
-                        className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
-                      >
-                        {React.createElement(type.icon, {
-                          style: { color: type.color }
-                        })}
-                        <span>{type.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Privacy */}
-            <div>
-              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                👁️ Láthatóság
-              </label>
-              <div className="relative">
-                <button
-                  type="button"
-                  onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
-                  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-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
-                  style={{
-                    paddingLeft: "2.5rem"
-                  }}
-                >
-                  <div className="absolute left-4 top-1/2 -translate-y-1/2">
-                    {React.createElement(currentPrivacy.icon, {
-                      className: "text-[color:var(--color-text)]"
-                    })}
-                  </div>
-                  {currentPrivacy.label}
-                  <div className="absolute right-4 top-1/2 -translate-y-1/2">
-                    <svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
-                      <path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
-                    </svg>
-                  </div>
-                </button>
-                
-                {isPrivacyDropdownOpen && (
-                  <div 
-                    className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
-                    ref={privacyDropdownRef}
-                  >
-                    {privacyOptions.map(option => (
-                      <button
-                        key={option.value}
-                        onClick={() => {
-                          handleInputChange('privacy', option.value);
-                          setIsPrivacyDropdownOpen(false);
-                        }}
-                        className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
-                      >
-                        {React.createElement(option.icon, {
-                          className: "text-[color:var(--color-text)]"
-                        })}
-                        <span>{option.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* Description */}
-            <div>
-              <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                📝 Leírás
-              </label>
-              <input
-                type="text"
-                value={deck.description}
-                onChange={(e) => handleInputChange('description', e.target.value)}
-                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-success)] focus:border-transparent outline-none transition-all duration-200"
-                placeholder="Rövid leírás..."
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Stats Panel */}
-        <div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]">
-          <h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2">
-            📊 Statisztikák
-          </h3>
-          
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">Összes kártya:</span>
-              <span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span>
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span>
-              <span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span>
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span>
-              <span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span>
-            </div>
-            
-            <div className="flex justify-between items-center">
-              <span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span>
-              <span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span>
-            </div>
-          </div>
         </div>
       </div>
     </div>