function MainComponent() { const titles = [ { name: "空の影", attack: 1, defense: 1, speed: 3, hp: 3 }, { name: "蒼い嵐", attack: 1, defense: 2, speed: 2, hp: 3 }, { name: "爆風の嵐", attack: 1, defense: 2, speed: 3, hp: 2 }, { name: "鉄壁の巨人", attack: 1, defense: 3, speed: 1, hp: 3 }, { name: "水晶の運命", attack: 1, defense: 3, speed: 2, hp: 2 }, { name: "死者の支配者", attack: 1, defense: 3, speed: 3, hp: 1 }, { name: "嵐の使者", attack: 2, defense: 1, speed: 2, hp: 3 }, { name: "流星の舞踏者", attack: 2, defense: 1, speed: 3, hp: 2 }, { name: "炎の精霊", attack: 2, defense: 2, speed: 1, hp: 3 }, { name: "鋼鉄の処刑人", attack: 2, defense: 2, speed: 2, hp: 2 }, { name: "嵐の船長", attack: 2, defense: 2, speed: 3, hp: 1 }, { name: "鋼の拳", attack: 2, defense: 3, speed: 1, hp: 2 }, { name: "星辰の守護者", attack: 2, defense: 3, speed: 2, hp: 1 }, { name: "魔法の絶対者", attack: 3, defense: 1, speed: 1, hp: 3 }, { name: "氷炎の舞踏者", attack: 3, defense: 1, speed: 2, hp: 2 }, { name: "白き狼", attack: 3, defense: 1, speed: 3, hp: 1 }, { name: "赤き狂戦士", attack: 3, defense: 2, speed: 1, hp: 2 }, { name: "深淵の神", attack: 3, defense: 2, speed: 2, hp: 1 }, { name: "黄金の獣", attack: 3, defense: 3, speed: 1, hp: 1 } ]; const races = [ { name: "サンダーキャット", attack: 1, defense: 3, speed: 3, hp: 1 }, { name: "人間", attack: 1, defense: 2, speed: 2, hp: 3 }, { name: "ゴブリン", attack: 1, defense: 2, speed: 3, hp: 2 }, { name: "ゾンビ", attack: 1, defense: 3, speed: 1, hp: 3 }, { name: "ウィッチ", attack: 1, defense: 3, speed: 2, hp: 2 }, { name: "ケンタウロス", attack: 1, defense: 3, speed: 3, hp: 1 }, { name: "ハーピー", attack: 2, defense: 1, speed: 2, hp: 3 }, { name: "クロウ", attack: 2, defense: 1, speed: 3, hp: 2 }, { name: "ハーフオーク", attack: 2, defense: 2, speed: 1, hp: 3 }, { name: "シャドウエルフ", attack: 2, defense: 2, speed: 2, hp: 2 }, { name: "デーモン", attack: 2, defense: 2, speed: 3, hp: 1 }, { name: "ジャイアント", attack: 2, defense: 3, speed: 1, hp: 2 }, { name: "バトルメイジ", attack: 2, defense: 3, speed: 2, hp: 1 }, { name: "フェニックス", attack: 3, defense: 1, speed: 1, hp: 3 }, { name: "レッドドラゴン", attack: 3, defense: 1, speed: 2, hp: 2 }, { name: "サイクロプス", attack: 3, defense: 1, speed: 3, hp: 1 }, { name: "ウォーリア", attack: 3, defense: 2, speed: 1, hp: 2 }, { name: "ソードマスター", attack: 3, defense: 2, speed: 2, hp: 1 }, { name: "シャドウドラゴン", attack: 3, defense: 3, speed: 1, hp: 1 } ]; const jobs = [ "騎馬警官", "アイスマスター", "盗賊", "ドラゴン飼育家", "芝居役者", "呪術師", "船長", "サンダーロード", "剣士", "聖職者", "写真家", "忍者", "船乗り", "マスターハンター", "弓使い", "イリュージョニスト", "魔術師", "侍", "海賊", "エンターテイナー", "騎士", "カードマスター", "妖精使い", "武道家", "船医", "マインドフレイヤー", "騎兵", "ナイトシェイド", "神秘主義者", "剣闘士", "商人", "デーモンロード", "狩人", "デーモンウォッチャー", "占星術師", "盾使い", "旅芸人", "アビスウォーカー", "探検家", "ゴッドスレイヤー", "ドワーフ採掘者", "神官", "漁師", "シャドウマスター", "賢者", "アンデッドスレイヤー", "ドラゴン騎乗士", "宗教家", "農夫", "エレクトロマンサー", "司祭", "ドラゴンスレイヤー", "獣人狩り", "聖職者", "騎兵警官", "ナクロマンサー", "彫刻家", "デーモンスレイヤー", "モンスターハンター", "聖堂騎士", "軍曹", "デーモンハンター", "音楽家", "ドラゴンスレイヤー", "サバイバリスト", "モンク", "騎士団長", "エンチャンター", "演奏家", "デーモンスレイヤー", "妖精騎士", "暗黒術師", "冒険者", "ワーロック", "歌手", "僧侶", "デーモンスレイヤー", "呪文学者", "戦士", "インフェルノマスター", "踊り子", "寺院の番人", "神器の守護者", "魔道工学者", "魔法使い", "アルケミスト", "劇団員", "魔法工学者", "ゴーレム製作者", "時間術師", "ウィザードナイト", "精霊使い", "アイスウィザード", "神職", "フェイスレス", "錬金術師", "ファイアーウィザード", "ドラゴン飼育家", "ハーフリング踊り子", "神官", "ファイアーダンサー", "魔道士" ]; const skills = [ "探索スキル", "釣りスキル", "料理スキル", "製作スキル", "植物認識スキル", "キャンプ設営スキル", "野生動物との交流スキル", "生存技能スキル", "果物収集スキル", "水源発見スキル", "火起こしスキル", "基本医療スキル", "樹木登攀スキル", "草木加工スキル", "革加工スキル", "地形把握スキル", "地元の知識スキル", "食料備蓄スキル", "罠設置スキル", "罠解除スキル", "草の収穫スキル", "水の加工スキル", "キノコ採集スキル", "野生動物認識スキル", "天然資源収集スキル", "防具整備スキル", "基本交渉スキル", "素材探索スキル", "基本防御スキル", "天候予測スキル", "篝火設営スキル", "地形認識スキル", "水路探索スキル", "野外生活スキル", "生態調査スキル", "食品加工スキル", "野外作業スキル", "応急手当スキル", "野生植物収穫スキル", "野外方位スキル" ]; const [formData, setFormData] = React.useState({ username: "", characterName: "", title: titles[0].name, race: races[0].name, job: jobs[0], skills: [] }); const handleChange = (e)=>{ const { name, value, options } = e.target; if (name === "skills") { const selectedSkills = Array.from(options).filter((option)=>option.selected).map((option)=>option.value); if (selectedSkills.length <= 3) { setFormData({ ...formData, [name]: selectedSkills }); } } else { setFormData({ ...formData, [name]: value }); } }; const handleSubmit = (e)=>{ e.preventDefault(); const selectedTitle = titles.find((title)=>title.name === formData.title); const selectedRace = races.find((race)=>race.name === formData.race); const finalStats = { attack: (selectedTitle.attack + selectedRace.attack) * 2, defense: (selectedTitle.defense + selectedRace.defense) * 2, speed: (selectedTitle.speed + selectedRace.speed) * 2, hp: (selectedTitle.hp + selectedRace.hp) * 2 }; console.log({ ...formData, finalStats }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#333] mb-6", __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, "TRPGのプロフィールカード生成"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded-lg shadow-md w-full max-w-[500px]", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "username", className: "block text-[#444] mb-2 font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "自分の名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "username", name: "username", className: "w-full p-2 border border-gray-300 rounded", value: formData.username, onChange: handleChange, __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "characterName", className: "block text-[#444] mb-2 font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "キャラの名前"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "characterName", name: "characterName", className: "w-full p-2 border border-gray-300 rounded", value: formData.characterName, onChange: handleChange, __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "title", className: "block text-[#444] mb-2 font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "異名"), /*#__PURE__*/ React.createElement("select", { id: "title", name: "title", className: "w-full p-2 border border-gray-300 rounded", value: formData.title, onChange: handleChange, __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, titles.map((title, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: title.name, __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, title.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "race", className: "block text-[#444] mb-2 font-roboto", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, "種族"), /*#__PURE__*/ React.createElement("select", { id: "race", name: "race", className: "w-full p-2 border border-gray-300 rounded", value: formData.race, onChange: handleChange, __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, races.map((race, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: race.name, __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, race.name)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "job", className: "block text-[#444] mb-2 font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "職業"), /*#__PURE__*/ React.createElement("select", { id: "job", name: "job", className: "w-full p-2 border border-gray-300 rounded", value: formData.job, onChange: handleChange, __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, jobs.map((job, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: job, __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, job)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "skills", className: "block text-[#444] mb-2 font-roboto", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "スキル (3つ選択)"), /*#__PURE__*/ React.createElement("select", { id: "skills", name: "skills", multiple: true, className: "w-full p-2 border border-gray-300 rounded", value: formData.skills, onChange: handleChange, __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, skills.map((skill, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: skill, __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }, skill)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "プロフィールカード生成"))); }