Character Creator - Select Race

Error: Failed to initialize the character selection interface. Required HTML elements are missing.

\\`;\n return; // Stop script execution\n }\n console.log(\"Client Script: Required elements found.\");\n\n // --- State Variables ---\n let currentIndex = 0; // Index of the currently active card\n let isTransitioning = false; // Flag to prevent actions during card transitions\n let isDragging = false; // Flag indicating if the user is currently dragging\n let startX = 0; // Initial X coordinate at the start of a drag\n let currentX = 0; // Current X coordinate during a drag move\n let cardElements = []; // Array to hold references to the created card DOM elements\n\n // --- Core Functions ---\n\n /**\n * Creates the race cards based on the raceData and appends them to the carousel track.\n */\n function createCards() {\n console.log(\"Client Script: createCards() called. Data:\", raceData);\n // Clear any existing content and reset the card elements array\n carouselTrack.innerHTML = '';\n cardElements = [];\n\n // Validate the injected raceData before proceeding\n if (!Array.isArray(raceData) || raceData.length === 0) {\n console.error(\"Client Script: raceData is invalid or empty. Cannot create cards.\");\n carouselTrack.innerHTML = '

No character data is available to display.

';\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; // Store index for potential future use\n\n // --- Data Validation & Sanitization ---\n // Use provided data, but have safe fallbacks for missing/invalid fields.\n const safeName = typeof race.name === 'string' && race.name.trim() ? race.name.trim() : 'Unknown Race';\n const safeDescription = typeof race.description === 'string' && race.description.trim() ? race.description.trim() : 'No description provided.';\n const safeStyleHint = typeof race.styleHint === 'string' && race.styleHint.trim() ? race.styleHint.trim() : safeName.toLowerCase(); // Fallback style hint to name\n const safeEffectColor = typeof race.effectColor === 'string' && /^#[0-9A-F]{6}$/i.test(race.effectColor)\n ? race.effectColor\n : '#CCCCCC'; // Default to grey if color is invalid\n\n card.style.setProperty('--effect-color', safeEffectColor); // Set the CSS variable for this card\n\n // --- Image Generation ---\n // Construct URL for Val Town image generator (ensure this endpoint exists and works)\n // Encode components to handle spaces and special characters in prompts\n const prompt = encodeURIComponent(\\`fantasy character portrait, \\${safeStyleHint}, \\${safeName}, detailed illustration, cinematic lighting\\`);\n const imageUrl = \\`https://maxm-imggenurl.web.val.run/\\${prompt}\\`; // Replace with your actual image generation endpoint if different\n\n // Fallback placeholder image using placehold.co (useful for debugging/offline)\n const fallbackColor = safeEffectColor.substring(1); // Remove '#'\n const fallbackUrl = \\`https://placehold.co/380x320/\\${fallbackColor}/1A1A1E?text=\\${encodeURIComponent(safeName)}\\`;\n\n // --- Card HTML Structure ---\n // Use template literal for clean HTML construction.\n // Includes the image, effect container, and content area.\n // The 'onerror' attribute on the img tag handles image loading failures gracefully.\n card.innerHTML = \\`\n $\"Image$ \n

\\${safeName}

\\${safeDescription}

\n \\`;\n\n carouselTrack.appendChild(card);\n cardElements.push(card); // Store reference to the created DOM element\n });\n console.log(\\`Client Script: Successfully created \\${cardElements.length} cards.\\`);\n }\n\n /**\n * Updates the CSS classes and styles of all cards based on the currentIndex.\n * Handles positioning, opacity, transitions, and triggers effects for the active card.\n * @param {boolean} useTransition - Whether to apply CSS transitions (true) or update instantly (false).\n */\n function updateCardPositions(useTransition = true) {\n if (!cardElements.length) return; // Don't do anything if no cards exist\n\n console.log(\\`Client Script: updateCardPositions called. currentIndex: \\${currentIndex}, useTransition: \\${useTransition}\\`);\n isTransitioning = useTransition; // Set the global transition flag\n\n const numCards = cardElements.length;\n\n cardElements.forEach((card, index) => {\n const effectContainer = card.querySelector('.' + EFFECT_CONTAINER_CLASS);\n\n // --- Reset State ---\n // Clear previous effect states and positioning classes before applying new ones.\n if (effectContainer) {\n effectContainer.classList.remove(ANIMATE_CLASS);\n // Remove any leftover spark elements from previous animations\n effectContainer.querySelectorAll('.' + SPARK_CLASS).forEach(spark => spark.remove());\n }\n card.classList.remove(ACTIVE_CLASS, PREV_CLASS, NEXT_CLASS, HIDDEN_PREV_CLASS, HIDDEN_NEXT_CLASS);\n card.style.opacity = ''; // Reset opacity (CSS classes will handle it)\n card.style.pointerEvents = ''; // Reset pointer-events\n\n // --- Calculate Relative Position ---\n // Determine where this card is relative to the current active card (currentIndex).\n // This handles wrapping around the ends of the carousel.\n let relativeIndex = index - currentIndex;\n if (numCards > 1) { // Avoid division by zero or incorrect logic for single card\n const half = Math.floor(numCards / 2);\n // If the distance is more than half the circle, wrap around the other way\n if (Math.abs(relativeIndex) > half) {\n relativeIndex = relativeIndex > 0 ? relativeIndex - numCards : relativeIndex + numCards;\n }\n }\n\n // --- Apply Positional Classes ---\n let isActive = false;\n switch (relativeIndex) {\n case 0:\n card.classList.add(ACTIVE_CLASS);\n isActive = true;\n break;\n case 1: // Card immediately to the right\n card.classList.add(NEXT_CLASS);\n break;\n case -1: // Card immediately to the left\n card.classList.add(PREV_CLASS);\n break;\n default: // Cards further away\n if (relativeIndex > 1) {\n card.classList.add(HIDDEN_NEXT_CLASS);\n } else if (relativeIndex < -1) {\n card.classList.add(HIDDEN_PREV_CLASS);\n }\n break;\n }\n\n // --- Manage Transitions ---\n // Disable CSS transitions for instant updates (e.g., initial load).\n card.style.transition = useTransition ? '' : 'none';\n\n // --- Trigger Effects for Active Card ---\n // If this card just became active and we are using transitions, trigger its visual effect.\n if (isActive && useTransition && effectContainer) {\n // Delay effect start slightly to sync with card transition finishing\n setTimeout(() => {\n if (card.classList.contains(ACTIVE_CLASS)) { // Double-check it's still active\n createSparks(effectContainer); // Generate spark particles\n effectContainer.classList.add(ANIMATE_CLASS); // Trigger CSS animations\n\n // Clean up animation class slightly after duration to ensure removal\n setTimeout(() => {\n effectContainer.classList.remove(ANIMATE_CLASS);\n }, EFFECT_DURATION_MS + 100);\n }\n }, TRANSITION_SPEED_MS * 0.3); // Start effect partway through the card slide\n }\n });\n\n // --- Reset Transition Flag ---\n // After the transition duration, allow user interactions again.\n if (useTransition) {\n setTimeout(() => {\n isTransitioning = false;\n console.log(\"Client Script: Transition complete.\");\n }, TRANSITION_SPEED_MS);\n } else {\n isTransitioning = false; // Reset immediately if no transition was used\n }\n }\n\n /**\n * Creates and animates spark particle effects within the given effect container.\n * @param {HTMLElement} effectContainer - The container element for the effects.\n */\n function createSparks(effectContainer) {\n if (!effectContainer) return;\n const cardElement = effectContainer.parentElement; // Get the parent card\n if (!cardElement) return;\n\n const cardRect = cardElement.getBoundingClientRect();\n const cardCenterX = cardElement.offsetWidth / 2;\n const cardCenterY = cardElement.offsetHeight / 2;\n\n // Create multiple spark elements\n for (let i = 0; i < NUM_SPARKS; i++) {\n const spark = document.createElement('div');\n spark.classList.add(SPARK_CLASS);\n\n // Start sparks near the center of the card with slight random offset\n const startOffsetX = (Math.random() - 0.5) * (cardElement.offsetWidth * 0.2);\n const startOffsetY = (Math.random() - 0.5) * (cardElement.offsetHeight * 0.2);\n spark.style.left = \\`\\${cardCenterX + startOffsetX}px\\`;\n spark.style.top = \\`\\${cardCenterY + startOffsetY}px\\`;\n\n // Calculate a random destination for the spark's animation (outward from center)\n const angle = Math.random() * Math.PI * 2; // Random direction (0 to 360 degrees)\n const radius = Math.random() * (Math.min(cardRect.width, cardRect.height) * 0.35) + 40; // Random distance\n const sparkEndX = Math.cos(angle) * radius;\n const sparkEndY = Math.sin(angle) * radius;\n\n // Set CSS variables used by the spark-fly animation\n spark.style.setProperty('--spark-x', \\`\\${sparkEndX}px\\`);\n spark.style.setProperty('--spark-y', \\`\\${sparkEndY}px\\`);\n // Add a slight random delay to stagger the sparks\n spark.style.animationDelay = \\`\\${Math.random() * (EFFECT_DURATION_MS * 0.15)}ms\\`;\n\n effectContainer.appendChild(spark);\n\n // --- Spark Cleanup ---\n // Remove the spark element from the DOM after its animation completes to prevent buildup.\n spark.addEventListener('animationend', () => {\n spark.remove();\n }, { once: true }); // Use 'once' for automatic listener removal\n }\n }\n\n /**\n * Moves the carousel to the next or previous card.\n * @param {'next' | 'prev'} direction - The direction to move the carousel.\n */\n function moveCarousel(direction) {\n // Prevent moving if already transitioning or if there's only one card\n if (isTransitioning || cardElements.length <= 1) return;\n\n console.log(\\`Client Script: moveCarousel called. Direction: \\${direction}\\`);\n const numCards = cardElements.length;\n // Calculate the new index, wrapping around using the modulo operator\n currentIndex = (currentIndex + (direction === 'next' ? 1 : -1) + numCards) % numCards;\n\n updateCardPositions(true); // Update card positions with animation\n }\n\n // --- Event Handlers ---\n\n function handleDragStart(e) {\n if (isTransitioning) return; // Ignore drags during transitions\n // Prevent dragging text/images on the page\n if (e.target.tagName === 'IMG' || e.target.tagName === 'H3' || e.target.tagName === 'P') {\n e.preventDefault();\n }\n\n isDragging = true;\n // Get initial X position from mouse or touch event\n startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n currentX = startX; // Initialize currentX\n carouselContainer.classList.add(DRAGGING_CLASS); // Add visual cue for dragging\n // Disable text selection globally during drag for smoother experience\n document.body.style.userSelect = 'none';\n console.log(\"Client Script: Drag Start\");\n }\n\n function handleDragMove(e) {\n if (!isDragging) return;\n\n // Get current X position\n currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n\n // --- Prevent Vertical Scroll Snapping (Touch Devices) ---\n // If dragging horizontally on touch, prevent the default vertical scroll behavior.\n if (e.type.includes('touch')) {\n const diffX = startX - currentX;\n // Only prevent default if horizontal movement is significant enough\n if (Math.abs(diffX) > 10) {\n e.preventDefault();\n }\n }\n\n // Optional: Could add visual feedback here, like slightly moving the track based on drag distance\n // const dragOffset = currentX - startX;\n // carouselTrack.style.transform = \\`translateX(\\${dragOffset}px)\\`; // Needs more complex integration with existing transforms\n }\n\n function handleDragEnd(e) {\n if (!isDragging) return; // Make sure drag actually started\n\n isDragging = false;\n carouselContainer.classList.remove(DRAGGING_CLASS); // Remove dragging visual cue\n // Re-enable text selection\n document.body.style.userSelect = '';\n\n const diffX = startX - currentX; // Calculate total distance dragged\n // Positive diffX means drag left (user wants to see next card)\n // Negative diffX means drag right (user wants to see previous card)\n\n console.log(\\`Client Script: Drag End. Difference: \\${diffX}\\`);\n\n // --- Trigger Carousel Move ---\n // If the drag distance exceeds the threshold, move the carousel.\n if (Math.abs(diffX) > DRAG_THRESHOLD) {\n moveCarousel(diffX > 0 ? 'next' : 'prev');\n } else {\n // Optional: Snap back animation if drag wasn't enough (currently handled by updateCardPositions resetting transforms)\n console.log(\"Client Script: Drag distance below threshold, no move triggered.\");\n }\n\n // Reset drag coordinates\n startX = 0;\n currentX = 0;\n }\n\n /**\n * Attaches all necessary event listeners for user interaction.\n */\n function addEventListeners() {\n console.log(\"Client Script: Adding event listeners...\");\n // --- Keyboard Navigation ---\n window.addEventListener('keydown', (e) => {\n // Ignore key presses if modifier keys are held or if focus is in an input field\n if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') return;\n\n if (e.key === 'ArrowRight') {\n e.preventDefault(); // Prevent potential page scroll\n moveCarousel('next');\n } else if (e.key === 'ArrowLeft') {\n e.preventDefault(); // Prevent potential page scroll\n moveCarousel('prev');\n }\n });\n\n // --- Mouse Drag Events ---\n // Start dragging when mouse button is pressed down on the container\n carouselContainer.addEventListener('mousedown', handleDragStart);\n\n // --- Touch Drag Events ---\n // Start dragging when touch begins on the container\n // 'passive: true' indicates we won't call preventDefault in this specific listener\n carouselContainer.addEventListener('touchstart', handleDragStart, { passive: true });\n\n // --- Global Move/End Listeners ---\n // Listen on the window to capture mouse/touch movements and releases\n // even if the cursor leaves the carousel container during the drag.\n window.addEventListener('mousemove', handleDragMove); // Passive is generally okay here\n // 'passive: false' is necessary for touchmove because we call preventDefault inside handleDragMove\n window.addEventListener('touchmove', handleDragMove, { passive: false });\n\n window.addEventListener('mouseup', handleDragEnd);\n window.addEventListener('touchend', handleDragEnd);\n // Also handle 'touchcancel' for cases where the touch interaction is interrupted\n window.addEventListener('touchcancel', handleDragEnd);\n\n console.log(\"Client Script: Event listeners added.\");\n }\n\n // --- Initialization ---\n // Sequence: Create cards -> Add interaction listeners -> Set initial card positions.\n console.log(\"Client Script: Initializing carousel...\");\n createCards(); // Build the HTML for the cards first\n if (cardElements.length > 0) { // Only add listeners and position if cards were created\n addEventListeners(); // Then set up the interaction listeners\n updateCardPositions(false); // Finally, set the initial positions without animation\n console.log(\"Client Script: Initialization complete. Carousel ready.\");\n } else {\n console.warn(\"Client Script: Initialization skipped parts due to lack of card data.\");\n }\n\n})(); // End of IIFE\n`;\n\n // 4. Construct and Return Full HTML Response:\n // Embed the CSS and the client-side JavaScript into the HTML document.\n return new Response(\n `\n \n \n \n \n Character Creator - Select Race\n \n \n \n \n \n \n

Loading races...

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