summaryrefslogtreecommitdiff
path: root/src/components/Trial.vue
blob: f1e79c4eb30f28cd6591974cd44f56dea5f3c359 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <td v-for="i in length" :key="i">
    <div
      class="letter"
      v-bind:class="{
        correct: colors[i - 1] === 2,
        wrongPosition: colors[i - 1] === 1,
      }"
    >
      {{ trial[i - 1] ? trial[i - 1] : "&nbsp;" }}
    </div>
  </td>
</template>

<script setup lang="ts">
defineProps<{
  length: number;
  trial: string;
  colors: number[];
  finished: boolean;
}>();
</script>

<style scoped>
.letter.correct {
  background-color: #008000;
}
.letter.wrongPosition {
  background-color: #808000;
}
</style>