Character Creator - Select Race (Holographic Cards)

No character data loaded.

';\n return; // Stop if no data\n }\n console.log(\\`Client Script: Creating \\${raceData.length} cards.\\`);\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 reference\n\n // --- Sanitize Data ---\n const safeName = typeof race.name === 'string' && race.name.trim() ? race.name.trim() : 'Unknown Character';\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();\n const safeEffectColor = typeof race.effectColor === 'string' && /^#[0-9A-F]{6}$/i.test(race.effectColor) ? race.effectColor : '#CCCCCC';\n // <<< Use race-specific mask or the default >>>\n const useMaskSrc = (typeof race.maskSrc === 'string' && race.maskSrc.startsWith(\"http\") && /\\.(png|jpg|jpeg|gif|webp)$/i.test(race.maskSrc))\n ? race.maskSrc\n : defaultMaskSrc;\n\n // --- Set Card Specific Style ---\n card.style.setProperty('--effect-color', safeEffectColor);\n\n // --- Image Generation URL ---\n // Using maxm-imggenurl service example - adapt if needed\n const prompt = encodeURIComponent(\\`professional character portrait, centered composition, detailed illustration, \\${safeStyleHint}, \\${safeName}, cinematic lighting, high fantasy art style\\`);\n const imageUrl = \\`https://maxm-imggenurl.web.val.run/\\${prompt}.jpg\\`;\n const fallbackColor = safeEffectColor.substring(1); // Use effect color for placeholder\n const fallbackUrl = \\`https://placehold.co/350x300/\\${fallbackColor}/1A1A1E?text=\\${encodeURIComponent(safeName)}\\`; // Placeholder uses image area dimensions\n\n // --- Holographic Gradient ---\n // <<< Create a dynamic radial gradient for the specular layer >>>\n const specularGradient = \\`radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, \\${safeEffectColor} 50%, rgba(from \\${safeEffectColor} r g b / 0.4) 75%, transparent 90%)\\`;\n\n // --- Card Inner HTML Structure ---\n // <<< Structure includes holographic content area with base image, specular layer, and mask layer >>>\n card.innerHTML = \\`\n

\n $\"Image$ \n\n

\n \\${useMaskSrc ? \\`

$\"\"$

\\` : ''}\n

\n\n

\\${safeName}

\\${safeDescription}

\n \\`;\n\n carouselTrack.appendChild(card);\n cardElements.push(card);\n });\n console.log(\\`Client Script: Successfully created \\${cardElements.length} cards.\\`);\n }\n\n /** Update Card CSS Classes for Positioning and Active State **/\n function updateCardPositions(useTransition = true) {\n const numCards = cardElements.length;\n if (numCards === 0) return; // Exit if no cards\n\n isTransitioning = useTransition; // Flag transition state\n\n // Get info for the *newly* active card\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 if (effectContainer) effectContainer.classList.remove(ANIMATE_CLASS); // Remove old animation class\n\n // Clear all state classes first\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 // Clear border animation classes\n );\n\n // Calculate relative position to the current index, wrapping around\n let relativeIndex = index - currentIndex;\n if (numCards > 1) {\n const half = Math.floor(numCards / 2);\n if (Math.abs(relativeIndex) > half) {\n // Wrap around logic\n relativeIndex = relativeIndex > 0 ? relativeIndex - numCards : relativeIndex + numCards;\n }\n }\n\n // Apply new state class based on relative index\n let isActive = false;\n switch (relativeIndex) {\n case 0:\n card.classList.add(ACTIVE_CLASS);\n isActive = true;\n // Apply border animation class if specified\n if (activeBorderHint === 'pulse') card.classList.add(BORDER_ANIM_PULSE_CLASS);\n else if (activeBorderHint === 'shimmer') card.classList.add(BORDER_ANIM_SHIMMER_CLASS);\n break;\n case 1: card.classList.add(NEXT_CLASS); break;\n case -1: card.classList.add(PREV_CLASS); break;\n default:\n // Further away cards are hidden\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 spark effect on the newly active card after a short delay\n if (isActive && useTransition && effectContainer) {\n setTimeout(() => {\n createSparks(effectContainer); // Recreate sparks\n effectContainer.classList.add(ANIMATE_CLASS); // Add animation class\n }, TRANSITION_SPEED_MS * 0.2); // Delay slightly\n }\n\n // <<< Reset individual card holographic state during slide transition >>>\n if (useTransition) {\n resetCardHoloState(card);\n }\n });\n\n // Reset transition flag after the slide animation duration\n if (useTransition) {\n setTimeout(() => {\n isTransitioning = false;\n }, TRANSITION_SPEED_MS);\n } else {\n isTransitioning = false; // Reset immediately if no transition\n }\n }\n\n /** Create Spark Elements for Active Card Effect **/\n function createSparks(effectContainer) {\n if (!effectContainer) return;\n effectContainer.innerHTML = '

'; // Clear old sparks, keep surge base\n\n for (let i = 0; i < NUM_SPARKS; i++) {\n const spark = document.createElement('div');\n spark.classList.add(SPARK_CLASS);\n\n // Random position and direction for sparks\n const angle = Math.random() * 2 * Math.PI;\n const radius = Math.random() * Math.min(effectContainer.offsetWidth, effectContainer.offsetHeight) * 0.7; // Fly further out\n spark.style.setProperty('--spark-x', \\`\\${Math.cos(angle) * radius}px\\`);\n spark.style.setProperty('--spark-y', \\`\\${Math.sin(angle) * radius}px\\`);\n spark.style.setProperty('--spark-index', i); // For staggered animation delay\n\n // Start sparks from the center\n spark.style.top = '50%';\n spark.style.left = '50%';\n effectContainer.appendChild(spark);\n }\n }\n\n /** Move Carousel to Next or Previous Card **/\n function moveCarousel(direction) {\n if (isTransitioning || cardElements.length <= 1) return; // Prevent multiple moves during transition\n\n const numCards = cardElements.length;\n // Calculate new index, wrapping around\n currentIndex = (direction === 'next')\n ? (currentIndex + 1) % numCards\n : (currentIndex - 1 + numCards) % numCards;\n\n updateCardPositions(); // Update classes and trigger effects/transitions\n }\n\n\n // --- Drag Handling ---\n function handleDragStart(e) {\n // Ignore drag if transitioning, or if the target is interactive text\n if (isTransitioning || e.target.closest('p, h3')) return;\n\n isDragging = true;\n startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;\n currentX = startX;\n carouselContainer.classList.add(DRAGGING_CLASS); // Add dragging class for cursor style\n carouselTrack.classList.remove(SLIDING_CLASS); // Ensure not marked as sliding initially\n\n // Prevent default touch behavior like scrolling\n if (e.type === 'touchstart') {\n // passive: false needed in listener for this\n // e.preventDefault();\n } else {\n e.preventDefault(); // Prevent text selection etc. on desktop\n }\n }\n\n function handleDragMove(e) {\n if (!isDragging) return;\n currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;\n\n // Prevent scrolling while dragging on touch devices\n if (e.type === 'touchmove') {\n // passive: false needed in listener for this\n e.preventDefault();\n }\n // Optional: Add subtle visual feedback during drag (e.g., shift track slightly)\n // const deltaX = currentX - startX;\n // carouselTrack.style.transform = \\`translateX(\\${deltaX * 0.1}px)\\`; // Example feedback\n }\n\n function handleDragEnd(e) {\n if (!isDragging) return;\n isDragging = false;\n carouselContainer.classList.remove(DRAGGING_CLASS);\n // Reset any temporary drag feedback styles here\n\n const deltaX = currentX - startX;\n\n // If drag distance exceeds threshold, trigger slide\n if (Math.abs(deltaX) > DRAG_THRESHOLD) {\n carouselTrack.classList.add(SLIDING_CLASS); // Add class for slide transition styling\n moveCarousel(deltaX < 0 ? 'next' : 'prev'); // Move in the dragged direction\n\n // Remove sliding class slightly after transition should end\n setTimeout(() => carouselTrack.classList.remove(SLIDING_CLASS), TRANSITION_SPEED_MS * 1.1);\n }\n }\n\n // --- Global Mouse Listener for Track Tilt and Card Fanning ---\n function handlePageMouseMove(e) {\n // Don't tilt/fan during drag or slide transitions\n if (isDragging || isTransitioning) return;\n\n const rect = carouselContainer.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n const centerX = rect.width / 2;\n const centerY = rect.height / 2;\n\n // --- Plane Tilt Calculation ---\n // Tilt more based on horizontal mouse position, less on vertical\n const tiltY = ((mouseX - centerX) / centerX) * MAX_PLANE_TILT;\n const tiltX = -((mouseY - centerY) / centerY) * (MAX_PLANE_TILT * 0.6); // Less vertical tilt\n docElement.style.setProperty(TRACK_ROTATE_X_VAR, \\`\\${tiltX.toFixed(2)}deg\\`);\n docElement.style.setProperty(TRACK_ROTATE_Y_VAR, \\`\\${tiltY.toFixed(2)}deg\\`);\n\n // --- Card Fanning Calculation ---\n const normX = (mouseX / rect.width) * 2 - 1; // Normalized X (-1 to 1)\n // Apply deadzone in the center\n const deadzoneX = Math.max(0, Math.abs(normX) - FAN_DEADZONE) * Math.sign(normX);\n const fanAmount = deadzoneX * FAN_SENSITIVITY;\n\n // Read max values from CSS vars (could change with media queries)\n const maxTranslate = parseFloat(rootStyle.getPropertyValue(MAX_FAN_TRANSLATE_VAR) || '18'); // %\n const maxRotate = parseFloat(rootStyle.getPropertyValue(MAX_FAN_ROTATE_VAR) || '25'); // deg\n\n // Clamp values to max limits\n const fanTranslate = Math.max(-maxTranslate, Math.min(maxTranslate, fanAmount * maxTranslate));\n const fanRotate = Math.max(-maxRotate, Math.min(maxRotate, fanAmount * maxRotate));\n\n // Apply fanning transform offsets via CSS variables\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, \\`\\${fanTranslate}%\\`);\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, \\`\\${fanRotate}deg\\`);\n // Apply opposite fanning to next cards\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, \\`\\${-fanTranslate}%\\`);\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, \\`\\${-fanRotate}deg\\`);\n }\n\n // --- Reset Tilt/Fan when Mouse Leaves Container Area ---\n function handlePageMouseLeave() {\n // Reset plane tilt smoothly via CSS transition\n docElement.style.setProperty(TRACK_ROTATE_X_VAR, '0deg');\n docElement.style.setProperty(TRACK_ROTATE_Y_VAR, '0deg');\n // Reset fanning smoothly\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, '0%');\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, '0deg');\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, '0%');\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, '0deg');\n }\n\n\n // <<<====================================================>>>\n // <<< INDIVIDUAL CARD HOLOGRAPHIC EFFECT HANDLERS >>>\n // <<<====================================================>>>\n\n /** Handle mouse movement OVER a specific card */\n function handleCardMouseMove(e) {\n // Don't apply effect during drag/slide or if card isn't the active one (optional, maybe looks cool on side cards too?)\n if (isDragging || isTransitioning /* || !e.currentTarget.classList.contains(ACTIVE_CLASS) */) return;\n\n const card = e.currentTarget;\n const holoContent = card.querySelector('.' + HOLOGRAPHIC_CONTENT_CLASS);\n if (!holoContent) return; // Should always exist, but check anyway\n\n const rect = holoContent.getBoundingClientRect(); // Get bounds of the image area\n\n // Calculate mouse position relative to the holographic content area\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n const centerX = rect.width / 2;\n const centerY = rect.height / 2;\n\n // Avoid division by zero if dimensions are zero\n if (centerX <= 0 || centerY <= 0) return;\n\n // Calculate deviation from center\n const deltaX = x - centerX;\n const deltaY = y - centerY;\n\n // Calculate rotation based on deviation, clamped by MAX_HOLO_TILT\n // More tilt horizontally seems common for holo effects\n const rotateY = (deltaX / centerX) * MAX_HOLO_TILT;\n const rotateX = -(deltaY / centerY) * (MAX_HOLO_TILT * 0.8); // Slightly less vertical tilt\n\n // Calculate normalized mouse position (0 to 1) within the element for background positioning\n const mouseX = Math.max(0, Math.min(1, x / rect.width));\n const mouseY = Math.max(0, Math.min(1, y / rect.height));\n\n // Update the card's specific CSS variables\n // CSS transitions handle the smoothness (.holo-transition-speed-enter)\n card.style.setProperty(HOLO_ROTATE_X_VAR, \\`\\${rotateX.toFixed(2)}deg\\`);\n card.style.setProperty(HOLO_ROTATE_Y_VAR, \\`\\${rotateY.toFixed(2)}deg\\`);\n card.style.setProperty(HOLO_BG_POS_X_VAR, \\`\\${mouseX * 100}%\\`);\n card.style.setProperty(HOLO_BG_POS_Y_VAR, \\`\\${mouseY * 100}%\\`);\n }\n\n /** Handle mouse leaving a specific card */\n function handleCardMouseLeave(e) {\n // Only reset if not currently dragging (mouse might leave while dragging)\n if (isDragging) return;\n resetCardHoloState(e.currentTarget);\n }\n\n /** Reset holographic effect variables for a card */\n function resetCardHoloState(card) {\n if (!card) return;\n // Set variables back to default - CSS transition (.holo-transition-speed-leave) handles the smooth return\n card.style.setProperty(HOLO_ROTATE_X_VAR, '0deg');\n card.style.setProperty(HOLO_ROTATE_Y_VAR, '0deg');\n card.style.setProperty(HOLO_BG_POS_X_VAR, '50%');\n card.style.setProperty(HOLO_BG_POS_Y_VAR, '50%');\n }\n\n\n /** Attach All Event Listeners **/\n function addEventListeners() {\n console.log(\"Client Script: Adding event listeners...\");\n\n // --- Keyboard Navigation ---\n window.addEventListener('keydown', (e) => {\n // Ignore if modifier keys are pressed or if focus is in an input field\n if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || document.activeElement?.matches('input, textarea, [contenteditable=true]')) return;\n\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n e.preventDefault(); // Prevent page scroll\n moveCarousel('next');\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n e.preventDefault(); // Prevent page scroll\n moveCarousel('prev');\n }\n });\n\n // --- Drag Listeners (on container) ---\n carouselContainer.addEventListener('mousedown', handleDragStart);\n // Use passive: false for touchstart/touchmove if preventDefault() is needed inside handlers\n carouselContainer.addEventListener('touchstart', handleDragStart, { passive: true }); // Let browser handle scroll initially if not dragging text\n\n // --- Move/End Listeners (on window to capture mouse leaving container) ---\n window.addEventListener('mousemove', handleDragMove);\n window.addEventListener('touchmove', handleDragMove, { passive: false }); // Need false to prevent scroll *during* drag\n\n window.addEventListener('mouseup', handleDragEnd);\n window.addEventListener('touchend', handleDragEnd);\n window.addEventListener('touchcancel', handleDragEnd); // Handle cancellation (e.g., browser interruption)\n\n // --- Global Page Tilt/Fan Listener ---\n window.addEventListener('mousemove', handlePageMouseMove);\n // Reset tilt/fan when mouse leaves body or window loses focus\n document.body.addEventListener('mouseleave', handlePageMouseLeave);\n window.addEventListener('blur', handlePageMouseLeave);\n\n\n // <<< Attach Holographic listeners to EACH card >>>\n console.log(\\`Client Script: Attaching holo listeners to \\${cardElements.length} cards.\\`);\n cardElements.forEach(card => {\n card.addEventListener('mousemove', handleCardMouseMove);\n card.addEventListener('mouseleave', handleCardMouseLeave);\n // <<< Initialize holo state for each card on load >>>\n resetCardHoloState(card);\n });\n\n console.log(\"Client Script: Event listeners added.\");\n }\n\n /** Initialize the Carousel **/\n function initializeCarousel() {\n console.log(\"Client Script: Initializing carousel...\");\n createCards(); // Generate cards from data\n\n if (cardElements.length > 0) {\n updateCardPositions(false); // Set initial positions without transition\n addEventListeners(); // Attach all interaction listeners\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 // Track already shows message if no cards were created\n }\n }\n\n // --- Run Initialization ---\n // Wait for DOM content to be loaded if script runs early\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeCarousel);\n } else {\n // DOM already loaded\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 (Holographic Cards)\n \n \n \n \n\n\n

Loading character data...