From c06ae53b4f7c27e7f305d14330317cd4eca1072d Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sat, 7 Feb 2026 11:47:28 +0100
Subject: [PATCH] Update layout and annotations for player HUD and board tools

Improved clarity of component annotations and adjusted the layout styling in App.jsx and AppLayout.css. Key changes include the introduction of a middle section in the player HUD and refined descriptions for board-related elements. This enhances code readability and structuring consistency.
---
 frontend/src/App.jsx       | 17 +++++++++++++----
 frontend/src/AppLayout.css | 22 ++++++++++++++++------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 23d25b7..0a60347 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -309,10 +309,10 @@ export default function App() {
 
           {/* Main: Tools | Board | Player Rail */}
           <div className="mainRow">
-            {/* Left of board: Hilfskarten + Dunkles Deck side-by-side */}
+            {/* Left of board: Hilfskarten-Deck + Dunkles Deck (Board decks) */}
             <div className="leftTools">
               <div className="leftToolsRow">
-                <PlaceholderCard title="Hilfskarten" hint="(placeholder)" />
+                <PlaceholderCard title="Hilfskarten (Deck)" hint="(placeholder)" />
                 <PlaceholderCard title="Dunkles Deck" hint="(placeholder)" />
               </div>
             </div>
@@ -376,10 +376,19 @@ export default function App() {
             </div>
           </div>
 
-          {/* Bottom: Player HUD (left user card, mid secret, right points) */}
+          {/* Bottom: Player HUD
+              Left: user card
+              Middle: secret cards + player's help-card slot next to it
+              Right: points
+          */}
           <div className="playerHud">
             <PlaceholderCard title="Spielerkarte (User)" hint="(placeholder)" />
-            <PlaceholderCard title="Meine Geheimkarten" hint="(placeholder)" />
+
+            <div className="playerHudMiddle">
+              <PlaceholderCard title="Meine Geheimkarten" hint="(placeholder)" />
+              <PlaceholderCard title="Meine Hilfkarte(n)" hint="(placeholder)" />
+            </div>
+
             <PlaceholderCard title="Hogwarts Points" hint="(placeholder)" />
           </div>
         </section>
diff --git a/frontend/src/AppLayout.css b/frontend/src/AppLayout.css
index 3a08f67..6cee890 100644
--- a/frontend/src/AppLayout.css
+++ b/frontend/src/AppLayout.css
@@ -47,7 +47,7 @@ body {
   min-width: 0;
 }
 
-/* Left of board: stack cards vertically (Hilfskarten over Dunkles Deck) */
+/* Left of board: stack cards vertically (Hilfskarten deck over Dunkles Deck) */
 .leftTools {
   min-width: 0;
   overflow: hidden;
@@ -57,7 +57,7 @@ body {
 
 .leftToolsRow {
   display: grid;
-  grid-template-columns: 1fr; /* ✅ vertical */
+  grid-template-columns: 1fr; /* vertical */
   gap: 14px;
   min-width: 0;
 }
@@ -75,9 +75,9 @@ body {
 .diceOverlay {
   position: absolute;
   bottom: 14px;
-  right: 18px; /* "leicht rechts" */
+  right: 18px;
   width: 220px;
-  pointer-events: none; /* placeholder only */
+  pointer-events: none;
   opacity: 0.95;
 }
 
@@ -113,16 +113,26 @@ body {
   padding-top: 4px;
 }
 
-/* Bottom: Player HUD (User | Secret | Points) */
+/* Bottom: Player HUD (User | (Secret + My Help) | Points) */
 .playerHud {
   min-height: 0;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1.1fr 1.4fr 1.1fr;
+  grid-template-columns: 1.1fr 1.6fr 1.1fr;
   gap: 14px;
   min-width: 0;
 }
 
+/* Middle cell becomes a 2-column grid */
+.playerHudMiddle {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 0.8fr; /* Geheimkarten | Meine Hilfkarte(n) */
+  gap: 14px;
+}
+
 /* RIGHT COLUMN */
 .notesPane {
   overflow: hidden;