Initial commit

components/word.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { WordResponseDTO } from "~/netcode/events/dto/wordresponse.dto";
+import { useUserStore } from "~/store/user.store";
+import { useWordStore } from "~/store/word.store";
+
+export interface Props {
+  id: number;
+}
+
+const props = defineProps<Props>();
+
+const wordStore = useWordStore();
+const userStore = useUserStore();
+
+const word = wordStore.words[props.id];
+
+const disabled = computed(() => word.loading || !userStore.self);
+
+async function changeWordState() {
+  if (word.loading) {
+    return;
+  }
+  word.loading = true;
+  if (word.enabled) {
+    await wordStore.disableWord(word);
+  } else {
+    await wordStore.enableWord(word);
+  }
+  word.loading = false;
+}
+
+async function deleteWord() {
+  if (word.loading) {
+    return;
+  }
+  word.loading = true;
+  try {
+    await wordStore.deleteWord(word);
+  } finally {
+    word.loading = false;
+  }
+}
+</script>
+
+<template>
+  <div class="word">
+    <span>{{ word.value }}</span>
+    <input
+      type="checkbox"
+      :checked="word.enabled"
+      :disabled="disabled"
+      @click.prevent="changeWordState"
+    />
+    <input
+      :disabled="disabled"
+      type="button"
+      @click="deleteWord"
+      value="Delete"
+    />
+    <User :id="word.ownerId"></User>
+  </div>
+</template>
+
+<style lang="css" scoped>
+div.word {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+}
+
+input {
+  min-height: 28px;
+}
+
+input:disabled {
+  cursor: wait;
+}
+</style>