Compat template

src/App.vue

@@ -1,39 +1,45 @@
 <template>
-
-
   <v-app>
-
     <v-main>
+      <!-- Navigation Bar -->
       <div>
         <v-toolbar app dark style="background-color: rgb(35 35 35);" class="hidden-xs-and-down">
           <v-toolbar-title>UWUVCI</v-toolbar-title>
           <v-spacer></v-spacer>
           <v-toolbar-items>
+            <!-- Compatibility Dropdown Menu -->
             <v-menu>
               <template v-slot:activator="{ props }">
                 <v-btn color="primary" v-bind="props">
                   Compatibility ▾
                 </v-btn>
               </template>
               <v-list>
+                <!-- Links to Compatibility Pages -->
                 <v-list-item>
-                  <v-btn lock style="background-color: transparent; width: 100%; text-align: left" to="/ndscompat" title="">
+                  <v-btn style="background-color: transparent; width: 100%; text-align: left" to="/ndscompat" title="">
                     NDS
                   </v-btn>
                 </v-list-item>
+                <v-list-item>
+                  <v-btn style="background-color: transparent; width: 100%; text-align: left" to="/n64compat" title="">
+                    N64
+                  </v-btn>
+                </v-list-item>
               </v-list>
-            </v-menu>  
-            <v-btn lock color="primary" to="/" title="">
+            </v-menu>
+            <v-btn color="primary" to="/" title="">
               Home
             </v-btn>
           </v-toolbar-items>
         </v-toolbar>
       </div>
 
-      <router-view></router-view>
-
+      <!-- Page content, force re-render on route change -->
+      <router-view :key="$route.fullPath"></router-view>
     </v-main>
-
+
+    <!-- Footer -->
     <v-footer height="40" app>
       <a
         v-for="item in items"
@@ -55,6 +61,7 @@
 </template>
 
 <script setup>
+// Social Links
 const items = [
   {
     title: 'UWUVCI GitHub',
@@ -63,7 +70,9 @@ const items = [
   },
   {
     title: 'UWUVCI Discord',
-    icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
+    icon: [
+      'M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z',
+    ],
     href: 'https://discord.gg/ultimate-wiiu-vc-injectors-386898225161961493',
   },
   {

src/views/NDSCompat.vue → src/components/CompatTemplate.vue

@@ -2,13 +2,12 @@
   <v-container class="fill-height">
     <v-responsive class="align-center fill-height mx-auto" max-width="xs:370 700">
       <div>
-
         <!-- Title Card -->
         <v-row>
           <v-col cols="12">
             <v-card class="py-4" color="surface-variant" rounded="lg" variant="outlined">
               <v-card-text class="xs:text-sm-body-2 text-h5 font-weight-bold" style="text-align:center">
-                UWUVCI NDS Compatibility List
+                UWUVCI {{ title }} Compatibility List
               </v-card-text>
 
               <v-overlay
@@ -93,12 +92,14 @@
 </template>
 
 <script setup>
-// Import the global compatibility service
 import { fetchCompatibilityData, fixCompatibilityData } from '@/services/compatibilityService';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-const search = ref('');  // Bound to the search field
-const compatibility = ref({});  // Holds compatibility data
+const route = useRoute();
+const router = useRouter();
+const search = ref('');
+const compatibility = ref({});
 const headers = ref([
   { title: 'Game Name', align: 'start', sortable: true, value: 'game_name' },
   { title: 'Game Region', sortable: true, value: 'game_region' },
@@ -108,12 +109,44 @@ const headers = ref([
   { title: 'Notes', sortable: false, value: 'notes' },
 ]);
 
-// Fetch and process compatibility data when the component is mounted
-onMounted(async () => {
-  const data = await fetchCompatibilityData();  // Fetch JSON data dynamically
-  if (data) {
-    compatibility.value = data;  // Assign fetched data to compatibility ref
-    fixCompatibilityData(compatibility.value);  // Process and fix data
+// Function to capitalize the first letter of the console name (e.g., ndscompat -> NDS)
+function formatTitleFromRoute(routeName) {
+  return routeName.charAt(0).toUpperCase() + routeName.slice(1, 3).toUpperCase(); // For "ndscompat" => "NDS"
+}
+
+const title = ref('');
+const jsonFileName = ref('');
+
+// Function to fetch the compatibility data
+async function loadCompatibilityData() {
+  try {
+    const data = await fetchCompatibilityData(jsonFileName.value);  // Fetch JSON data dynamically
+    if (data) {
+      compatibility.value = data;
+      fixCompatibilityData(compatibility.value);
+    }
+  } catch (error) {
+    console.error("Error fetching compatibility data:", error);
   }
+}
+
+// Initialize title and jsonFileName, and then fetch the data
+function initializePageData() {
+  const routeCompat = route.params.consolecompat; // Get consolecompat from route
+  title.value = formatTitleFromRoute(routeCompat);
+  jsonFileName.value = `${title.value}Compat.json`;  // Construct the JSON filename
+  loadCompatibilityData();  // Fetch compatibility data
+}
+
+// Fetch data on component mount after initializing page data
+onMounted(() => {
+  initializePageData();  // Run initialization on mount
+});
+
+// Watch for route changes and update the title and json file name dynamically
+watch(() => route.params.consolecompat, () => {
+  title.value = formatTitleFromRoute(route.params.consolecompat);  // Update title for the new route
+  jsonFileName.value = `${title.value}Compat.json`;  // Update JSON filename
+  loadCompatibilityData();  // Fetch compatibility data for the new route
 });
 </script>

src/router/index.js

@@ -1,13 +1,22 @@
 // Import Vue Router and views
 import { createRouter, createWebHashHistory } from 'vue-router';
 import Home from '@/views/Home.vue';
-import NDSCompat from '@/views/NDSCompat.vue';
+import CompatTemplate from '@/components/CompatTemplate.vue';
 
 // Define routes manually (couldn't get dynamic working)
 const routes = [
   { path: '/', name: 'Home', component: Home },
-  { path: '/ndscompat', name: 'NDSCompat', component: NDSCompat },
-  { path: '/:pathMatch(.*)*', redirect: '/' }, // Handle unmatched routes
+
+  // Use :consolecompat as a dynamic param to handle all compatibility pages
+  {
+    path: '/:consolecompat',
+    name: 'Compat',
+    component: CompatTemplate,
+  },
+  {
+    path: '/:pathMatch(.*)*', // Handle unmatched paths
+    redirect: '/', // Redirect to the home page
+  },
 ];
 
 // Create a new Vue Router instance with manual routing

src/services/compatibilityService.js

@@ -1,11 +1,6 @@
-import { useRoute } from 'vue-router';
-
 // Function to fetch the JSON file dynamically based on the current route
-export async function fetchCompatibilityData() {
-  const route = useRoute();  // Get the current route
-  const routeName = route.name || 'default';  // Use route name, fallback to 'default'
-
-  const jsonUrl = `https://raw.githubusercontent.com/UWUVCI-PRIME/UWUVCI-Compatibility/main/${routeName}.json`;
+export async function fetchCompatibilityData(jsonFileName) {
+  const jsonUrl = `https://raw.githubusercontent.com/UWUVCI-PRIME/UWUVCI-Compatibility/main/${jsonFileName}`;
 
   try {
     // Fetch the JSON data