function MainComponent() { const [players, setPlayers] = React.useState([]); const [teamOne, setTeamOne] = React.useState([]); const [teamTwo, setTeamTwo] = React.useState([]); const [tempPlayer, setTempPlayer] = React.useState({ name: "", rank: "アイアン" }); const [playerHistory, setPlayerHistory] = React.useState([]); const [showHistory, setShowHistory] = React.useState(false); const rankValues = { アイアン: 1, ブロンズ: 2, シルバー: 3, ゴールド: 4, プラチナ: 5, エメラルド: 6, ダイヤモンド: 7, マスター: 8, グランドマスター: 9, チャレンジャー: 10 }; const addPlayer = ()=>{ if (players.length < 30 && tempPlayer.name) { const newPlayer = { ...tempPlayer, id: Math.random().toString(36).substr(2, 9), rankValue: rankValues[tempPlayer.rank] }; setPlayers((prev)=>[ ...prev, newPlayer ]); setPlayerHistory((prev)=>[ ...prev, newPlayer ]); setTempPlayer({ name: "", rank: "アイアン" }); } }; const addPlayerFromHistory = (player)=>{ if (players.length < 30) { setPlayers((prev)=>[ ...prev, player ]); } }; const generateBalancedTeams = ()=>{ const shuffledPlayers = [ ...players ].sort(()=>0.5 - Math.random()); let tempTeamOne = [], tempTeamTwo = []; shuffledPlayers.forEach((player, index)=>{ if (tempTeamOne.length < 5 && tempTeamTwo.length < 5) { const teamOneRankSum = tempTeamOne.reduce((acc, p)=>acc + p.rankValue, 0); const teamTwoRankSum = tempTeamTwo.reduce((acc, p)=>acc + p.rankValue, 0); if (Math.abs(teamOneRankSum - teamTwoRankSum) <= 1 || index === players.length - 1) { teamOneRankSum > teamTwoRankSum ? tempTeamTwo.push(player) : tempTeamOne.push(player); } else { tempTeamOne.length > tempTeamTwo.length ? tempTeamTwo.push(player) : tempTeamOne.push(player); } } }); setTeamOne(tempTeamOne); setTeamTwo(tempTeamTwo); }; const handleChange = (event)=>{ const { name, value } = event.target; setTempPlayer({ ...tempPlayer, [name]: value }); }; const removePlayer = (id)=>{ setPlayers(players.filter((player)=>player.id !== id)); }; const removePlayerFromHistory = (id)=>{ setPlayerHistory(playerHistory.filter((player)=>player.id !== id)); }; const toggleHistory = ()=>setShowHistory(!showHistory); const editPlayerRank = (id, newRank)=>{ setPlayers(players.map((player)=>player.id === id ? { ...player, rank: newRank, rankValue: rankValues[newRank] } : player)); }; const PlayerList = ({ title, players, showTeamRank = false })=>/*#__PURE__*/ React.createElement("div", { className: `p-4 rounded shadow-lg w-full max-w-md mb-4 ${players.length >= 10 ? "bg-yellow-400" : "bg-white"}`, __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, title, showTeamRank && ` - Rank: ${players.reduce((acc, p)=>acc + p.rankValue, 0)}`), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, players.map((player)=>/*#__PURE__*/ React.createElement("li", { key: player.id, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, player.name, " - Rank:", /*#__PURE__*/ React.createElement("select", { value: player.rank, onChange: (e)=>editPlayerRank(player.id, e.target.value), className: "p-1 ml-2 rounded border", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, Object.keys(rankValues).map((rank)=>/*#__PURE__*/ React.createElement("option", { key: rank, value: rank, __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, rank))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removePlayer(player.id), className: "ml-4 text-red-500", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "✖"))))); const PlayerHistory = ()=>/*#__PURE__*/ React.createElement("div", { className: `fixed inset-0 bg-gray-500 bg-opacity-75 flex justify-center items-center ${showHistory ? '' : 'hidden'}`, __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "プレイヤー履歴"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, playerHistory.map((player)=>/*#__PURE__*/ React.createElement("li", { key: player.id, className: "mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, player.name, " - Rank: ", player.rank, /*#__PURE__*/ React.createElement("button", { onClick: ()=>addPlayerFromHistory(player), className: "ml-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "追加"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>removePlayerFromHistory(player.id), className: "ml-4 text-red-500", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, "✖")))), /*#__PURE__*/ React.createElement("button", { onClick: toggleHistory, className: "mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "閉じる"))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-200 p-4", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, "リーグオブレジェンドのチーム分けツール with リーグオブレジェンド"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md space-y-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleHistory, className: "mb-4 bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "プレイヤー履歴"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4 mb-4 w-full", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "プレイヤー名", className: "p-2 rounded border flex-grow", value: tempPlayer.name, name: "name", onChange: handleChange, __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "p-2 ml-4 rounded border flex-1", value: tempPlayer.rank, name: "rank", onChange: handleChange, __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, Object.keys(rankValues).map((rank)=>/*#__PURE__*/ React.createElement("option", { key: rank, value: rank, __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, rank))), /*#__PURE__*/ React.createElement("button", { onClick: addPlayer, className: "ml-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex-1 basis-1/5", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "追加"))), /*#__PURE__*/ React.createElement(PlayerList, { title: "登録プレイヤー", players: players, __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mb-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full", onClick: generateBalancedTeams, __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, "チーム分け"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between space-x-4 mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(PlayerList, { title: "チーム 1", players: teamOne, showTeamRank: true, __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(PlayerList, { title: "チーム 2", players: teamTwo, showTeamRank: true, __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement(PlayerHistory, { __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this })); }

リーグオブレジェンドのチーム分けツール with リーグオブレジェンド

登録プレイヤー

チーム 1 - Rank: 0

チーム 2 - Rank: 0

プレイヤー履歴