fix: better matching logic for arcade games

Author: arianrhodsandlot

package.json

@@ -33,7 +33,7 @@
     "@hono/zod-validator": "0.4.3",
     "@radix-ui/themes": "3.2.1",
     "@react-hookz/web": "25.1.0",
-    "@supabase/ssr": "0.5.2",
+    "@supabase/ssr": "0.6.1",
     "@supabase/supabase-js": "2.49.1",
     "@tailwindcss/typography": "0.5.16",
     "browser-fs-access": "0.35.0",
@@ -81,13 +81,13 @@
     "libretrodb": "1.0.0",
     "lint-staged": "15.5.0",
     "miniflare": "4.20250310.0",
-    "nanoid": "5.1.3",
+    "nanoid": "5.1.4",
     "react-server-dom-webpack": "19.0.0",
     "sax": "1.4.1",
     "simple-git-hooks": "2.11.1",
     "tailwindcss": "4.0.14",
     "typescript": "5.8.2",
-    "vite-plugin-cjs-interop": "2.1.6",
+    "vite-plugin-cjs-interop": "2.2.0",
     "vite-tsconfig-paths": "5.1.4",
     "wrangler": "4.0.0",
     "zx": "8.4.1"

pnpm-lock.yaml

@@ -1,3 +1,5 @@
+import { cdnHost } from '@/utils/cdn.ts'
+
 export type CoreName =
   | 'a5200'
   | 'fbalpha2012_cps1'
@@ -300,3 +302,24 @@ export const coreOptionsMap: Partial<Record<CoreName, { defaultOption?: string;
     ],
     vba_next: [{ name: 'vbanext_bios', options: ['On', 'Off'] }],
   }
+
+const vendorsVersionInfo = {
+  name: 'retro-assembly-vendors',
+  version: '1.17.0-20240225183742',
+}
+
+function getCoreCDNUrl(core: string, ext: string) {
+  const { name, version } = vendorsVersionInfo
+  const url = new URL('', cdnHost)
+  const urlPathSegments = ['npm', `${name}@${version}`, 'dist', 'cores', `${core}_libretro.${ext}`]
+  const urlPath = urlPathSegments.join('/')
+  url.pathname = urlPath
+  return url.href
+}
+
+export const coreUrlMap: Partial<Record<CoreName, { js: string; name: string; wasm: string }>> = {
+  a5200: { js: getCoreCDNUrl('a5200', 'js'), name: 'a5200', wasm: getCoreCDNUrl('a5200', 'wasm') },
+  fbneo: { js: getCoreCDNUrl('fbneo', 'js'), name: 'fbneo', wasm: getCoreCDNUrl('fbneo', 'wasm') },
+  prosystem: { js: getCoreCDNUrl('prosystem', 'js'), name: 'prosystem', wasm: getCoreCDNUrl('prosystem', 'wasm') },
+  stella2014: { js: getCoreCDNUrl('stella2014', 'js'), name: 'stella2014', wasm: getCoreCDNUrl('stella2014', 'wasm') },
+}

src/constants/core.ts

@@ -20,6 +20,7 @@ async function createRom(params: CreateRomParams) {
     eq(romTable.user_id, currentUser.id),
     eq(romTable.file_name, params.fileName),
     eq(romTable.platform, params.platform),
+    eq(romTable.status, 1),
   )
   const [countResult] = await library.select({ count: count() }).from(romTable).where(where)
 

src/controllers/create-rom.ts

@@ -96,6 +96,9 @@ export async function guessGameInfo(fileName: string, platform: string) {
   if (launchbox && !libretro) {
     libretro = await guessLibretroGame(launchbox.name, platform)
   }
+  if (libretro && !launchbox && libretro.name) {
+    launchbox = await guessLaunchboxGame(libretro.goodcodes_base_compact_name, platform)
+  }
 
   return { launchbox, libretro }
 }

src/controllers/create-roms.ts

@@ -12,6 +12,10 @@ export function GameTitle({ rom }) {
     .filter((text) => text !== 'stable')
     .join(' ')
 
+  if (rom.platform === 'arcade') {
+    return <div className='mt-2 text-center text-sm font-semibold'>{goodcodes.file.slice(4)}</div>
+  }
+
   return (
     <div className='mt-2 text-center text-sm font-semibold'>
       {[...districts].map((district) => (

src/controllers/guess-game-info.ts

@@ -18,7 +18,9 @@ export function GameInfo({ gameInfo, rom }) {
             Released
           </div>
           <div className='pl-6'>
-            {gameInfo?.release_date?.toLocaleDateString() || <span className='opacity-40'>Unknown</span>}
+            {gameInfo?.release_date?.toLocaleDateString() || gameInfo?.release_year || (
+              <span className='opacity-40'>Unknown</span>
+            )}
           </div>
         </div>
 

src/pages/library/components/game-title.tsx

@@ -2,6 +2,7 @@ import { useAtom } from 'jotai'
 import ky from 'ky'
 import { Nostalgist } from 'nostalgist'
 import useSWRImmutable from 'swr/immutable'
+import { coreUrlMap } from '@/constants/core.ts'
 import { usePreference } from '../../../hooks/use-preference.ts'
 import { emulatorLaunchedAtom } from '../atoms.ts'
 import { useRom } from './use-rom.ts'
@@ -17,14 +18,15 @@ export function useEmulator() {
   const { core, shader } = preference.emulator.platform[rom?.platform] || {}
   const {
     data: emulator,
+    error,
     isLoading: isPreparing,
     mutate: prepare,
   } = useSWRImmutable(romUrl || false, (romUrl: string) => {
     return Nostalgist.prepare({
       cache: true,
-      core,
+      core: coreUrlMap[core] || core,
       retroarchCoreConfig: preference.emulator.core[core],
-      rom: romUrl,
+      rom: { fileContent: romUrl, fileName: rom.file_name },
       shader,
       style: {
         opacity: '0',
@@ -50,5 +52,9 @@ export function useEmulator() {
     prepare()
   }
 
+  if (error) {
+    console.error(error)
+  }
+
   return { core, emulator, exit, isPreparing, launch, launched, prepare, rom, setLaunched }
 }

src/pages/library/platform/rom/components/game-info.tsx

@@ -2,7 +2,6 @@ import { getRom } from '@/controllers/get-rom.ts'
 import { Portal, Theme } from '@/pages/components/radix-themes.ts'
 import { getRomGoodcodes } from '@/utils/rom.ts'
 import AppLayout from '../../components/app-layout.tsx'
-import { SidebarLinks } from '../../components/sidebar-links.tsx'
 import { GameBackground } from './components/game-background.tsx'
 import { GameCover } from './components/game-cover.tsx'
 import { GameInfo } from './components/game-info.tsx'
@@ -21,12 +20,7 @@ export async function RomPage({ fileName, id, platform }) {
   const { launchboxGame } = rom
 
   return (
-    <AppLayout
-      append={<GameBackground rom={rom} />}
-      MainScrollArea={MainScrollArea}
-      serverData={{ rom }}
-      sidebar={<SidebarLinks platform={rom.platform} />}
-    >
+    <AppLayout append={<GameBackground rom={rom} />} MainScrollArea={MainScrollArea} serverData={{ rom }}>
       <title>{`${goodcodes.rom} - RetroAssembly`}</title>
       <div className='flex gap-4'>
         <div>

src/pages/library/platform/rom/hooks/use-emulator.ts

@@ -30,13 +30,15 @@ const repositoryVersions = {
   'RetroPie/es-theme-carbon': 'b09973e',
 } as const
 
+export const cdnHost = 'https://cdn.jsdelivr.net'
+
 export function getCDNUrl(repo: keyof typeof repositoryVersions, filePpath: string) {
   const [ghUser, ghRepoName] = repo.split('/')
   const version = repositoryVersions[repo]
-  const url = new URL('', 'https://cdn.jsdelivr.net')
+  const url = new URL('', cdnHost)
   const encode = encodeRFC3986URIComponent
-  const urlPathSecments = ['gh', encode(ghUser), `${encode(ghRepoName)}@${encode(version)}`, filePpath]
-  const urlPath = urlPathSecments.join('/')
+  const urlPathSegments = ['gh', encode(ghUser), `${encode(ghRepoName)}@${encode(version)}`, filePpath]
+  const urlPath = urlPathSegments.join('/')
   url.pathname = urlPath
   return url.href
 }

src/pages/library/platform/rom/page.tsx

@@ -47,12 +47,17 @@ export function getPlatformGameIcon(platform: string, type = 'game') {
   // todo: move to constants
   const repo = 'batocera-linux/batocera-themes'
   const platformAlias =
-    { atarilynx: 'lynx', 'sg-1000': 'sg1000', sms: 'mastersystem', vb: 'virtualboy' }[platform] || platform
+    { arcade: 'fba', atarilynx: 'lynx', 'sg-1000': 'sg1000', sms: 'mastersystem', vb: 'virtualboy' }[platform] ||
+    platform
   return getCDNUrl(repo, `themes/batocera/${platformAlias}/_data/svg/${type}.svg`)
 }
 
 export function getRomGoodcodes(rom) {
-  return parse(`0 - ${path.parse(rom.file_name).name}`)
+  let { name } = path.parse(rom.file_name)
+  if (rom.platform === 'arcade' && rom.libretroGame?.name) {
+    name = rom.libretroGame.name
+  }
+  return parse(`0 - ${name}`)
 }
 
 export function getCompactName(name: string) {