id what this is

app.vue

@@ -25,3 +25,7 @@ onBeforeUnmount(() => {
     </NuxtLayout>
   </div>
 </template>
+
+<style>
+@import "vue-multiselect/dist/vue-multiselect.css";
+</style>

components/conceptHeader.vue

@@ -41,6 +41,7 @@ const currentGames = computed(() => {
     <div id="links">
       <NuxtLink to="/">Home</NuxtLink>
       <NuxtLink to="/words">Words</NuxtLink>
+      <NuxtLink to="/concepts">Concepts</NuxtLink>
     </div>
 
     <div id="games">

components/word.vue

@@ -40,11 +40,6 @@ async function deleteWord() {
     word.loading = false;
   }
 }
-onMounted(() => {
-  setInterval(() => {
-    console.log(disabled.value);
-  }, 1000);
-});
 </script>
 
 <template>

middleware/auth.global.ts

@@ -1,6 +1,6 @@
 import { useGameStore } from "~/store/game.store";
 
-const validPaths = ["/", "/rules", "/test", "/words"];
+const validPaths = ["/", "/rules", "/test", "/words", "/concepts"];
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
   const config = useRuntimeConfig();

netcode/handlers/concept.handler.ts

@@ -0,0 +1,31 @@
+import { useConceptStore } from "~/store/concepts.store";
+import type {
+  ConceptCreateEvent,
+  ConceptDeleteEvent,
+  ConceptDisableEvent,
+  ConceptEditEvent,
+  ConceptEnableEvent,
+} from "../events/concept.events";
+
+export const handlers = {
+  create: (event: ConceptCreateEvent) => {
+    const conceptStore = useConceptStore();
+    conceptStore.concepts[event.concept.id] = event.concept;
+  },
+  edit: (event: ConceptEditEvent) => {
+    const conceptStore = useConceptStore();
+    conceptStore.concepts[event.concept.id].value = event.concept.value;
+  },
+  delete: (event: ConceptDeleteEvent) => {
+    const conceptStore = useConceptStore();
+    delete conceptStore.concepts[event.id];
+  },
+  // enable: (event: ConceptEnableEvent) => {
+  //   const conceptStore = useConceptStore();
+  //   conceptStore.concepts[event.id].enabled = true;
+  // },
+  // disable: (event: ConceptDisableEvent) => {
+  //   const conceptStore = useConceptStore();
+  //   conceptStore.concepts[event.id].enabled = false;
+  // },
+};

package-lock.json

@@ -13,6 +13,7 @@
         "pinia": "^2.3.0",
         "reflect-metadata": "^0.2.2",
         "vue": "latest",
+        "vue-multiselect": "^3.1.0",
         "vue-router": "latest"
       }
     },
@@ -9502,6 +9503,16 @@
       "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==",
       "license": "MIT"
     },
+    "node_modules/vue-multiselect": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.1.0.tgz",
+      "integrity": "sha512-+i/fjTqFBpaay9NP+lU7obBeNaw2DdFDFs4mqhsM0aEtKRdvIf7CfREAx2o2B4XDmPrBt1r7x1YCM3BOMLaUgQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.1",
+        "npm": ">= 6.14.15"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "pinia": "^2.3.0",
     "reflect-metadata": "^0.2.2",
     "vue": "latest",
+    "vue-multiselect": "^3.1.0",
     "vue-router": "latest"
   }
 }

pages/concepts.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import Multiselect from "vue-multiselect";
+import { useConceptStore } from "~/store/concepts.store";
+
+const newConcept = ref("");
+const conceptStore = useConceptStore();
+
+await conceptStore.fetchConceptList();
+
+const loading = ref(false);
+const conceptInput = ref<HTMLInputElement | null>(null);
+
+async function createConcept() {
+  if (loading.value) {
+    return;
+  }
+  loading.value = true;
+  try {
+    await conceptStore.createConcept(newConcept.value);
+    newConcept.value = "";
+  } finally {
+    nextTick(() => {
+      loading.value = false;
+      nextTick(() => {
+        conceptInput.value?.focus();
+      });
+    });
+  }
+}
+
+function deleteConcept(id: number) {
+  conceptStore.deleteConcept(id);
+}
+
+onBeforeMount(() => {
+  conceptStore.subscribe();
+});
+
+onUnmounted(() => {
+  conceptStore.close();
+});
+</script>
+
+<template>
+  <div id="concepts">
+    <div class="header">
+      <span>Concept</span>
+      <span>Status</span>
+      <span>Delete</span>
+      <span>Type</span>
+    </div>
+    <div
+      class="concept"
+      v-for="concept in conceptStore.concepts"
+      :key="concept.id"
+    >
+      <span>{{ concept.value }}</span>
+      <input type="checkbox" checked="true" disabled="true" />
+      <input type="button" value="Delete" @click="deleteConcept(concept.id)" />
+      <Multiselect :options="[]"></Multiselect>
+    </div>
+    <div class="new-concept">
+      <span>
+        <input
+          ref="conceptInput"
+          type="text"
+          :disabled="loading"
+          @keypress.enter="createConcept"
+          v-model="newConcept"
+        />
+        <button :disabled="loading" @click="createConcept">Submit</button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+div#concepts {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+div.concept {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+div.header {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  align-items: center;
+}
+</style>

pages/index.vue

@@ -13,8 +13,9 @@ async function createGame() {
   loading.value = true;
   await lobbyStore
     .createGame()
-    .then(() => {
+    .then((data) => {
       loading.value = false;
+      navigateTo("/game/" + data.id);
     })
     .catch((e) => {
       if (e.data.statusCode == 400) {

store/concepts.store.ts

@@ -0,0 +1,87 @@
+import { defineStore } from "pinia";
+import { subscribe } from "~/netcode";
+import type { ConceptResponseDTO } from "~/netcode/events/dto/conceptresponse.dto";
+import { handlers } from "~/netcode/handlers/concept.handler";
+
+export const useConceptStore = defineStore("concept", {
+  state: () => ({
+    concepts: {} as Record<string, ConceptResponseDTO>,
+    eventSource: null as null | EventSource,
+  }),
+  actions: {
+    async subscribe() {
+      this.eventSource = subscribe(`/concepts/subscribe`);
+      this.eventSource.addEventListener("message", async (message) => {
+        const data = JSON.parse(message.data);
+        const type = data.type as string;
+        if (type in handlers) {
+          handlers[type as keyof typeof handlers](data);
+        }
+      });
+    },
+    async close() {
+      this.eventSource?.close();
+    },
+    async fetchConceptList() {
+      const config = useRuntimeConfig();
+      const data = await useFetch<ConceptResponseDTO[]>(
+        config.public.endpoint + `/concepts/all`,
+        {
+          credentials: "include",
+        }
+      );
+      if (data.data.value && !data.error.value) {
+        for (const concept of data.data.value) {
+          this.concepts[concept.id] = concept;
+        }
+      }
+      return data;
+    },
+    async enableConcept(concepts: ConceptResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<ConceptResponseDTO>(
+        config.public.endpoint + `/concepts/` + concepts.id + "/enable",
+        {
+          credentials: "include",
+          method: "PUT",
+        }
+      );
+      // word.enabled = true;
+      // return data;
+    },
+    async disableConcept(concepts: ConceptResponseDTO) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<ConceptResponseDTO>(
+        config.public.endpoint + `/concepts/` + concepts.id + "/disable",
+        {
+          credentials: "include",
+          method: "PUT",
+        }
+      );
+      // word.enabled = false;
+      // return data;
+    },
+
+    async createConcept(value: string) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<ConceptResponseDTO>(
+        config.public.endpoint + `/concepts/`,
+        {
+          credentials: "include",
+          body: { value },
+          method: "POST",
+        }
+      );
+    },
+    async deleteConcept(id: number) {
+      const config = useRuntimeConfig();
+      const data = await $fetch<ConceptResponseDTO>(
+        config.public.endpoint + `/concepts/` + id,
+        {
+          credentials: "include",
+          method: "DELETE",
+        }
+      );
+    },
+  },
+});

store/lobby.store.ts

@@ -49,7 +49,7 @@ export const useLobbyStore = defineStore("lobby", {
         }
       );
       // this.games[data.id] = data;
-      // return data;
+      return data;
     },
   },
 });