site: start of basic site using astro, character select implemented

site/components/CharaSelect.astro

@@ -0,0 +1,35 @@
+---
+// 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>