iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
佛心分享-SideProject30

最近的工程師真沒用系列 第 22

第二十二天-怪物資訊分享上傳畫面

  • 分享至 

  • xImage
  •  

根據昨天的資料先來刻版吧

<script lang="ts">
	import { getDatas } from '$lib/front/monster';

	let monsters = getDatas();

	// 轉換成 [{id, name, datas}, ...] 方便操作
	let monsterList = Object.entries(monsters).map(([id, obj]) => ({
		id,
		name: obj.name,
		datas: obj.datas
	}));

	let selectedMonsterId: string | null = null;
	let selectedDataId: string | null = null;

	// 取得目前選到的怪物
	$: selectedMonster = monsterList.find((m) => m.id === selectedMonsterId);
</script>

<div class="min-h-screen flex justify-center items-center gap-8 flex-col md:flex-row px-4">
	<div class="card bg-base-100 shadow-xl p-4 overflow-x-auto w-full max-w-5xl mx-auto">
		<h2 class="text-2xl font-bold mb-4">資料輸入</h2>
		<form
			class="space-y-4"
			on:submit|preventDefault={() =>
				console.log('送出', { monster: selectedMonsterId, item: selectedDataId })}
		>
			<!-- 怪物選單 -->
			<div class="form-control">
				<label for="monster-selector">
					<span class="label-text">怪物種類</span>
				</label>
				<select
					class="select select-bordered w-full"
					id="monster-selector"
					required
					bind:value={selectedMonsterId}
				>
					<option disabled selected value={null}>請選擇怪物</option>
					{#each monsterList as monster}
						<option value={monster.id}>{monster.name}</option>
					{/each}
				</select>
			</div>

			<!-- 掉落物品選單 -->
			<div class="form-control">
				<label for="monster-datas-selector">
					<span class="label-text">掉落物品</span>
				</label>
				<select
					class="select select-bordered w-full"
					id="monster-datas-selector"
					required
					bind:value={selectedDataId}
					disabled={!selectedMonster}
				>
					<option disabled selected value={null}>請選擇物品</option>
					{#if selectedMonster}
						{#each Object.entries(selectedMonster.datas) as [id, name]}
							<option value={id}>{name}</option>
						{/each}
					{/if}
				</select>
			</div>

			<!-- 送出按鈕 -->
			<div class="form-control mt-4">
				<button class="btn btn-primary w-full">送出</button>
			</div>
		</form>
	</div>
</div>

我還缺個接收資料的 API

今天的情緒抒發:
今天去 CAKE 的就業博覽會,裡面居然有 SWAG 跟 JKF 的公司在徵才,現在這種公司都已經可以出現在檯面上了嗎?


上一篇
第二十一天-怪物資訊建立
下一篇
第二十三天-怪物資訊分享 API 與DB
系列文
最近的工程師真沒用26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言