diff options
| author | Erich Eckner <erich.eckner.ext@bestsecret.com> | 2023-02-03 15:08:58 +0100 |
|---|---|---|
| committer | Erich Eckner <erich.eckner.ext@bestsecret.com> | 2023-02-03 15:08:58 +0100 |
| commit | f285137bf8ea216a3587a5a250e7e25af520e469 (patch) | |
| tree | 9b15aff19a013599923decc26a06071c02a4a2a0 | |
| parent | ec794c923fba838456437014f8e907e6e30759dc (diff) | |
| download | wordle-frontend-f285137bf8ea216a3587a5a250e7e25af520e469.tar.xz | |
colorize trials
| -rw-r--r-- | src/components/Trial.vue | 16 |
1 files changed, 12 insertions, 4 deletions
diff --git a/src/components/Trial.vue b/src/components/Trial.vue index 28d7a0e..b400797 100644 --- a/src/components/Trial.vue +++ b/src/components/Trial.vue @@ -1,13 +1,14 @@ <template> <td v-for="i in length" :key="i"> - <div> + <div class="letter" v-bind:class="{ + correct: colors[i-1]===2, + wrongPosition: colors[i-1]===1 + }"> {{ trial[i - 1] ? trial[i - 1] : " " }} </div> </td> </template> -// TODO: colorize according to props.colors - <script setup lang="ts"> defineProps<{ length: number; @@ -17,4 +18,11 @@ defineProps<{ }>(); </script> -<style scoped></style> +<style scoped> +.letter.correct { + background-color: #008000; +} +.letter.wrongPosition { + background-color: #808000; +} +</style> |