function PixelifySansButton({ text, variant = "default", onClick }) { const baseClasses = "group relative font-pixelify-sans px-6 py-3 active:translate-y-[2px] active:translate-x-[-2px]"; const textClasses = variant === "filled" ? "text-white" : "text-[#333] group-hover:text-black"; const bgClasses = variant === "filled" ? "bg-black" : "bg-transparent"; return /*#__PURE__*/ React.createElement("button", { className: `${baseClasses} ${bgClasses}`, onClick: onClick, __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `relative z-10 ${textClasses}`, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, text), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-[4px] right-[4px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[6px] left-[6px] right-[6px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[4px] left-[6px] right-[6px] h-[2px] bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-[4px] bottom-[4px] w-[2px] bg-black", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute bottom-[-2px] left-[4px] right-[4px] h-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "group-active:opacity-0 hover:opacity-100 absolute left-[-2px] top-[4px] bottom-[4px] w-[2px] bg-[#c7c7c7]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] left-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[2px] right-[2px] w-[2px] h-[2px] bg-black", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }))); } function PixelifySansButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Default Button", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PixelifySansButton, { text: "Filled Button", variant: "filled", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isGameStarted, setIsGameStarted] = React.useState(false); const [isGameCleared, setIsGameCleared] = React.useState(false); const [elapsedTime, setElapsedTime] = React.useState(0); const [cards, setCards] = React.useState([]); const [openedCards, setOpenedCards] = React.useState([]); const [matchedCards, setMatchedCards] = React.useState([]); const animals = [ '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼' ]; const totalCards = 16; React.useEffect(()=>{ let timerId; if (isGameStarted && !isGameCleared) { timerId = setInterval(()=>{ setElapsedTime((prevTime)=>prevTime + 1); }, 1000); } return ()=>clearInterval(timerId); }, [ isGameStarted, isGameCleared ]); React.useEffect(()=>{ initializeGame(); }, []); const initializeGame = ()=>{ const shuffledAnimals = shuffleArray([ ...animals, ...animals ].slice(0, totalCards)); const initialCards = shuffledAnimals.map((animal, index)=>({ id: index, animal, isFlipped: false, isMatched: false })); setCards(initialCards); }; const handleStartGame = ()=>{ setIsGameStarted(true); setElapsedTime(0); setOpenedCards([]); setMatchedCards([]); initializeGame(); }; const handleCardClick = (cardId)=>{ if (openedCards.length >= 2 || openedCards.some((card)=>card.id === cardId) || isGameCleared) { return; } const updatedCards = cards.map((card)=>card.id === cardId ? { ...card, isFlipped: true } : card); setCards(updatedCards); setOpenedCards((prevOpenedCards)=>[ ...prevOpenedCards, cards.find((card)=>card.id === cardId) ]); }; React.useEffect(()=>{ const checkMatch = ()=>{ if (openedCards.length === 2) { const [card1, card2] = openedCards; if (card1.animal === card2.animal) { setMatchedCards((prevMatchedCards)=>[ ...prevMatchedCards, card1.id, card2.id ]); setOpenedCards([]); } else { setTimeout(()=>{ setCards((prevCards)=>prevCards.map((card)=>card.id === card1.id || card.id === card2.id ? { ...card, isFlipped: false } : card)); setOpenedCards([]); }, 1000); } } }; checkMatch(); }, [ openedCards, cards ]); React.useEffect(()=>{ if (matchedCards.length === totalCards) { setIsGameCleared(true); } }, [ matchedCards ]); const handleRetry = ()=>{ setIsGameStarted(false); setIsGameCleared(false); setElapsedTime(0); setOpenedCards([]); setMatchedCards([]); initializeGame(); }; const shuffleArray = (array)=>{ for(let i = array.length - 1; i > 0; i--){ const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [ array[j], array[i] ]; } return array; }; return /*#__PURE__*/ React.createElement("div", { className: "bg-orange-500 min-h-screen font-pixelify-sans text-black", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto py-8", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-7xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "動物の神経衰弱"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center px-4 mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "タイム: ", elapsedTime, "秒"), !isGameStarted && /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-white rounded-md text-lg", onClick: handleStartGame, __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "ゲームスタート")), isGameCleared && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-7xl font-bold mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "ゲームクリア！"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "ゲームクリアにかかった時間は ", elapsedTime, "秒です。"), /*#__PURE__*/ React.createElement("button", { className: "mt-8 px-4 py-2 bg-white rounded-md text-lg", onClick: handleRetry, __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, "リトライ")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 px-2", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, cards.map((card)=>/*#__PURE__*/ React.createElement("div", { key: card.id, className: `w-full h-[120px] bg-white rounded-md flex items-center justify-center cursor-pointer ${card.isMatched || card.isFlipped ? 'bg-gray-300' : ''}`, onClick: ()=>handleCardClick(card.id), __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-9xl", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, card.isFlipped ? card.animal : '?')))))); }