Book-Maker-CVLM-AI-UI-UX

Sleeping

App Files Files Community

awacke1 commited on Apr 12

Commit

afa5be2

verified ·

1 Parent(s): b41bee6

Create index.html

Browse files

Files changed (1) hide show

index.html +349 -0

index.html ADDED Viewed

	@@ -0,0 +1,349 @@

+<!DOCTYPE html>
+<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>