Add desktop games, robot pet and TCG app

src/lib/components/games/DirectionPad.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { Direction } from '#lib/games/snake';
+
+	let { onsteer }: { onsteer: (direction: Direction) => void } = $props();
+
+	const buttons: { direction: Direction; icon: string }[] = [
+		{ direction: 'up', icon: 'mdi:chevron-up' },
+		{ direction: 'left', icon: 'mdi:chevron-left' },
+		{ direction: 'down', icon: 'mdi:chevron-down' },
+		{ direction: 'right', icon: 'mdi:chevron-right' }
+	];
+</script>
+
+<div class="direction-pad">
+	{#each buttons as button (button.direction)}
+		<button class={button.direction} aria-label="Move {button.direction}" onpointerdown={() => onsteer(button.direction)}>
+			<Icon icon={button.icon} width="26" />
+		</button>
+	{/each}
+</div>
+
+<style>
+	.direction-pad {
+		display: grid;
+		grid-template-columns: repeat(3, 52px);
+		grid-template-rows: repeat(2, 52px);
+		grid-template-areas:
+			'. up .'
+			'left down right';
+		gap: 6px;
+		justify-content: center;
+		touch-action: manipulation;
+	}
+
+	button {
+		display: grid;
+		place-items: center;
+		padding: 0;
+		background: var(--background);
+		border: 2px solid var(--accent);
+		color: var(--accent);
+	}
+
+	button:active {
+		background: var(--accent);
+		color: var(--background);
+	}
+
+	.up {
+		grid-area: up;
+	}
+
+	.left {
+		grid-area: left;
+	}
+
+	.down {
+		grid-area: down;
+	}
+
+	.right {
+		grid-area: right;
+	}
+</style>