Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Witty Card Game Prototype 🤔🃏</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| background-color: #f0f0f0; | |
| color: #333; | |
| padding: 20px; | |
| } | |
| h1, h2 { | |
| text-align: center; | |
| color: #5a3a7e; /* A deep purple, because why not? */ | |
| } | |
| #gameArea { | |
| max-width: 900px; | |
| margin: 20px auto; | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| .deck-area, #judgeArea, #playerHands { | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| border: 1px dashed #ccc; | |
| border-radius: 5px; | |
| } | |
| #judgeArea h3, #playerHands h3 { | |
| margin-top: 0; | |
| color: #333; | |
| } | |
| .card { | |
| display: inline-block; /* Lay them out like real cards, kinda */ | |
| border: 1px solid #aaa; | |
| background-color: #f9f9f9; | |
| padding: 15px 10px; /* A bit more padding for readability */ | |
| margin: 5px; | |
| min-width: 80px; | |
| min-height: 50px; /* Let content define height mostly */ | |
| border-radius: 4px; | |
| box-shadow: 1px 1px 3px rgba(0,0,0,0.1); | |
| text-align: center; | |
| vertical-align: top; /* Align cards nicely if they wrap */ | |
| font-size: 0.9em; | |
| cursor: default; /* Looks like a thing you can't click... yet! */ | |
| } | |
| .inboxCard { | |
| background-color: #e0f7fa; /* Light cyan - like a fresh email! 📧 */ | |
| border-color: #00acc1; | |
| font-weight: bold; | |
| } | |
| .replyCard { | |
| background-color: #fff9c4; /* Light yellow - like a sticky note reply! 📝 */ | |
| border-color: #ffeb3b; | |
| } | |
| .player-hand { | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .player-hand:last-child { | |
| border-bottom: none; | |
| } | |
| #status { | |
| margin-top: 20px; | |
| padding: 10px; | |
| background-color: #e8f5e9; /* Calming green for status updates */ | |
| border: 1px solid #a5d6a7; | |
| border-radius: 4px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Card Game Extravaganza! (Prototype Stage) 🚀</h1> | |
| <div id="gameArea"> | |
| <h2>Game Board</h2> | |
| <div class="deck-area"> | |
| <h3>Decks (Conceptual)</h3> | |
| <p>Imagine two piles here: one for INBOX 📥, one for REPLY 📤. We draw from these in JS!</p> | |
| <p>INBOX cards remaining: <span id="inboxCount">?</span></p> | |
| <p>REPLY cards remaining: <span id="replyCount">?</span></p> | |
| </div> | |
| <div id="judgeArea"> | |
| <h3>Judge's INBOX Card 🤔</h3> | |
| <div id="currentInboxCard">Waiting for the round to start...</div> | |
| </div> | |
| <div id="playerHands"> | |
| <h3>Player Hands 🙌</h3> | |
| <div id="handsDisplay">Players are gathering... cards are being shuffled... suspense!</div> | |
| </div> | |
| <div id="status"> | |
| Game initializing... Prepare for witty banter! 😂 | |
| </div> | |
| </div> | |
| <script> | |
| // === CONFIGURATION & INITIAL STATE === | |
| console.log("🚀 Booting up the Card Game Engine... Hold onto your hats! Or don't. Free will is a thing. 🤔"); | |
| const numberOfPlayers = 3; // Let's start with 3 players. More players, more chaos! 🎉 | |
| const cardsPerHand = 7; // As requested, 7 REPLY cards each. A sacred number? Probably not. ✨ | |
| let inboxDeck = []; | |
| let replyDeck = []; | |
| let players = []; // Array to hold player objects { id: number, name: string, hand: array } | |
| let discardInbox = []; // Where used INBOX cards go to ponder their existence. | |
| let discardReply = []; // Where used REPLY cards go to await reincarnation (reshuffling?). | |
| let currentJudgeIndex = 0; // We'll figure out the 'oldest' part later, for now player 0 starts. 👴👑 | |
| let currentInboxCard = null; // The card currently demanding attention. | |
| // === DECK CREATION === | |
| // Let's fill our decks with profound nonsense and digital ephemera. 🧐 | |
| function createDecks() { | |
| console.log("📜 Generating sacred texts... I mean, card decks."); | |
| // --- INBOX Deck: The prompts, the questions, the existential crises! --- | |
| inboxDeck = [ | |
| "What's the sound of one hand clapping... in a Zoom meeting? 👏💻", | |
| "My therapist told me to embrace my mistakes. So I hugged my code. 🤗", | |
| "The real treasure was the _______ we made along the way. 🏴☠️", | |
| "Why did the AI cross the road? 🤖🛣️", | |
| "What's secretly controlling the world? 🌍👽", | |
| "Describe your last debugging session using only interpretive dance. 💃🕺🐞", | |
| "Complete the prophecy: 'And lo, the user shall _______'. 🙏", | |
| "What's the wifi password in the afterlife? 📶👻", | |
| "If cats could text, their first message would be _______. 😼📱", | |
| "The meaning of life is apparently _______. Who knew? 🤷♀️", | |
| ]; | |
| // --- REPLY Deck: The answers, the non-sequiturs, the genius strokes! --- | |
| replyDeck = [ | |
| "A rogue semicolon. ;", | |
| "Blaming the intern. 😅", | |
| "Aggressively Googling it. 🔍", | |
| "Turning it off and on again. 🔌", | |
| "Insufficient caffeine. ☕", | |
| "A quantum fluctuation. ✨", | |
| "Feature, not a bug. ™️", | |
| "Squirrels. Definitely squirrels. 🐿️", | |
| "The 'any' key. Where is it?! 🤔", | |
| "Asking for a friend... 👀", | |
| "My other notification. 🔔", | |
| "A deeply profound nap. 😴", | |
| "Imposter syndrome. 🎭", | |
| "Running 'sudo make me a sandwich'. 🥪", | |
| "Emptying the browser cache... and my soul. 💨", | |
| "Just vibing. ✨😌✨", | |
| "Three ducks in a trench coat. 🦆🦆🦆🧥", | |
| "The algorithm demands it. 🤖", | |
| "Error 404: Witty response not found. 🚫", | |
| "A moment of existential dread. 😨", | |
| "Lasers! Pew pew! ✨", | |
| "The overwhelming urge to automate everything. ⚙️", | |
| "Another meeting that could have been an email. 📧", | |
| "Forgetting to save.💾😱", | |
| "The sheer audacity. 😏", | |
| ]; | |
| console.log(`📥 INBOX deck created with ${inboxDeck.length} cards. Ready to perplex!`); | |
| console.log(`📤 REPLY deck created with ${replyDeck.length} cards. Ready to amuse/confuse!`); | |
| updateDeckCounts(); // Show initial counts | |
| } | |
| // === UTILITY FUNCTIONS === | |
| // Fisher-Yates (Knuth) Shuffle Algorithm - The gold standard for shuffling digital things! 🎰 | |
| function shuffleDeck(deck) { | |
| console.log(`🎲 Shuffling the deck... Don't peek! 😉`); | |
| let currentIndex = deck.length, randomIndex; | |
| // While there remain elements to shuffle... | |
| while (currentIndex !== 0) { | |
| // Pick a remaining element... | |
| randomIndex = Math.floor(Math.random() * currentIndex); | |
| currentIndex--; | |
| // And swap it with the current element. | |
| [deck[currentIndex], deck[randomIndex]] = [deck[randomIndex], deck[currentIndex]]; // Fancy swap! | |
| } | |
| console.log("🌪️ Deck successfully randomized!"); | |
| return deck; | |
| } | |
| // Creates the visual representation of a card | |
| function createCardElement(cardText, cardType) { | |
| const cardDiv = document.createElement('div'); | |
| cardDiv.classList.add('card'); | |
| cardDiv.classList.add(cardType === 'inbox' ? 'inboxCard' : 'replyCard'); | |
| cardDiv.innerText = cardText; // Simple text for now | |
| // Maybe add icons or other generative stuff later? Sky's the limit! 🌌 | |
| return cardDiv; | |
| } | |
| function updateStatus(message) { | |
| const statusEl = document.getElementById('status'); | |
| statusEl.innerText = `🟢 ${message} ${Date().toLocaleTimeString()}`; // Add a timestamp for extra officiousness | |
| console.log(`Status Update: ${message}`); | |
| } | |
| function updateDeckCounts() { | |
| document.getElementById('inboxCount').innerText = inboxDeck.length; | |
| document.getElementById('replyCount').innerText = replyDeck.length; | |
| } | |
| // === GAME SETUP FUNCTIONS === | |
| function dealInitialHands() { | |
| console.log(`🤝 Dealing cards... Everyone gets ${cardsPerHand}. No cheating!`); | |
| players = []; // Reset players if dealing again | |
| for (let i = 0; i < numberOfPlayers; i++) { | |
| const playerHand = replyDeck.splice(0, cardsPerHand); // Take cards from the *top* of the shuffled deck | |
| if (playerHand.length < cardsPerHand) { | |
| console.error(`😱 Oh no! Not enough REPLY cards left to deal full hands! Need ${cardsPerHand}, got ${playerHand.length}. Maybe reshuffle discard? Or just panic?`); | |
| // Handle deck running out - reshuffle discard pile? End game? Add more cards? | |
| updateStatus(`Error: Not enough REPLY cards to deal! Game paused. 😬`); | |
| return false; // Stop dealing | |
| } | |
| players.push({ | |
| id: i, | |
| name: `Player ${i + 1}`, // TODO: Get actual player names later? 🤔 Maybe ask them politely? | |
| hand: playerHand | |
| }); | |
| console.log(`Player ${i + 1} received their hand.`); | |
| } | |
| updateDeckCounts(); | |
| return true; // Dealing successful | |
| } | |
| function selectStartingJudge() { | |
| // Rule: Oldest player starts. | |
| // Reality: We don't know ages yet. Let's just pick Player 1 (index 0) for now. 🤷♂️ | |
| // TODO: Implement actual age check or a random selection later. | |
| currentJudgeIndex = 0; | |
| console.log(`👑 Player ${currentJudgeIndex + 1} is declared the first Judge! By decree of... well, me, the code.`); | |
| updateStatus(`Player ${currentJudgeIndex + 1} starts as the Judge.`); | |
| } | |
| function judgeDrawsInbox() { | |
| console.log("🧑⚖️ Judge is drawing an INBOX card..."); | |
| if (inboxDeck.length === 0) { | |
| console.warn("📬 INBOX deck is empty! Time to reshuffle the discard pile or ponder the void?"); | |
| // TODO: Implement reshuffling logic for inboxDeck from discardInbox | |
| updateStatus("INBOX deck empty! Need to reshuffle or end game. 🤔"); | |
| currentInboxCard = "The INBOX is empty... what does it all mean?!"; // Placeholder | |
| return false; // Can't draw | |
| } | |
| currentInboxCard = inboxDeck.shift(); // Take the top card (array.shift()) | |
| discardInbox.push(currentInboxCard); // Add it to the discard pile | |
| console.log(`✉️ Judge drew: "${currentInboxCard}"`); | |
| updateDeckCounts(); | |
| updateStatus(`Judge drew the INBOX card. Players, prepare your replies!`); | |
| return true; // Draw successful | |
| } | |
| // === RENDERING FUNCTION === | |
| // This function updates the HTML to show the current game state | |
| function renderGame() { | |
| console.log("🎨 Painting the game state onto the screen... like digital Bob Ross. Happy little cards! 🌳"); | |
| // Render Judge's Card | |
| const judgeArea = document.getElementById('currentInboxCard'); | |
| judgeArea.innerHTML = ''; // Clear previous card | |
| if (currentInboxCard) { | |
| judgeArea.appendChild(createCardElement(currentInboxCard, 'inbox')); | |
| } else { | |
| judgeArea.innerText = "Waiting for Judge to draw..."; | |
| } | |
| // Render Player Hands | |
| const handsDisplay = document.getElementById('handsDisplay'); | |
| handsDisplay.innerHTML = ''; // Clear previous hands | |
| players.forEach(player => { | |
| const playerDiv = document.createElement('div'); | |
| playerDiv.classList.add('player-hand'); | |
| // Add player name, maybe bold the judge? | |
| const namePrefix = player.id === currentJudgeIndex ? '👑 Judge ' : ''; | |
| playerDiv.innerHTML = `<h4>${namePrefix}${player.name}'s Hand:</h4>`; | |
| player.hand.forEach(cardText => { | |
| playerDiv.appendChild(createCardElement(cardText, 'reply')); | |
| }); | |
| handsDisplay.appendChild(playerDiv); | |
| }); | |
| // Update deck counts display too | |
| updateDeckCounts(); | |
| console.log("🖼️ Render complete. The stage is set!"); | |
| } | |
| // === INITIAL GAME START === | |
| function startGame() { | |
| console.log("🏁 LET THE GAMES BEGIN! 🏁 May the wittiest human (or bot?) win!"); | |
| updateStatus("Game starting! Shuffling decks..."); | |
| createDecks(); | |
| shuffleDeck(inboxDeck); | |
| shuffleDeck(replyDeck); | |
| updateStatus("Dealing initial hands..."); | |
| if (!dealInitialHands()) return; // Stop if dealing failed | |
| selectStartingJudge(); | |
| updateStatus("First round: Judge draws an INBOX card..."); | |
| if (!judgeDrawsInbox()) return; // Stop if drawing failed | |
| // Initial render of the game state | |
| renderGame(); | |
| updateStatus(`Round 1 started. Judge ${players[currentJudgeIndex].name} reads: "${currentInboxCard}". Players select a REPLY card! (Interaction needed next!)`); | |
| } | |
| // --- Kick off the game when the page loads --- | |
| window.onload = startGame; | |
| // === FUTURE LOGIC PLACEHOLDERS === | |
| // 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. 🏃💨"); | |
| // function playerSubmitsReply(playerId, cardIndex) { ... } | |
| // function judgeSelectsWinner(submittedCard) { ... } | |
| // function nextRound() { ... } | |
| // function refillPlayerHand(playerId) { ... } | |
| </script> | |
| </body> | |
| </html> |