function MainComponent() { const timeZones = [ { name: "日本時間", zone: "Asia/Tokyo" } ]; const [currentTimes, setCurrentTimes] = React.useState({}); const [score, setScore] = React.useState(0); const [targetPosition, setTargetPosition] = React.useState({ top: '50%', left: '50%' }); React.useEffect(()=>{ const updateTimes = ()=>{ const newTimes = {}; timeZones.forEach((tz)=>{ newTimes[tz.name] = new Date().toLocaleTimeString("ja-JP", { timeZone: tz.zone }); }); setCurrentTimes(newTimes); }; updateTimes(); const interval = setInterval(updateTimes, 1000); return ()=>clearInterval(interval); }, [ timeZones ]); React.useEffect(()=>{ const interval = setInterval(moveTarget, 1000); return ()=>clearInterval(interval); }, []); const moveTarget = ()=>{ const top = Math.floor(Math.random() * 90) + "%"; const left = Math.floor(Math.random() * 90) + "%"; setTargetPosition({ top, left }); }; const handleTargetClick = ()=>{ setScore(score + 1); moveTarget(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center w-[200px] m-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, timeZones.map((tz)=>{ const colorStyle = { color: `${getRandomColor()}` }; return /*#__PURE__*/ React.createElement("div", { key: tz.zone, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, tz.name), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-crimson-text", style: colorStyle, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, currentTimes[tz.name])); })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px] border border-gray-300", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: handleTargetClick, className: "absolute w-[50px] h-[50px]", style: { top: targetPosition.top, left: targetPosition.left }, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/mario.png", alt: "Mario character", className: "w-full h-full", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "text-center w-[200px] m-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "スコア: ", score))); function getRandomColor() { return `#${Math.floor(Math.random() * 16777215).toString(16)}`; } }

日本時間

スコア: 0