PDF-Image-Book-Album-Maker-AI-UI-UX

Running

App Files Files Community

PDF-Image-Book-Album-Maker-AI-UI-UX / index.html

awacke1

Create index.html

afa5be2 verified 11 months ago

raw

history blame contribute delete

15.1 kB

	<!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>