feat : concept grid view

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>