From 40f2750f4f18586ac069377cd07f1f6fb9d6c01b Mon Sep 17 00:00:00 2001
From: Lordmau5 <mail@lordmau5.com>
Date: Sun, 19 Nov 2023 23:04:59 +0100
Subject: [PATCH] More WIP code

---
 src/components/EditorComponent.vue   |  15 +-
 src/composables/GameEditorDialog.vue | 441 ++++++++++++++++++---------
 src/stores/local-games.ts            |  10 +-
 3 files changed, 309 insertions(+), 157 deletions(-)

diff --git a/src/components/EditorComponent.vue b/src/components/EditorComponent.vue
index ffbd3df..e1a1c74 100644
--- a/src/components/EditorComponent.vue
+++ b/src/components/EditorComponent.vue
@@ -194,7 +194,8 @@
       v-if="selected_game"
       :game="selected_game"
       @cancel="edit_game = false"
-      @save-game="updateGame"
+      @add-game="addGame"
+      @update-game="updateGame"
     />
   </q-dialog>
 </template>
@@ -231,10 +232,18 @@ function editGame(game: BingoGame) {
 	loading.value = false;
 }
 
-async function updateGame(game: BingoGame) {
+async function addGame(game: BingoGame) {
 	loading.value = true;
 
-	await localGames.updateGame(game);
+	await localGames.addGame(game);
+
+	loading.value = false;
+}
+
+async function updateGame(old_game: BingoGame, game: BingoGame) {
+	loading.value = true;
+
+	await localGames.updateGame(old_game, game);
 
 	edit_game.value = false;
 
diff --git a/src/composables/GameEditorDialog.vue b/src/composables/GameEditorDialog.vue
index 45df176..7f07078 100644
--- a/src/composables/GameEditorDialog.vue
+++ b/src/composables/GameEditorDialog.vue
@@ -1,153 +1,273 @@
 <template>
-  <q-card>
-    <q-card-section>
-      <q-tree
-        :nodes="nodes"
-        node-key="label"
-        v-model:expanded="expanded"
-      >
-        <template v-slot:header-goal="prop">
-          <div class="row items-center">
-            <q-btn
-              icon="edit"
-              flat
-              round
-              size="sm"
-              color="orange"
-              @click="openEditGoalDialog(prop.node)"
-            />
-            <div>{{ prop.node.item?.name || prop.node.label }}</div>
-            <q-btn
-              v-if="prop.node.goal?.description?.length"
-              icon="help_outline"
-              flat
-              round
-              size="sm"
-              @click="openInfoDialog(prop.node.goal.description)"
-            ></q-btn>
-            <q-badge
-              outline
-              v-for="tag in prop.node.goal.tags"
-              :key="tag"
-              :color="getColorForString(tag)"
-              class="q-ml-sm"
-            >
-              <div class="text-weight-bold q-my-xs">{{ tag }}</div>
-            </q-badge>
+  <!-- TODO: Can't seem to work with flexbox to an extent that makes me happy... -->
+
+  <q-card class="column" style="width: 100%; min-width: 700px; height: 80vh;">
+    <div class="col-2">
+      <q-card-section class="row justify-evenly q-gutter-md">
+        <q-input
+          class="col-5"
+          v-model="game_id"
+          square
+          filled
+          autogrow
+          maxlength="50"
+          label="Game ID"
+          type="text"
+        />
+
+        <q-input
+          class="col-5"
+          v-model="game_name"
+          square
+          filled
+          autogrow
+          maxlength="100"
+          label="Game Name"
+          type="text"
+        />
+      </q-card-section>
+
+      <q-card-section class="row justify-evenly q-gutter-md">
+        <q-input
+          class="col-5"
+          v-model="short_description"
+          square
+          filled
+          maxlength="200"
+          label="Short Description"
+          type="text"
+        />
+
+        <div class="col-5 row justify-center self-center">
+          <q-btn
+            class="col"
+            icon="edit"
+            color="orange"
+            label="Description"
+            outline
+            @click="description_dialog = true"
+          ></q-btn>
+        </div>
+      </q-card-section>
+    </div>
+
+    <div class="col-9 q-pt-sm">
+      <q-card-section class="full-height">
+        <q-card
+          flat
+          bordered
+          class="full-height"
+        >
+          <div class="column full-height">
+            <div class="col-1">
+              <q-card-section class=" q-pa-sm">
+                <span class="text-h4">Goal Editor</span>
+              </q-card-section>
+            </div>
+
+            <div class="col-11">
+              <q-separator></q-separator>
+
+              <q-scroll-area class="full-height">
+                <q-tree
+                  :nodes="nodes"
+                  node-key="label"
+                  v-model:expanded="expanded"
+                >
+                  <template v-slot:header-goal="prop">
+                    <div class="row items-center">
+                      <q-btn
+                        icon="edit"
+                        flat
+                        round
+                        size="sm"
+                        color="orange"
+                        @click="openEditGoalDialog(prop.node)"
+                      />
+                      <div>{{ prop.node.item?.name || prop.node.label }}</div>
+                      <q-btn
+                        v-if="prop.node.goal?.description?.length"
+                        icon="help_outline"
+                        flat
+                        round
+                        size="sm"
+                        @click="openInfoDialog(prop.node.goal.description)"
+                      ></q-btn>
+                      <q-badge
+                        outline
+                        v-for="tag in prop.node.goal.tags"
+                        :key="tag"
+                        :color="getColorForString(tag)"
+                        class="q-ml-sm"
+                      >
+                        <div class="text-weight-bold q-my-xs">{{ tag }}</div>
+                      </q-badge>
+                    </div>
+                  </template>
+
+                  <template v-slot:header-goal-list="prop">
+                    <div class="row items-center">
+                      <q-btn
+                        icon="edit"
+                        flat
+                        round
+                        size="sm"
+                        color="orange"
+                        @click="event => openEditGoalListDialog(prop.node, event)"
+                      />
+                      <div>{{ prop.node.item?.name || prop.node.label }}</div>
+                      <q-badge
+                        outline
+                        color="orange"
+                        class="q-ml-sm"
+                      >
+                        <div class="text-weight-bold q-my-xs">Goal List</div>
+                      </q-badge>
+                    </div>
+                  </template>
+
+                  <template v-slot:header-category="prop">
+                    <div class="row items-center">
+                      <q-btn
+                        icon="edit"
+                        flat
+                        round
+                        size="sm"
+                        color="orange"
+                        @click="event => openEditCategoryDialog(prop.node, event)"
+                      />
+                      <div>{{ prop.node.item?.name || prop.node.label }}</div>
+                      <q-badge
+                        outline
+                        color="blue"
+                        class="q-ml-sm"
+                      >
+                        <div class="text-weight-bold q-my-xs">Category</div>
+                      </q-badge>
+                    </div>
+                  </template>
+
+                  <!-- Add Goal -->
+                  <template v-slot:header-add-goal="prop">
+                    <div class="row items-center">
+                      <q-btn
+                        outline
+                        icon="add"
+                        label="Goal"
+                        color="light-blue"
+                        size="sm"
+                        @click="openEditGoalDialog(prop.node)"
+                      ></q-btn>
+                    </div>
+                  </template>
+
+                  <!-- Add Goal List -->
+                  <template v-slot:header-add-goal-list="prop">
+                    <div class="row items-center">
+                      <q-btn
+                        outline
+                        icon="add"
+                        label="Goal List"
+                        color="light-blue"
+                        size="sm"
+                        @click="event => openEditGoalListDialog(prop.node, event)"
+                      ></q-btn>
+                    </div>
+                  </template>
+
+                  <!-- Add Category -->
+                  <template v-slot:header-add-category="prop">
+                    <div class="row items-center">
+                      <q-btn
+                        outline
+                        icon="add"
+                        label="Category"
+                        color="light-blue"
+                        size="sm"
+                        @click="event => openEditCategoryDialog(prop.node, event)"
+                      ></q-btn>
+                    </div>
+                  </template>
+                </q-tree>
+              </q-scroll-area>
+            </div>
           </div>
-        </template>
+        </q-card>
+      </q-card-section>
+    </div>
 
-        <template v-slot:header-goal-list="prop">
-          <div class="row items-center">
-            <q-btn
-              icon="edit"
-              flat
-              round
-              size="sm"
-              color="orange"
-              @click="event => openEditGoalListDialog(prop.node, event)"
-            />
-            <div>{{ prop.node.item?.name || prop.node.label }}</div>
-            <q-badge
-              outline
-              color="orange"
-              class="q-ml-sm"
-            >
-              <div class="text-weight-bold q-my-xs">Goal List</div>
-            </q-badge>
-          </div>
-        </template>
+    <div class="col-1">
+      <q-card-actions class="full-height items-end">
+        <q-space/>
 
-        <template v-slot:header-category="prop">
-          <div class="row items-center">
-            <q-btn
-              icon="edit"
-              flat
-              round
-              size="sm"
-              color="orange"
-              @click="event => openEditCategoryDialog(prop.node, event)"
-            />
-            <div>{{ prop.node.item?.name || prop.node.label }}</div>
-            <q-badge
-              outline
-              color="blue"
-              class="q-ml-sm"
-            >
-              <div class="text-weight-bold q-my-xs">Category</div>
-            </q-badge>
-          </div>
-        </template>
-
-        <!-- Add Goal -->
-        <template v-slot:header-add-goal="prop">
-          <div class="row items-center">
-            <q-btn
-              outline
-              icon="add"
-              label="Goal"
-              color="light-blue"
-              size="sm"
-              @click="openEditGoalDialog(prop.node)"
-            ></q-btn>
-          </div>
-        </template>
-
-        <!-- Add Goal List -->
-        <template v-slot:header-add-goal-list="prop">
-          <div class="row items-center">
-            <q-btn
-              outline
-              icon="add"
-              label="Goal List"
-              color="light-blue"
-              size="sm"
-              @click="event => openEditGoalListDialog(prop.node, event)"
-            ></q-btn>
-          </div>
-        </template>
-
-        <!-- Add Category -->
-        <template v-slot:header-add-category="prop">
-          <div class="row items-center">
-            <q-btn
-              outline
-              icon="add"
-              label="Category"
-              color="light-blue"
-              size="sm"
-              @click="event => openEditCategoryDialog(prop.node, event)"
-            ></q-btn>
-          </div>
-        </template>
-      </q-tree>
-    </q-card-section>
-
-    <q-separator />
-
-    <q-card-actions>
-      <q-space/>
-
-      <q-btn
-        flat
-        color="red"
-        icon="cancel"
-        label="Cancel"
-        :loading="loading"
-        @click="cancel"
-      />
-      <q-btn
-        flat
-        color="green"
-        icon="save"
-        label="Save"
-        :loading="loading"
-        @click="saveGame"
-      />
-    </q-card-actions>
+        <q-btn
+          flat
+          color="red"
+          icon="cancel"
+          label="Cancel"
+          :loading="loading"
+          @click="cancel"
+        />
+        <q-btn
+          flat
+          color="green"
+          icon="save"
+          label="Save"
+          :loading="loading"
+          @click="saveGame"
+        />
+      </q-card-actions>
+    </div>
   </q-card>
 
-  <q-dialog v-model="info_dialog">
+  <q-dialog
+    v-model="description_dialog"
+    style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;"
+  >
+    <q-card
+      flat
+      bordered
+      class="full-width"
+    >
+      <q-card-section class="full-height">
+        <q-input
+          v-model="game_description"
+          class="full-height"
+          square
+          filled
+          counter
+          autogrow
+          maxlength="500"
+          label="Description"
+          type="text"
+        >
+        </q-input>
+      </q-card-section>
+
+      <q-card-actions>
+        <q-btn
+          flat
+          color="red"
+          icon="cancel"
+          label="Preview"
+          :loading="loading"
+          @click="openInfoDialog(game_description)"
+        />
+
+        <q-space/>
+
+        <q-btn
+          flat
+          color="red"
+          icon="cancel"
+          label="Save"
+          :loading="loading"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <q-dialog v-model="info_dialog" style="min-width: 700px; max-width: 80vw; min-height: 10vh; max-height: 80vh;">
     <q-card
       flat
       bordered
@@ -193,23 +313,34 @@ import {
 } from '@/js/lib/Util.ts';
 
 import BingoCategory from '@/js/lib/BingoCategory.ts';
-import type BingoGame from '@/js/lib/BingoGame.ts';
+import BingoGame from '@/js/lib/BingoGame.ts';
 import BingoGoal from '@/js/lib/BingoGoal.ts';
 import BingoGoalList from '@/js/lib/BingoGoalList.ts';
 import Parser from '@/js/lib/Parser.ts';
 
 const props = defineProps<{
-	game: BingoGame;
+	game?: BingoGame;
 }>();
 
 const emit = defineEmits([
 	'cancel',
-	'saveGame'
+	'addGame',
+	'updateGame'
 ]);
 
-const game = ref(Parser.getCopy(props.game));
+const game = ref(
+	props.game
+		? Parser.getCopy(props.game)
+		: new BingoGame('new-game', 'New Game', 'A short description', 'A long description')
+);
 game.value.is_local = true;
 
+const game_id = ref(game.value.id);
+const game_name = ref(game.value.name);
+const short_description = ref(game.value.short_description);
+const game_description = ref(game.value.description);
+const description_dialog = ref(false);
+
 const expanded = ref<Node[]>([]);
 
 const loading = ref(false);
@@ -223,7 +354,19 @@ function cancel() {
 function saveGame() {
 	loading.value = true;
 
-	emit('saveGame', game.value);
+	// Updating game
+	if (props.game) {
+		game.value.id = game_id.value;
+		game.value.name = game_name.value;
+		game.value.short_description = short_description.value;
+		game.value.description = game_description.value;
+
+		emit('updateGame', props.game, game.value);
+	}
+	// Adding game
+	else {
+		emit('addGame', game.value);
+	}
 }
 
 /* Info Dialog */
diff --git a/src/stores/local-games.ts b/src/stores/local-games.ts
index b53ecd8..19fae37 100644
--- a/src/stores/local-games.ts
+++ b/src/stores/local-games.ts
@@ -78,16 +78,16 @@ export const useLocalGamesStore = defineStore('localGames', () => {
 		await saveGames();
 	}
 
-	async function updateGame(game: BingoGame) {
-		if (!hasGame(game.id)) {
-			console.error(`Failed to update game with ID ${ game.id } because it doesn't exist`);
+	async function updateGame(old_game: BingoGame, game: BingoGame) {
+		if (!hasGame(old_game.id)) {
+			console.error(`Failed to update game with ID ${ old_game.id } because it doesn't exist`);
 
 			return;
 		}
 
-		console.info(`--- Updating game with ID '${ game.id }' ...`);
+		console.info(`--- Updating game with ID '${ old_game.id }' ...`);
 
-		const index = games.value.findIndex(g => g.id === game.id);
+		const index = games.value.findIndex(g => g.id === old_game.id);
 
 		games.value[index] = game;