set more config options

frontend/src/components/Details/AdditionalContent.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import RelatedCard from "@/components/common/Game/Card/Related.vue";
 import type { DetailedRom } from "@/stores/roms";
-import { ref } from "vue";
+import { computed } from "vue";
 
 const props = defineProps<{ rom: DetailedRom }>();
-const combined = ref([
+const combined = computed(() => [
   ...(props.rom.igdb_metadata?.expansions ?? []),
   ...(props.rom.igdb_metadata?.dlcs ?? []),
 ]);
@@ -24,7 +24,7 @@ const combined = ref([
         :href="`https://www.igdb.com/games/${expansion.slug}`"
         target="_blank"
       >
-        <related-card :rom="expansion" />
+        <related-card :game="expansion" />
       </a>
     </v-col>
   </v-row>

frontend/src/views/RuffleRS/Base.vue

@@ -14,49 +14,41 @@ const gameRunning = ref(false);
 const storedFSOP = localStorage.getItem("fullScreenOnPlay");
 const fullScreenOnPlay = ref(isNull(storedFSOP) ? true : storedFSOP === "true");
 
-window.RufflePlayer = window.RufflePlayer || {};
-const script = document.createElement("script");
-script.src = "/assets/ruffle/ruffle.js";
-document.body.appendChild(script);
-
 declare global {
   interface Window {
     RufflePlayer: any;
   }
 }
 
-// Functions
+window.RufflePlayer = window.RufflePlayer || {};
+const script = document.createElement("script");
+script.src = "/assets/ruffle/ruffle.js";
+document.body.appendChild(script);
+
 function onPlay() {
-  const gamePath = `/api/roms/${rom.value.id}/content/${rom.value.file_name}`;
-
   gameRunning.value = true;
 
-  const originalFetch = window.fetch;
-  window.fetch = async function (...args) {
-    const url =
-      args[0] instanceof Request
-        ? new URL(args[0].url)
-        : typeof args[0] === "string"
-        ? new URL(args[0])
-        : args[0];
-
-    if (url.pathname.endsWith(".swf") && url.pathname !== gamePath) {
-      return new Response(new Blob());
-    }
-    return originalFetch.apply(this, args);
-  };
-
   nextTick(() => {
     const ruffle = window.RufflePlayer.newest();
     const player = ruffle.createPlayer();
     const container = document.getElementById("game");
     container?.appendChild(player);
     player.load({
-      url: gamePath,
+      allowFullScreen: true,
+      autoplay: "on",
+      backgroundColor: "#0D1117",
+      logLevel: "debug",
+      openUrlMode: "confirm",
+      preferredRenderer: "webgl",
       publicPath: "/assets/ruffle/",
+      url: `/api/roms/${rom.value?.id}/content/${rom.value?.file_name}`,
     });
     player.style.width = "100%";
     player.style.height = "100%";
+
+    if (player.fullscreenEnabled && fullScreenOnPlay.value) {
+      player.enterFullscreen();
+    }
   });
 }
 
@@ -81,7 +73,7 @@ onMounted(async () => {
       md="8"
       xl="10"
       id="game-wrapper"
-      class="bg-primary"
+      class="bg-secondary"
       rounded
     >
       <div id="game" />
@@ -211,5 +203,6 @@ onMounted(async () => {
 #game {
   max-height: 100dvh;
   height: 100%;
+  --splash-screen-background: none;
 }
 </style>

frontend/tsconfig.json

@@ -11,6 +11,6 @@
     "paths": {
       "@/*": ["./src/*"]
     },
-    "types": ["./src/plugins/pinia.d.ts"]
+    "types": ["./src/plugins/pinia.d.ts", "./src/types/main.d.ts"]
   }
 }