793 lines
48 KiB
HTML
793 lines
48 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">
|
|
<!-- 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><img src="golfball-logo.svg" alt="" class="golfball-logo"><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> <button id="leaderboard-btn" class="btn btn-small leaderboard-btn">Leaderboard</button></p>
|
|
|
|
<!-- Auth buttons for guests (hidden until auth check confirms not logged in) -->
|
|
<div id="auth-buttons" class="auth-buttons hidden">
|
|
<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>
|
|
<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: Gameplay & Jokers -->
|
|
<div class="options-column">
|
|
<div class="options-category">
|
|
<h4>Gameplay</h4>
|
|
<div class="checkbox-group">
|
|
<div class="select-option">
|
|
<label for="flip-mode">Flip on Discard</label>
|
|
<select id="flip-mode">
|
|
<option value="never">Standard (no flip)</option>
|
|
<option value="always">Speed Golf (must flip)</option>
|
|
<option value="endgame">Endgame (opt. flip late in game)</option>
|
|
</select>
|
|
<span class="rule-desc">After discarding a drawn card</span>
|
|
</div>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="flip-as-action">
|
|
<span>Flip as Action</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♣</span>flip instead of draw</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="knock-penalty">
|
|
<span>Knock Penalty</span>
|
|
<span class="rule-desc"><span class="suit suit-red">♦</span>+10 if not lowest</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="knock-early">
|
|
<span>Early Knock</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♠</span>flip all (≤2) to go out</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"><span class="suit suit-black">♠</span>2 per deck, -2 / 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"><span class="suit suit-red">♥</span>1 Joker total, -5!</span>
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="joker-mode" value="eagle-eye">
|
|
<span>Eagle-Eyed</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♣</span>+2 / -4 paired</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Card Values & Bonuses -->
|
|
<div class="options-column">
|
|
<div class="options-category">
|
|
<h4>Card Values</h4>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="super-kings">
|
|
<span>Super Kings</span>
|
|
<span class="rule-desc"><span class="suit suit-red">♦</span>K = -2</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="ten-penny">
|
|
<span>Ten Penny</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♠</span>10 = 1</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="one-eyed-jacks">
|
|
<span>One-Eyed Jacks</span>
|
|
<span class="rule-desc"><span class="suit suit-red">♥</span>J♥/J♠ = 0</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="negative-pairs-keep-value">
|
|
<span>Negative Pairs</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♣</span>paired 2s/Jokers = -4</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-category">
|
|
<h4>Bonuses & Penalties</h4>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="knock-bonus">
|
|
<span>Knock Bonus</span>
|
|
<span class="rule-desc"><span class="suit suit-red">♦</span>-5 going out first</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="underdog-bonus">
|
|
<span>Underdog</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♠</span>-3 lowest score</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="tied-shame">
|
|
<span>Tied Shame</span>
|
|
<span class="rule-desc"><span class="suit suit-red">♥</span>+5 if tied</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="blackjack">
|
|
<span>Blackjack</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♣</span>score 21 = 0</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="four-of-a-kind">
|
|
<span>Four of a Kind</span>
|
|
<span class="rule-desc"><span class="suit suit-red">♦</span>-20 bonus</span>
|
|
</label>
|
|
<label class="checkbox-label inline">
|
|
<input type="checkbox" id="wolfpack">
|
|
<span>Wolfpack</span>
|
|
<span class="rule-desc"><span class="suit suit-black">♠</span>4 Jacks = -20</span>
|
|
</label>
|
|
<p id="wolfpack-combo-note" class="combo-note hidden">🃏 4 Jacks = -40 (stacks!)</p>
|
|
</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">
|
|
<!-- Card layer for persistent card elements -->
|
|
<div id="card-layer"></div>
|
|
<div class="game-layout">
|
|
<div class="game-main">
|
|
<div class="game-header">
|
|
<div class="header-col header-col-left">
|
|
<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>
|
|
<div class="header-col header-col-center">
|
|
<div id="status-message" class="status-message"></div>
|
|
<div id="final-turn-badge" class="final-turn-badge hidden">⚡ FINAL TURN</div>
|
|
</div>
|
|
<div class="header-col header-col-right">
|
|
<button id="mute-btn" class="mute-btn" title="Toggle sound">🔊</button>
|
|
<button id="leave-game-btn" class="btn btn-small btn-danger">Leave</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 class="discard-stack">
|
|
<div id="discard" class="card">
|
|
<span id="discard-content"></span>
|
|
</div>
|
|
<button id="discard-btn" class="btn btn-small hidden">Discard</button>
|
|
<button id="skip-flip-btn" class="btn btn-small btn-secondary hidden">Skip Flip</button>
|
|
<button id="knock-early-btn" class="btn btn-small btn-danger hidden">Knock!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-section">
|
|
<div class="player-area">
|
|
<h4 id="player-header"><span class="player-name">You</span><span id="your-score" class="player-showing">0</span></h4>
|
|
<div id="player-cards" class="card-grid"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legacy swap animation overlay (kept for rollback) -->
|
|
<div id="swap-animation" class="swap-animation hidden">
|
|
<div id="swap-card-from-hand" class="swap-card">
|
|
<div class="swap-card-inner">
|
|
<div class="swap-card-front"></div>
|
|
<div class="swap-card-back">?</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Rules Screen -->
|
|
<div id="rules-screen" class="screen">
|
|
<div class="rules-container">
|
|
<button id="rules-back-btn" class="btn rules-back-btn">« Back</button>
|
|
|
|
<div class="rules-header">
|
|
<h1><span class="golfer-logo">🏌️</span> <span class="golf-title">Golf Rules</span></h1>
|
|
<p class="rules-subtitle">6-Card Golf Card Game - Complete Guide</p>
|
|
</div>
|
|
|
|
<!-- Table of Contents -->
|
|
<nav class="rules-toc">
|
|
<div class="toc-title">Quick Navigation</div>
|
|
<div class="toc-links">
|
|
<a href="#rules-basic" class="toc-link">
|
|
<span class="toc-icon">🎯</span>
|
|
<span class="toc-text">Basic Rules</span>
|
|
</a>
|
|
<a href="#rules-card-values" class="toc-link">
|
|
<span class="toc-icon">🃏</span>
|
|
<span class="toc-text">Card Values</span>
|
|
</a>
|
|
<a href="#rules-pairing" class="toc-link">
|
|
<span class="toc-icon">👯</span>
|
|
<span class="toc-text">Column Pairing</span>
|
|
</a>
|
|
<a href="#rules-turn" class="toc-link">
|
|
<span class="toc-icon">🔄</span>
|
|
<span class="toc-text">Turn Structure</span>
|
|
</a>
|
|
<a href="#rules-flip-mode" class="toc-link">
|
|
<span class="toc-icon">🔃</span>
|
|
<span class="toc-text">Flip Modes</span>
|
|
</a>
|
|
<a href="#rules-house-rules" class="toc-link">
|
|
<span class="toc-icon">🏠</span>
|
|
<span class="toc-text">House Rules</span>
|
|
</a>
|
|
<a href="#rules-faq" class="toc-link">
|
|
<span class="toc-icon">❓</span>
|
|
<span class="toc-text">FAQ</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section id="rules-basic" class="rules-section">
|
|
<h2>Basic Rules</h2>
|
|
<p><strong>6-Card Golf</strong> is a card game where players try to achieve the <strong>lowest score</strong> over multiple rounds ("holes"). Like golf, lower is better!</p>
|
|
<ul>
|
|
<li>Each player has <strong>6 cards</strong> arranged in a 2-row by 3-column grid</li>
|
|
<li>Most cards start <strong>face-down</strong> (hidden from everyone)</li>
|
|
<li>On your turn: <strong>draw one card</strong>, then either <strong>swap it</strong> with one of yours or <strong>discard it</strong></li>
|
|
<li>When any player reveals <strong>all 6 of their cards</strong>, everyone else gets <strong>one final turn</strong></li>
|
|
<li>After all rounds ("holes") are played, the player with the <strong>lowest total score wins</strong></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="rules-card-values" class="rules-section">
|
|
<h2>Card Values</h2>
|
|
<table class="rules-table">
|
|
<thead>
|
|
<tr><th>Card</th><th>Points</th><th>Notes</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Joker</td><td class="value-negative">-2</td><td>Best card! (requires Jokers to be enabled)</td></tr>
|
|
<tr><td>2</td><td class="value-negative">-2</td><td>Excellent - gives you negative points!</td></tr>
|
|
<tr><td>Ace (A)</td><td class="value-low">1</td><td>Very low and safe</td></tr>
|
|
<tr><td>King (K)</td><td class="value-zero">0</td><td>Zero points - great for making pairs!</td></tr>
|
|
<tr><td>3 through 10</td><td>Face value</td><td>3=3 pts, 4=4 pts, ..., 10=10 pts</td></tr>
|
|
<tr><td>Jack (J), Queen (Q)</td><td class="value-high">10</td><td>High cards - replace these quickly!</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section id="rules-pairing" class="rules-section">
|
|
<h2>Column Pairing (IMPORTANT!)</h2>
|
|
<p><strong>This is the most important rule to understand:</strong></p>
|
|
<p>If both cards in a <strong>vertical column</strong> have the <strong>same rank</strong> (like two 8s or two Jacks), that entire column scores <strong>0 points</strong> - regardless of what the cards are worth individually!</p>
|
|
|
|
<div class="rules-example">
|
|
<h4>Example:</h4>
|
|
<pre>
|
|
Your 6-card grid:
|
|
Col1 Col2 Col3
|
|
[8] [5] [7] ← Top row
|
|
[8] [3] [9] ← Bottom row
|
|
|
|
Column 1: 8 + 8 = PAIR! = 0 points (not 16!)
|
|
Column 2: 5 + 3 = 8 points
|
|
Column 3: 7 + 9 = 16 points
|
|
|
|
TOTAL: 0 + 8 + 16 = 24 points</pre>
|
|
</div>
|
|
|
|
<p class="rules-warning"><strong>IMPORTANT:</strong> When you pair cards, you get 0 points for that column - even if the cards have negative values! Two 2s paired = 0 points (not -4). Two Jokers paired = 0 points (not -4). <em>Exception: The "Negative Pairs Keep Value" house rule changes this - paired negative cards keep their -4 value!</em></p>
|
|
</section>
|
|
|
|
<section id="rules-turn" class="rules-section">
|
|
<h2>Turn Structure (Step by Step)</h2>
|
|
|
|
<h3>Step 1: Draw a Card</h3>
|
|
<p>You MUST draw exactly one card. Choose from:</p>
|
|
<ul>
|
|
<li><strong>The Deck</strong> (face-down pile) - You don't know what you'll get!</li>
|
|
<li><strong>The Discard Pile</strong> (face-up pile) - You can see exactly what card you're taking</li>
|
|
</ul>
|
|
|
|
<h3>Step 2: Use or Discard the Card</h3>
|
|
|
|
<div class="rules-case">
|
|
<h4>If you drew from the DECK:</h4>
|
|
<p>You have two options:</p>
|
|
<ul>
|
|
<li><strong>SWAP:</strong> Replace any one of your 6 cards with the drawn card. The old card goes to the discard pile.</li>
|
|
<li><strong>DISCARD:</strong> Put the drawn card directly on the discard pile without using it.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="rules-case">
|
|
<h4>If you drew from the DISCARD PILE:</h4>
|
|
<p>You MUST swap - you cannot put the same card back on the discard pile.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="rules-flip-mode" class="rules-section">
|
|
<h2>Flip on Discard Rules (3 Modes)</h2>
|
|
<p>This setting affects what happens when you draw from the deck and choose to <strong>discard</strong> (not swap):</p>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Standard Mode (No Flip)</h3>
|
|
<p class="mode-summary">Default setting. Discarding ends your turn immediately.</p>
|
|
<p><strong>How it works:</strong> When you draw from the deck and decide not to use it, you simply discard it and your turn is over. Nothing else happens.</p>
|
|
<p><strong>Strategic impact:</strong> Information is precious. You only learn what's in your hand by actively swapping cards, so there's more gambling on face-down cards. Rewards good memory and tracking what opponents discard.</p>
|
|
<p><strong>Best for:</strong> Traditional gameplay, longer games, players who enjoy mystery and risk.</p>
|
|
</div>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Speed Golf Mode (Must Flip)</h3>
|
|
<p class="mode-summary">Every discard reveals one of your hidden cards.</p>
|
|
<p><strong>How it works:</strong> When you draw from the deck and discard, you MUST also flip over one of your face-down cards. This is mandatory - you cannot skip it.</p>
|
|
<p><strong>Strategic impact:</strong> Even "bad" draws give you information. Reduces the luck factor since everyone makes more informed decisions. Games naturally end faster with less hidden information.</p>
|
|
<p><strong>Best for:</strong> Quick games, players who prefer skill over luck.</p>
|
|
</div>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Endgame Mode (Catch-Up Flip)</h3>
|
|
<p class="mode-summary">Optional flip activates when any player has only 1 hidden card left.</p>
|
|
<p><strong>How it works:</strong></p>
|
|
<ul>
|
|
<li>Early in the round: Discarding ends your turn (like Standard mode)</li>
|
|
<li><strong>When ANY player has 1 or fewer face-down cards:</strong> After discarding, you MAY choose to flip one of your hidden cards OR skip</li>
|
|
</ul>
|
|
<p><strong>Strategic impact:</strong> This is a <strong>catch-up mechanic</strong>. When someone is about to go out, trailing players can accelerate their information gathering to find pairs or swap out bad cards. The leader (who triggered this) doesn't benefit since they have no hidden cards left. Reduces the "runaway leader" problem and keeps games competitive.</p>
|
|
<p><strong>Best for:</strong> Competitive play where you want trailing players to have a fighting chance.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="rules-house-rules" class="rules-section">
|
|
<h2>House Rules (Optional Variants)</h2>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Point Modifiers</h3>
|
|
<div class="house-rule">
|
|
<h4>Super Kings</h4>
|
|
<p>Kings are worth <strong>-2 points</strong> instead of 0.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Kings become valuable to keep unpaired, not just pairing fodder. Creates interesting decisions - do you pair Kings for 0, or keep them separate for -4 total?</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Ten Penny</h4>
|
|
<p>10s are worth <strong>1 point</strong> instead of 10.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Removes the "10 disaster" - drawing a 10 is no longer a crisis. Queens and Jacks become the only truly bad cards. Makes the game more forgiving.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Joker Variants</h3>
|
|
<div class="house-rule">
|
|
<h4>Standard Jokers</h4>
|
|
<p>2 Jokers per deck, each worth <strong>-2 points</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Jokers are great to find but pairing them is wasteful (0 points instead of -4). Best kept in different columns. Adds 2 premium cards to hunt for.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Lucky Swing</h4>
|
|
<p>Only <strong>1 Joker</strong> in the entire deck, worth <strong>-5 points</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> High variance. Whoever finds this rare card gets a significant advantage. Increases the luck factor - sometimes you get it, sometimes your opponent does.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Eagle Eye</h4>
|
|
<p>Jokers are worth <strong>+2 unpaired</strong>, but <strong>-4 when paired</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Risk/reward Jokers. Finding one actually hurts you (+2) until you commit to finding the second. Rewards aggressive searching and creates tense decisions about whether to keep hunting or cut your losses.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Going Out Rules</h3>
|
|
<div class="house-rule">
|
|
<h4>Knock Penalty</h4>
|
|
<p><strong>+10 points</strong> if you go out but don't have the lowest score.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Discourages reckless rushing. You need to be confident you're winning before going out. Rewards patience and reading your opponents' likely scores. Can backfire spectacularly if you misjudge.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Knock Bonus</h4>
|
|
<p><strong>-5 points</strong> for going out first (regardless of who wins).</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Encourages racing to finish, even with a mediocre hand. The 5-point bonus might make up for a slightly worse score. Speeds up gameplay.</p>
|
|
</div>
|
|
<p class="combo-note"><em>Combining Knock Penalty + Knock Bonus creates high-stakes "going out" decisions: -5 if you win, +10 if you lose!</em></p>
|
|
</div>
|
|
|
|
<div class="rules-mode">
|
|
<h3>Scoring Bonuses</h3>
|
|
<div class="house-rule">
|
|
<h4>Underdog Bonus</h4>
|
|
<p>Round winner gets <strong>-3 points</strong> extra.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Amplifies winning - the best player each round pulls further ahead. Can lead to snowballing leads over multiple holes. Rewards consistency.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Tied Shame</h4>
|
|
<p>If you tie another player's score, <strong>both get +5 penalty</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Punishes playing it safe. If you suspect a tie, you need to take risks to differentiate your score. Creates interesting late-round decisions.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Blackjack</h4>
|
|
<p>Score of exactly <strong>21 becomes 0</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> A "hail mary" comeback. If you're stuck at 21, you're suddenly in great shape. Mostly luck, but adds exciting moments when it happens.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Wolfpack</h4>
|
|
<p>Having <strong>all 4 Jacks</strong> (2 pairs) gives <strong>-20 bonus</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Extremely rare but now a significant reward! Turns a potential disaster (40 points of Jacks) into a triumph. The huge bonus makes it worth celebrating when achieved, though still not worth actively pursuing.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rules-mode">
|
|
<h3>New Variants</h3>
|
|
<div class="house-rule">
|
|
<h4>Flip as Action</h4>
|
|
<p>Use your turn to flip one of your face-down cards without drawing. Ends your turn immediately.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Lets you gather information without risking a bad deck draw. Conservative players can learn their hand safely. However, you miss the chance to actively improve your hand - you're just learning what you have.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Four of a Kind</h4>
|
|
<p>Having 4 cards of the same rank across two columns scores <strong>-20 bonus</strong>.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Rewards collecting matching cards beyond just column pairs. Changes whether you should take a third or fourth copy of a rank. If you already have two pairs of 8s, that's -20 extra! Stacks with Wolfpack: four Jacks = -40 total.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Negative Pairs Keep Value</h4>
|
|
<p>When you pair 2s or Jokers in a column, they keep their combined <strong>-4 points</strong> instead of becoming 0.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Major change! Pairing your best cards is now beneficial. Two 2s paired = -4 points, not 0. This encourages hunting for duplicate negative cards and fundamentally changes how you value 2s and Jokers.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>One-Eyed Jacks</h4>
|
|
<p>The Jack of Hearts (J♥) and Jack of Spades (J♠) - the "one-eyed" Jacks - are worth <strong>0 points</strong> instead of 10.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> Two of the four Jacks become safe cards, comparable to Kings. J♥ and J♠ are now good cards to keep! Only J♣ and J♦ remain dangerous. Reduces the "Jack disaster" probability by half.</p>
|
|
</div>
|
|
<div class="house-rule">
|
|
<h4>Early Knock</h4>
|
|
<p>If you have <strong>2 or fewer face-down cards</strong>, you may use your turn to flip all remaining cards at once and immediately end the round. Click the "Knock!" button during your draw phase.</p>
|
|
<p class="strategic-impact"><strong>Strategic impact:</strong> A high-risk, high-reward option! If you're confident your hidden cards are low, you can knock early to surprise opponents. But if those hidden cards are bad, you've just locked in a terrible score. Best used when you've deduced your face-down cards are safe (like after drawing and discarding duplicates).</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="rules-faq" class="rules-section">
|
|
<h2>Frequently Asked Questions</h2>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: Can I look at my face-down cards?</h4>
|
|
<p>A: No! Once the game starts, you cannot peek at your own face-down cards. You only see them when they get flipped face-up (either by swapping or by the flip-on-discard rule).</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: Can I swap a face-down card without looking at it first?</h4>
|
|
<p>A: Yes! In fact, that's often the best strategy - if you have a card that seems high based on probability, swap it out before you even see it.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: What happens when someone reveals all their cards?</h4>
|
|
<p>A: Once ANY player has all 6 cards face-up, every other player gets exactly ONE more turn. Then the round ends and scores are calculated.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: Do I have to go out (reveal all cards) to win?</h4>
|
|
<p>A: No! You can win the round even with face-down cards. The player with the lowest score wins, regardless of how many cards are revealed.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: When do pairs count?</h4>
|
|
<p>A: Pairs only count in VERTICAL columns (top card + bottom card in the same column). Horizontal or diagonal matches don't create pairs.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: Can I make a pair with face-down cards?</h4>
|
|
<p>A: Face-down cards are still counted for scoring, but since you can't see them, you're gambling that they might form a pair. At the end of the round, all cards are revealed and pairs are calculated.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: What if the deck runs out of cards?</h4>
|
|
<p>A: The discard pile (except the top card) is shuffled to create a new deck.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: In Endgame mode, when exactly can I flip?</h4>
|
|
<p>A: The optional flip activates the moment ANY player (including you) has 1 or fewer face-down cards remaining. From that point until the round ends, whenever you discard from the deck, you'll get the option to flip or skip.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: How does Endgame mode help trailing players?</h4>
|
|
<p>A: When someone is close to going out, they've likely optimized their hand already. The optional flip lets everyone else accelerate their information gathering - flipping cards to find pairs or identify which cards to swap out. The leader doesn't benefit (they have no hidden cards left), so it's purely a catch-up mechanic.</p>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<h4>Q: Why would I skip the flip in Endgame mode?</h4>
|
|
<p>A: If you're already winning or your remaining hidden cards are statistically likely to be good, you might prefer not to risk revealing a disaster. It's a calculated gamble!</p>
|
|
</div>
|
|
</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">« 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">×</button>
|
|
<div id="player-stats-content">
|
|
<div class="leaderboard-loading">Loading...</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>
|
|
|
|
<!-- Auth Modal -->
|
|
<div id="auth-modal" class="modal hidden">
|
|
<div class="modal-content modal-auth">
|
|
<button id="auth-modal-close" class="modal-close-btn">×</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>
|