Add emulation core selection to player UI

frontend/src/components/Details/ActionBar.vue

@@ -5,7 +5,7 @@ import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
 import type { DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
-import { getDownloadLink, platformSlugEJSCoreMap } from "@/utils";
+import { getDownloadLink, isEmulationSupported } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 
@@ -15,8 +15,7 @@ const emitter = inject<Emitter<Events>>("emitter");
 const auth = storeAuth();
 const emulation = ref(false);
 const playInfoIcon = ref("mdi-play");
-const emulationSupported =
-  props.rom.platform_slug.toLowerCase() in platformSlugEJSCoreMap;
+const emulationSupported = isEmulationSupported(props.rom.platform_slug);
 
 function toggleEmulation() {
   emulation.value = !emulation.value;

frontend/src/components/Details/Emulation.vue

@@ -3,7 +3,7 @@ import { isNull } from "lodash";
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
 import rom from "@/services/api/rom";
 import type { DetailedRom } from "@/stores/roms";
-import { formatBytes } from "@/utils";
+import { formatBytes, getSupportedCores } from "@/utils";
 import Player from "@/views/Play/Player.vue";
 import { ref } from "vue";
 import type { Platform } from "@/stores/platforms";
@@ -14,6 +14,9 @@ const saveRef = ref<SaveSchema | null>(null);
 const stateRef = ref<StateSchema | null>(null);
 const gameRunning = ref(false);
 
+const supportedCores = getSupportedCores(props.platform.slug);
+const coreRef = ref<string | null>(supportedCores[0]);
+
 const storedFSOP = localStorage.getItem("fullScreenOnPlay");
 const fullScreenOnPlay = ref(isNull(storedFSOP) ? true : storedFSOP === "true");
 
@@ -35,6 +38,22 @@ function onFullScreenChange() {
 <template>
   <v-row v-if="rom && !gameRunning" no-gutters class="align-center">
     <v-col cols="5" class="text-truncate mx-1">
+      <v-select
+        v-if="supportedCores.length > 1"
+        density="compact"
+        class="my-2"
+        hide-details
+        variant="outlined"
+        clearable
+        label="Core"
+        v-model="coreRef"
+        :items="
+          supportedCores.map((c) => ({
+            title: c,
+            value: c,
+          }))
+        "
+      />
       <v-select
         density="compact"
         class="my-2"
@@ -137,7 +156,13 @@ function onFullScreenChange() {
 
   <v-row no-gutters>
     <v-col v-if="gameRunning" cols="12" rounded id="game-wrapper">
-      <player :rom="props.rom" :state="stateRef" :save="saveRef" :bios="biosRef" />
+      <player
+        :rom="props.rom"
+        :state="stateRef"
+        :save="saveRef"
+        :bios="biosRef"
+        :core="coreRef"
+      />
     </v-col>
   </v-row>
 </template>

frontend/src/components/Game/Card/ActionBar.vue

@@ -4,7 +4,7 @@ import storeDownload from "@/stores/download";
 import storeAuth from "@/stores/auth";
 import AdminMenu from "@/components/Game/AdminMenu/Base.vue";
 import type { SimpleRom } from "@/stores/roms";
-import { platformSlugEJSCoreMap } from "@/utils";
+import { isEmulationSupported } from "@/utils";
 
 // Props
 defineProps<{ rom: SimpleRom }>();
@@ -25,7 +25,7 @@ const downloadStore = storeDownload();
         variant="text"
       />
       <v-btn
-        v-if="rom.platform_slug.toLowerCase() in platformSlugEJSCoreMap"
+        v-if="isEmulationSupported(rom.platform_slug)"
         class="action-bar-btn"
         :href="`/play/${rom.id}`"
         icon="mdi-play"

frontend/src/components/Game/DataTable/Base.vue

@@ -12,7 +12,7 @@ import type { Emitter } from "mitt";
 import {
   formatBytes,
   languageToEmoji,
-  platformSlugEJSCoreMap,
+  isEmulationSupported,
   regionToEmoji,
 } from "@/utils";
 import { useTheme } from "vuetify";
@@ -171,7 +171,7 @@ onMounted(() => {
         <v-icon>mdi-download</v-icon>
       </v-btn>
       <v-btn
-        v-if="item.platform_slug.toLowerCase() in platformSlugEJSCoreMap"
+        v-if="isEmulationSupported(item.platform_slug)"
         size="small"
         variant="text"
         :href="`/play/${item.id}`"

frontend/src/utils/index.ts

@@ -266,68 +266,89 @@ export function languageToEmoji(language: string) {
   }
 }
 
-export const platformSlugEJSCoreMap = {
-  "3do": "opera",
-  amiga: "puae",
-  arcade: "mame2003_plus",
-  atari2600: "stella2014",
-  "atari-2600-plus": "stella2014",
-  atari5200: "a5200",
-  atari7800: "prosystem",
-  c64: "vice_x64",
-  "commodore-64c": "vice_x64",
-  colecovision: "gearcoleco",
-  jaguar: "virtualjaguar",
-  lynx: "handy",
-  "atari-lynx-mkii": "handy",
-  "neo-geo-pocket": "mednafen_ngp",
-  "neo-geo-pocket-color": "mednafen_ngp",
-  nes: "fceumm",
-  famicom: "fceumm",
-  fds: "fceumm",
-  "game-televisison": "fceumm",
-  "new-style-nes": "fceumm",
-  n64: "mupen64plus_next",
-  "ique-player": "mupen64plus_next",
-  nds: "melonds",
-  "nintendo-ds-lite": "melonds",
-  "nintendo-dsi": "melonds",
-  "nintendo-dsi-xl": "melonds",
-  gb: "gambatte",
-  "game-boy-pocket": "gambatte",
-  "game-boy-light": "gambatte",
-  gba: "mgba",
-  "game-boy-adavance-sp": "mgba",
-  "game-boy-micro": "mgba",
-  gbc: "gambatte",
-  "pc-fx": "mednafen_pcfx",
-  ps: "pcsx_rearmed",
-  psp: "ppsspp",
-  segacd: "genesis_plus_gx",
-  // sega32: "picodrive", // Broken: https://github.com/EmulatorJS/EmulatorJS/issues/579
-  gamegear: "genesis_plus_gx",
-  sms: "genesis_plus_gx",
-  "sega-mark-iii": "genesis_plus_gx",
-  "sega-game-box-9": "genesis_plus_gx",
-  "sega-master-system-ii": "genesis_plus_gx",
-  "master-system-super-compact": "genesis_plus_gx",
-  "master-system-girl": "genesis_plus_gx",
-  "genesis-slash-megadrive": "genesis_plus_gx",
-  "sega-mega-drive-2-slash-genesis": "genesis_plus_gx",
-  "sega-mega-jet": "genesis_plus_gx",
-  "mega-pc": "genesis_plus_gx",
-  "tera-drive": "genesis_plus_gx",
-  "sega-nomad": "genesis_plus_gx",
-  saturn: "yabause",
-  snes: "snes9x",
-  sfam: "snes9x",
-  "super-nintendo-original-european-version": "snes9x",
-  "super-famicom-shvc-001": "snes9x",
-  "super-famicom-jr-model-shvc-101": "snes9x",
-  "new-style-super-nes-model-sns-101": "snes9x",
-  "turbografx16--1": "mednafen_pce",
-  virtualboy: "beetle_vb",
-  wonderswan: "mednafen_wswan",
-  swancrystal: "mednafen_wswan",
-  "wonderswan-color": "mednafen_wswan",
+const _EJS_CORES_MAP = {
+  "3do": ["opera"],
+  amiga: ["puae"],
+  arcade: [
+    "mame2003",
+    "mame2003_plus",
+    "fbneo",
+    "fbalpha2012_cps1",
+    "fbalpha2012_cps2",
+  ],
+  atari2600: ["stella2014"],
+  "atari-2600-plus": ["stella2014"],
+  atari5200: ["a5200"],
+  atari7800: ["prosystem"],
+  "c-plus-4": ["vice_xplus4"],
+  c64: ["vice_x64sc", "vice_x64"],
+  cpet: ["vice_xpet"],
+  "commodore-64c": ["vice_x64sc", "vice_x64"],
+  c128: ["vice_x128"],
+  "commmodore-128": ["vice_x128"],
+  colecovision: ["gearcoleco"],
+  jaguar: ["virtualjaguar"],
+  lynx: ["handy"],
+  "atari-lynx-mkii": ["handy"],
+  "neo-geo-pocket": ["mednafen_ngp"],
+  "neo-geo-pocket-color": ["mednafen_ngp"],
+  nes: ["fceumm", "nestopia"],
+  famicom: ["fceumm", "nestopia"],
+  fds: ["fceumm", "nestopia"],
+  "game-televisison": ["fceumm"],
+  "new-style-nes": ["fceumm"],
+  n64: ["mupen64plus_next"],
+  "ique-player": ["mupen64plus_next"],
+  nds: ["melonds", "desmume2015"],
+  "nintendo-ds-lite": ["melonds", "desmume2015"],
+  "nintendo-dsi": ["melonds", "desmume2015"],
+  "nintendo-dsi-xl": ["melonds", "desmume2015"],
+  gb: ["gambatte", "mgba"],
+  "game-boy-pocket": ["gambatte", "mgba"],
+  "game-boy-light": ["gambatte", "mgba"],
+  gba: ["mgba"],
+  "game-boy-adavance-sp": ["mgba"],
+  "game-boy-micro": ["mgba"],
+  gbc: ["gambatte", "mgba"],
+  "pc-fx": ["mednafen_pcfx"],
+  ps: ["pcsx_rearmed", "mednafen_psx"],
+  psp: ["ppsspp"],
+  segacd: ["genesis_plus_gx", "picodrive"],
+  // sega32: ["picodrive"], // Broken: https://github.com/EmulatorJS/EmulatorJS/issues/579
+  gamegear: ["genesis_plus_gx"],
+  sms: ["genesis_plus_gx"],
+  "sega-mark-iii": ["genesis_plus_gx"],
+  "sega-game-box-9": ["genesis_plus_gx"],
+  "sega-master-system-ii": ["genesis_plus_gx", "smsplus"],
+  "master-system-super-compact": ["genesis_plus_gx"],
+  "master-system-girl": ["genesis_plus_gx"],
+  "genesis-slash-megadrive": ["genesis_plus_gx"],
+  "sega-mega-drive-2-slash-genesis": ["genesis_plus_gx"],
+  "sega-mega-jet": ["genesis_plus_gx"],
+  "mega-pc": ["genesis_plus_gx"],
+  "tera-drive": ["genesis_plus_gx"],
+  "sega-nomad": ["genesis_plus_gx"],
+  saturn: ["yabause"],
+  snes: ["snes9x"],
+  sfam: ["snes9x"],
+  "super-nintendo-original-european-version": ["snes9x"],
+  "super-famicom-shvc-001": ["snes9x"],
+  "super-famicom-jr-model-shvc-101": ["snes9x"],
+  "new-style-super-nes-model-sns-101": ["snes9x"],
+  "turbografx16--1": ["mednafen_pce"],
+  "vic-20": ["vice_xvic"],
+  virtualboy: ["beetle_vb"],
+  wonderswan: ["mednafen_wswan"],
+  swancrystal: ["mednafen_wswan"],
+  "wonderswan-color": ["mednafen_wswan"],
 } as const;
+
+export type EJSPlatformSlug = keyof typeof _EJS_CORES_MAP;
+
+export function getSupportedCores(platformSlug: string) {
+  return _EJS_CORES_MAP[platformSlug.toLowerCase() as EJSPlatformSlug] || [];
+}
+
+export function isEmulationSupported(platformSlug: string) {
+  return platformSlug.toLowerCase() in _EJS_CORES_MAP;
+}

frontend/src/views/Play/Base.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from "vue";
 import { isNull } from "lodash";
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
-import { formatBytes } from "@/utils";
+import { formatBytes, getSupportedCores } from "@/utils";
 import romApi from "@/services/api/rom";
 import firmwareApi from "@/services/api/firmware";
 import { useRoute } from "vue-router";
@@ -16,6 +16,8 @@ const firmwareOptions = ref<FirmwareSchema[]>([]);
 const biosRef = ref<FirmwareSchema | null>(null);
 const saveRef = ref<SaveSchema | null>(null);
 const stateRef = ref<StateSchema | null>(null);
+const supportedCores = ref<string[]>([]);
+const coreRef = ref<string | null>(null);
 const gameRunning = ref(false);
 
 const storedFSOP = localStorage.getItem("fullScreenOnPlay");
@@ -30,6 +32,8 @@ onMounted(async () => {
     romId: parseInt(route.params.rom as string),
   });
   rom.value = romResponse.data;
+  supportedCores.value = [...getSupportedCores(rom.value.platform_slug)];
+  coreRef.value = supportedCores.value[0];
 
   const firmwareResponse = await firmwareApi.getFirmware({
     platformId: romResponse.data.platform_id,
@@ -56,6 +60,22 @@ function onFullScreenChange() {
         width="250"
         src="/assets/emulatorjs/powered_by_emulatorjs.png"
       />
+      <v-select
+        v-if="supportedCores.length > 1"
+        density="compact"
+        class="my-2"
+        hide-details
+        variant="outlined"
+        clearable
+        label="Core"
+        v-model="coreRef"
+        :items="
+          supportedCores.map((c) => ({
+            title: c,
+            value: c,
+          }))
+        "
+      />
       <v-select
         class="my-1"
         hide-details
@@ -132,7 +152,13 @@ function onFullScreenChange() {
     </v-col>
 
     <v-col class="bg-primary" rounded id="game-wrapper">
-      <player :rom="rom" :state="stateRef" :save="saveRef" :bios="biosRef" />
+      <player
+        :rom="rom"
+        :state="stateRef"
+        :save="saveRef"
+        :bios="biosRef"
+        :core="coreRef"
+      />
     </v-col>
   </v-row>
 </template>

frontend/src/views/Play/Player.vue

@@ -3,16 +3,16 @@ import { ref, onBeforeUnmount } from "vue";
 import stateApi from "@/services/api/state";
 import saveApi, { saveApi as api } from "@/services/api/save";
 import screenshotApi from "@/services/api/screenshot";
-import { platformSlugEJSCoreMap } from "@/utils";
+import { getSupportedCores } from "@/utils";
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
 import type { DetailedRom } from "@/stores/roms";
-import type { ValueOf } from "@/types";
 
 const props = defineProps<{
   rom: DetailedRom;
   save: SaveSchema | null;
   state: StateSchema | null;
   bios: FirmwareSchema | null;
+  core: string | null;
 }>();
 const saveRef = ref<SaveSchema | null>(props.save);
 const stateRef = ref<StateSchema | null>(props.state);
@@ -21,13 +21,10 @@ onBeforeUnmount(() => {
   window.location.reload();
 });
 
-type EJSPlatformSlug = keyof typeof platformSlugEJSCoreMap;
-type EJSCore = ValueOf<typeof platformSlugEJSCoreMap>;
-
 // Declare global variables for EmulatorJS
 declare global {
   interface Window {
-    EJS_core: EJSCore;
+    EJS_core: string;
     EJS_biosUrl: string;
     EJS_player: string;
     EJS_pathtodata: string;
@@ -53,10 +50,9 @@ declare global {
   }
 }
 
+const supportedCores = getSupportedCores(props.rom.platform_slug);
 window.EJS_core =
-  platformSlugEJSCoreMap[
-    props.rom.platform_slug.toLowerCase() as EJSPlatformSlug
-  ];
+  supportedCores.find((core) => core === props.core) ?? supportedCores[0];
 window.EJS_gameID = props.rom.id;
 window.EJS_gameUrl = `/api/roms/${props.rom.id}/content/${props.rom.file_name}`;
 window.EJS_biosUrl = props.bios