alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Huge v2 uplift, now deployable with real user management and tooling!

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-27 11:32:15 -05:00
parent c912a56c2d
commit bea85e6b28
61 changed files with 25153 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
client/index.html
View File

@@ -8,10 +8,22 @@
</head>
<body>
<div id="app">
<!-- Auth Bar (shown when logged in) -->
<div id="auth-bar" class="auth-bar hidden">
<span id="auth-username"></span>
<button id="auth-logout-btn" class="btn btn-small">Logout</button>
</div>
<!-- Lobby Screen -->
<div id="lobby-screen" class="screen active">
<h1><span class="golfer-swing">🏌️</span><span class="kicked-ball">⚪</span> <span class="golf-title">Golf</span></h1>
<p class="subtitle">6-Card Golf Card Game <button id="rules-btn" class="btn btn-small btn-rules">Rules</button></p>
<p class="subtitle">6-Card Golf Card Game <button id="rules-btn" class="btn btn-small btn-rules">Rules</button> <button id="leaderboard-btn" class="btn btn-small leaderboard-btn">Leaderboard</button></p>
<!-- Auth buttons for guests -->
<div id="auth-buttons" class="auth-buttons">
<button id="login-btn" class="btn btn-small">Login</button>
<button id="signup-btn" class="btn btn-small btn-primary">Sign Up</button>
</div>
<div class="form-group">
<label for="player-name">Your Name</label>
@@ -637,6 +649,83 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
</section>
</div>
</div>
<!-- Leaderboard Screen -->
<div id="leaderboard-screen" class="screen">
<div class="leaderboard-container">
<button id="leaderboard-back-btn" class="btn leaderboard-back-btn">&laquo; Back</button>
<div class="leaderboard-header">
<h1>Leaderboard</h1>
<p class="leaderboard-subtitle">Top players ranked by performance</p>
</div>
<div class="leaderboard-tabs" id="leaderboard-tabs">
<button class="leaderboard-tab active" data-metric="wins">Wins</button>
<button class="leaderboard-tab" data-metric="win_rate">Win Rate</button>
<button class="leaderboard-tab" data-metric="avg_score">Avg Score</button>
<button class="leaderboard-tab" data-metric="knockouts">Knockouts</button>
<button class="leaderboard-tab" data-metric="streak">Best Streak</button>
</div>
<div id="leaderboard-content">
<div class="leaderboard-loading">Loading...</div>
</div>
</div>
</div>
<!-- Replay Screen -->
<div id="replay-screen" class="screen">
<header class="replay-header">
<h2 id="replay-title">Game Replay</h2>
<div id="replay-meta" class="replay-meta"></div>
</header>
<div id="replay-board" class="replay-board-container">
<!-- Board renders here -->
</div>
<div id="replay-event-description" class="event-description"></div>
<div id="replay-controls" class="replay-controls">
<button id="replay-btn-start" class="replay-btn" title="Go to start">⏮</button>
<button id="replay-btn-prev" class="replay-btn" title="Previous">⏪</button>
<button id="replay-btn-play" class="replay-btn replay-btn-play" title="Play/Pause">▶</button>
<button id="replay-btn-next" class="replay-btn" title="Next">⏩</button>
<button id="replay-btn-end" class="replay-btn" title="Go to end">⏭</button>
<div class="timeline">
<input type="range" min="0" max="0" value="0" id="replay-timeline" class="timeline-slider">
<span id="replay-frame-counter" class="frame-counter">0 / 0</span>
</div>
<div class="speed-control">
<label>Speed:</label>
<select id="replay-speed" class="speed-select">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="2">2x</option>
<option value="4">4x</option>
</select>
</div>
</div>
<div class="replay-actions">
<button id="replay-btn-share" class="btn btn-small">Share Replay</button>
<button id="replay-btn-export" class="btn btn-small">Export JSON</button>
<button id="replay-btn-back" class="btn btn-small btn-secondary">Back to Menu</button>
</div>
</div>
</div>
<!-- Player Stats Modal -->
<div id="player-stats-modal" class="modal player-stats-modal hidden">
<div class="modal-content">
<button class="modal-close-btn" id="player-stats-close">&times;</button>
<div id="player-stats-content">
<div class="leaderboard-loading">Loading...</div>
</div>
</div>
</div>
<!-- CPU Select Modal -->
@@ -651,9 +740,53 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
</div>
</div>
<!-- Auth Modal -->
<div id="auth-modal" class="modal hidden">
<div class="modal-content modal-auth">
<button id="auth-modal-close" class="modal-close-btn">&times;</button>
<!-- Login Form -->
<div id="login-form-container">
<h3>Login</h3>
<form id="login-form">
<div class="form-group">
<input type="text" id="login-username" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" id="login-password" placeholder="Password" required>
</div>
<p id="login-error" class="error"></p>
<button type="submit" class="btn btn-primary btn-full">Login</button>
</form>
<p class="auth-switch">Don't have an account? <a href="#" id="show-signup">Sign up</a></p>
</div>
<!-- Signup Form -->
<div id="signup-form-container" class="hidden">
<h3>Sign Up</h3>
<form id="signup-form">
<div class="form-group">
<input type="text" id="signup-username" placeholder="Username" required minlength="3" maxlength="20">
</div>
<div class="form-group">
<input type="email" id="signup-email" placeholder="Email (optional)">
</div>
<div class="form-group">
<input type="password" id="signup-password" placeholder="Password" required minlength="8">
</div>
<p id="signup-error" class="error"></p>
<button type="submit" class="btn btn-primary btn-full">Create Account</button>
</form>
<p class="auth-switch">Already have an account? <a href="#" id="show-login">Login</a></p>
</div>
</div>
</div>
<script src="card-manager.js"></script>
<script src="state-differ.js"></script>
<script src="animation-queue.js"></script>
<script src="leaderboard.js"></script>
<script src="replay.js"></script>
<script src="app.js"></script>
</body>
</html>