Don't use component library for game boards...

frontend/src/lib/components/o-x/OXBoard.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { type SvelteComponent, createEventDispatcher } from "svelte";
+
+	export let board: number[];
+	export let iconMap: Record<number, typeof SvelteComponent>;
+	export let disabled  = false;
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Generate handler function for board cell click
+	 *
+	 * @param idx Index of cell for event
+	 * @returns Handler function
+	 */
+	function handleClick(idx: number) {
+		return () => dispatch("click", {
+			idx
+		});
+	}
+</script>
+
+<div class="grid">
+	{#each board as b, idx}
+	<button disabled={b !== 0 || disabled} class="item" on:click={handleClick(idx)}>
+		<svelte:component this="{iconMap[b]}"/>
+	</button>
+	{/each}
+</div>
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		max-width: min(100%, 24rem);
+		border: 1px solid var(--cds-interactive-03);
+	}
+	button.item {
+		cursor: pointer;
+		aspect-ratio: 1/1;
+		background: none;
+		border: 2px solid var(--cds-interactive-03);
+		color: var(--cds-interactive-03);
+		transition: background 70ms cubic-bezier(0, 0, 0.38, 0.9),
+			color 70ms cubic-bezier(0, 0, 0.38, 0.9);
+	}
+	button.item:enabled:hover {
+		background-color: var(--cds-hover-tertiary);
+		color: var(--cds-inverse-01);
+	}
+	button.item:disabled {
+		cursor: not-allowed;
+	}
+</style>

frontend/src/lib/components/o-x/OXNoneIcon.svelte

@@ -0,0 +1,8 @@
+<div></div>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>

frontend/src/lib/components/o-x/OXOIcon.svelte

@@ -0,0 +1,9 @@
+<h1>○</h1>
+
+<style>
+	h1 {
+		width: 100%;
+		text-align: center;
+		font-size: 4rem;
+	}
+</style>

frontend/src/lib/components/o-x/OXXIcon.svelte

@@ -0,0 +1,9 @@
+<h1>⨯</h1>
+
+<style>
+	h1 {
+		width: 100%;
+		text-align: center;
+		font-size: 4rem;
+	}
+</style>