feat : working UI for words

components/word.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { WordResponseDTO } from '~/netcode/events/dto/wordresponse.dto';
+import { useWordStore } from '~/store/word.store';
+
+export interface Props {
+    word: WordResponseDTO;
+}
+
+const props = defineProps<Props>()
+
+const loading = ref(false)
+const wordStore = useWordStore();
+
+async function changeWordState() {
+    if (loading.value) {
+        return
+    }
+    loading.value = true
+    let data
+    if (props.word.enabled) {
+        data = await wordStore.disableWord(props.word.id)
+    } else {
+        data = await wordStore.enableWord(props.word.id)
+    }
+    loading.value = false
+    props.word.enabled = data.enabled
+
+}
+</script>
+
+<template>
+    <div class="word">
+        <span>{{ word.value }}</span>
+        <input type="checkbox" :class="{ loading }" :checked="word.enabled" :disabled="loading"
+            @click.prevent="changeWordState" />
+        <User :id="word.ownerId"></User>
+
+    </div>
+
+</template>
+
+<style lang="css" scoped>
+div.word {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+}
+
+input {
+    min-height: 28px;
+}
+
+input.loading {
+    cursor: wait
+}
+</style>