awacke1 commited on
Commit
afa5be2
Β·
verified Β·
1 Parent(s): b41bee6

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +349 -0
index.html ADDED
@@ -0,0 +1,349 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Witty Card Game Prototype πŸ€”πŸƒ</title>
7
+ <style>
8
+ body {
9
+ font-family: sans-serif;
10
+ background-color: #f0f0f0;
11
+ color: #333;
12
+ padding: 20px;
13
+ }
14
+
15
+ h1, h2 {
16
+ text-align: center;
17
+ color: #5a3a7e; /* A deep purple, because why not? */
18
+ }
19
+
20
+ #gameArea {
21
+ max-width: 900px;
22
+ margin: 20px auto;
23
+ background-color: #fff;
24
+ padding: 20px;
25
+ border-radius: 8px;
26
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
27
+ }
28
+
29
+ .deck-area, #judgeArea, #playerHands {
30
+ margin-bottom: 20px;
31
+ padding: 15px;
32
+ border: 1px dashed #ccc;
33
+ border-radius: 5px;
34
+ }
35
+
36
+ #judgeArea h3, #playerHands h3 {
37
+ margin-top: 0;
38
+ color: #333;
39
+ }
40
+
41
+ .card {
42
+ display: inline-block; /* Lay them out like real cards, kinda */
43
+ border: 1px solid #aaa;
44
+ background-color: #f9f9f9;
45
+ padding: 15px 10px; /* A bit more padding for readability */
46
+ margin: 5px;
47
+ min-width: 80px;
48
+ min-height: 50px; /* Let content define height mostly */
49
+ border-radius: 4px;
50
+ box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
51
+ text-align: center;
52
+ vertical-align: top; /* Align cards nicely if they wrap */
53
+ font-size: 0.9em;
54
+ cursor: default; /* Looks like a thing you can't click... yet! */
55
+ }
56
+
57
+ .inboxCard {
58
+ background-color: #e0f7fa; /* Light cyan - like a fresh email! πŸ“§ */
59
+ border-color: #00acc1;
60
+ font-weight: bold;
61
+ }
62
+
63
+ .replyCard {
64
+ background-color: #fff9c4; /* Light yellow - like a sticky note reply! πŸ“ */
65
+ border-color: #ffeb3b;
66
+ }
67
+
68
+ .player-hand {
69
+ margin-bottom: 15px;
70
+ padding-bottom: 10px;
71
+ border-bottom: 1px solid #eee;
72
+ }
73
+ .player-hand:last-child {
74
+ border-bottom: none;
75
+ }
76
+
77
+ #status {
78
+ margin-top: 20px;
79
+ padding: 10px;
80
+ background-color: #e8f5e9; /* Calming green for status updates */
81
+ border: 1px solid #a5d6a7;
82
+ border-radius: 4px;
83
+ text-align: center;
84
+ }
85
+ </style>
86
+ </head>
87
+ <body>
88
+
89
+ <h1>Card Game Extravaganza! (Prototype Stage) πŸš€</h1>
90
+
91
+ <div id="gameArea">
92
+ <h2>Game Board</h2>
93
+
94
+ <div class="deck-area">
95
+ <h3>Decks (Conceptual)</h3>
96
+ <p>Imagine two piles here: one for INBOX πŸ“₯, one for REPLY πŸ“€. We draw from these in JS!</p>
97
+ <p>INBOX cards remaining: <span id="inboxCount">?</span></p>
98
+ <p>REPLY cards remaining: <span id="replyCount">?</span></p>
99
+ </div>
100
+
101
+ <div id="judgeArea">
102
+ <h3>Judge's INBOX Card πŸ€”</h3>
103
+ <div id="currentInboxCard">Waiting for the round to start...</div>
104
+ </div>
105
+
106
+ <div id="playerHands">
107
+ <h3>Player Hands πŸ™Œ</h3>
108
+ <div id="handsDisplay">Players are gathering... cards are being shuffled... suspense!</div>
109
+ </div>
110
+
111
+ <div id="status">
112
+ Game initializing... Prepare for witty banter! πŸ˜‚
113
+ </div>
114
+ </div>
115
+
116
+ <script>
117
+ // === CONFIGURATION & INITIAL STATE ===
118
+ console.log("πŸš€ Booting up the Card Game Engine... Hold onto your hats! Or don't. Free will is a thing. πŸ€”");
119
+
120
+ const numberOfPlayers = 3; // Let's start with 3 players. More players, more chaos! πŸŽ‰
121
+ const cardsPerHand = 7; // As requested, 7 REPLY cards each. A sacred number? Probably not. ✨
122
+
123
+ let inboxDeck = [];
124
+ let replyDeck = [];
125
+ let players = []; // Array to hold player objects { id: number, name: string, hand: array }
126
+ let discardInbox = []; // Where used INBOX cards go to ponder their existence.
127
+ let discardReply = []; // Where used REPLY cards go to await reincarnation (reshuffling?).
128
+ let currentJudgeIndex = 0; // We'll figure out the 'oldest' part later, for now player 0 starts. πŸ‘΄πŸ‘‘
129
+ let currentInboxCard = null; // The card currently demanding attention.
130
+
131
+ // === DECK CREATION ===
132
+ // Let's fill our decks with profound nonsense and digital ephemera. 🧐
133
+
134
+ function createDecks() {
135
+ console.log("πŸ“œ Generating sacred texts... I mean, card decks.");
136
+
137
+ // --- INBOX Deck: The prompts, the questions, the existential crises! ---
138
+ inboxDeck = [
139
+ "What's the sound of one hand clapping... in a Zoom meeting? πŸ‘πŸ’»",
140
+ "My therapist told me to embrace my mistakes. So I hugged my code. πŸ€—",
141
+ "The real treasure was the _______ we made along the way. πŸ΄β€β˜ οΈ",
142
+ "Why did the AI cross the road? πŸ€–πŸ›£οΈ",
143
+ "What's secretly controlling the world? πŸŒπŸ‘½",
144
+ "Describe your last debugging session using only interpretive dance. πŸ’ƒπŸ•ΊπŸž",
145
+ "Complete the prophecy: 'And lo, the user shall _______'. πŸ™",
146
+ "What's the wifi password in the afterlife? πŸ“ΆπŸ‘»",
147
+ "If cats could text, their first message would be _______. πŸ˜ΌπŸ“±",
148
+ "The meaning of life is apparently _______. Who knew? πŸ€·β€β™€οΈ",
149
+ ];
150
+
151
+ // --- REPLY Deck: The answers, the non-sequiturs, the genius strokes! ---
152
+ replyDeck = [
153
+ "A rogue semicolon. ;",
154
+ "Blaming the intern. πŸ˜…",
155
+ "Aggressively Googling it. πŸ”",
156
+ "Turning it off and on again. πŸ”Œ",
157
+ "Insufficient caffeine. β˜•",
158
+ "A quantum fluctuation. ✨",
159
+ "Feature, not a bug. ℒ️",
160
+ "Squirrels. Definitely squirrels. 🐿️",
161
+ "The 'any' key. Where is it?! πŸ€”",
162
+ "Asking for a friend... πŸ‘€",
163
+ "My other notification. πŸ””",
164
+ "A deeply profound nap. 😴",
165
+ "Imposter syndrome. 🎭",
166
+ "Running 'sudo make me a sandwich'. πŸ₯ͺ",
167
+ "Emptying the browser cache... and my soul. πŸ’¨",
168
+ "Just vibing. ✨😌✨",
169
+ "Three ducks in a trench coat. πŸ¦†πŸ¦†πŸ¦†πŸ§₯",
170
+ "The algorithm demands it. πŸ€–",
171
+ "Error 404: Witty response not found. 🚫",
172
+ "A moment of existential dread. 😨",
173
+ "Lasers! Pew pew! ✨",
174
+ "The overwhelming urge to automate everything. βš™οΈ",
175
+ "Another meeting that could have been an email. πŸ“§",
176
+ "Forgetting to save.πŸ’ΎπŸ˜±",
177
+ "The sheer audacity. 😏",
178
+ ];
179
+ console.log(`πŸ“₯ INBOX deck created with ${inboxDeck.length} cards. Ready to perplex!`);
180
+ console.log(`πŸ“€ REPLY deck created with ${replyDeck.length} cards. Ready to amuse/confuse!`);
181
+ updateDeckCounts(); // Show initial counts
182
+ }
183
+
184
+ // === UTILITY FUNCTIONS ===
185
+
186
+ // Fisher-Yates (Knuth) Shuffle Algorithm - The gold standard for shuffling digital things! 🎰
187
+ function shuffleDeck(deck) {
188
+ console.log(`🎲 Shuffling the deck... Don't peek! πŸ˜‰`);
189
+ let currentIndex = deck.length, randomIndex;
190
+ // While there remain elements to shuffle...
191
+ while (currentIndex !== 0) {
192
+ // Pick a remaining element...
193
+ randomIndex = Math.floor(Math.random() * currentIndex);
194
+ currentIndex--;
195
+ // And swap it with the current element.
196
+ [deck[currentIndex], deck[randomIndex]] = [deck[randomIndex], deck[currentIndex]]; // Fancy swap!
197
+ }
198
+ console.log("πŸŒͺ️ Deck successfully randomized!");
199
+ return deck;
200
+ }
201
+
202
+ // Creates the visual representation of a card
203
+ function createCardElement(cardText, cardType) {
204
+ const cardDiv = document.createElement('div');
205
+ cardDiv.classList.add('card');
206
+ cardDiv.classList.add(cardType === 'inbox' ? 'inboxCard' : 'replyCard');
207
+ cardDiv.innerText = cardText; // Simple text for now
208
+ // Maybe add icons or other generative stuff later? Sky's the limit! 🌌
209
+ return cardDiv;
210
+ }
211
+
212
+ function updateStatus(message) {
213
+ const statusEl = document.getElementById('status');
214
+ statusEl.innerText = `🟒 ${message} ${Date().toLocaleTimeString()}`; // Add a timestamp for extra officiousness
215
+ console.log(`Status Update: ${message}`);
216
+ }
217
+
218
+ function updateDeckCounts() {
219
+ document.getElementById('inboxCount').innerText = inboxDeck.length;
220
+ document.getElementById('replyCount').innerText = replyDeck.length;
221
+ }
222
+
223
+
224
+ // === GAME SETUP FUNCTIONS ===
225
+
226
+ function dealInitialHands() {
227
+ console.log(`🀝 Dealing cards... Everyone gets ${cardsPerHand}. No cheating!`);
228
+ players = []; // Reset players if dealing again
229
+ for (let i = 0; i < numberOfPlayers; i++) {
230
+ const playerHand = replyDeck.splice(0, cardsPerHand); // Take cards from the *top* of the shuffled deck
231
+ if (playerHand.length < cardsPerHand) {
232
+ console.error(`😱 Oh no! Not enough REPLY cards left to deal full hands! Need ${cardsPerHand}, got ${playerHand.length}. Maybe reshuffle discard? Or just panic?`);
233
+ // Handle deck running out - reshuffle discard pile? End game? Add more cards?
234
+ updateStatus(`Error: Not enough REPLY cards to deal! Game paused. 😬`);
235
+ return false; // Stop dealing
236
+ }
237
+ players.push({
238
+ id: i,
239
+ name: `Player ${i + 1}`, // TODO: Get actual player names later? πŸ€” Maybe ask them politely?
240
+ hand: playerHand
241
+ });
242
+ console.log(`Player ${i + 1} received their hand.`);
243
+ }
244
+ updateDeckCounts();
245
+ return true; // Dealing successful
246
+ }
247
+
248
+ function selectStartingJudge() {
249
+ // Rule: Oldest player starts.
250
+ // Reality: We don't know ages yet. Let's just pick Player 1 (index 0) for now. πŸ€·β€β™‚οΈ
251
+ // TODO: Implement actual age check or a random selection later.
252
+ currentJudgeIndex = 0;
253
+ console.log(`πŸ‘‘ Player ${currentJudgeIndex + 1} is declared the first Judge! By decree of... well, me, the code.`);
254
+ updateStatus(`Player ${currentJudgeIndex + 1} starts as the Judge.`);
255
+ }
256
+
257
+ function judgeDrawsInbox() {
258
+ console.log("πŸ§‘β€βš–οΈ Judge is drawing an INBOX card...");
259
+ if (inboxDeck.length === 0) {
260
+ console.warn("πŸ“¬ INBOX deck is empty! Time to reshuffle the discard pile or ponder the void?");
261
+ // TODO: Implement reshuffling logic for inboxDeck from discardInbox
262
+ updateStatus("INBOX deck empty! Need to reshuffle or end game. πŸ€”");
263
+ currentInboxCard = "The INBOX is empty... what does it all mean?!"; // Placeholder
264
+ return false; // Can't draw
265
+ }
266
+
267
+ currentInboxCard = inboxDeck.shift(); // Take the top card (array.shift())
268
+ discardInbox.push(currentInboxCard); // Add it to the discard pile
269
+ console.log(`βœ‰οΈ Judge drew: "${currentInboxCard}"`);
270
+ updateDeckCounts();
271
+ updateStatus(`Judge drew the INBOX card. Players, prepare your replies!`);
272
+ return true; // Draw successful
273
+ }
274
+
275
+ // === RENDERING FUNCTION ===
276
+ // This function updates the HTML to show the current game state
277
+
278
+ function renderGame() {
279
+ console.log("🎨 Painting the game state onto the screen... like digital Bob Ross. Happy little cards! 🌳");
280
+
281
+ // Render Judge's Card
282
+ const judgeArea = document.getElementById('currentInboxCard');
283
+ judgeArea.innerHTML = ''; // Clear previous card
284
+ if (currentInboxCard) {
285
+ judgeArea.appendChild(createCardElement(currentInboxCard, 'inbox'));
286
+ } else {
287
+ judgeArea.innerText = "Waiting for Judge to draw...";
288
+ }
289
+
290
+ // Render Player Hands
291
+ const handsDisplay = document.getElementById('handsDisplay');
292
+ handsDisplay.innerHTML = ''; // Clear previous hands
293
+ players.forEach(player => {
294
+ const playerDiv = document.createElement('div');
295
+ playerDiv.classList.add('player-hand');
296
+ // Add player name, maybe bold the judge?
297
+ const namePrefix = player.id === currentJudgeIndex ? 'πŸ‘‘ Judge ' : '';
298
+ playerDiv.innerHTML = `<h4>${namePrefix}${player.name}'s Hand:</h4>`;
299
+ player.hand.forEach(cardText => {
300
+ playerDiv.appendChild(createCardElement(cardText, 'reply'));
301
+ });
302
+ handsDisplay.appendChild(playerDiv);
303
+ });
304
+
305
+ // Update deck counts display too
306
+ updateDeckCounts();
307
+
308
+ console.log("πŸ–ΌοΈ Render complete. The stage is set!");
309
+ }
310
+
311
+
312
+ // === INITIAL GAME START ===
313
+
314
+ function startGame() {
315
+ console.log("🏁 LET THE GAMES BEGIN! 🏁 May the wittiest human (or bot?) win!");
316
+ updateStatus("Game starting! Shuffling decks...");
317
+
318
+ createDecks();
319
+ shuffleDeck(inboxDeck);
320
+ shuffleDeck(replyDeck);
321
+
322
+ updateStatus("Dealing initial hands...");
323
+ if (!dealInitialHands()) return; // Stop if dealing failed
324
+
325
+ selectStartingJudge();
326
+
327
+ updateStatus("First round: Judge draws an INBOX card...");
328
+ if (!judgeDrawsInbox()) return; // Stop if drawing failed
329
+
330
+ // Initial render of the game state
331
+ renderGame();
332
+
333
+ updateStatus(`Round 1 started. Judge ${players[currentJudgeIndex].name} reads: "${currentInboxCard}". Players select a REPLY card! (Interaction needed next!)`);
334
+ }
335
+
336
+ // --- Kick off the game when the page loads ---
337
+ window.onload = startGame;
338
+
339
+ // === FUTURE LOGIC PLACEHOLDERS ===
340
+ // console.log("⏳ Next steps: Implement player REPLY submission, judging, scoring, card drawing, next round logic... It's a marathon, not a sprint! Unless you're coding really fast. πŸƒπŸ’¨");
341
+ // function playerSubmitsReply(playerId, cardIndex) { ... }
342
+ // function judgeSelectsWinner(submittedCard) { ... }
343
+ // function nextRound() { ... }
344
+ // function refillPlayerHand(playerId) { ... }
345
+
346
+ </script>
347
+
348
+ </body>
349
+ </html>