blob: 6f87f64e83d0d4ec8356738ec1cc01bc1ac8a741 (
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<template>
<table
class="trials-table"
v-bind:class="{
solved: backendResponse.is_solved,
error: !backendResponse.is_in_dictionary,
}"
>
<tr v-for="trial in trials" :key="trial">
<Trial
:length="length"
:trial="trial.text"
:colors="trial.colors"
:finished="true"
/>
</tr>
<tr>
<Trial
:length="length"
:trial="currentTrial"
:colors="[]"
:finished="false"
/>
</tr>
</table>
</template>
<script setup lang="ts">
import Trial from "@/components/Trial.vue";
import { watch } from "vue";
let props = defineProps<{
length: number;
currentTrial: string;
backendResponse: {
trial: string;
is_in_dictionary: boolean;
is_solved: boolean;
colors: number[];
};
}>();
let trials: { text: string; colors: number[] }[] = [];
watch(
() => props.backendResponse,
(response) => {
if (!response.is_in_dictionary) {
console.log("word not in dictionary");
return;
}
if (response.is_solved) {
console.log("You won!");
return;
}
trials = trials.concat([
{
// TODO: fix capitalization of "ß" -> "S"
text: props.backendResponse.trial.toUpperCase(),
colors: props.backendResponse.colors,
},
]);
console.log(trials);
console.log(JSON.stringify(response));
}
);
</script>
<style scoped>
.trials-table {
background-color: #000000;
color: #a0a0a0;
font-weight: bold;
font-family: monospace;
}
.trials-table.error {
background-color: #800000;
}
.trials-table.solved {
background-color: #008000;
}
</style>
|
