import React, { useEffect, useState, useRef } from 'react'
type Props = {
onComplete: () => void
}
export const LoadingScreen: React.FC<Props> = ({ onComplete }) => {
const [fadeOut, setFadeOut] = useState(false)
const [mounted, setMounted] = useState(true)
const [subtitle, setSubtitle] = useState('')
const [animatedText, setAnimatedText] = useState('')
const subtitleLoaded = useRef(false)
useEffect(() => {
console.log('Loading screen mounted - starting timer...')
// Set fixed subtitle and animate it
if (!subtitleLoaded.current) {
subtitleLoaded.current = true
const fixedSubtitle = 'Whisper of the Heart'
setSubtitle(fixedSubtitle)
// Animate text character by character
let currentIndex = 0
const animateText = () => {
if (currentIndex <= fixedSubtitle.length) {
setAnimatedText(fixedSubtitle.slice(0, currentIndex))
currentIndex++
setTimeout(animateText, 50) // 50ms delay between characters
}
}
// Start animation after heart appears (1000ms = 0.2s heart delay + 0.8s heart animation)
setTimeout(animateText, 1000)
}
// Start fade after 4 seconds (longer to show ray spinning)
const fadeTimer = setTimeout(() => {
console.log('4 seconds passed - Starting fade out...')
setFadeOut(true)
}, 4000)
// Complete after fade finishes (4s show + 1s fade = 5s total)
const completeTimer = setTimeout(() => {
console.log('5 seconds passed - Loading screen completing...')
setMounted(false)
onComplete()
}, 5000)
return () => {
console.log('Cleaning up timers...')
clearTimeout(fadeTimer)
clearTimeout(completeTimer)
}
}, []) // Empty dependency array - run once on mount
const handleClick = () => {
console.log('Loading screen clicked, completing early...')
setFadeOut(true)
setTimeout(() => {
setMounted(false)
onComplete()
}, 1000)
}
console.log('LoadingScreen render - fadeOut:', fadeOut, 'mounted:', mounted)
if (!mounted) return null
return (
<div className={`loading-screen ${fadeOut ? 'fade-out' : ''}`} onClick={handleClick}>
<div className="loading-logo">
<div className="heart-container">
<div className="sun-rays loading-animate-rays">
<svg viewBox="0 0 100 100" className="rays-svg">
{/* Rising Sun flag style rays - triangular rays extending to edges */}
<g transform="translate(50, 50)">
{[...Array(16)].map((_, i) => {
const angle = (i * 22.5);
const nextAngle = ((i + 1) * 22.5);
const rayWidth = 11.25; // Half the angle between rays for triangular shape
// Create triangular ray path
const startAngle = angle - rayWidth;
const endAngle = angle + rayWidth;
const innerRadius = 0; // Start from center (heart center)
const outerRadius = 70; // Extend to screen edge
const x1 = Math.cos(startAngle * Math.PI / 180) * innerRadius;
const y1 = Math.sin(startAngle * Math.PI / 180) * innerRadius;
const x2 = Math.cos(endAngle * Math.PI / 180) * innerRadius;
const y2 = Math.sin(endAngle * Math.PI / 180) * innerRadius;
const x3 = Math.cos(startAngle * Math.PI / 180) * outerRadius;
const y3 = Math.sin(startAngle * Math.PI / 180) * outerRadius;
const x4 = Math.cos(endAngle * Math.PI / 180) * outerRadius;
const y4 = Math.sin(endAngle * Math.PI / 180) * outerRadius;
return (
<polygon
key={i}
points={`${x1},${y1} ${x2},${y2} ${x4},${y4} ${x3},${y3}`}
fill={i % 2 === 0 ? "#8B0000" : "#000000"}
opacity="0.9"
/>
);
})}
</g>
</svg>
</div>
<div className="heart-outline loading-animate-heart">
<svg viewBox="0 0 100 100" className="heart-svg">
<path d="M50,85 C50,85 10,60 10,35 C10,18 20,8 35,8 C42,8 50,13 50,25 C50,13 58,8 65,8 C80,8 90,18 90,35 C90,60 50,85 50,85 Z"
fill="#8B0000"
stroke="#8B0000"
strokeWidth="2"/>
</svg>
</div>
<div className="logo-text loading-animate-text">soryu</div>
<div className="loading-subtitle loading-animate-subtitle">{animatedText}</div>
<div className="loading-dots loading-animate-text">
<span>.</span><span>.</span><span>.</span>
</div>
</div>
</div>
</div>
)
}
