update deps, improve editor UX, basic validation checks for tables

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stargazer",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "An app for journaling solo Ironsworn: Starforged campaigns",
   "productName": "Stargazer",
   "author": "Nick Boughton <[email protected]>",
@@ -11,14 +11,14 @@
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
-    "@quasar/extras": "^1.13.4",
+    "@quasar/extras": "^1.14.3",
     "@svgdotjs/svg.js": "^3.1.1",
     "core-js": "^3.19.0",
     "dataforged": "^1.2.2",
     "dexie": "^3.0.3",
     "honeycomb-grid": "^3.1.8",
     "pinia": "^2.0.0",
-    "quasar": "^2.6.2",
+    "quasar": "^2.7.5",
     "sanitize-html": "^2.5.2",
     "seedrandom": "^3.0.5",
     "showdown": "^2.1.0",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.15.8",
-    "@quasar/app-webpack": "^3.4.7",
+    "@quasar/app-webpack": "^3.5.7",
     "@types/node": "^16.11.6",
     "@types/sanitize-html": "^2.5.0",
     "@types/seedrandom": "^3.0.1",

src/components/Oracles/OEditor.vue

@@ -4,35 +4,44 @@
     <q-card-section class="row full-width q-gutter-sm items-baseline">
       <q-input class="col-grow" label="Name" v-model="data.Name" />
       <span>Dice:</span>
-      <q-select :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" v-model="diceNum" dense outlined :placeholder="1" />
+      <q-select :options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" v-model="diceNum" dense outlined />
       <span>d</span>
-      <q-select :options="[2, 4, 6, 8, 10, 12, 20, 100]" v-model="diceSize" dense outlined :placeholder="100" />
-      <!--q-input class="col" label="Dice" v-model="data.Dice" dense placeholder="1d100" /-->
+      <q-select :options="[2, 4, 6, 8, 10, 12, 20, 100]" v-model="diceSize" dense outlined />
     </q-card-section>
 
     <q-card-section>
       <div class="row justify-between items-center q-ml-sm">
         <div class="col-grow text-bold">Add Row</div>
         <q-btn class="col-shrink" icon="add_circle" flat dense @click="addRow" />
       </div>
-      <div class="row q-ml-sm" v-for="(row, index) of data.Table" :key="index">
-        <q-input class="col-2" v-model="data.Table![index].Floor" label="Floor" dense />
-        <q-input class="col-2" v-model="data.Table![index].Ceiling" label="Ceiling" dense />
+      <div class="row q-ml-sm items-center" v-for="(row, index) of data.Table" :key="index">
+        <q-input class="col-2" v-model.number="data.Table![index].Floor" label="Floor" dense />
+        <q-input class="col-2" v-model.number="data.Table![index].Ceiling" label="Ceiling" dense />
         <q-input class="col" v-model="data.Table![index].Result" label="Result Text" dense />
-        <q-btn class="col-shrink" icon="delete" flat dense @click="removeRow(index)" />
+        <q-icon class="col-shrink q-px-xs" v-if="badRows[index]" name="error" color="negative" size="sm">
+          <q-tooltip>{{ badRows[index].join(', ') }}</q-tooltip>
+        </q-icon>
+        <q-btn class="col-shrink" icon="delete" flat dense @click="removeRow(index)">
+          <q-tooltip>Remove row</q-tooltip>
+        </q-btn>
       </div>
     </q-card-section>
-    <q-card-actions class="justify-end">
-      <q-btn
-        label="Save"
-        flat
-        color="positive"
-        @click="
-          save();
-          $emit('close');
-        "
-      />
-      <q-btn label="Close" flat color="negative" @click="$emit('close')" />
+    <q-card-actions class="justify-between row">
+      <div class="col-shrink">
+        <q-btn label="Delete" flat class="self-start" color="warning" @click="del" />
+      </div>
+      <div class="col-shrink">
+        <q-btn
+          label="Save"
+          flat
+          color="positive"
+          @click="
+            save();
+            $emit('close');
+          "
+        />
+        <q-btn label="Close" flat color="negative" @click="$emit('close')" />
+      </div>
     </q-card-actions>
   </q-card>
 </template>
@@ -43,6 +52,7 @@ import { computed, defineComponent, PropType, ref, watch } from 'vue';
 import { ICustomOracle } from '../models';
 
 import { useOracles } from 'src/store/oracles';
+import { useQuasar } from 'quasar';
 
 export default defineComponent({
   name: 'OEditor',
@@ -53,46 +63,140 @@ export default defineComponent({
     },
   },
   emits: ['close'],
-  setup(props) {
+  setup(props, { emit }) {
+    const $q = useQuasar();
     const oracles = useOracles();
     const data = ref(props.oracle);
 
     // This is lazy, probably needs to be more robust
     const splitD = data.value.Dice?.split('d') as string[];
     const diceNum = ref(+splitD[0]);
     const diceSize = ref(+splitD[1]);
-    const diceStr = computed((): string => `${diceNum.value}d${diceSize.value}`);
     watch(
-      () => diceStr.value,
-      () => (data.value.Dice = diceStr.value)
+      () => [diceNum.value, diceSize.value],
+      () => (data.value.Dice = `${diceNum.value}d${diceSize.value}`)
     );
 
-    // TODO:
-    //  [*] validate dice string before saving
-    //  [*] first row should reflect min dice n
-    //  [*] subsequent rows should set floor to prev row floor + 1
-    //  [ ] validate that all results are valid and no crossover
     const addRow = () => {
       if (data.value.Table) {
-        data.value.Table.length === 0
-          ? data.value.Table.push({ Floor: diceNum.value, Ceiling: diceNum.value + 1, Result: '' })
-          : data.value.Table.push({
-              Floor: data.value.Table[data.value.Table.length - 1].Ceiling,
-              Ceiling: (data.value.Table[data.value.Table.length - 1].Ceiling as number) + 1,
-              Result: '',
-            });
+        if (data.value.Table.length === 0) {
+          data.value.Table.push({ Floor: diceNum.value, Ceiling: diceNum.value + 1, Result: '' });
+        } else {
+          const n = data.value.Table[data.value.Table.length - 1].Ceiling as number;
+          data.value.Table.push({
+            Floor: n + 1,
+            Ceiling: n + 2,
+            Result: '',
+          });
+        }
       }
     };
-    const removeRow = (index: number) => data.value.Table?.splice(index, 1);
+    const removeRow = (index: number) => {
+      $q.notify({
+        message: 'Delete this row?',
+        color: 'warning',
+        textColor: 'dark',
+        position: 'center',
+        timeout: 0,
+        actions: [
+          {
+            label: 'Yes',
+            color: 'negative',
+            handler: () => {
+              data.value.Table?.splice(index, 1);
+            },
+          },
+          {
+            label: 'No',
+            color: 'dark',
+            handler: () => {
+              console.log('No toucha da fishie');
+            },
+          },
+        ],
+      });
+    };
+
+    interface IBadRows {
+      [index: number]: string[];
+    }
+    const badRows = computed((): IBadRows => {
+      const rows: IBadRows = {};
+      const min = diceNum.value;
+      const max = diceNum.value * diceSize.value;
+
+      const numbers: { [index: number]: number } = {};
+
+      data.value.Table?.forEach((r, i) => {
+        const f = r.Floor != null ? +r.Floor : 0;
+        const c = r.Ceiling != null ? +r.Ceiling : 0;
+
+        if (c < f) {
+          if (!rows[i]) rows[i] = [];
+          rows[i].push('Ceiling lower than Floor');
+        }
+
+        // Check floor/ceiling don't fall outside of min/max
+        if (f < min) {
+          if (!rows[i]) rows[i] = [];
+          rows[i].push('Floor out of bounds');
+        }
+
+        if (c > max) {
+          if (!rows[i]) rows[i] = [];
+          rows[i].push('Ceiling out of bounds');
+        }
+
+        // Collate every possible result range to check for overlaps
+        for (let n = f; n <= c; n++) {
+          numbers[n] ? numbers[n]++ : (numbers[n] = 1);
+
+          if (numbers[n] > 1) {
+            if (!rows[i]) rows[i] = [];
+            rows[i].push(`result number duplicate: ${n}`);
+          }
+        }
+      });
+      return rows;
+    });
+
     const save = () => oracles.save(data.value);
 
+    const del = () =>
+      $q.notify({
+        message: 'Delete this Oracle?',
+        color: 'warning',
+        textColor: 'dark',
+        position: 'center',
+        timeout: 0,
+        actions: [
+          {
+            label: 'Yes',
+            color: 'negative',
+            handler: () => {
+              oracles.delete(data.value).catch((err) => console.log(err));
+              emit('close');
+            },
+          },
+          {
+            label: 'No',
+            color: 'dark',
+            handler: () => {
+              console.log('No toucha da fishie');
+            },
+          },
+        ],
+      });
+
     return {
       data,
       diceNum,
       diceSize,
       addRow,
       removeRow,
       save,
+      del,
+      badRows,
     };
   },
 });

src/components/Oracles/Oracles.vue

@@ -126,6 +126,13 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 
+import { ICustomOracle } from '../models';
+
+import { useOracles } from 'src/store/oracles';
+
+import { NewCustomOracle } from 'src/lib/oracles';
+import { deepCopy } from 'src/lib/util';
+
 import OSpace from './OSpace.vue';
 import OPlanet from './OPlanet.vue';
 import OSettlement from './OSettlement.vue';
@@ -139,9 +146,6 @@ import OFaction from './OFaction.vue';
 import OLocationTheme from './OLocationTheme.vue';
 import OMisc from './OMisc.vue';
 import OCustom from './OCustom.vue';
-import { ICustomOracle } from '../models';
-import { NewCustomOracle } from 'src/lib/oracles';
-import { useOracles } from 'src/store/oracles';
 import OEditor from './OEditor.vue';
 
 export default defineComponent({
@@ -170,7 +174,9 @@ export default defineComponent({
       showEditor.value = true;
     };
     const editOracle = (id: string) => {
-      editorData.value = useOracles().data.find((o) => o.$id === id) as ICustomOracle;
+      // make a copy so that we don't pass a reference and modify the store
+      const d = useOracles().data.find((o) => o.$id === id) as ICustomOracle;
+      editorData.value = deepCopy(d);
       showEditor.value = true;
     };
 

src/lib/util.ts

@@ -43,3 +43,5 @@ export const now = (): string => {
 
   return `${YYYY}${MM}${DD}_${hh}${mm}`;
 };
+
+export const deepCopy = <T>(obj: T): T => JSON.parse(JSON.stringify(obj)) as T;

src/store/campaign.ts

@@ -28,8 +28,22 @@ export const useCampaign = defineStore({
   },
 
   actions: {
+    /* This is a problem to be solved another day
+    moveItem<T>(
+      obj: T,
+      type: ESectorOpts,
+      index: number,
+      from: { sector: number; cell: string },
+      to: { sector: number; cell: string }
+    ) {
+      this.data.sectors[to.sector].cells[to.cell][type].unshift(obj as unknown as T);
+      this.data.sectors[from.sector].cells[from.cell][type].splice(index, 1);
+    },
+    */
     moveSighting(index: number, from: { sector: number; cell: string }, to: { sector: number; cell: string }) {
-      const o = JSON.parse(JSON.stringify(this.data.sectors[from.sector].cells[from.cell].stars[index])) as ISighting;
+      const o = JSON.parse(
+        JSON.stringify(this.data.sectors[from.sector].cells[from.cell].sightings[index])
+      ) as ISighting;
       this.data.sectors[to.sector].cells[to.cell].sightings.unshift(o);
       this.data.sectors[from.sector].cells[from.cell].sightings.splice(index, 1);
     },