Add documentation and move rules display to header

- Add comprehensive docstrings to game.py, room.py, constants.py
- Document all classes, methods, and module-level items
- Move active rules display into game header as inline column
- Update header to 5-column grid layout
- Update joker mode descriptions (Lucky Swing, Eagle-Eye)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-25 00:10:26 -05:00
parent 39b78a2ba6
commit d9073f862c
5 changed files with 717 additions and 152 deletions

View File

@@ -127,12 +127,12 @@
<label class="radio-label">
<input type="radio" name="joker-mode" value="lucky-swing">
<span>Lucky Swing</span>
<span class="rule-desc">1-2-3 decks - 1 Joker, -5 pt</span>
<span class="rule-desc">1-3 decks: 1 Joker, -5 pts!</span>
</label>
<label class="radio-label">
<input type="radio" name="joker-mode" value="eagle-eye">
<span>Eagle-Eyed</span>
<span class="rule-desc">★ = +2 pts, -4 pts paired</span>
<span class="rule-desc">2 per deck, +2 pts / -4 paired</span>
</label>
</div>
</div>
@@ -204,6 +204,10 @@
<div class="game-main">
<div class="game-header">
<div class="round-info">Hole <span id="current-round">1</span>/<span id="total-rounds">9</span></div>
<div id="active-rules-bar" class="active-rules-bar hidden">
<span class="rules-label">Rules:</span>
<span id="active-rules-list" class="rules-list"></span>
</div>
<div class="turn-info" id="turn-info">Your turn</div>
<div class="score-info">Showing: <span id="your-score">0</span></div>
<div class="header-buttons">
@@ -212,11 +216,6 @@
</div>
</div>
<div id="active-rules-bar" class="active-rules-bar hidden">
<span class="rules-label">Rules:</span>
<span id="active-rules-list" class="rules-list"></span>
</div>
<div class="game-table">
<div id="opponents-row" class="opponents-row"></div>

View File

@@ -463,8 +463,9 @@ input::placeholder {
/* Game Screen */
.game-header {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: auto 1fr auto auto auto;
align-items: center;
gap: 15px;
padding: 10px 25px;
background: rgba(0,0,0,0.35);
border-radius: 0;
@@ -475,22 +476,21 @@ input::placeholder {
}
.game-header .round-info {
justify-self: start;
font-weight: 600;
white-space: nowrap;
}
.game-header .turn-info {
justify-self: center;
font-weight: 600;
color: #f4a460;
white-space: nowrap;
}
.game-header .score-info {
justify-self: center;
white-space: nowrap;
}
.game-header .header-buttons {
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
@@ -517,16 +517,17 @@ input::placeholder {
background: rgba(255,255,255,0.1);
}
/* Active Rules Bar */
/* Active Rules (in header) */
.active-rules-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 20px;
background: rgba(0, 0, 0, 0.25);
font-size: 0.8rem;
flex-wrap: wrap;
gap: 6px;
font-size: 0.85rem;
}
.active-rules-bar.hidden {
display: none;
}
.active-rules-bar .rules-label {
@@ -536,18 +537,17 @@ input::placeholder {
.active-rules-bar .rules-list {
display: flex;
gap: 6px;
gap: 5px;
flex-wrap: wrap;
justify-content: center;
}
.active-rules-bar .rule-tag {
background: rgba(244, 164, 96, 0.25);
background: rgba(244, 164, 96, 0.3);
color: #f4a460;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
font-weight: 600;
}
/* Card Styles */