feat : concept grid view

pages/concepts.vue

@@ -1,89 +1,6 @@
 <script setup lang="ts">
-import Multiselect from "vue-multiselect";
-import { useConceptStore } from "~/store/concepts.store";
-
-const newConcept = ref("");
-const conceptStore = useConceptStore();
-
-await Promise.all([
-  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="Object.values(conceptStore.conceptTypes)" track-by="id"
-        deselect-label="Can't remove this value" :allow-empty="false" label="value" v-model="concept.type">
-      </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>
+  <ConceptGrid></ConceptGrid>
 </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/game/[id].vue

@@ -84,58 +84,84 @@ async function createWord() {
 const selfPlayer = computed(() =>
   game.value.players.find((p) => p.userId == userStore.self?.id)
 );
+
+function conceptClick(value: string) {
+  console.log(value)
+}
 </script>
 
 <template>
-  <div v-if="isCurrentTurn">Current word : {{ gameStore.currentWord }}</div>
-  Players in game :
-  <div v-for="player in game.players" :key="player.id">
-    <User :id="player.userId"></User> {{ player.score }}
-  </div>
+  <main id="game">
+    <div id="sidebar">
+      <div v-if="isCurrentTurn">Current word : {{ gameStore.currentWord }}</div>
+      Players in game :
+      <div v-for="player in game.players" :key="player.id">
+        <User :id="player.userId"></User> {{ player.score }}
+      </div>
 
-  <template v-if="game.currentPlayer">
-    Current player :
-    <User :id="game.currentPlayer?.userId"></User>
-  </template>
-
-  {{ game }}
-  <template v-if="userStore.self">
-    <template v-if="!game.started">
-      <input
-        type="button"
-        v-if="game.ownerId == userStore.self.id"
-        value="start"
-        @click="startGame"
-      />
-      <input type="button" v-if="!selfPlayer" value="join" @click="joinGame" />
-    </template>
-    <input
-      v-if="game.ownerId == userStore.self.id"
-      type="button"
-      value="delete"
-      @click="deleteGame"
-    />
-  </template>
-
-  <div>
-    Messages
-    <span v-for="message in game.messages" :key="message.id">
-      <template v-if="message.authorId">
-        {{ message.value }}<User :id="message.authorId"></User>
+      <template v-if="game.currentPlayer">
+        Current player :
+        <User :id="game.currentPlayer?.userId"></User>
       </template>
-      <template v-else>
-        <User :id="message.value"></User> Guessed the word !
+
+      {{ game }}
+      <template v-if="userStore.self">
+        <template v-if="!game.started">
+          <input type="button" v-if="game.ownerId == userStore.self.id" value="start" @click="startGame" />
+          <input type="button" v-if="!selfPlayer" value="join" @click="joinGame" />
+        </template>
+        <input v-if="game.ownerId == userStore.self.id" type="button" value="delete" @click="deleteGame" />
       </template>
-    </span>
-    <input
-      ref="wordInput"
-      type="text"
-      :disabled="loading || selfPlayer?.hasGuessed"
-      @keypress.enter="createWord"
-      v-model="messageText"
-    />
-    <button :disabled="loading || selfPlayer?.hasGuessed" @click="createWord">
-      Submit
-    </button>
-  </div>
+
+      <div>
+        Messages
+        <span v-for="message in game.messages" :key="message.id">
+          <template v-if="message.authorId">
+            {{ message.value }}<User :id="message.authorId"></User>
+          </template>
+          <template v-else>
+            <User :id="message.value"></User> Guessed the word !
+          </template>
+        </span>
+        <input ref="wordInput" type="text" :disabled="loading || selfPlayer?.hasGuessed" @keypress.enter="createWord"
+          v-model="messageText" />
+        <button :disabled="loading || selfPlayer?.hasGuessed" @click="createWord">
+          Submit
+        </button>
+      </div>
+    </div>
+    <div id="gridContainer">
+      <ConceptGrid @click="conceptClick"></ConceptGrid>
+    </div>
+
+  </main>
+
 </template>
+
+<style lang="css">
+main#game {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: 1fr minmax(0, 1fr);
+  grid-template-rows: 100%;
+  grid-template-areas: "sidebar grid";
+  height: 100%
+}
+
+#sidebar {
+  grid-area: sidebar;
+}
+
+#gridContainer {
+  justify-self: left;
+  grid-area: grid;
+}
+
+@media only screen and (max-width: 992px) {
+  main#game {
+    grid-template-columns: 100%;
+    grid-template-rows: minmax(0, 650px) 1fr;
+    grid-template-areas: "grid" "sidebar";
+  }
+}
+</style>

pages/index.vue

@@ -28,13 +28,11 @@ async function createGame() {
 </script>
 
 <template>
-  <LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
-  <input
-    type="button"
-    value="Create Game"
-    @click="createGame"
-    :disabled="!userStore.self || loading"
-  />
+  <main>
+    <LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
+    <input type="button" value="Create Game" @click="createGame" :disabled="!userStore.self || loading" />
+  </main>
+
 </template>
 
 <style lang="css" scoped>

pages/words.vue

@@ -37,7 +37,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div id="words">
+  <main id="words">
     <div class="header">
       <span>Word</span>
       <span>Status</span>
@@ -47,23 +47,17 @@ onUnmounted(() => {
     <Word v-for="word in wordStore.words" :id="word.id" :key="word.id" />
     <div class="new-word">
       <span>
-        <input
-          ref="wordInput"
-          type="text"
-          :disabled="loading"
-          @keypress.enter="createWord"
-          v-model="newWord"
-        />
+        <input ref="wordInput" type="text" :disabled="loading" @keypress.enter="createWord" v-model="newWord" />
         <button :disabled="loading" @click="createWord">Submit</button>
       </span>
     </div>
-  </div>
+  </main>
 </template>
 
 <style lang="css" scoped>
-div#words {
-  display: grid;
-  grid-template-columns: 1fr;
+main#words {
+  display: flex;
+  flex-direction: column;
 }
 
 div.header {