function MainComponent() { const constellations = [ { name: 'おおぐま座（北斗七星）', stars: [ { x: 20, y: 20 }, { x: 25, y: 25 }, { x: 30, y: 30 }, { x: 35, y: 35 }, { x: 40, y: 30 }, { x: 45, y: 25 }, { x: 50, y: 20 } ] }, { name: 'オリオン座', stars: [ { x: 60, y: 10 }, { x: 65, y: 15 }, { x: 70, y: 20 }, { x: 62, y: 25 }, { x: 68, y: 25 }, { x: 65, y: 35 }, { x: 60, y: 40 }, { x: 70, y: 40 } ] }, { name: 'カシオペア座', stars: [ { x: 75, y: 60 }, { x: 80, y: 65 }, { x: 85, y: 60 }, { x: 90, y: 65 }, { x: 95, y: 60 } ] } ]; const planets = [ { name: '水星', color: '#8C7853', orbitRadius: 12, speed: 0.08, size: 1.5, features: '表面にクレーター' }, { name: '金星', color: '#FFA500', orbitRadius: 16, speed: 0.06, size: 2.5, features: '厚い大気' }, { name: '地球', color: '#4169E1', orbitRadius: 20, speed: 0.05, size: 2.5, features: '青い海、緑の陸地' }, { name: '火星', color: '#FF4500', orbitRadius: 24, speed: 0.04, size: 2, features: '赤い表面' }, { name: '木星', color: '#FFA07A', orbitRadius: 32, speed: 0.02, size: 5, features: '大きな赤い斑点' }, { name: '土星', color: '#FFD700', orbitRadius: 40, speed: 0.015, size: 4.5, features: '美しい輪' }, { name: '天王星', color: '#00CED1', orbitRadius: 48, speed: 0.01, size: 3.5, features: '青緑色の表面' }, { name: '海王星', color: '#1E90FF', orbitRadius: 56, speed: 0.008, size: 3.5, features: '濃い青色' } ]; const [currentConstellation, setCurrentConstellation] = React.useState(0); const [stars, setStars] = React.useState([]); const [time, setTime] = React.useState(0); const [selectedPlanet, setSelectedPlanet] = React.useState(null); const generateStars = React.useCallback(()=>{ const newStars = Array.from({ length: 200 }).map(()=>({ x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 2 + 1, opacity: Math.random() * 0.5 + 0.5, speed: Math.random() * 0.05 + 0.01 })); return newStars; }, []); React.useEffect(()=>{ setStars(generateStars()); }, [ generateStars ]); React.useEffect(()=>{ const constellationTimer = setInterval(()=>{ setCurrentConstellation((prev)=>(prev + 1) % constellations.length); }, 10000); return ()=>clearInterval(constellationTimer); }, []); React.useEffect(()=>{ const animate = ()=>{ setStars((prevStars)=>prevStars.map((star)=>({ ...star, y: (star.y + star.speed) % 100, opacity: Math.sin(Date.now() * star.speed * 0.01) * 0.5 + 0.5 }))); setTime((prevTime)=>prevTime + 0.01); requestAnimationFrame(animate); }; const animationFrameId = requestAnimationFrame(animate); return ()=>cancelAnimationFrame(animationFrameId); }, [ stars, time ]); const handlePlanetClick = (planet)=>{ setSelectedPlanet(planet); }; const constellation = constellations[currentConstellation]; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-96 bg-black rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, stars.map((star, index)=>/*#__PURE__*/ React.createElement("div", { key: `bg-star-${index}`, className: "absolute rounded-full bg-white transition-opacity duration-1000", style: { left: `${star.x}%`, top: `${star.y}%`, width: `${star.size}px`, height: `${star.size}px`, opacity: star.opacity }, __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute rounded-full bg-yellow-500", style: { left: '50%', top: '50%', width: '20px', height: '20px', transform: 'translate(-50%, -50%)', boxShadow: '0 0 10px 5px rgba(255, 255, 0, 0.5)' }, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }), planets.map((planet, index)=>{ const angle = time * planet.speed; const x = 50 + planet.orbitRadius * Math.cos(angle); const y = 50 + planet.orbitRadius * Math.sin(angle); return /*#__PURE__*/ React.createElement(React.Fragment, { key: `planet-${index}`, __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute rounded-full cursor-pointer", style: { left: `${x}%`, top: `${y}%`, width: `${planet.size}px`, height: `${planet.size}px`, backgroundColor: planet.color, transform: 'translate(-50%, -50%)' }, onClick: ()=>handlePlanetClick(planet), __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute rounded-full border border-gray-600 opacity-20", style: { left: '50%', top: '50%', width: `${planet.orbitRadius * 2}%`, height: `${planet.orbitRadius * 2}%`, transform: 'translate(-50%, -50%)' }, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this })); }), constellation.stars.map((star, index)=>/*#__PURE__*/ React.createElement("div", { key: `const-star-${index}`, className: "absolute w-3 h-3 rounded-full bg-yellow-300", style: { left: `${star.x}%`, top: `${star.y}%` }, __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this })), constellation.stars.slice(0, -1).map((star, index)=>{ const nextStar = constellation.stars[index + 1]; return /*#__PURE__*/ React.createElement("div", { key: `line-${index}`, className: "absolute bg-white opacity-30", style: { left: `${star.x}%`, top: `${star.y}%`, width: `${Math.hypot(nextStar.x - star.x, nextStar.y - star.y)}%`, height: '1px', transform: `rotate(${Math.atan2(nextStar.y - star.y, nextStar.x - star.x)}rad)`, transformOrigin: 'left center' }, __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }); }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 text-white text-xl font-bold", __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }, constellation.name), selectedPlanet && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, selectedPlanet.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, selectedPlanet.features))); }