function Card({ value, isFlipped, onClick }) { const cardText = isFlipped ? value : '裏'; const cardClasses = `w-[100px] h-[150px] border m-2 flex items-center justify-center text-2xl font-roboto cursor-pointer ${isFlipped ? 'bg-white' : 'bg-gray-500'}`; return /*#__PURE__*/ React.createElement("div", { className: cardClasses, onClick: onClick, __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, cardText); } function GameBoard({ cards, onCardClick }) { return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 w-[400px]", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, cards.map((card, index)=>/*#__PURE__*/ React.createElement(Card, { key: index, value: card.value, isFlipped: card.isFlipped, onClick: ()=>onCardClick(index), __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }))); } function Timer({ time }) { return /*#__PURE__*/ React.createElement("div", { className: "text-center text-2xl font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, time.toFixed(1), " 秒"); } function MainComponent({ cards, onCardClick, time, onRetry }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Timer, { time: time, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GameBoard, { cards: cards, onCardClick: onCardClick, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded font-roboto", onClick: onRetry, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "リトライ")); } function StoryComponent() { const generateRandomCards = ()=>{ const values = 'AABBCCDDEEFFGGHH'.split(''); const shuffled = values.sort(()=>0.5 - Math.random()); return shuffled.map((value)=>({ value, isFlipped: false })); }; const [cards, setCards] = React.useState(generateRandomCards()); const [time, setTime] = React.useState(0); const [flippedIndices, setFlippedIndices] = React.useState([]); React.useEffect(()=>{ const timer = setInterval(()=>{ setTime((prev)=>prev + 0.1); }, 100); return ()=>clearInterval(timer); }, []); React.useEffect(()=>{ if (flippedIndices.length === 2) { const [firstIndex, secondIndex] = flippedIndices; if (cards[firstIndex].value === cards[secondIndex].value) { setFlippedIndices([]); } else { setTimeout(()=>{ setCards((prevCards)=>prevCards.map((card, i)=>i === firstIndex || i === secondIndex ? { ...card, isFlipped: false } : card)); setFlippedIndices([]); }, 2000); } } }, [ flippedIndices, cards ]); const handleCardClick = (index)=>{ if (flippedIndices.length === 2 || cards[index].isFlipped) return; setCards((prevCards)=>prevCards.map((card, i)=>i === index ? { ...card, isFlipped: !card.isFlipped } : card)); setFlippedIndices((prev)=>[ ...prev, index ]); }; const handleRetry = ()=>{ setCards(generateRandomCards()); setTime(0); setFlippedIndices([]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { cards: cards, onCardClick: handleCardClick, time: time, onRetry: handleRetry, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this })); }