function MainComponent() { const [history, setHistory] = React.useState([]); const [userInput, setUserInput] = React.useState(''); const [shiritoriData, setShiritoriData] = React.useState([]); const [turnCount, setTurnCount] = React.useState(0); const [message, setMessage] = React.useState(''); const [timer, setTimer] = React.useState(30); React.useEffect(()=>{ const inputField = document.querySelector('input[name="shiritoriFile"]'); const textarea = document.querySelector('textarea[name="shiritoriOutput"]'); inputField.addEventListener('change', function(e) { const file = e.target.files[0]; const reader = new FileReader(); reader.readAsText(file); reader.onload = function() { textarea.textContent = reader.result; setShiritoriData(reader.result.split('\n').map((word)=>word.trim())); }; }); }, []); React.useEffect(()=>{ if (timer <= 0) { setMessage('あなたの負け！一定時間内に答えませんでした。'); } const intervalId = setInterval(()=>{ setTimer((prev)=>prev > 0 ? prev - 1 : 0); }, 1000); return ()=>clearInterval(intervalId); }, [ timer ]); function convertToBaseKana(input) { const mapping = { 'が': 'か', 'ぎ': 'き', 'ぐ': 'く', 'げ': 'け', 'ご': 'こ', 'ざ': 'さ', 'じ': 'し', 'ず': 'す', 'ぜ': 'せ', 'ぞ': 'そ', 'だ': 'た', 'ぢ': 'ち', 'づ': 'つ', 'で': 'て', 'ど': 'と', 'ば': 'は', 'び': 'ひ', 'ぶ': 'ふ', 'べ': 'へ', 'ぼ': 'ほ', 'ぱ': 'は', 'ぴ': 'ひ', 'ぷ': 'ふ', 'ぺ': 'へ', 'ぽ': 'ほ' }; let result = ''; for (let char of input){ result += mapping[char] || char; } return result; } const userTurn = ()=>{ if (!userInput || userInput.endsWith('ん')) { setMessage('あなたの負け！'); return; } const baseUserInput = convertToBaseKana(userInput.trim()); if (history.includes(baseUserInput)) { setMessage('あなたの負け！この単語はすでに使われています。'); return; } setHistory((prev)=>[ ...prev, baseUserInput ]); setTurnCount((prev)=>prev + 1); setUserInput(''); setTimer(30); pcTurn(baseUserInput.charAt(baseUserInput.length - 1)); }; const pcTurn = (lastChar)=>{ const possibleWords = shiritoriData.filter((word)=>word.startsWith(lastChar) && !history.includes(convertToBaseKana(word))); if (possibleWords.length === 0) { setMessage('PCの負け！'); return; } const pcChoice = possibleWords[Math.floor(Math.random() * possibleWords.length)]; if (pcChoice.endsWith('ん')) { setMessage('PCの負け！'); return; } setHistory((prev)=>[ ...prev, pcChoice ]); }; const resetGame = ()=>{ setHistory([]); setUserInput(''); setShiritoriData([]); setTurnCount(0); setMessage(''); setTimer(30); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-5", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-crimson-text mb-3", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "対戦型しりとりゲーム"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "shiritoriFile", className: "border border-gray-400 p-2 mb-5", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "shiritoriOutput", cols: "80", rows: "10", className: "border border-gray-400 p-2 ", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: userInput, onChange: (e)=>setUserInput(e.target.value), className: "w-full border border-gray-400 p-2", placeholder: "入力してください...", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 font-bold", onClick: userTurn, __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "送信"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-4 py-2 font-bold", onClick: resetGame, __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "リセット"))), message && /*#__PURE__*/ React.createElement("div", { className: "mt-5 text-red-500 text-xl", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, message), /*#__PURE__*/ React.createElement("div", { className: "mt-5 text-2xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 134, columnNumber: 7 }, __self: this }, "残り時間: ", timer, " 秒"), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-5", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-crimson-text mb-3", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "履歴"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-400 p-4 w-full max-w-2xl", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { name: "historyList", className: "text-left list-disc list-inside", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, history.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, item)))))); }