d9073f862c
- 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>
293 lines
14 KiB
HTML
293 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Golf Card Game</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Lobby Screen -->
|
|
<div id="lobby-screen" class="screen active">
|
|
<h1>🏌️ Golf</h1>
|
|
<p class="subtitle">6-Card Golf Card Game</p>
|
|
|
|
<div class="form-group">
|
|
<label for="player-name">Your Name</label>
|
|
<input type="text" id="player-name" placeholder="Enter your name" maxlength="12">
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="create-room-btn" class="btn btn-primary">Create Room</button>
|
|
</div>
|
|
|
|
<div class="divider">or</div>
|
|
|
|
<div class="form-group">
|
|
<label for="room-code">Room Code</label>
|
|
<input type="text" id="room-code" placeholder="ABCD" maxlength="4">
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="join-room-btn" class="btn btn-secondary">Join Room</button>
|
|
</div>
|
|
|
|
<p id="lobby-error" class="error"></p>
|
|
</div>
|
|
|
|
<!-- Waiting Room Screen -->
|
|
<div id="waiting-screen" class="screen">
|
|
<div class="room-code-banner">
|
|
<span class="room-code-label">ROOM CODE</span>
|
|
<span class="room-code-value" id="display-room-code"></span>
|
|
<button class="room-code-copy" id="copy-room-code" title="Copy to clipboard">📋</button>
|
|
</div>
|
|
|
|
<div class="waiting-layout">
|
|
<div class="waiting-left-col">
|
|
<div class="players-list">
|
|
<h3>Players</h3>
|
|
<ul id="players-list"></ul>
|
|
</div>
|
|
<button id="leave-room-btn" class="btn btn-danger">Leave Room</button>
|
|
</div>
|
|
|
|
<div id="host-settings" class="settings hidden">
|
|
<h3>Game Settings</h3>
|
|
<div class="basic-settings-row">
|
|
<div class="form-group">
|
|
<label>CPU Players</label>
|
|
<div class="cpu-controls">
|
|
<button id="remove-cpu-btn" class="btn btn-small btn-danger">(-) Delete</button>
|
|
<button id="add-cpu-btn" class="btn btn-small btn-success">(+) Add</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="num-decks">Decks</label>
|
|
<select id="num-decks">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="num-rounds">Holes</label>
|
|
<select id="num-rounds">
|
|
<option value="9" selected>9</option>
|
|
<option value="18">18</option>
|
|
<option value="3">3</option>
|
|
<option value="1">1</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="initial-flips">Cards Revealed</label>
|
|
<select id="initial-flips">
|
|
<option value="2" selected>2 cards</option>
|
|
<option value="1">1 card</option>
|
|
<option value="0">None</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<p id="deck-recommendation" class="recommendation hidden">Recommended: 2+ decks for 4+ players</p>
|
|
<details class="advanced-options-section">
|
|
<summary>Advanced Options</summary>
|
|
|
|
<div class="advanced-options-grid">
|
|
<!-- Left Column: Variants & Jokers -->
|
|
<div class="options-column">
|
|
<div class="options-category">
|
|
<h4>Variants</h4>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="flip-on-discard">
|
|
<span>Flip on Discard</span>
|
|
<span class="rule-desc">Flip card when discarding from deck</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="knock-penalty">
|
|
<span>Knock Penalty</span>
|
|
<span class="rule-desc">+10 if you go out but don't have lowest</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-category">
|
|
<h4>Jokers</h4>
|
|
<div class="radio-group">
|
|
<label class="radio-label">
|
|
<input type="radio" name="joker-mode" value="none" checked>
|
|
<span>None</span>
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="joker-mode" value="standard">
|
|
<span>Standard</span>
|
|
<span class="rule-desc">2 per deck, -2 pts / 0 paired</span>
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="joker-mode" value="lucky-swing">
|
|
<span>Lucky Swing</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 per deck, +2 pts / -4 paired</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-category">
|
|
<h4>Point Modifiers</h4>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="super-kings">
|
|
<span>Super Kings</span>
|
|
<span class="rule-desc">K = -2 pts</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="ten-penny">
|
|
<span>Ten Penny</span>
|
|
<span class="rule-desc">10 = 1 pt</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Bonuses & Gameplay -->
|
|
<div class="options-column">
|
|
<div class="options-category">
|
|
<h4>Bonuses & Penalties</h4>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="knock-bonus">
|
|
<span>Knock Out Bonus</span>
|
|
<span class="rule-desc">-5 for going out first</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="underdog-bonus">
|
|
<span>Underdog Bonus</span>
|
|
<span class="rule-desc">-3 for lowest score each hole</span>
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="tied-shame">
|
|
<span>Tied Shame</span>
|
|
<span class="rule-desc">+5 if you tie with someone</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="blackjack">
|
|
<span>Blackjack</span>
|
|
<span class="rule-desc">21 pts = 0 pts</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="wolfpack">
|
|
<span>Wolfpack</span>
|
|
<span class="rule-desc">2 pairs of Jacks = -5 pts</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<button id="start-game-btn" class="btn btn-primary">Start Game</button>
|
|
</div>
|
|
|
|
<p id="waiting-message" class="info">Waiting for host to start the game...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Screen -->
|
|
<div id="game-screen" class="screen">
|
|
<div class="game-layout">
|
|
<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">
|
|
<button id="leave-game-btn" class="btn btn-small btn-danger">Leave</button>
|
|
<button id="mute-btn" class="mute-btn" title="Toggle sound">🔊</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-table">
|
|
<div id="opponents-row" class="opponents-row"></div>
|
|
|
|
<div class="player-row">
|
|
<div class="table-center">
|
|
<div class="deck-area">
|
|
<div id="deck" class="card card-back">
|
|
<span>?</span>
|
|
</div>
|
|
<div id="discard" class="card">
|
|
<span id="discard-content"></span>
|
|
</div>
|
|
</div>
|
|
<div id="drawn-card-area" class="hidden">
|
|
<div id="drawn-card" class="card"></div>
|
|
<button id="discard-btn" class="btn btn-small">Discard</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-section">
|
|
<div id="flip-prompt" class="flip-prompt hidden"></div>
|
|
<div class="player-area">
|
|
<div id="player-cards" class="card-grid"></div>
|
|
</div>
|
|
<div id="toast" class="toast hidden"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Left panel: Standings -->
|
|
<div id="standings-panel" class="side-panel left-panel">
|
|
<h4>Current Standings</h4>
|
|
<div id="standings-list" class="standings-list"></div>
|
|
</div>
|
|
|
|
<!-- Right panel: Scores -->
|
|
<div id="scoreboard" class="side-panel right-panel">
|
|
<h4>Scores</h4>
|
|
<table id="score-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Player</th>
|
|
<th>Hole</th>
|
|
<th>Tot</th>
|
|
<th>W</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<div id="game-buttons" class="game-buttons hidden">
|
|
<button id="next-round-btn" class="btn btn-small btn-primary hidden">Next Hole</button>
|
|
<button id="new-game-btn" class="btn btn-small btn-secondary hidden">New Game</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CPU Select Modal -->
|
|
<div id="cpu-select-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<h3>Select CPU Opponents</h3>
|
|
<div id="cpu-profiles-grid" class="profiles-grid"></div>
|
|
<div class="modal-buttons">
|
|
<button id="cancel-cpu-btn" class="btn btn-secondary">Cancel</button>
|
|
<button id="add-selected-cpus-btn" class="btn btn-primary" disabled>Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|