mgba, binjgb: require a click to start emulation

gbdev · Dec 11, 2024 · 323b247 · 323b247
1 parent 43a8b38
commit 323b247
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 37 deletions.
diff --git a/plugins/Emulator.vue b/plugins/Emulator.vue
@@ -5,15 +5,27 @@
 -->
 <template>
   <div>
-    <div ref="gamediv" style="width: 100%">
+    <div v-show="loading == 0" @click="start()">
+      <center>
+        <i class="pi pi-play" style="font-size: 5rem"></i> <br />
+        <h4>Click here to start the emulation</h4>
+      </center>
+    </div>
+
+    <div
+      ref="gamediv"
+      style="width: 100%"
+      @click="start()"
+      v-show="loading == 1"
+    >
       <Button
         @click="toggleFullscreen"
         label="Fullscreen"
         icon="pi pi-desktop"
         iconPos="right"
         class="p-button-text"
       /><br />
-      {{ loading }}
+
       <canvas class="shadow-3 gamecanvas" ref="gamecanvas"></canvas>
       <div id="controller">
         <div id="controller_dpad">
@@ -32,7 +44,7 @@
     <br />
 
     <br />
-    <div class="grid p-fluid">
+    <div class="grid p-fluid" v-show="loading == 1">
       <div class="col-12 md:col-8 vertical-align-bottom">
         <div style="padding: 1rem">
           <Slider
@@ -137,7 +149,7 @@ export default {
         GBC: "The game supports Game Boy Color features",
         SGB: "The game supports Super Game Boy features",
       },
-      loading: "Loading emulator..",
+      loading: 0,
       gamerom: null,
       fps: 60,
       ticks: 0,
@@ -180,33 +192,36 @@ export default {
     Emulator.stop();
   },
   mounted: function () {
-    // Expose the context to the non-vue emulator code below so it can access the canvas and the emulator settings.
-    window.vm = this;
-
-    // Download the ROM from the found endpoint
-    fetch(this.romEndpoint).then((response) => {
-      let gameblob = response.blob().then((blob) => {
-        // Get the Blob
-        this.gamerom = blob;
-        this.loading = null;
-        // Lesssssgooooooo
-        this.playROM();
-        // Let's check if there are some query param we should honor
-        if (this.$route.query.palette) {
-          // Set the desired palette
-          let queryvalue = parseInt(this.$route.query.palette);
-          if (queryvalue < 0) {
-            queryvalue = 0;
-          } else if (queryvalue > 85) {
-            queryvalue = 85;
-          }
-          this.pal = queryvalue;
-          this.setPal(queryvalue);
-        }
-      });
-    });
+    //this.start()
   },
   methods: {
+    start: function () {
+      // Expose the context to the non-vue emulator code below so it can access the canvas and the emulator settings.
+      window.vm = this;
+
+      // Download the ROM from the found endpoint
+      fetch(this.romEndpoint).then((response) => {
+        let gameblob = response.blob().then((blob) => {
+          // Get the Blob
+          this.gamerom = blob;
+          this.loading = 1;
+          // Lesssssgooooooo
+          this.playROM();
+          // Let's check if there are some query param we should honor
+          if (this.$route.query.palette) {
+            // Set the desired palette
+            let queryvalue = parseInt(this.$route.query.palette);
+            if (queryvalue < 0) {
+              queryvalue = 0;
+            } else if (queryvalue > 85) {
+              queryvalue = 85;
+            }
+            this.pal = queryvalue;
+            this.setPal(queryvalue);
+          }
+        });
+      });
+    },
     togglemute: function () {
       if (this.mute) {
         // If unmuting, set the old volume back

diff --git a/plugins/Medusa.vue b/plugins/Medusa.vue
@@ -3,11 +3,17 @@
   build of the mGBA emulator.
 -->
 <template>
-  <div style="text-align: center" v-if="loading">
+  <div style="text-align: center" v-if="loading == 1">
     <ProgressSpinner style="width: 32px; height: 32px" strokeWidth="4" />
-    <Button :label="loading" class="p-button-text" disabled />
+    <Button label="Loading game ROM.." class="p-button-text" disabled />
   </div>
-  <div v-show="loading == ''">
+  <div v-show="loading == 0" @click="start()" style="padding: 75px">
+    <center>
+      <i class="pi pi-play" style="font-size: 5rem"></i> <br />
+      <h4>Click here to start the emulation</h4>
+    </center>
+  </div>
+  <div v-show="loading == 2">
     <Button
       @click="toggleFullscreen"
       label="Fullscreen"
@@ -60,13 +66,13 @@ export default {
   },
   data() {
     return {
-      volume: 0.1,
+      volume: 0.8,
       started: false,
-      loading: "Fetching game ROM file...",
+      loading: 0,
     };
   },
   mounted: function () {
-    this.start();
+    //this.start();
   },
   methods: {
     unmute: function () {
@@ -81,7 +87,7 @@ export default {
 
       fetch(this.romEndpoint).then((response) => {
         let gameblob = response.blob().then((blob) => {
-          this.loading = "Loading emulator..";
+          this.loading = 1;
           mGBA(window.Module).then(() => {
             window.Module.FS.mkdir("/hh-gba-data");
             window.Module.FS.mount(
@@ -96,7 +102,7 @@ export default {
                 new Uint8Array(data),
               );
               window.Module.loadFile("/hh-gba-data/game.gba");
-              this.loading = "";
+              this.loading = 2;
               window.Module._setVolume(0.1);
             });
           });