Create index.html
Browse files- 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>
|