Character Creator - Select Race

Error: Could not initialize UI. Required elements (carousel-container or carousel-track) are missing.

\\`;\n return; // Stop script execution\n }\n console.log(\"Client Script: Required elements found.\");\n\n // --- State ---\n let currentIndex = 0;\n let isTransitioning = false;\n let isDragging = false;\n let startX = 0;\n let currentX = 0;\n let cardElements = []; // Array to hold the created card DOM elements\n\n // --- Functions ---\n\n function createCards() {\n console.log(\"Client Script: createCards() called. Using raceData:\", raceData);\n // Clear existing content and reset card elements array\n carouselTrack.innerHTML = '';\n cardElements = [];\n\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 available.

';\n return;\n }\n\n raceData.forEach((race, index) => {\n const card = document.createElement('div');\n card.classList.add(CARD_CLASS);\n // Validate and set effect color, use fallback if invalid\n const effectColor = (typeof race.effectColor === 'string' && /^#[0-9A-F]{6}$/i.test(race.effectColor))\n ? race.effectColor\n : '#CCCCCC'; // Default grey\n card.style.setProperty('--effect-color', effectColor);\n card.dataset.index = index; // Store index if needed\n\n // Sanitize inputs for safety, provide defaults\n const safeName = race.name || 'Unknown Race';\n const safeDescription = race.description || 'No description available.';\n const safeStyleHint = race.styleHint || safeName; // Fallback style hint to name\n\n // Generate image URL using the Val Town image generator endpoint\n const prompt = encodeURIComponent(\\`fantasy character portrait \\${safeStyleHint}, \\${safeName}, high detail\\`);\n const imageUrl = \\`https://maxm-imggenurl.web.val.run/\\${prompt}\\`;\n // Fallback placeholder image URL\n const fallbackUrl = \\`https://placehold.co/380x320/\\${effectColor.substring(1)}/ffffff?text=\\${encodeURIComponent(safeName)}\\`;\n\n // Use template literal for card's inner HTML\n card.innerHTML = \\`\n $\"\\${safeName}\"\n$ \n

\\${safeName}

\\${safeDescription}

\n \\`;\n\n carouselTrack.appendChild(card);\n cardElements.push(card); // Add the created card element to our array\n });\n console.log(\\`Client Script: Created \\${cardElements.length} cards.\\`);\n }\n\n function updateCardPositions(useTransition = true) {\n if (!cardElements.length) return;\n\n isTransitioning = useTransition;\n\n cardElements.forEach((card, index) => {\n const effectContainer = card.querySelector('.' + EFFECT_CONTAINER_CLASS);\n\n // Clear previous effect states\n if (effectContainer) {\n effectContainer.classList.remove(ANIMATE_CLASS);\n effectContainer.querySelectorAll('.' + SPARK_CLASS).forEach(s => s.remove());\n }\n\n card.classList.remove(ACTIVE_CLASS, PREV_CLASS, NEXT_CLASS, HIDDEN_PREV_CLASS, HIDDEN_NEXT_CLASS);\n card.style.opacity = '';\n card.style.pointerEvents = '';\n\n // Calculate relative position index with wrap-around\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\n let isActive = false;\n // Apply positioning class based on relative index\n switch (relativeIndex) {\n case 0: card.classList.add(ACTIVE_CLASS); isActive = true; break;\n case 1: card.classList.add(NEXT_CLASS); break;\n case -1: card.classList.add(PREV_CLASS); break;\n default: // Cards further away\n if (relativeIndex > 1) card.classList.add(HIDDEN_NEXT_CLASS);\n else if (relativeIndex < -1) card.classList.add(HIDDEN_PREV_CLASS);\n break;\n }\n\n // Manage CSS transitions (disable during instant updates)\n card.style.transition = useTransition ? '' : 'none';\n\n // Trigger effects on the newly active card\n if (isActive && useTransition && effectContainer) {\n setTimeout(() => {\n createSparks(effectContainer);\n effectContainer.classList.add(ANIMATE_CLASS);\n // Clean up animation class after duration\n setTimeout(() => effectContainer.classList.remove(ANIMATE_CLASS), EFFECT_DURATION_MS + 100);\n }, TRANSITION_SPEED_MS * 0.3); // Start effect partway through transition\n }\n });\n\n // Reset transition flag after animation completes\n if (useTransition) {\n setTimeout(() => { isTransitioning = false; }, TRANSITION_SPEED_MS);\n } else {\n isTransitioning = false; // Reset immediately if no transition\n }\n }\n\n function createSparks(effectContainer) {\n if (!effectContainer) return;\n const cardElement = effectContainer.parentElement;\n if (!cardElement) return;\n\n const cardRect = cardElement.getBoundingClientRect();\n const cardCenterX = cardElement.offsetWidth / 2;\n const cardCenterY = cardElement.offsetHeight / 2;\n\n for (let i = 0; i < NUM_SPARKS; i++) {\n const spark = document.createElement('div');\n spark.classList.add(SPARK_CLASS);\n\n // Initial position near the center\n const startOffsetX = (Math.random() - 0.5) * (cardElement.offsetWidth * 0.3);\n const startOffsetY = (Math.random() - 0.5) * (cardElement.offsetHeight * 0.3);\n spark.style.left = \\`\\${cardCenterX + startOffsetX}px\\`;\n spark.style.top = \\`\\${cardCenterY + startOffsetY}px\\`;\n\n // Calculate random end position for animation\n const angle = Math.random() * Math.PI * 2;\n const radius = Math.random() * (Math.min(cardRect.width, cardRect.height) * 0.3) + 30;\n const sparkX = Math.cos(angle) * radius;\n const sparkY = Math.sin(angle) * radius;\n\n spark.style.setProperty('--spark-x', \\`\\${sparkX}px\\`);\n spark.style.setProperty('--spark-y', \\`\\${sparkY}px\\`);\n spark.style.animationDelay = \\`\\${Math.random() * (EFFECT_DURATION_MS * 0.1)}ms\\`;\n\n effectContainer.appendChild(spark);\n // Remove spark after its animation finishes\n spark.addEventListener('animationend', () => spark.remove(), { once: true });\n }\n }\n\n function moveCarousel(direction) {\n if (isTransitioning || cardElements.length <= 1) return;\n currentIndex = (currentIndex + (direction === 'next' ? 1 : -1) + cardElements.length) % cardElements.length;\n updateCardPositions(true); // Update with transition\n }\n\n // --- Event Handlers ---\n function handleDragStart(e) {\n if (isTransitioning) return;\n isDragging = true;\n startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n currentX = startX;\n carouselContainer.classList.add(DRAGGING_CLASS);\n // Prevent text selection during drag\n document.body.style.userSelect = 'none';\n }\n\n function handleDragMove(e) {\n if (!isDragging) return;\n // Prevent default scroll on touch devices while dragging horizontally\n if (e.type.includes('touch')) {\n // Basic check for horizontal drag - more complex logic might be needed\n const touch = e.touches[0];\n const diffX = startX - touch.clientX;\n if (Math.abs(diffX) > 10) { // Only prevent scroll if horizontal movement detected\n e.preventDefault();\n }\n }\n currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;\n // Add visual feedback during drag? (e.g., slightly move the track - optional)\n }\n\n function handleDragEnd(e) {\n if (!isDragging) return;\n isDragging = false;\n carouselContainer.classList.remove(DRAGGING_CLASS);\n document.body.style.userSelect = ''; // Re-enable text selection\n\n const diffX = startX - currentX; // Positive diff = dragged left (move to next)\n\n if (Math.abs(diffX) > DRAG_THRESHOLD) {\n moveCarousel(diffX > 0 ? 'next' : 'prev');\n }\n // Reset positions (snap back) is handled implicitly by moveCarousel/updateCardPositions\n\n startX = 0;\n currentX = 0;\n }\n\n function addEventListeners() {\n // Keyboard navigation\n window.addEventListener('keydown', (e) => {\n if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;\n if (e.key === 'ArrowRight') moveCarousel('next');\n if (e.key === 'ArrowLeft') moveCarousel('prev');\n });\n\n // Mouse drag events\n carouselContainer.addEventListener('mousedown', handleDragStart);\n // Touch drag events (use passive: false for move ONLY if preventDefault is needed)\n carouselContainer.addEventListener('touchstart', handleDragStart, { passive: true });\n\n // Listen on window to capture moves/ends outside the container\n window.addEventListener('mousemove', handleDragMove); // Passive: true is generally okay here\n window.addEventListener('touchmove', handleDragMove, { passive: false }); // passive: false needed for preventDefault\n\n window.addEventListener('mouseup', handleDragEnd);\n window.addEventListener('touchend', handleDragEnd);\n window.addEventListener('touchcancel', handleDragEnd); // Handle cancelled touches\n }\n\n // --- Initialize ---\n console.log(\"Client Script: Initializing carousel...\");\n createCards(); // Create cards using the injected data\n addEventListeners(); // Set up keyboard and drag listeners\n updateCardPositions(false); // Set initial positions without animation\n console.log(\"Client Script: Initialization complete.\");\n\n})();\n`;\n\n // 4. Return the Full HTML Response\n return new Response(\n `\n \n \n \n \n Character Creator - Select Race\n \n \n \n \n \n \n

\n\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\n// Ensure the CSS variable definitions are within the CSS string passed to the Response.\n// (The example above includes the start of the CSS, assuming the full CSS string is correctly placed there)","deleted","label",[98],"permalink","https://www.val.town/x/salon/faithfulTanEel/code/main.tsx","extension","actionData","errors"]