Character Creator - Select Race (Tilt & Fan)

Could not load character races.

';\n return;\n }\n console.log(\\`Client Script: Creating \\${raceData.length} cards.\\`);\n raceData.forEach((race, index) => {\n const card = document.createElement('div');\n card.classList.add(CARD_CLASS);\n card.dataset.index = index;\n\n // Validate and Sanitize Data per Card\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 available.';\n const safeStyleHint = typeof race.styleHint === 'string' && race.styleHint.trim() ? race.styleHint.trim() : safeName.toLowerCase();\n const safeEffectColor = typeof race.effectColor === 'string' && /^#[0-9A-F]{6}$/i.test(race.effectColor) ? race.effectColor : '#CCCCCC';\n // borderAnimationHint is already defaulted server-side if needed\n\n card.style.setProperty('--effect-color', safeEffectColor); // Set custom property per card\n\n const prompt = encodeURIComponent(\\`disney fantasy character portrait, \\${safeStyleHint}, \\${safeName}, detailed illustration, cinematic lighting, high fantasy art style\\`);\n const imageUrl = \\`http://maxm-imggenurl.web.val.run//\\${prompt}.jpg\\`; // Using Pollinations.ai as example\n const fallbackColor = safeEffectColor.substring(1);\n const fallbackUrl = \\`https://placehold.co/400x400/\\${fallbackColor}/1A1A1E?text=\\${encodeURIComponent(safeName)}\\`;\n\n card.innerHTML = \\`\n $\"Image$ \n

\\${safeName}

\\${safeDescription}

\n \\`;\n carouselTrack.appendChild(card);\n cardElements.push(card);\n });\n console.log(\\`Client Script: Successfully created \\${cardElements.length} cards.\\`);\n }\n\n\n /** Update Card Positions & Active Effects **/\n function updateCardPositions(useTransition = true) {\n const numCards = cardElements.length; if (numCards === 0) return;\n console.log(\\`Client Script: updateCardPositions. currentIndex: \\${currentIndex}, numCards: \\${numCards}, useTransition: \\${useTransition}\\`);\n isTransitioning = useTransition;\n\n // --- Get Active Card's Animation Hint ---\n const activeRaceInfo = raceData[currentIndex] || {};\n const activeBorderHint = activeRaceInfo.borderAnimationHint || 'none';\n\n cardElements.forEach((card, index) => {\n const effectContainer = card.querySelector('.' + EFFECT_CONTAINER_CLASS);\n // Reset effects immediately\n if (effectContainer) effectContainer.classList.remove(ANIMATE_CLASS);\n card.classList.remove(\n ACTIVE_CLASS, PREV_CLASS, NEXT_CLASS, HIDDEN_PREV_CLASS, HIDDEN_NEXT_CLASS,\n BORDER_ANIM_PULSE_CLASS, BORDER_ANIM_SHIMMER_CLASS // <<< Remove ALL border anim classes\n );\n\n // Calculate relative index for positioning (handles wrapping)\n let relativeIndex = index - currentIndex;\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 switch (relativeIndex) {\n case 0:\n card.classList.add(ACTIVE_CLASS);\n isActive = true;\n // <<< Apply specific border animation class based on hint >>>\n if (activeBorderHint === 'pulse') {\n card.classList.add(BORDER_ANIM_PULSE_CLASS);\n } else if (activeBorderHint === 'shimmer') {\n card.classList.add(BORDER_ANIM_SHIMMER_CLASS);\n } // Add more 'else if' for other hints\n break;\n case 1: card.classList.add(NEXT_CLASS); break;\n case -1: card.classList.add(PREV_CLASS); break;\n default:\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 // Trigger effect animation only on the *newly* active card after transition starts\n if (isActive && useTransition && effectContainer) {\n // Delay effect slightly to sync better with card landing\n setTimeout(() => {\n createSparks(effectContainer); // Create fresh sparks\n effectContainer.classList.add(ANIMATE_CLASS);\n }, TRANSITION_SPEED_MS * 0.2); // Start effect slightly after transition begins\n }\n });\n\n if (useTransition) {\n setTimeout(() => {\n isTransitioning = false;\n console.log(\"Client Script: Slide Transition complete.\");\n }, TRANSITION_SPEED_MS);\n } else {\n isTransitioning = false;\n }\n }\n\n /** Create Sparks **/\n function createSparks(effectContainer) {\n if (!effectContainer) return;\n // Clear old sparks first\n effectContainer.querySelectorAll('.' + SPARK_CLASS).forEach(spark => spark.remove());\n\n const baseColor = effectContainer.closest('.' + CARD_CLASS)?.style.getPropertyValue('--effect-color') || '#FFFFFF';\n\n for (let i = 0; i < NUM_SPARKS; i++) {\n const spark = document.createElement('div');\n spark.classList.add(SPARK_CLASS);\n spark.style.setProperty('--effect-color', baseColor); // Ensure spark uses card's color\n spark.style.setProperty('--spark-index', i); // For potential animation staggering\n\n // Random outward direction\n const angle = Math.random() * Math.PI * 2;\n const radius = 50 + Math.random() * 50; // Fly outwards 50-100 logical pixels\n const x = Math.cos(angle) * radius;\n const y = Math.sin(angle) * radius;\n\n // Set CSS variables for the animation\n spark.style.setProperty('--spark-x', \\`\\${x}px\\`);\n spark.style.setProperty('--spark-y', \\`\\${y}px\\`);\n\n // Position sparks more centrally initially\n spark.style.left = \\`calc(50% + \\${Math.random() * 20 - 10}px)\\`;\n spark.style.top = \\`calc(50% + \\${Math.random() * 20 - 10}px)\\`;\n\n // Stagger animation start slightly using the main effect duration\n // spark.style.animationDelay = \\`\\${Math.random() * (EFFECT_DURATION_MS * 0.3 / 1000)}s\\`;\n // Using CSS staggering based on --spark-index now\n\n effectContainer.appendChild(spark);\n }\n }\n\n /** Move Carousel **/\n function moveCarousel(direction) {\n const numCards = cardElements.length; if (isTransitioning || numCards <= 1) return;\n console.log(\\`Client Script: moveCarousel. Direction: \\${direction}\\`);\n currentIndex = (currentIndex + (direction === 'next' ? 1 : -1) + numCards) % numCards;\n updateCardPositions(true);\n }\n\n // --- Event Handlers ---\n\n /** Drag Handlers (Unchanged logic) **/\n function handleDragStart(e) { /* ... */ if (isTransitioning) return; isDragging = true; startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX; currentX = startX; carouselContainer.classList.add(DRAGGING_CLASS); docElement.style.userSelect = 'none'; docElement.style.cursor = 'grabbing'; if (e.type === 'mousedown' && e.target.tagName === 'IMG') { e.preventDefault(); } console.log(\"Client Script: Drag Start\"); }\n function handleDragMove(e) { /* ... */ if (!isDragging) return; currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX; /* Prevent scroll on touch */ if (e.type === 'touchmove' && isDragging) { e.preventDefault(); } }\n function handleDragEnd(e) { /* ... */ if (!isDragging) return; isDragging = false; carouselContainer.classList.remove(DRAGGING_CLASS); docElement.style.userSelect = ''; docElement.style.cursor = ''; const diffX = startX - currentX; console.log(\\`Client Script: Drag End. Difference: \\${diffX}\\`); if (Math.abs(diffX) > DRAG_THRESHOLD && !isTransitioning) { moveCarousel(diffX > 0 ? 'next' : 'prev'); } else { console.log(\"Client Script: Drag below threshold or still sliding.\"); } startX = 0; currentX = 0; }\n\n // --- MODIFIED: PLANE TILT + CARD FANNING HANDLER ---\n function handlePageMouseMove(e) {\n const viewportCenterX = window.innerWidth / 2;\n const viewportCenterY = window.innerHeight / 2;\n const mouseX = e.clientX;\n const mouseY = e.clientY;\n\n // --- Plane Tilt Calculation ---\n const tiltOffsetX = viewportCenterX === 0 ? 0 : (mouseX - viewportCenterX) / viewportCenterX; // -1 to 1\n const tiltOffsetY = viewportCenterY === 0 ? 0 : (mouseY - viewportCenterY) / viewportCenterY; // -1 to 1\n const tiltY = -tiltOffsetX * MAX_TILT; // Tilt left/right based on horizontal mouse pos\n const tiltX = tiltOffsetY * MAX_TILT; // Tilt up/down based on vertical mouse pos\n docElement.style.setProperty('--track-rotate-x', \\`\\${tiltX.toFixed(2)}deg\\`);\n docElement.style.setProperty('--track-rotate-y', \\`\\${tiltY.toFixed(2)}deg\\`);\n\n // --- Card Fanning Calculation ---\n // Use the horizontal offset (tiltOffsetX), apply sensitivity and deadzone\n let fanFactor = 0;\n if (Math.abs(tiltOffsetX) > FAN_DEADZONE) {\n fanFactor = Math.max(-1, Math.min(1, (tiltOffsetX - Math.sign(tiltOffsetX) * FAN_DEADZONE) * FAN_SENSITIVITY));\n }\n\n if (fanFactor < 0) { // Mouse on the left\n const intensity = Math.abs(fanFactor); // 0 to 1\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, \\`calc(var(${MAX_FAN_TRANSLATE_VAR}) * \\${intensity} * -1)\\`); // Negative translate\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, \\`calc(var(${MAX_FAN_ROTATE_VAR}) * \\${intensity} * -1)\\`); // Negative rotate (adjust if needed)\n // Reset next fanning\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, '0px');\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, '0deg');\n } else if (fanFactor > 0) { // Mouse on the right\n const intensity = fanFactor; // 0 to 1\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, \\`calc(var(${MAX_FAN_TRANSLATE_VAR}) * \\${intensity})\\`); // Positive translate\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, \\`calc(var(${MAX_FAN_ROTATE_VAR}) * \\${intensity} * -1)\\`); // Negative rotate\n // Reset prev fanning\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, '0px');\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, '0deg');\n } else { // Mouse near center\n // Reset both sides\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, '0px');\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, '0deg');\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, '0px');\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, '0deg');\n }\n }\n\n /** Reset Tilt and Fanning on Mouse Leave **/\n function handlePageMouseLeave() {\n console.log(\"Client Script: Mouse left window, resetting plane tilt and fanning.\");\n // Reset tilt variables\n docElement.style.setProperty('--track-rotate-x', '0deg');\n docElement.style.setProperty('--track-rotate-y', '0deg');\n // Reset fanning variables\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, '0px');\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, '0deg');\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, '0px');\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, '0deg');\n }\n\n\n /** Attach Event Listeners **/\n function addEventListeners() {\n console.log(\"Client Script: Adding event listeners...\");\n // Keyboard\n window.addEventListener('keydown', (e) => { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || document.activeElement?.matches('input, textarea, [contenteditable=true]')) return; if (e.key === 'ArrowRight') { e.preventDefault(); moveCarousel('next'); } else if (e.key === 'ArrowLeft') { e.preventDefault(); moveCarousel('prev'); } });\n\n // Drag Listeners on CONTAINER\n carouselContainer.addEventListener('mousedown', handleDragStart);\n carouselContainer.addEventListener('touchstart', handleDragStart, { passive: true }); // Keep passive for start\n\n // Global Move/End Listeners on WINDOW\n window.addEventListener('mousemove', handleDragMove);\n window.addEventListener('touchmove', handleDragMove, { passive: false }); // Needs false to preventDefault reliably\n window.addEventListener('mouseup', handleDragEnd);\n window.addEventListener('touchend', handleDragEnd);\n window.addEventListener('touchcancel', handleDragEnd); // Handle cancels too\n\n // Global Listeners for PLANE TILT and FANNING\n window.addEventListener('mousemove', handlePageMouseMove);\n document.body.addEventListener('mouseleave', handlePageMouseLeave); // Use body mouseleave for better detection\n window.addEventListener('blur', handlePageMouseLeave); // Reset if window loses focus\n\n console.log(\"Client Script: Event listeners added.\");\n }\n\n // --- Initialization ---\n function initializeCarousel() {\n console.log(\"Client Script: Initializing carousel...\");\n createCards();\n if (cardElements.length > 0) {\n // Set initial positions without slide animation or effects\n updateCardPositions(false);\n // Add event listeners only if cards were created\n addEventListeners();\n console.log(\"Client Script: Initialization complete. Carousel ready.\");\n } else {\n console.warn(\"Client Script: Initialization failed or incomplete due to lack of card data.\");\n }\n }\n\n // Wait for DOM content to be loaded before initializing\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeCarousel);\n } else {\n // DOMContentLoaded has already fired\n initializeCarousel();\n }\n\n})(); // End of IIFE\n`;\n\n // Construct and Return Full HTML Response\n return new Response(\n `\n \n \n \n \n Character Creator - Select Race (Tilt & Fan)\n \n \n \n \n \n \n

Loading races...

\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/salon/guide/code/main.tsx","extension","actionData","errors"]