Mark and link cells in the hex map

src/components/Sector/HexCell.vue

@@ -1,26 +1,31 @@
 <template>
-  <div>
-    <q-btn color="white" icon="" flat dense @click="myAlert" />
+  <div class="hex-cell" :style="{ background: colour }" @mouseover="hover = true" @mouseleave="hover = false">
+    <q-btn icon="" flat dense />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, computed, ref } from 'vue';
 import { IHex } from '../models';
 export default defineComponent({
   name: 'HexCell',
   props: {
     cellData: {
       type: Object as PropType<IHex>,
+      required: true,
     },
   },
-  setup() {
-    const myAlert = () => {
-      alert('CLICK');
-    };
+  setup(props) {
+    const hover = ref(false);
+    const colour = computed((): string => {
+      if (hover.value) return 'lightgrey';
+      if (props.cellData.id !== '') return 'black';
+      return props.cellData.isPassage ? 'lightblue' : 'white';
+    });
 
     return {
-      myAlert,
+      hover,
+      colour,
     };
   },
 });

src/components/Sector/HexMap.vue

@@ -4,36 +4,101 @@
       <q-page>
         <div class="map">
           <div class="container">
-            <hex-cell v-for="(o, i) in campaign.data.sectors[config.data.sector].hexes" :key="i" :cellData="o" />
+            <hex-cell v-for="(o, i) in campaign.data.sectors[config.data.sector].hexes" :key="i" :cellData="o" @click="clickHex(o, i)" />
           </div>
         </div>
       </q-page>
     </q-page-container>
+
+    <q-dialog v-model="showDialog">
+      <q-card>
+        <q-card-section class="row my-card justify-between items-center text-h5 custom-header">
+          <div class="col-shrink">Edit Cell</div>
+          <q-btn class="col-shrink" icon="close" flat dense @click="showDialog = false" />
+        </q-card-section>
+
+        <q-card-section>
+          <div class="row items-center q-gutter-sm">
+            <span class="col-shrink text-h6">Set Location</span>
+            <location-select class="col" @selected="linkCell($event)" />
+          </div>
+
+          <div class="row items-center q-gutter-sm">
+            <span class="col-shrink">Mark as </span>
+            <q-toggle class="col-shrink" label="Passage" v-model="campaign.data.sectors[config.data.sector].hexes[selectedHex].isPassage" />
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
   </q-layout>
 </template>
 
 <script lang="ts">
 import { useCampaign } from 'src/store/campaign';
 import { useConfig } from 'src/store/config';
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
+import { IHex } from '../models';
 import HexCell from './HexCell.vue';
+import LocationSelect from 'src/components/LocationSelect.vue';
 
 export default defineComponent({
-  components: { HexCell },
+  components: { HexCell, LocationSelect },
   name: 'HexMap',
   setup() {
     const campaign = useCampaign();
     const config = useConfig();
 
+    const showDialog = ref(false);
+    const selectedHex = ref(0);
+    const clickHex = (o: IHex, i: number) => {
+      selectedHex.value = i;
+      if (!o.isPassage && o.id === '') {
+        campaign.data.sectors[config.data.sector].hexes[i].isPassage = true;
+        return;
+      }
+      if (o.isPassage || o.id !== '') {
+        showDialog.value = true;
+      }
+    };
+
+    const unlinkCell = (id: string) => {
+      campaign.data.sectors.forEach((s, sI) => {
+        s.hexes.forEach((h, hI) => {
+          if (h.id === id) {
+            campaign.data.sectors[sI].hexes[hI].id = '';
+            return;
+          }
+        });
+      });
+    };
+
+    const linkCell = (args: { sector: number; cell: number }) => {
+      // Unmark as passage
+      campaign.data.sectors[config.data.sector].hexes[selectedHex.value].isPassage = false;
+
+      // Get cell id
+      const id = campaign.data.sectors[args.sector].cells[args.cell].id;
+
+      // unlink cell from any other maps
+      unlinkCell(id);
+
+      // Set cell id for item
+      campaign.data.sectors[config.data.sector].hexes[selectedHex.value].id = id;
+    };
+
     return {
       campaign,
       config,
+      showDialog,
+      selectedHex,
+      clickHex,
+      linkCell,
     };
   },
 });
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
 .map {
   width: 800px;
   height: 330px;

src/components/Sector/SPlanet.vue

@@ -75,7 +75,7 @@ export default defineComponent({
     const $q = useQuasar();
 
     const icon = computed((): string => {
-      return `img:icons/planets/${data.value.type.toLowerCase()}.svg`;
+      return `img:icons/planets/${data.value.type.toLowerCase()}.png`;
     });
     return {
       $q,

src/store/campaign.ts

@@ -72,10 +72,12 @@ export const useCampaign = defineStore({
     },
 
     async new() {
+      const config = useConfig();
+      config.data.sector = 0;
+
       const newCam = NewCampaign();
       this.data = newCam;
 
-      const config = useConfig();
       config.data.current = this.data.id;
       config.data.index.push({ name: this.data?.name, id: this.data.id });