function MainComponent() { const roles = [ "コケ", "草本", "低木", "陽樹", "陰樹" ]; const gridSize = 14; const phases = [ "芽吹き", "成長" ]; const [currentPhase, setCurrentPhase] = React.useState(phases[0]); const [currentRole, setCurrentRole] = React.useState(roles[0]); const [grid, setGrid] = React.useState(Array.from({ length: gridSize }, ()=>Array(gridSize).fill(null))); const [roleCounts, setRoleCounts] = React.useState(roles.reduce((acc, role)=>({ ...acc, [role]: 0 }), {})); const handleCellClick = (rowIndex, colIndex)=>{ if (currentPhase === "芽吹き") { handleBudPhase(rowIndex, colIndex); } else if (currentPhase === "成長") { handleGrowthPhase(rowIndex, colIndex); } }; const handleBudPhase = (rowIndex, colIndex)=>{ const newGrid = [ ...grid ]; if (currentRole === "コケ") { placeKoke(rowIndex, colIndex, newGrid); } else if (currentRole === "草本") { placeSohons(rowIndex, colIndex, newGrid); } else if (currentRole === "低木") { placeTeiboku(rowIndex, colIndex, newGrid); } else if (currentRole === "陽樹") { placeYoju(rowIndex, colIndex, newGrid); } else if (currentRole === "陰樹") { placeInju(rowIndex, colIndex, newGrid); } setGrid(newGrid); }; const handleGrowthPhase = (rowIndex, colIndex)=>{ const newGrid = [ ...grid ]; if (currentRole === "低木") { growTeiboku(rowIndex, colIndex, newGrid); } else if (currentRole === "陽樹") { growYoju(rowIndex, colIndex, newGrid); } else if (currentRole === "陰樹") { growInju(rowIndex, colIndex, newGrid); } setGrid(newGrid); }; const placeKoke = (rowIndex, colIndex, newGrid)=>{ const positions = getThreeAdjacentPositions(rowIndex, colIndex); positions.forEach(([r, c])=>{ if (newGrid[r][c] === null) { newGrid[r][c] = "コ"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); } }); }; const placeSohons = (rowIndex, colIndex, newGrid)=>{ const positions = getFourAdjacentPositions(rowIndex, colIndex); positions.forEach(([r, c])=>{ if (newGrid[r][c] === null || newGrid[r][c] === "コ") { newGrid[r][c] = "ソ"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); } }); }; const placeTeiboku = (rowIndex, colIndex, newGrid)=>{ const positions = getOnePositionFromAdjacentNine(rowIndex, colIndex, "草本"); positions.forEach(([r, c])=>{ if (newGrid[r][c] === null) { newGrid[r][c] = "テ-赤"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); } }); }; const growTeiboku = (rowIndex, colIndex, newGrid)=>{ if (newGrid[rowIndex][colIndex] === "テ-赤") { const positions = getOnePositionFromAdjacentNine(rowIndex, colIndex, "赤テ"); positions.forEach(([r, c])=>{ newGrid[r][c] = "テ-黒"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); }); newGrid[rowIndex][colIndex] = "テ-黒"; } }; const placeYoju = (rowIndex, colIndex, newGrid)=>{ const positions = getTwoPositionsFromAdjacentNine(rowIndex, colIndex, [ "草本", "低木" ]); positions.forEach(([r, c])=>{ if (newGrid[r][c] === null) { newGrid[r][c] = "ヨ-赤"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); } }); }; const growYoju = (rowIndex, colIndex, newGrid)=>{ if (newGrid[rowIndex][colIndex] === "ヨ-赤") { const positions = getTwoPositionsFromAdjacentNine(rowIndex, colIndex, "赤ヨ"); positions.forEach(([r, c])=>{ newGrid[r][c] = "ヨ-黒"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); }); newGrid[rowIndex][colIndex] = "ヨ-黒"; } }; const placeInju = (rowIndex, colIndex, newGrid)=>{ const positions = getTwoPositionsFromAdjacentNine(rowIndex, colIndex, [ "草本", "低木" ]); positions.forEach(([r, c])=>{ if (newGrid[r][c] === null) { newGrid[r][c] = "イ-赤"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); } }); }; const growInju = (rowIndex, colIndex, newGrid)=>{ if (newGrid[rowIndex][colIndex] === "イ-赤") { const positions = getTwoPositionsFromAdjacentNine(rowIndex, colIndex, "赤イ"); positions.forEach(([r, c])=>{ newGrid[r][c] = "イ-黒"; setRoleCounts((prevCounts)=>({ ...prevCounts, [currentRole]: prevCounts[currentRole] + 1 })); }); newGrid[rowIndex][colIndex] = "イ-黒"; } }; const getThreeAdjacentPositions = (rowIndex, colIndex)=>{ // Add logic to get three adjacent positions return []; }; const getFourAdjacentPositions = (rowIndex, colIndex)=>{ // Add logic to get four adjacent positions return []; }; const getOnePositionFromAdjacentNine = (rowIndex, colIndex, condition)=>{ // Add logic to get one position from nine based on condition return []; }; const getTwoPositionsFromAdjacentNine = (rowIndex, colIndex, condition)=>{ // Add logic to get two positions from nine based on condition return []; }; const renderGrid = grid.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 178, columnNumber: 5 }, __self: this }, row.map((cell, colIndex)=>{ const cellColor = cell?.includes('テ') && cell?.includes('赤') ? "bg-red-300" : cell?.includes('テ') ? "bg-red-500" : cell?.includes('ヨ') && cell?.includes('赤') ? "bg-orange-300" : cell?.includes('ヨ') ? "bg-orange-500" : cell?.includes('イ') && cell?.includes('赤') ? "bg-purple-300" : cell?.includes('イ') ? "bg-purple-500" : cell === "ソ" ? "bg-green-300" : cell === "コ" ? "bg-green-500" : "bg-white"; return /*#__PURE__*/ React.createElement("div", { key: colIndex, className: `w-[20px] h-[20px] border border-gray-300 ${cellColor}`, onClick: ()=>handleCellClick(rowIndex, colIndex), __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, cell && cell.length > 1 && /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 193, columnNumber: 41 }, __self: this }, cell.charAt(0))); }))); return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-sans", __source: { fileName: "", lineNumber: 201, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 203, columnNumber: 9 }, __self: this }, "ゲームルール"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, "5人で遊ぶゲームです"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, "役は「コケ」「草本」「低木」「陽樹」「陰樹」の5つ"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, "芽吹きフェーズと成長フェーズがある"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, "14x14のマスがある"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, "1. 役を決める"), /*#__PURE__*/ React.createElement("select", { value: currentRole, onChange: (e)=>setCurrentRole(e.target.value), className: "border p-2", name: "role", __source: { fileName: "", lineNumber: 213, columnNumber: 9 }, __self: this }, roles.map((role, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: role, __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, role)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 224, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 225, columnNumber: 9 }, __self: this }, "フェーズを選ぶ"), /*#__PURE__*/ React.createElement("select", { value: currentPhase, onChange: (e)=>setCurrentPhase(e.target.value), className: "border p-2", name: "phase", __source: { fileName: "", lineNumber: 226, columnNumber: 9 }, __self: this }, phases.map((phase, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: phase, __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, phase)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 237, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 238, columnNumber: 9 }, __self: this }, "2. ルールに沿ってマスをクリックしてゲームを進める"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 239, columnNumber: 9 }, __self: this }, renderGrid)), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-white p-4 border border-gray-300 shadow-lg w-[200px]", __source: { fileName: "", lineNumber: 241, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 242, columnNumber: 9 }, __self: this }, "マス数"), roles.map((role, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 244, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this }, role), ": ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 245, columnNumber: 34 }, __self: this }, roleCounts[role]), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-[10px]", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-blue-600 rounded-full", style: { width: `${roleCounts[role] / (gridSize * gridSize) * 100}%` }, __source: { fileName: "", lineNumber: 247, columnNumber: 15 }, __self: this })))))); }