35 lines
1.1 KiB
Plaintext
35 lines
1.1 KiB
Plaintext
---
|
|
// Input to select a character,
|
|
// e.g. Special Week (not [Special Dreamer] Special Week).
|
|
|
|
import { character, type Character } from "../data/character";
|
|
|
|
interface Props {
|
|
id: string;
|
|
label?: string;
|
|
required?: boolean;
|
|
region?: keyof typeof character;
|
|
}
|
|
|
|
export interface Emits {
|
|
"chara-change": (ev: CustomEvent<{id: string, chara?: Character}>) => void;
|
|
}
|
|
|
|
const { id, label, required = false, region = "global" } = Astro.props;
|
|
---
|
|
{label && <label for="id">{label}</label>}
|
|
<select class="select-chara" id={id}>
|
|
{!required && <option value=""></option>}
|
|
{character[region].map((chara) => (
|
|
<option value={chara.chara_id}>{chara.name}</option>
|
|
))}
|
|
</select>
|
|
<script is:inline define:vars={{ id, region, character }}>
|
|
document.getElementById(id).addEventListener("change", (ev) => {
|
|
const chara_id = parseInt(ev.target.value);
|
|
const chara = character[region].find((c) => c.chara_id === chara_id);
|
|
const detail = chara != null ? {id, chara} : {id};
|
|
const b = new CustomEvent("chara-change", { detail, bubbles: true });
|
|
ev.target.dispatchEvent(b);
|
|
});
|
|
</script> |