add to console play

examples/config.example.yml

@@ -60,9 +60,9 @@ emulatorjs:
   controls: # https://emulatorjs.org/docs4devs/control-mapping/
     snes9x:
       0: # Player 1
-        0:
-          value: x # Default mapping for keyboard
-          value2: BUTTON_2 # Default mapping for connected controller
+        0: # A MAPPING FOR EACH BUTTON MUST BE SET!
+          value: x # Mapping for keyboard
+          value2: BUTTON_2 # Mapping for connected controller
       1: # Player 2
       2: # Player 3
       3: # Player 4

frontend/src/RomM.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import languageStore from "@/stores/language";
-import consoleStore from "@/stores/console";
+import storeLanguage from "@/stores/language";
+import storeConsole from "@/stores/console";
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useIdle } from "@vueuse/core";
 
 const { locale } = useI18n();
-const storeLanguage = languageStore();
-const storeConsole = consoleStore();
-const { consoleMode } = storeToRefs(storeConsole);
-const { defaultLanguage, languages } = storeToRefs(storeLanguage);
+const languageStore = storeLanguage();
+const consoleStore = storeConsole();
+const { consoleMode } = storeToRefs(consoleStore);
+const { defaultLanguage, languages } = storeToRefs(languageStore);
 const selectedLanguage = ref(
   languages.value.find(
     (lang) => lang.value === localStorage.getItem("settings.locale"),
   ) || defaultLanguage.value,
 );
 locale.value = selectedLanguage.value.value;
-storeLanguage.setLanguage(selectedLanguage.value);
+languageStore.setLanguage(selectedLanguage.value);
 
 const { idle: mouseIdle } = useIdle(100, {
   events: ["mousemove", "mousedown", "wheel", "touchstart"],

frontend/src/components/Settings/UserInterface/LanguageSelector.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import languageStore from "@/stores/language";
+import storeLanguage from "@/stores/language";
 import { storeToRefs } from "pinia";
 
 const { locale } = useI18n();
-const storeLanguage = languageStore();
-const { languages, selectedLanguage } = storeToRefs(storeLanguage);
+const languageStore = storeLanguage();
+const { languages, selectedLanguage } = storeToRefs(languageStore);
 
 function changeLanguage() {
   locale.value = selectedLanguage.value.value;

frontend/src/console/views/Play.vue

@@ -15,10 +15,16 @@ import NavigationText from "@/console/components/NavigationText.vue";
 import { useThemeAssets } from "@/console/composables/useThemeAssets";
 import api from "@/services/api";
 import { ROUTES } from "@/plugins/router";
+import storeConfig from "@/stores/config";
+import storeLanguage from "@/stores/language";
+import { storeToRefs } from "pinia";
 
 const route = useRoute();
 const router = useRouter();
 const { getBezelImagePath } = useThemeAssets();
+const configStore = storeConfig();
+const languageStore = storeLanguage();
+const { selectedLanguage } = storeToRefs(languageStore);
 const romId = Number(route.params.rom);
 const initialSaveId = route.query.save ? Number(route.query.save) : null;
 const initialStateId = route.query.state ? Number(route.query.state) : null;
@@ -383,10 +389,16 @@ async function boot() {
   //   window.EJS_fullscreenOnLoaded = true;
   window.EJS_backgroundImage = `${window.location.origin}/assets/emulatorjs/powered_by_emulatorjs.png`;
   window.EJS_backgroundColor = "#000000"; // Match original which uses theme colors, but #000000 should work fine
+  const coreOptions = configStore.getEJSCoreOptions(core);
   window.EJS_defaultOptions = {
     "save-state-location": "browser",
     rewindEnabled: "enabled",
+    ...coreOptions,
   };
+  window.EJS_defaultControls = configStore.getEJSControls(core);
+  window.EJS_language = selectedLanguage.value.value.replace("_", "-");
+  window.EJS_disableAutoLang = true;
+  window.EJS_DEBUG_XX = configStore.config.EJS_DEBUG;
 
   // Set a valid game name (affects per-game settings keys)
   window.EJS_gameName = rom.fs_name_no_tags

frontend/src/views/Player/EmulatorJS/Player.vue

@@ -3,6 +3,8 @@ import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
 import { saveApi as api } from "@/services/api/save";
 import storeRoms, { type DetailedRom } from "@/stores/roms";
 import storeConfig from "@/stores/config";
+import storePlaying from "@/stores/playing";
+import storeLanguage from "@/stores/language";
 import {
   areThreadsRequiredForEJSCore,
   getSupportedEJSCores,
@@ -22,14 +24,14 @@ import {
 } from "./utils";
 import type { Emitter } from "mitt";
 import type { Events } from "@/types/emitter";
-import storePlaying from "@/stores/playing";
-import languageStore from "@/stores/language";
 import { storeToRefs } from "pinia";
 
 const INVALID_CHARS_REGEX = /[#<$+%>!`&*'|{}/\\?"=@:^\r\n]/gi;
 
 const romsStore = storeRoms();
+const playingStore = storePlaying();
 const configStore = storeConfig();
+const languageStore = storeLanguage();
 
 const props = defineProps<{
   rom: DetailedRom;
@@ -43,10 +45,8 @@ const romRef = ref<DetailedRom>(props.rom);
 const saveRef = ref<SaveSchema | null>(props.save);
 const theme = useTheme();
 const emitter = inject<Emitter<Events>>("emitter");
-const playingStore = storePlaying();
 const { playing, fullScreen } = storeToRefs(playingStore);
-const storeLanguage = languageStore();
-const { selectedLanguage } = storeToRefs(storeLanguage);
+const { selectedLanguage } = storeToRefs(languageStore);
 
 // Declare global variables for EmulatorJS
 declare global {