Quick Swipe Adventure!

Error: UI Initialization Failed.

';\n return;\n }\n\n // --- State Variables ---\n let currentIndex = 0;\n let isTransitioning = false;\n let isDragging = false;\n let startX = 0, startY = 0;\n let currentX = 0, currentY = 0;\n let cardElements = [];\n let gameState = {\n phase: 'selecting_race', // 'selecting_race', 'starting_game', 'facing_challenge', 'showing_outcome', 'game_over'\n score: 0,\n multiplier: 1,\n lives: INITIAL_LIVES,\n selectedRace: null, // { name: string, color: string }\n currentChallenge: null, // { text: string, requiredSwipe: string }\n consecutiveSuccesses: 0,\n actionTimeoutId: null, // To clear timeouts if needed\n };\n\n // --- Simple Hardcoded Challenges ---\n const challenges = [\n { text: \"Shadow darts from the left!\", requiredSwipe: 'left' },\n { text: \"Orc charges!\", requiredSwipe: 'right' },\n { text: \"Crackling barrier appears!\", requiredSwipe: 'up' },\n { text: \"Ground trembles!\", requiredSwipe: 'down' },\n { text: \"Arrow flies from the right!\", requiredSwipe: 'left' },\n { text: \"Goblin sweeps low!\", requiredSwipe: 'up' },\n { text: \"Heavy blow incoming!\", requiredSwipe: 'down' },\n { text: \"Strike the weak point!\", requiredSwipe: 'right' },\n { text: \"Dodge the falling rock!\", requiredSwipe: 'left'},\n { text: \"Evade the energy beam!\", requiredSwipe: 'right'},\n { text: \"Leap over the chasm!\", requiredSwipe: 'up'},\n { text: \"Duck under the swing!\", requiredSwipe: 'down'},\n ];\n let availableChallenges = [];\n\n // --- Core Functions ---\n\n /** Creates the race cards and adds listeners */\n function createCards() {\n carouselTrack.innerHTML = ''; // Clear loading message\n cardElements = [];\n if (!Array.isArray(raceData) || raceData.length === 0) {\n console.error(\"Client Script: raceData is invalid or empty. Cannot create cards.\");\n challengeText.textContent = 'No character data available.';\n return;\n }\n\n raceData.forEach((race, index) => {\n const card = document.createElement('div');\n card.classList.add(CARD_CLASS);\n card.dataset.index = index;\n\n const safeName = race.name || 'Unknown Race';\n const safeDescription = race.description || 'No description.';\n const safeStyleHint = race.styleHint || safeName.toLowerCase();\n const safeEffectColor = /^#[0-9A-F]{6}$/i.test(race.effectColor) ? race.effectColor : '#CCCCCC';\n\n card.style.setProperty('--effect-color', safeEffectColor);\n card.dataset.raceName = safeName; // Store for selection\n card.dataset.effectColor = safeEffectColor; // Store for selection\n\n const prompt = encodeURIComponent(\\`fantasy character portrait, \\${safeStyleHint}, \\${safeName}, detailed illustration, cinematic lighting\\`);\n // *** IMPORTANT: Replace with YOUR Val Town image generation endpoint if different ***\n const imageUrl = \\`https://maxm-imggenurl.web.val.run/\\${prompt}\\`;\n const fallbackColor = safeEffectColor.substring(1);\n const fallbackUrl = \\`https://placehold.co/380x320/\\${fallbackColor}/1A1A1E?text=\\${encodeURIComponent(safeName)}\\`;\n\n card.innerHTML = \\`\n $\"Image$ \n

\\${safeName}

\\${safeDescription}

\n \\`;\n\n // Add listeners directly here\n card.addEventListener('click', handleCardClick);\n card.addEventListener('mousedown', handleDragStart);\n card.addEventListener('touchstart', handleDragStart, { passive: true });\n\n carouselTrack.appendChild(card);\n cardElements.push(card);\n });\n console.log(\\`Client Script: Created \\${cardElements.length} cards.\\`);\n }\n\n /** Handles clicking the active card to select race */\n function handleCardClick(e) {\n if (gameState.phase !== 'selecting_race' || isTransitioning) return;\n\n const clickedCard = e.currentTarget; // The card the listener is attached to\n if (clickedCard.classList.contains(ACTIVE_CLASS)) {\n // Only start game if the *active* card is clicked\n const raceName = clickedCard.dataset.raceName;\n const effectColor = clickedCard.dataset.effectColor;\n startGame(raceName, effectColor);\n } else {\n // If a non-active card is clicked, navigate to it smoothly\n const targetIndex = parseInt(clickedCard.dataset.index);\n if (!isNaN(targetIndex) && targetIndex !== currentIndex) {\n navigateToIndex(targetIndex);\n }\n }\n }\n\n /** Updates card positions and applies classes */\n function updateCardPositions(useTransition = true) {\n if (!cardElements.length) return;\n isTransitioning = useTransition;\n\n cardElements.forEach((card, index) => {\n const effectContainer = card.querySelector('.' + EFFECT_CONTAINER_CLASS);\n // Reset effects and classes\n if (effectContainer) {\n effectContainer.className = EFFECT_CONTAINER_CLASS; // Reset animation triggers\n effectContainer.style.animation = ''; // Clear CSS animations\n effectContainer.style.boxShadow = ''; // Clear afterglow\n }\n card.classList.remove(ACTIVE_CLASS, PREV_CLASS, NEXT_CLASS, HIDDEN_PREV_CLASS, HIDDEN_NEXT_CLASS, 'is-failure');\n card.style.transition = useTransition ? '' : 'none';\n card.style.cursor = 'grab'; // Default cursor\n\n // Calculate Relative Position & Apply Classes (Unchanged logic)\n let relativeIndex = index - currentIndex;\n const numCards = cardElements.length;\n if (numCards > 1) {\n const half = Math.floor(numCards / 2);\n if (Math.abs(relativeIndex) > half) {\n relativeIndex = relativeIndex > 0 ? relativeIndex - numCards : relativeIndex + numCards;\n }\n }\n switch (relativeIndex) {\n case 0:\n card.classList.add(ACTIVE_CLASS);\n card.style.cursor = gameState.phase === 'selecting_race' ? 'pointer' : 'default'; // Pointer only in selection\n break;\n case 1: card.classList.add(NEXT_CLASS); break;\n case -1: card.classList.add(PREV_CLASS); break;\n default: card.classList.add(relativeIndex > 1 ? HIDDEN_NEXT_CLASS : HIDDEN_PREV_CLASS); break;\n }\n });\n\n if (useTransition) {\n setTimeout(() => { isTransitioning = false; }, TRANSITION_SPEED_MS);\n } else {\n isTransitioning = false;\n }\n }\n\n /** Creates spark effects originating near the center */\n function createSparks(effectContainer, numSparks = NUM_SPARKS_SUCCESS) {\n if (!effectContainer) return;\n const cardElement = effectContainer.parentElement;\n if (!cardElement) return;\n\n const cardCenterX = cardElement.offsetWidth / 2;\n const cardCenterY = cardElement.offsetHeight / 2;\n const maxRadius = Math.min(cardElement.offsetWidth, cardElement.offsetHeight) * 0.4; // Sparks fly outwards\n\n // Clear old sparks immediately before adding new ones\n effectContainer.querySelectorAll('.' + SPARK_CLASS).forEach(spark => spark.remove());\n\n for (let i = 0; i < numSparks; i++) {\n const spark = document.createElement('div');\n spark.classList.add(SPARK_CLASS);\n\n const startOffsetX = (Math.random() - 0.5) * (cardElement.offsetWidth * 0.1);\n const startOffsetY = (Math.random() - 0.5) * (cardElement.offsetHeight * 0.1);\n const startXPos = cardCenterX + startOffsetX;\n const startYPos = cardCenterY + startOffsetY;\n\n spark.style.left = \\`\\${startXPos}px\\`;\n spark.style.top = \\`\\${startYPos}px\\`;\n\n const angle = Math.random() * Math.PI * 2;\n const radius = Math.random() * maxRadius + 20; // Min radius 20\n const sparkEndX = Math.cos(angle) * radius;\n const sparkEndY = Math.sin(angle) * radius;\n\n // Set CSS variables for the animation\n spark.style.setProperty('--spark-tx', \\`\\${startXPos}px\\`); // Initial translate X\n spark.style.setProperty('--spark-ty', \\`\\${startYPos}px\\`); // Initial translate Y\n spark.style.setProperty('--spark-x', \\`\\${sparkEndX}px\\`); // Target translate X offset\n spark.style.setProperty('--spark-y', \\`\\${sparkEndY}px\\`); // Target translate Y offset\n spark.style.animationDelay = \\`\\${Math.random() * (EFFECT_DURATION_MS * 0.15)}ms\\`;\n\n effectContainer.appendChild(spark);\n\n spark.addEventListener('animationend', () => spark.remove(), { once: true });\n }\n }\n\n /** Triggers visual effects on the active card */\n function triggerEffect(type = 'success') {\n const activeCard = cardElements[currentIndex];\n if (!activeCard) return;\n const effectContainer = activeCard.querySelector('.' + EFFECT_CONTAINER_CLASS);\n if (!effectContainer) return;\n\n // Ensure correct color is set\n const color = gameState.selectedRace?.color || activeCard.dataset.effectColor || '#CCCCCC';\n activeCard.style.setProperty('--effect-color', color);\n\n // --- Cleanup Previous Effects ---\n effectContainer.className = EFFECT_CONTAINER_CLASS; // Reset classes fully\n effectContainer.style.animation = ''; // Clear CSS animation property\n activeCard.classList.remove('is-failure');\n // Force browser reflow to ensure animations can restart if triggered quickly\n void effectContainer.offsetWidth;\n\n console.log(\\`Triggering effect: \\${type}\\`);\n\n switch(type) {\n case 'success':\n effectContainer.classList.add('animate-success');\n createSparks(effectContainer, NUM_SPARKS_SUCCESS);\n break;\n case 'special': // Lightning + Afterglow + More Sparks\n effectContainer.classList.add('animate-special');\n createSparks(effectContainer, NUM_SPARKS_SPECIAL);\n break;\n case 'failure':\n activeCard.classList.add('is-failure');\n // No sparks or glow on failure\n break;\n case 'selection': // Initial selection effect\n effectContainer.classList.add('animate-special'); // Use special effect for selection\n createSparks(effectContainer, NUM_SPARKS_SPECIAL);\n break;\n\n }\n\n // General cleanup timeout for animation classes\n setTimeout(() => {\n if (effectContainer) {\n effectContainer.classList.remove('animate-success', 'animate-special');\n }\n if (activeCard) {\n activeCard.classList.remove('is-failure');\n }\n }, LONG_EFFECT_DURATION_MS); // Use longer duration to cover all effects\n }\n\n /** Moves carousel during selection phase */\n function moveCarousel(direction) {\n if (gameState.phase !== 'selecting_race' || isTransitioning || cardElements.length <= 1) return;\n const numCards = cardElements.length;\n currentIndex = (currentIndex + (direction === 'next' ? 1 : -1) + numCards) % numCards;\n updateCardPositions(true);\n }\n\n /** Navigates directly to a specific card index during selection */\n function navigateToIndex(index) {\n if (gameState.phase !== 'selecting_race' || isTransitioning || index === currentIndex || index < 0 || index >= cardElements.length) return;\n currentIndex = index;\n updateCardPositions(true);\n }\n\n // --- NEW: Game Logic Functions ---\n\n /** Starts the adventure game */\n function startGame(raceName, effectColor) {\n if (gameState.phase !== 'selecting_race') return; // Prevent restarting mid-game\n\n console.log(\\`--- Starting Game: Race=\\${raceName} ---\\`);\n gameState.phase = 'starting_game'; // Transition phase\n gameState.selectedRace = { name: raceName, color: effectColor };\n gameState.score = 0;\n gameState.multiplier = 1.0;\n gameState.lives = INITIAL_LIVES;\n gameState.consecutiveSuccesses = 0;\n availableChallenges = [...challenges]; // Reset challenge pool\n\n // Make the selected card the focus and trigger selection effect\n const activeCard = cardElements[currentIndex];\n if(activeCard){\n activeCard.style.setProperty('--effect-color', effectColor);\n triggerEffect('selection');\n // Ensure active card styling is correct\n updateCardPositions(false); // Update instantly\n }\n\n // Update UI visibility and content\n updateGameUI();\n gameUI.classList.add('visible');\n document.body.classList.add(GAME_ACTIVE_BODY_CLASS); // Apply body class\n challengeText.textContent = \\`Get ready, \\${raceName}!\\`; // Initial message\n outcomeText.classList.remove('visible'); // Clear outcome\n\n // Transition to first challenge\n clearTimeout(gameState.actionTimeoutId); // Clear any pending timeouts\n gameState.actionTimeoutId = setTimeout(() => {\n presentNextChallenge();\n gameState.phase = 'facing_challenge'; // Now ready for input\n }, 1500); // Delay before first challenge appears\n }\n\n /** Updates the Score, Multiplier, Lives display */\n function updateGameUI() {\n scoreDisplay.textContent = \\`Score: \\${gameState.score}\\`;\n multiplierDisplay.textContent = \\`x\\${gameState.multiplier.toFixed(1)}\\`;\n livesDisplay.textContent = gameState.lives > 0 ? '❤️'.repeat(gameState.lives) : '💀'; // Skull if 0 lives\n }\n\n /** Selects and displays the next challenge */\n function presentNextChallenge() {\n if (gameState.lives <= 0 || gameState.phase === 'game_over') return; // Should be caught earlier, but safety check\n\n if (availableChallenges.length === 0) {\n availableChallenges = [...challenges]; // Replenish challenge pool\n console.log(\"Challenge pool replenished.\");\n }\n\n // Select and remove a random challenge\n const challengeIndex = Math.floor(Math.random() * availableChallenges.length);\n gameState.currentChallenge = availableChallenges.splice(challengeIndex, 1)[0];\n\n console.log(\\`Challenge: \"\\${gameState.currentChallenge.text}\" (Requires: \\${gameState.currentChallenge.requiredSwipe})\\`);\n\n challengeText.textContent = gameState.currentChallenge.text;\n outcomeText.classList.remove('visible', 'success', 'failure'); // Hide outcome text\n gameState.phase = 'facing_challenge'; // Ready for input\n\n // Ensure active card is styled correctly (might have lost focus during transitions)\n updateCardPositions(false);\n }\n\n /** Handles the outcome of a challenge swipe */\n function handleChallengeOutcome(swipeDirection) {\n if (gameState.phase !== 'facing_challenge' || !gameState.currentChallenge) return;\n\n gameState.phase = 'showing_outcome'; // Input processed, show result\n clearTimeout(gameState.actionTimeoutId); // Clear any pending next challenge timeout\n\n const correctSwipe = gameState.currentChallenge.requiredSwipe;\n let success = swipeDirection === correctSwipe;\n\n console.log(\\`Action: \\${swipeDirection}, Required: \\${correctSwipe}, Success: \\${success}\\`);\n\n if (success) {\n gameState.score += Math.floor(POINTS_PER_SUCCESS * gameState.multiplier);\n gameState.consecutiveSuccesses++;\n gameState.multiplier = Math.min(MULTIPLIER_MAX, gameState.multiplier + MULTIPLIER_INCREMENT); // Increase multiplier up to max\n\n outcomeText.textContent = \"Success!\";\n outcomeText.className = 'outcome-text visible success';\n triggerEffect(swipeDirection === 'up' ? 'special' : 'success');\n\n } else {\n gameState.lives--;\n gameState.consecutiveSuccesses = 0;\n gameState.multiplier = Math.max(MULTIPLIER_RESET_THRESHOLD, gameState.multiplier * 0.7); // Decrease multiplier, floor at min\n\n outcomeText.textContent = \\`Failed! (\\${correctSwipe.toUpperCase()}!)\\`;\n outcomeText.className = 'outcome-text visible failure';\n triggerEffect('failure');\n\n if (gameState.lives <= 0) {\n updateGameUI(); // Update UI to show 0 lives / skull\n gameState.actionTimeoutId = setTimeout(gameOver, ACTION_DELAY_MS); // Delay before showing game over message\n return; // Don't schedule next challenge\n }\n }\n\n updateGameUI(); // Update score/multiplier/lives display\n\n // Schedule the next challenge presentation\n gameState.actionTimeoutId = setTimeout(presentNextChallenge, ACTION_DELAY_MS);\n }\n\n /** Ends the game and shows the final score */\n function gameOver() {\n console.log(\"--- Game Over ---\");\n gameState.phase = 'game_over';\n challengeText.textContent = \\`Game Over! Final Score: \\${gameState.score}\\`;\n outcomeText.textContent = 'Refresh to play again!';\n outcomeText.className = 'outcome-text visible'; // Make it visible, neutral color\n document.body.classList.remove(GAME_ACTIVE_BODY_CLASS); // Remove game active class\n\n // Optional: Re-enable interaction with all cards or show a restart button explicitly\n cardElements.forEach(card => card.style.cursor = 'pointer');\n }\n\n // --- Event Handlers ---\n\n function handleDragStart(e) {\n // Prevent dragging if game is over or during specific transitions\n if (gameState.phase === 'game_over' || gameState.phase === 'starting_game') return;\n // Only prevent carousel transitions during selection phase\n if (isTransitioning && gameState.phase === 'selecting_race') return;\n\n const targetCard = e.target.closest('.' + CARD_CLASS);\n if (targetCard) {\n // Prevent default image dragging etc. only if starting on card content\n if (e.target.tagName === 'IMG' || e.target.tagName === 'H3' || e.target.tagName === 'P') {\n e.preventDefault();\n }\n } else {\n // If drag starts outside a card (e.g. background), ignore it for swipes/carousel\n return;\n }\n\n\n isDragging = true;\n startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n startY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;\n currentX = startX;\n currentY = startY;\n\n // Add dragging class only during selection phase for visual feedback\n if (gameState.phase === 'selecting_race') {\n targetCard?.classList.add(DRAGGING_CLASS); // Add to the specific card being dragged\n }\n document.body.style.userSelect = 'none'; // Disable text selection globally\n }\n\n function handleDragMove(e) {\n if (!isDragging) return;\n\n currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n currentY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;\n\n // Prevent vertical scroll if vertical swipe is dominant during game phase\n if (e.type.includes('touch') && gameState.phase === 'facing_challenge') {\n const diffX = Math.abs(startX - currentX);\n const diffY = Math.abs(startY - currentY);\n if (diffY > diffX + 10) { // If vertical movement is clearly dominant\n e.preventDefault();\n }\n }\n }\n\n function handleDragEnd(e) {\n if (!isDragging) return;\n isDragging = false;\n\n // Remove dragging class from *all* cards\n cardElements.forEach(card => card.classList.remove(DRAGGING_CLASS));\n document.body.style.userSelect = ''; // Re-enable text selection\n\n const diffX = currentX - startX;\n const diffY = currentY - startY;\n const absDiffX = Math.abs(diffX);\n const absDiffY = Math.abs(diffY);\n\n // Ignore tiny movements\n if (absDiffX < 10 && absDiffY < 10) {\n // If it was a very short drag/tap on the active card during selection, treat as click\n if (gameState.phase === 'selecting_race') {\n const activeCard = cardElements[currentIndex];\n // Check if the drag ended on the currently active card\n if (activeCard && e.target.closest('.'+CARD_CLASS) === activeCard) {\n handleCardClick({ currentTarget: activeCard });\n }\n }\n return;\n }\n\n console.log(\\`Drag End: dx=\\${diffX.toFixed(0)}, dy=\\${diffY.toFixed(0)}, Phase: \\${gameState.phase}\\`);\n\n // Determine action based on phase and swipe dominance\n if (gameState.phase === 'selecting_race') {\n // --- Carousel Navigation ---\n if (absDiffX > SWIPE_THRESHOLD_HORIZONTAL && absDiffX > absDiffY) {\n moveCarousel(diffX < 0 ? 'next' : 'prev');\n }\n // Vertical swipes do nothing during selection for now (tap/click selects)\n } else if (gameState.phase === 'facing_challenge') {\n // --- Game Action Swipes ---\n // Prioritize vertical swipes slightly if ambiguous\n if (absDiffY > SWIPE_THRESHOLD_VERTICAL && absDiffY >= absDiffX) {\n handleChallengeOutcome(diffY > 0 ? 'down' : 'up');\n } else if (absDiffX > SWIPE_THRESHOLD_HORIZONTAL && absDiffX > absDiffY) {\n handleChallengeOutcome(diffX > 0 ? 'right' : 'left');\n } else {\n console.log(\"Swipe below threshold for action.\");\n }\n }\n\n startX = startY = currentX = currentY = 0; // Reset drag coordinates\n }\n\n /** Attaches global event listeners */\n function addGlobalListeners() {\n console.log(\"Client Script: Adding global listeners...\");\n // Keyboard Input\n window.addEventListener('keydown', (e) => {\n if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') return;\n\n // Allow refresh even when game is over\n if (gameState.phase === 'game_over' && e.key === 'r') {\n window.location.reload();\n return;\n }\n\n if (gameState.phase === 'selecting_race') {\n if (e.key === 'ArrowRight') { e.preventDefault(); moveCarousel('next'); }\n else if (e.key === 'ArrowLeft') { e.preventDefault(); moveCarousel('prev'); }\n else if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n const activeCard = cardElements[currentIndex];\n if(activeCard) handleCardClick({ currentTarget: activeCard });\n }\n } else if (gameState.phase === 'facing_challenge') {\n let action = null;\n if (e.key === 'ArrowRight') { e.preventDefault(); action = 'right'; }\n else if (e.key === 'ArrowLeft') { e.preventDefault(); action = 'left'; }\n else if (e.key === 'ArrowUp') { e.preventDefault(); action = 'up'; }\n else if (e.key === 'ArrowDown') { e.preventDefault(); action = 'down'; }\n\n if(action) {\n handleChallengeOutcome(action);\n }\n }\n });\n\n // --- Global Mouse/Touch listeners for Drag End/Move ---\n // These are attached to window to catch drags even if cursor leaves the card area\n window.addEventListener('mousemove', handleDragMove);\n window.addEventListener('touchmove', handleDragMove, { passive: false }); // Essential for preventDefault\n window.addEventListener('mouseup', handleDragEnd);\n window.addEventListener('touchend', handleDragEnd);\n window.addEventListener('touchcancel', handleDragEnd); // Handle interruption\n\n console.log(\"Client Script: Global listeners added.\");\n }\n\n // --- Initialization ---\n function init() {\n console.log(\"Client Script: Initializing adventure...\");\n challengeText.textContent = \"Loading Heroes...\"; // Initial loading message\n createCards(); // Create cards and add their specific listeners\n\n if (cardElements.length > 0) {\n addGlobalListeners(); // Add window-level listeners\n updateCardPositions(false); // Set initial state without animation\n challengeText.textContent = \"Choose your Hero!\"; // Update prompt\n console.log(\"Client Script: Initialization complete. Select your hero!\");\n } else {\n console.warn(\"Client Script: Initialization failed - no cards created.\");\n // Error message already set in createCards if data was invalid\n }\n }\n\n // --- Run Initialization ---\n // Use DOMContentLoaded to ensure HTML is ready, though in Val Town this might be less critical\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init(); // Already loaded\n }\n\n})(); // End of IIFE\n`;\n\n // 4. Construct and Return Full HTML Response\n return new Response(\n `\n \n \n \n \n Quick Swipe Adventure!\n \n \n \n \n \n \n

Score: 0

x1.0

Lives: ❤️❤️❤️

\n\n

\n\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/Get/story/code/main.tsx","extension","actionData","errors"]