Refactor modpack handling to support multiple modpacks and improve error handling in JSON responses

Author: tacxou

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacxtv/miratopia-launcher",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Launcher officiel du serveur Minecraft Miratopia",
   "main": "dist-electron/main.js",
   "repository": "https://github.com/tacxtv/miratopia-launcher.git",
@@ -52,4 +52,4 @@
   "peerDependencies": {
     "vue": "^3.4"
   }
-}
+}

src/app.vue

@@ -18,23 +18,29 @@ export default defineNuxtComponent({
         },
       })
     ).data
-    const modpack: Modpack = (
-      await axios.get('https://raw.githubusercontent.com/tacxtv/miratopia-launcher/config/modpacks/mirasurvie/modpack.json', {
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      })
-    ).data
+
+    let modpack
+    const modpacks = []
+    for await (const mp of launcher?.config?.modpacks) {
+      const mpk: Modpack = (
+        await axios.get(`https://raw.githubusercontent.com/tacxtv/miratopia-launcher/config/modpacks/${mp}/modpack.json`, {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+      ).data
+      modpacks.push(mpk)
+    }
 
     return {
       launcher,
-      modpack,
+      modpacks,
     }
   },
   provide() {
     return {
       'global-launcher': this.launcher,
-      'global-modpacks': [this.modpack],
+      'global-modpacks': this.modpacks,
     }
   },
   mounted() {},

src/components/modpack/display.vue

@@ -3,8 +3,8 @@ div.fit.flex(:style='{flexFlow: "column"}')
   div.fit.q-px-md.text-center.q-mt-lg
     q-img.q-ma-sm(src="https://raw.githubusercontent.com/tacxtv/miratopia-launcher/config/launcher/logo.png" height="auto" width="20%")
     q-img.q-ma-sm.q-mt-xl(src="https://raw.githubusercontent.com/tacxtv/miratopia-launcher/config/launcher/title.png" height="auto" width="70%")
-    //- h1.text-h4.text-center.q-mb-md(v-text='modpack.name')
-    //- small.text-center.q-mb-md(v-text='modpack.description')
+    h1.text-h4.text-center.q-mb-md(v-text='modpack.name')
+    small.text-center.q-mb-md(v-text='modpack.description')
   q-toolbar.q-mb-lg
     q-space
     q-btn.q-mx-sm(icon='mdi-cog' flat dense @click='openSettings')
@@ -46,8 +46,8 @@ export default defineNuxtComponent({
   }),
   methods: {
     openSettings() {
-      (this['settings-dialog'] as { data: boolean }).data = true;
-      (this['settings-tab'] as { data: string }).data = this.modpack.name;
+      ;(this['settings-dialog'] as { data: boolean }).data = true
+      ;(this['settings-tab'] as { data: string }).data = this.modpack.name
     },
     launchMinecraft() {
       this.logsDisplay = true
@@ -67,7 +67,7 @@ export default defineNuxtComponent({
       this.$nextTick(() => {
         const target = (this.$refs.chatScroll as InstanceType<typeof QScrollArea>)?.getScrollTarget()
         if (!target) return
-          ; (this.$refs.chatScroll as InstanceType<typeof QScrollArea>)?.setScrollPosition('vertical', target.scrollHeight, 0)
+        ;(this.$refs.chatScroll as InstanceType<typeof QScrollArea>)?.setScrollPosition('vertical', target.scrollHeight, 0)
       })
     })
     window.electron.onMinecraftStartup(() => {

src/electron/services/minecraft.service.ts

@@ -22,8 +22,15 @@ export class MinecraftService {
       headers: {
         'Content-Type': 'application/json',
       },
-    }).then((res) => res.json())
-    return list
+    }).then(async (res) => {
+      try {
+        return await res.json()
+      } catch (e) {
+        return []
+      }
+    })
+
+    return [...list]
   }
 
   public async registerEvents(): Promise<void> {

src/pages/index.vue

@@ -46,7 +46,6 @@ import type { Modpack } from '~~/types/modpack.type'
 export default defineNuxtComponent({
   inject: ['global-launcher', 'global-modpacks'],
   data: () => ({
-    tab: ref(''),
     videoPlayer: ref<HTMLVideoElement | null>(null),
     selectedVideo: '',
     settingsDialog: reactive({
@@ -73,6 +72,7 @@ export default defineNuxtComponent({
     },
   },
   setup() {
+    const tab = ref('')
     const videos = [
       {
         name: '/videos/Bateau_pirate.mp4',
@@ -166,6 +166,7 @@ export default defineNuxtComponent({
     const splitter = ref(25)
 
     return {
+      tab,
       videos,
       splitter,
       packageVersion: runtimeConfig.app.packageVersion,

types/launcher.type.ts

@@ -14,5 +14,6 @@ export type Launcher = {
         background: string
       }
     }
+    modpacks: string[]
   }
 }