nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update layout and annotations for player HUD and board tools

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-07 11:47:28 +01:00
parent fd91bbe207
commit c06ae53b4f
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/App.jsx
View File

@@ -309,10 +309,10 @@ export default function App() {
{/* Main: Tools | Board | Player Rail */} {/* Main: Tools | Board | Player Rail */}
<div className="mainRow"> <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="leftTools">
<div className="leftToolsRow"> <div className="leftToolsRow">
<PlaceholderCard title="Hilfskarten" hint="(placeholder)" /> <PlaceholderCard title="Hilfskarten (Deck)" hint="(placeholder)" />
<PlaceholderCard title="Dunkles Deck" hint="(placeholder)" /> <PlaceholderCard title="Dunkles Deck" hint="(placeholder)" />
</div> </div>
</div> </div>
@@ -376,10 +376,19 @@ export default function App() {
</div> </div>
</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"> <div className="playerHud">
<PlaceholderCard title="Spielerkarte (User)" hint="(placeholder)" /> <PlaceholderCard title="Spielerkarte (User)" hint="(placeholder)" />
<div className="playerHudMiddle">
<PlaceholderCard title="Meine Geheimkarten" hint="(placeholder)" /> <PlaceholderCard title="Meine Geheimkarten" hint="(placeholder)" />
<PlaceholderCard title="Meine Hilfkarte(n)" hint="(placeholder)" />
</div>
<PlaceholderCard title="Hogwarts Points" hint="(placeholder)" /> <PlaceholderCard title="Hogwarts Points" hint="(placeholder)" />
</div> </div>
</section> </section>

22
frontend/src/AppLayout.css
View File

@@ -47,7 +47,7 @@ body {
min-width: 0; 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 { .leftTools {
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
@@ -57,7 +57,7 @@ body {
.leftToolsRow { .leftToolsRow {
display: grid; display: grid;
grid-template-columns: 1fr; /* ✅ vertical */ grid-template-columns: 1fr; /* vertical */
gap: 14px; gap: 14px;
min-width: 0; min-width: 0;
} }
@@ -75,9 +75,9 @@ body {
.diceOverlay { .diceOverlay {
position: absolute; position: absolute;
bottom: 14px; bottom: 14px;
right: 18px; /* "leicht rechts" */ right: 18px;
width: 220px; width: 220px;
pointer-events: none; /* placeholder only */ pointer-events: none;
opacity: 0.95; opacity: 0.95;
} }
@@ -113,16 +113,26 @@ body {
padding-top: 4px; padding-top: 4px;
} }
/* Bottom: Player HUD (User | Secret | Points) */ /* Bottom: Player HUD (User | (Secret + My Help) | Points) */
.playerHud { .playerHud {
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 1.1fr 1.4fr 1.1fr; grid-template-columns: 1.1fr 1.6fr 1.1fr;
gap: 14px; gap: 14px;
min-width: 0; 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 */ /* RIGHT COLUMN */
.notesPane { .notesPane {
overflow: hidden; overflow: hidden;