danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/n3rdle.
n3rdle.vercel.app
789 B
34 lines
1<script setup lang="ts">
2defineProps({
3 state: Array as () => GameState,
4})
5const hintMap = {
6 0: 'bg-gray-600 text-white',
7 1: 'bg-yellow-400 text-black',
8 2: 'bg-green-700 text-white',
9}
10const description = {
11 0: 'is not in the word.',
12 1: 'is in the word, but not at the location you picked.',
13 2: 'is in exactly the right location',
14}
15</script>
16
17<template>
18 <article>
19 <ul>
20 <li v-for="[guess, hint] in state" class="flex gap-1">
21 <span
22 v-for="(letter, i) in guess"
23 class="block w-6 h-6 text-center font-bold uppercase"
24 :class="hintMap[hint[i]]"
25 >
26 {{ letter }}
27 <span class="sr-only">
28 {{ description[hint[i]] }}
29 </span>
30 </span>
31 </li>
32 </ul>
33 </article>
34</template>