chase-on/index.html at main · nineunderground/chase-on · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chase On - Agent Street</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="game-container">
        <!-- Status Bar (top) -->
        <div id="status-bar">
            <div id="deck-info">🎴 Deck: <span id="deck-count">30</span></div>
            <div id="turn-indicator">Your Turn</div>
            <div id="game-message">Your turn! Select 2 cards with different names.</div>
            <div id="discard-info">🔄 Redraws: <span id="discard-count">4</span></div>
        </div>

        <div id="game-area">
            <!-- AI Area (Green) -->
            <div id="ai-area" class="player-area green-area">
                <div class="card-collection">
                    <div id="ai-recruited" class="recruited-cards"></div>
                </div>
                <div id="ai-hand" class="hand">
                    <div class="card card-back"></div>
                    <div class="card card-back"></div>
                    <div class="card card-back"></div>
                    <div class="card card-back"></div>
                </div>
            </div>

            <!-- Circular Board -->
            <div id="board-container">
                <div id="board"></div>
            </div>

            <!-- Play Area -->
            <div id="play-area">
                <h3 id="play-instruction">Tap a card, then tap a slot — or drag</h3>
                <div id="play-zone">
                    <div id="face-up-slot" class="play-slot drop-zone" data-slot="faceup">
                        <span>👁️ Face Up</span>
                        <div class="slot-content"></div>
                    </div>
                    <div id="face-down-slot" class="play-slot drop-zone" data-slot="facedown">
                        <span>🙈 Face Down</span>
                        <div class="slot-content"></div>
                    </div>
                </div>
                <div id="play-actions">
                    <button id="confirm-play-btn" disabled>✅ Confirm Play</button>
                </div>
            </div>

            <!-- Player Area (Blue) -->
            <div id="player-area" class="player-area blue-area">
                <div class="card-collection">
                    <div id="player-recruited" class="recruited-cards"></div>
                </div>
                <div id="player-hand" class="hand"></div>
            </div>
        </div>

        <!-- Choice Modal -->
        <div id="choice-modal" class="modal hidden">
            <div class="modal-content">
                <h2 id="choice-title">Choose a Card</h2>
                <p id="choice-description"></p>
                <div id="choice-cards"></div>
            </div>
        </div>

        <!-- Game Over Modal -->
        <div id="gameover-modal" class="modal hidden">
            <div class="modal-content gameover-content">
                <h2 id="gameover-title">Game Over</h2>
                <p id="gameover-message"></p>
                <button id="close-gameover-btn">View Final Board</button>
            </div>
        </div>

        <!-- Coin Flip Modal -->
        <div id="coin-modal" class="modal hidden">
            <div class="modal-content coin-content">
                <h2>Who Goes First?</h2>
                <div id="coin" class="coin">
                    <div class="coin-face coin-blue">🦁</div>
                    <div class="coin-face coin-green">🦖</div>
                </div>
                <p id="coin-result"></p>
            </div>
        </div>

        <!-- Play Again Button (shown after closing game over) -->
        <button id="play-again-btn" class="hidden">🔄 Play Again</button>

        <!-- Rules Button -->
        <button id="rules-btn" onclick="toggleRules()">📖 Rules</button>

        <!-- Rules Panel -->
        <div id="rules-panel" class="hidden">
            <div class="rules-content">
                <button class="close-btn" onclick="toggleRules()">×</button>
                <h2>How to Play</h2>

                <h3>🎯 Objective</h3>
                <p>Catch the opponent's spy by landing on or passing their position, OR collect 3 Codebreakers to win instantly.</p>

                <h3>⚠️ Watch Out</h3>
                <p>Collecting 3 Daredevils means you LOSE!</p>

                <h3>🎮 Your Turn</h3>
                <ol>
                    <li><strong>Play:</strong> Select 2 cards with different names</li>
                    <li><strong>Choose:</strong> Pick which is face-up (other is face-down)</li>
                    <li><strong>Recruit:</strong> Opponent picks one card, you get the other</li>
                    <li><strong>Move:</strong> Both spies move based on recruited cards</li>
                </ol>

                <h3>📊 Movement Values</h3>
                <p>Each card shows 3 values. Which you use depends on copies collected:</p>
                <ul>
                    <li>1 copy → 1st value</li>
                    <li>2 copies → 2nd value</li>
                    <li>3+ copies → 3rd value</li>
                </ul>
                <p>Positive = toward opponent, Negative = backward</p>

                <h3>🃏 Special Cards</h3>
                <ul>
                    <li><strong>Codebreaker:</strong> 0/0/WIN - No movement but 3 = victory!</li>
                    <li><strong>Daredevil:</strong> 2/3/LOSE - Fast but 3 = defeat!</li>
                    <li><strong>Double Agent:</strong> -1/6/-1 - Risky swings!</li>
                    <li><strong>Sidekick:</strong> Always 4</li>
                    <li><strong>Mole:</strong> Always -3</li>
                </ul>

                <h3>🎮 Players</h3>
                <ul>
                    <li><strong>You:</strong> Blue spy, starts at position 8</li>
                    <li><strong>AI:</strong> Green spy, starts at position 1</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="js/cards.js"></script>
    <script src="js/ai.js"></script>
    <script src="js/game.js"></script>
</body>
</html>