From 7289717ca02de45780344b6150818651deb17afd Mon Sep 17 00:00:00 2001
From: KZacharski <puffercatt@gmail.com>
Date: Fri, 22 Dec 2023 02:42:25 +0100
Subject: [PATCH] Fixed coming soon routing except duo is broken and it won't
 tell me why

---
 src/views/ComingSoon.vue | 72 +++++++++++++++++++++++-----------------
 src/views/Duo.vue        |  2 +-
 2 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/views/ComingSoon.vue b/src/views/ComingSoon.vue
index f197e85..8c2d448 100644
--- a/src/views/ComingSoon.vue
+++ b/src/views/ComingSoon.vue
@@ -89,59 +89,81 @@
         </ion-toolbar>
       </ion-header>
       <ion-grid>
-  <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/PufferIcons_Filled" class="hidden-link"><img src="../assets/Icon_PufferIcons_Filled.png" class="icon"></a>
+        <ion-row class="column-standard">
+    <ion-col size="auto" button @click="() => router.push('/details/PufferIcons_Filled')">
+      <img src="../assets/Icon_PufferIcons_Filled.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/PufferIcons_Filled')">
         <ion-row>
-          <a href="/details/PufferIcons_Filled" class="hidden-link"><ion-column><h4 class="size-appname">PufferIcons Filled</h4></ion-column></a>
+          <ion-column><h4 class="size-appname">PufferIcons Filled</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/PufferIcons_Filled" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
+          <ion-column button @click="() => router.push('/details/PufferIcons_Filled')"><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column>
         </ion-row>
+    </ion-col>
+    <ion-col>
+
     </ion-col>
     <ion-col class="download-column">
       <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
+  
+
   <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/WallCat" class="hidden-link"><img src="../assets/Icon_WallCat.png" class="icon"></a>
+    <ion-col size="auto" button @click="() => router.push('/details/WallCat')">
+      <img src="../assets/Icon_WallCat.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/WallCat')">
         <ion-row>
-          <a href="/details/WallCat" class="hidden-link"><ion-column><h4 class="size-appname">WallCat</h4></ion-column></a>
+          <ion-column><h4 class="size-appname">WallCat</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/WallCat" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
+          <ion-column button @click="() => router.push('/details/WallCat')"><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column>
         </ion-row>
+    </ion-col>
+    <ion-col>
+
     </ion-col>
     <ion-col class="download-column">
       <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
+
   <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/Duo" class="hidden-link"><img src="../assets/Icon_Duo.png" class="icon"></a>
+    <ion-col size="auto" button @click="() => router.push('/details/Duo')">
+      <img src="../assets/Icon_Duo.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/Duo')">
         <ion-row>
-          <a href="/details/Duo" class="hidden-link"><ion-column><h4 class="size-appname">Duo</h4></ion-column></a>
+          <ion-column><h4 class="size-appname">Duo</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/Duo" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
+          <ion-column button @click="() => router.push('/details/Duo')"><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column>
         </ion-row>
+    </ion-col>
+    <ion-col>
+
     </ion-col>
     <ion-col class="download-column">
       <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
+
+  
 </ion-grid>
     </ion-content>
   </ion-page>
 </template>
 
+
+
+<script setup lang="ts">
+
+
+const router = useRouter();
+</script>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
@@ -153,22 +175,10 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid,
     IonLabel, IonPopover } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
+import { useRouter } from 'vue-router';
 
-export default  defineComponent({
-  name: 'Tab1Page',
-  components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
-      IonModal,
-      IonItem,
-      IonList, IonPopover },
-  setup() {
-    return {
-      logoAndroid,
-      arrowDown,
-      logoPwa,
-      ellipsisVertical
-    }
-  },
-    methods: {
+export default defineComponent ({
+  methods: {
       dismiss() {
         (this.$refs.modal as InstanceType<typeof IonModal>).$el.dismiss();
       },
diff --git a/src/views/Duo.vue b/src/views/Duo.vue
index 69217a0..9230a02 100644
--- a/src/views/Duo.vue
+++ b/src/views/Duo.vue
@@ -82,7 +82,7 @@
   </template>
   
   <script lang="ts">
-  import { defineComponent } from 'vue';
+ import { defineComponent } from 'vue';
   import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
       IonModal,
       IonItem,