Character Creator - Select Race (Holographic Cards)

No character data loaded.

';\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?.trim() || 'Unknown Race';\n const safeDescription = race.description?.trim() || 'No description available.';\n const safeStyleHint = race.styleHint?.trim() || safeName.toLowerCase();\n const safeEffectColor = /^#[0-9A-F]{6}$/i.test(race.effectColor) ? race.effectColor : '#CCCCCC';\n const useMaskSrc = (typeof race.maskSrc === 'string' && race.maskSrc.startsWith(\"http\") && /\\.(png|jpg|jpeg|gif|webp)$/i.test(race.maskSrc))\n ? race.maskSrc : defaultMaskSrc;\n\n card.style.setProperty('--effect-color', safeEffectColor);\n\n const imageBasePromptParts = [\"epic character concept art\", \"masterpiece quality\", \"highly detailed illustration\", \"cinematic composition\", \"dramatic and evocative lighting\", \"professional digital painting style\"];\n const characterSpecifics = \\`\\${safeStyleHint}, portrait of a \\${safeName}\\`;\n const fullPromptText = \\`\\${imageBasePromptParts.join(\", \")}, \\${characterSpecifics}\\`;\n const encodedPrompt = encodeURIComponent(fullPromptText);\n const imageUrl = \\`https://maxm-imggenurl.web.val.run/\\${encodedPrompt}.jpg\\`;\n const fallbackColorHex = safeEffectColor.substring(1);\n const fallbackUrl = \\`https://placehold.co/350x300/\\${fallbackColorHex}/1A1A1E?text=\\${encodeURIComponent(safeName + ' - Error')}\\`;\n\n const rgbEffectColor = hexToRgb(safeEffectColor);\n const colorStopSolid = \\`rgba(\\${rgbEffectColor.r}, \\${rgbEffectColor.g}, \\${rgbEffectColor.b}, 1.0)\\`;\n const colorStopMidAlpha = \\`rgba(\\${rgbEffectColor.r}, \\${rgbEffectColor.g}, \\${rgbEffectColor.b}, 0.7)\\`;\n const colorStopTransparent = \\`rgba(\\${rgbEffectColor.r}, \\${rgbEffectColor.g}, \\${rgbEffectColor.b}, 0.0)\\`;\n const specularGradient = \\`linear-gradient(\\${HOLO_GRADIENT_ANGLE}, \\${colorStopTransparent} 20%, \\${colorStopMidAlpha} 40%, \\${colorStopSolid} 50%, \\${colorStopMidAlpha} 60%, \\${colorStopTransparent} 80%)\\`;\n\n const mainImageOnErrorLogic = \\`this.onerror=null; this.src='\\${fallbackUrl}'; console.warn('Image failed for \\${safeName} (' + this.src + '). Using fallback.');\\`;\n const maskImageOnErrorLogic = \\`this.parentElement.style.display='none'; console.warn('Mask image failed for \\${safeName}');\\`;\n\n // <<< MODIFIED: Added floating-name div >>>\n card.innerHTML = \\`\n

\\${safeName}

\n $\"Image$ \n

\n \\${useMaskSrc ? \\`

$\"\"$

\\` : ''}\n

\\${safeName}

\\${safeDescription}

\n \\`;\n carouselTrack.appendChild(card);\n cardElements.push(card);\n });\n }\n\n function updateCardPositions(useTransition = true) {\n const numCards = cardElements.length;\n if (numCards === 0) return;\n isTransitioning = useTransition;\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);\n card.classList.remove(ACTIVE_CLASS, PREV_CLASS, NEXT_CLASS, HIDDEN_PREV_CLASS, HIDDEN_NEXT_CLASS, BORDER_ANIM_PULSE_CLASS, BORDER_ANIM_SHIMMER_CLASS);\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 let isActive = false;\n switch (relativeIndex) {\n case 0:\n card.classList.add(ACTIVE_CLASS); isActive = true;\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 if (relativeIndex > 1) card.classList.add(HIDDEN_NEXT_CLASS);\n else if (relativeIndex < -1) card.classList.add(HIDDEN_PREV_CLASS);\n break;\n }\n if (isActive && useTransition && effectContainer) {\n setTimeout(() => { createSparks(effectContainer); effectContainer.classList.add(ANIMATE_CLASS); }, TRANSITION_SPEED_MS * 0.2);\n }\n if (useTransition) resetCardHoloState(card);\n });\n if (useTransition) setTimeout(() => { isTransitioning = false; }, TRANSITION_SPEED_MS);\n else isTransitioning = false;\n }\n\n function createSparks(effectContainer) {\n if (!effectContainer) return;\n effectContainer.innerHTML = '

';\n for (let i = 0; i < NUM_SPARKS; i++) {\n const spark = document.createElement('div');\n spark.classList.add(SPARK_CLASS);\n const angle = Math.random() * 2 * Math.PI;\n const radius = Math.random() * Math.min(effectContainer.offsetWidth, effectContainer.offsetHeight) * 0.7;\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);\n spark.style.top = '50%'; spark.style.left = '50%';\n effectContainer.appendChild(spark);\n }\n }\n\n function moveCarousel(direction) {\n if (isTransitioning || cardElements.length <= 1) return;\n const numCards = cardElements.length;\n currentIndex = (direction === 'next') ? (currentIndex + 1) % numCards : (currentIndex - 1 + numCards) % numCards;\n updateCardPositions();\n }\n\n function handleDragStart(e) {\n if (isTransitioning || e.target.closest('p, h3')) return;\n isDragging = true;\n startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;\n currentX = startX;\n carouselContainer.classList.add(DRAGGING_CLASS);\n carouselTrack.classList.remove(SLIDING_CLASS);\n if (e.type !== 'touchstart') e.preventDefault();\n }\n\n function handleDragMove(e) {\n if (!isDragging) return;\n currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;\n if (e.type === 'touchmove') e.preventDefault();\n }\n\n function handleDragEnd() {\n if (!isDragging) return;\n isDragging = false;\n carouselContainer.classList.remove(DRAGGING_CLASS);\n const deltaX = currentX - startX;\n if (Math.abs(deltaX) > DRAG_THRESHOLD) {\n carouselTrack.classList.add(SLIDING_CLASS);\n moveCarousel(deltaX < 0 ? 'next' : 'prev');\n setTimeout(() => carouselTrack.classList.remove(SLIDING_CLASS), TRANSITION_SPEED_MS * 1.1);\n }\n }\n\n function handlePageMouseMove(e) {\n if (isDragging || isTransitioning) return;\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 const tiltY = ((mouseX - centerX) / centerX) * MAX_PLANE_TILT;\n const tiltX = -((mouseY - centerY) / centerY) * (MAX_PLANE_TILT * 0.6);\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 // <<< MODIFIED Fanning Logic >>>\n const normX = (mouseX / rect.width) * 2 - 1; // -1 (left) to 1 (right)\n const centerProximityFactor = 1.0 - Math.abs(normX); // 1 (center) to 0 (edges)\n\n const currentMaxTranslate = parseFloat(rootStyle.getPropertyValue(MAX_FAN_TRANSLATE_VAR_NAME) || '18');\n const currentMaxRotate = parseFloat(rootStyle.getPropertyValue(MAX_FAN_ROTATE_VAR_NAME) || '25');\n\n const translateControlValue = -currentMaxTranslate * centerProximityFactor;\n const rotateControlValue = -currentMaxRotate * centerProximityFactor;\n\n docElement.style.setProperty(FAN_TRANSLATE_PREV_VAR, \\`\\${translateControlValue.toFixed(2)}%\\`);\n docElement.style.setProperty(FAN_ROTATE_PREV_VAR, \\`\\${rotateControlValue.toFixed(2)}deg\\`);\n docElement.style.setProperty(FAN_TRANSLATE_NEXT_VAR, \\`\\${(-translateControlValue).toFixed(2)}%\\`);\n docElement.style.setProperty(FAN_ROTATE_NEXT_VAR, \\`\\${(-rotateControlValue).toFixed(2)}deg\\`);\n }\n\n function handlePageMouseLeave() {\n docElement.style.setProperty(TRACK_ROTATE_X_VAR, '0deg');\n docElement.style.setProperty(TRACK_ROTATE_Y_VAR, '0deg');\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 function handleCardMouseMove(e) {\n if (isDragging || isTransitioning) return;\n const card = e.currentTarget;\n const holoContent = card.querySelector('.' + HOLOGRAPHIC_CONTENT_CLASS);\n if (!holoContent) return;\n const rect = holoContent.getBoundingClientRect();\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 if (centerX <= 0 || centerY <= 0) return;\n const deltaX = x - centerX;\n const deltaY = y - centerY;\n const rotateY = (deltaX / centerX) * MAX_HOLO_TILT;\n const rotateX = -(deltaY / centerY) * (MAX_HOLO_TILT * 0.8);\n const mouseXNorm = Math.max(0, Math.min(1, x / rect.width));\n const mouseYNorm = Math.max(0, Math.min(1, y / rect.height));\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, \\`\\${mouseXNorm * 100}%\\`);\n card.style.setProperty(HOLO_BG_POS_Y_VAR, \\`\\${mouseYNorm * 100}%\\`);\n }\n\n function handleCardMouseLeave(e) {\n if (isDragging) return;\n resetCardHoloState(e.currentTarget);\n }\n\n function resetCardHoloState(card) {\n if (!card) 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 function addEventListeners() {\n window.addEventListener('keydown', (e) => {\n if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || document.activeElement?.matches('input, textarea, [contenteditable=true]')) return;\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); moveCarousel('next'); }\n else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); moveCarousel('prev'); }\n });\n carouselContainer.addEventListener('mousedown', handleDragStart);\n carouselContainer.addEventListener('touchstart', handleDragStart, { passive: true });\n window.addEventListener('mousemove', handleDragMove);\n window.addEventListener('touchmove', handleDragMove, { passive: false });\n window.addEventListener('mouseup', handleDragEnd);\n window.addEventListener('touchend', handleDragEnd);\n window.addEventListener('touchcancel', handleDragEnd);\n window.addEventListener('mousemove', handlePageMouseMove);\n document.body.addEventListener('mouseleave', handlePageMouseLeave);\n window.addEventListener('blur', handlePageMouseLeave);\n cardElements.forEach(card => {\n card.addEventListener('mousemove', handleCardMouseMove);\n card.addEventListener('mouseleave', handleCardMouseLeave);\n resetCardHoloState(card);\n });\n }\n\n function initializeCarousel() {\n createCards();\n if (cardElements.length > 0) {\n updateCardPositions(false);\n addEventListeners();\n }\n }\n\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeCarousel);\n } else {\n initializeCarousel();\n }\n})();\n `;\n\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...