feat: n64 states saving

Author: arianrhodsandlot

src/constants/core.ts

@@ -19,7 +19,7 @@ export const cores = {
   mednafen_vb: { displayName: 'Beetle VB' },
   mednafen_wswan: { displayName: 'Beetle Wonderswan' },
   mgba: { displayName: 'mGBA' },
-  'mupen64plus-libretro-nx': { displayName: 'Mupen64Plus-Next' },
+  mupen64plus_next: { displayName: 'Mupen64Plus-Next' },
   nestopia: { displayName: 'Nestopia' },
   o2em: { displayName: 'O2EM' },
   pcsx_rearmed: { displayName: 'PCSX ReARMed' },

src/constants/platform.ts

@@ -264,7 +264,7 @@ const basePlatformMap = {
     libretroName: 'Sega - Mega Drive - Genesis',
   },
   n64: {
-    cores: ['mupen64plus-libretro-nx'],
+    cores: ['mupen64plus_next'],
     displayNameI18nKey: 'platform.n64',
     fileExtensions: ['.n64', '.z64', '.v64', '.zip'],
     info: {

src/pages/library/components/emulator-portal/hooks/use-emulator.ts

@@ -1,4 +1,4 @@
-import { attemptAsync, noop } from 'es-toolkit'
+import { attemptAsync, delay, noop } from 'es-toolkit'
 import NoSleep from 'nosleep.js'
 import { Nostalgist } from 'nostalgist'
 import { useEffect, useMemo } from 'react'
@@ -32,13 +32,13 @@ const defaultRetroarchConfig: RetroarchConfig = {
   input_player2_analog_dpad_mode: 1,
   input_player3_analog_dpad_mode: 1,
   input_player4_analog_dpad_mode: 1,
-  rewind_enable: true,
   rewind_granularity: 4,
   rgui_menu_color_theme: 1,
-  run_ahead_enabled: true,
   run_ahead_frames: 1,
+  video_gpu_screenshot: true,
 }
 
+const nativeConsoleError = console.error
 let noSleep: NoSleep
 const originalGetUserMedia = globalThis.navigator?.mediaDevices?.getUserMedia?.bind(globalThis.navigator.mediaDevices)
 export function useEmulator() {
@@ -79,6 +79,8 @@ export function useEmulator() {
         ...defaultRetroarchConfig,
         ...preference.input.keyboardMapping,
         ...gamepadMapping,
+        rewind_enable: !['mupen64plus_next'].includes(core),
+        run_ahead_enabled: !['mupen64plus_next', 'pcsx_rearmed'].includes(core),
         video_smooth: preference.emulator.videoSmooth,
       },
       retroarchCoreConfig: preference.emulator.core[core],
@@ -95,6 +97,7 @@ export function useEmulator() {
     isValidating,
     mutate: prepare,
   } = useSWRImmutable(options, () => Nostalgist.prepare(options))
+  globalThis.emulator = emulator
 
   const isPreparing = !rom || isValidating
 
@@ -103,6 +106,7 @@ export function useEmulator() {
       return
     }
 
+    console.error = () => {}
     if (!withState) {
       emulator.getEmulator().on('beforeLaunch', () => {
         try {
@@ -153,9 +157,18 @@ export function useEmulator() {
     onCancel(noop)
     noSleep ||= new NoSleep()
     await noSleep.enable()
+
+    // ad-hoc patch for mupen64plus_next
+    if (core === 'mupen64plus_next') {
+      await delay(0)
+      emulator.sendCommand('PAUSE_TOGGLE')
+      await delay(0)
+      emulator.sendCommand('PAUSE_TOGGLE')
+    }
   }
 
   async function exit({ reloadAfterExit = false } = {}) {
+    console.error = nativeConsoleError
     const status = emulator?.getStatus() || ''
     if (['paused', 'running'].includes(status)) {
       emulator?.exit()

src/pages/library/components/emulator-portal/hooks/use-game-states.ts

@@ -25,6 +25,42 @@ async function getStateAndThumbnail(emulator: Nostalgist, object: { state?: File
   return { state, thumbnail }
 }
 
+async function forceGetEmulatorThumbnail(emulator: Nostalgist, resolution: { width: number; height: number }) {
+  const source = emulator.getCanvas()
+  const { width, height } = source
+  let sw: number
+  let sh: number
+  let sx: number
+  let sy: number
+  if (width / height > resolution.width / resolution.height) {
+    sh = height
+    sw = Math.round(height * (resolution.width / resolution.height))
+    sx = Math.round((width - sw) / 2)
+    sy = 0
+  } else {
+    sw = width
+    sh = Math.round(width / (resolution.width / resolution.height))
+    sx = 0
+    sy = Math.round((height - sh) / 2)
+  }
+  const target = document.createElement('canvas')
+  target.width = sw
+  target.height = sh
+  const context = target.getContext('2d')
+  return await new Promise<File>((resolve) => {
+    requestAnimationFrame(() => {
+      // @ts-expect-error let's assume the context is always available
+      context.drawImage(source, sx, sy, sw, sh, 0, 0, sw, sh)
+      target.toBlob((blob) => {
+        if (blob) {
+          // @ts-expect-error the returned value will be used as hono client form value
+          resolve(blob)
+        }
+      })
+    })
+  })
+}
+
 export function useGameStates() {
   const rom = useRom()
   const { core, emulator } = useEmulator()
@@ -53,7 +89,10 @@ export function useGameStates() {
       if (!emulator || !core || !rom) {
         throw new Error('invalid emulator or core or rom')
       }
-      const { state, thumbnail } = await getStateAndThumbnail(emulator, arg)
+      let { state, thumbnail } = await getStateAndThumbnail(emulator, arg)
+      if (core === 'mupen64plus_next') {
+        thumbnail = await forceGetEmulatorThumbnail(emulator, { height: 3, width: 4 })
+      }
       await $post({ form: { core, rom: rom.id, state, thumbnail, type: 'manual' } })
       await Promise.all([reloadStates(), reloadAutoStates()])
     },
@@ -63,7 +102,10 @@ export function useGameStates() {
     if (!emulator || !core || !rom) {
       throw new Error('invalid emulator or core or rom')
     }
-    const { state, thumbnail } = await emulator.saveState()
+    let { state, thumbnail } = await emulator.saveState()
+    if (core === 'mupen64plus_next') {
+      thumbnail = await forceGetEmulatorThumbnail(emulator, { height: 3, width: 4 })
+    }
     await $post({
       // @ts-expect-error actually we can use Blob here thought it says only File is accepted
       form: { core, rom: rom.id, state, thumbnail, type: 'auto' },

src/pages/library/utils/nostalgist.ts

@@ -6,11 +6,11 @@ import { cdnHost } from '#@/utils/isomorphic/cdn.ts'
 const extractCache = new Map<string, ReturnType<typeof extractCore>>()
 
 function getCoreCDNUrl(core: string) {
-  const externalCores = ['a5200', 'prosystem', 'stella2014', 'mupen64plus-libretro-nx']
+  const externalCores = ['a5200', 'prosystem', 'stella2014', 'mupen64plus_next']
   const segments = externalCores.includes(core)
     ? [
         'npm',
-        ['retroassembly-custom-cores', '1.22.2-20260610142137'].join('@'),
+        ['retroassembly-custom-cores', '1.22.2-20260614000946'].join('@'),
         'dist',
         'cores',
         `${core}_libretro.zip`,