66 lines
1.3 KiB
Svelte
66 lines
1.3 KiB
Svelte
<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>
|