refactor: Make launch embed a toggle to replace standalone

fix: Make watch() work for exts

fix: Make sure Ruffle embed uses NGA sizing when available

Author: colin969

extensions/core-nga/gulpfile.js

@@ -34,7 +34,7 @@ async function build(done) {
     .finally(done);
 }
 
-async function watch() {
+async function watch(done) {
     const ctx = await esbuild.context({
         bundle: true,
         entryPoints: ['./src/extension.ts'],
@@ -43,17 +43,16 @@ async function watch() {
         external: ['flashpoint-launcher', '*.css'],
     });
 
-    const ctx2 = await esbuild.context({
-        bundle: true,
-        entryPoints: ['./src/components.ts'],
-        outfile: './static/components.js',
-        format: 'esm',
-        target: ['es2020'],
-        platform: 'browser',
-        external: ['flashpoint-launcher', '*.css'],
+    const config = await loadConfig('./rslib.config.ts');
+    const renderer = rslibBuild({
+        ...config.content,
+        mode: 'development',
+        watch: true
     });
 
-    return Promise.all([ctx.watch(), ctx2.watch()]);
+    return Promise.all([ctx.watch(), renderer])
+    .catch(console.error)
+    .finally(done);
 }
 
 function clean(cb) {

extensions/core-ruffle/gulpfile.js

@@ -34,15 +34,25 @@ async function build(done) {
     .finally(done);
 }
 
-async function watch() {
+async function watch(done) {
     const ctx = await esbuild.context({
         bundle: true,
         entryPoints: ['./src/extension.ts'],
         outfile: './dist/extension.js',
         platform: 'node',
         external: ['flashpoint-launcher'],
     });
-    return ctx.watch();
+    
+    const config = await loadConfig('./rslib.config.ts');
+    const renderer = rslibBuild({
+        ...config.content,
+        mode: 'development',
+        watch: true
+    });
+
+    return Promise.all([ctx.watch(), renderer])
+    .catch(console.error)
+    .finally(done);
 }
 
 function clean(cb) {

extensions/core-ruffle/package.json

@@ -30,6 +30,12 @@
             "default": false,
             "description": "Enables Ruffle Standalone for all games regardless of whether they have been checked as supported. Results my vary."
           },
+          "com.ruffle.use-launcher-embed": {
+            "title": "Use Launcher Embed",
+            "type": "boolean",
+            "default": false,
+            "description": "Uses Ruffle embedded in the Launcher instead of the Standalone application. Saves will not carry over."
+          },
           "com.ruffle.graphics-mode": {
             "title": "Graphics Mode",
             "type": "string",

extensions/core-ruffle/src/components/LauncherEmbedPage.tsx

@@ -6,6 +6,19 @@ export default function LauncherEmbedPage(props: GameLaunchInfo) {
   const navigate = window.ext.hooks.useNavigate();
   const ruffleJsUrl = React.useMemo(() => `${window.ext.utils.getFileServerURL()}/ruffle/webhosted/latest/ruffle.js`, []);
 
+  let width: string | undefined, height: string | undefined;
+  if (props.game.extData?.nga) {
+    // It's an NGA game, so it must have width and height in info
+    width = props.game.extData?.nga['width'];
+    if (width) {
+      width += 'px';
+    }
+    height = props.game.extData?.nga['height'];
+    if (height) {
+      height += 'px';
+    }
+  }
+
   React.useEffect(() => {
     // useEffect calls on a ref change as well, even with no deps
     if (!(window as any).RufflePatched) {
@@ -15,13 +28,14 @@ export default function LauncherEmbedPage(props: GameLaunchInfo) {
       elem.onload = () => {
         console.log('js script loaded');
         if (containerRef.current && (window as any).RufflePlayer) {
+          const lc = props.activeData?.launchCommand;
           try {
             const ruffle = (window as any).RufflePlayer.newest();
             const player = ruffle.createPlayer();
             containerRef.current.appendChild(player);
 
-            player.load(props.activeData?.launchCommand);
-            console.log('Ruffle player created and loaded with:', props.activeData?.launchCommand);
+            player.load(lc);
+            console.log('Ruffle player created and loaded with:', lc);
           } catch (err) {
             console.error('Failed to create Ruffle player:', err);
           }
@@ -31,15 +45,16 @@ export default function LauncherEmbedPage(props: GameLaunchInfo) {
       document.head.append(elem);
       console.log('Patched in Ruffle');
     } else if (containerRef.current && (window as any).RufflePlayer) {
+      const lc = props.activeData?.launchCommand;
       try {
         // Clear any existing content
         containerRef.current.innerHTML = '';
 
         const ruffle = (window as any).RufflePlayer.newest();
         const player = ruffle.createPlayer();
         containerRef.current.appendChild(player);
-        player.load(props.activeData?.launchCommand);
-        console.log('Ruffle player created and loaded with:', props.activeData?.launchCommand);
+        player.load(lc);
+        console.log('Ruffle player created and loaded with:', lc);
       } catch (err) {
         console.error('Failed to create Ruffle player:', err);
       }
@@ -53,7 +68,7 @@ export default function LauncherEmbedPage(props: GameLaunchInfo) {
   return <div className='ruffle-page'>
     <div className='ruffle-wrapper'>
       <div className='ruffle-title'>{props.game.title}</div>
-      <div className='ruffle-container' ref={containerRef}></div>
+      <div className='ruffle-container' style={{ width, height }} ref={containerRef}></div>
     </div>
     <button className='simple-button' onClick={onBack}>Back</button>
   </div>;

extensions/core-ruffle/src/extension.ts

@@ -86,18 +86,23 @@ export async function activate(context: flashpoint.ExtensionContext): Promise<vo
 
     if (supportedEnabled || curation) {
       if (launchInfo.game.ruffleSupport.toLowerCase() === 'standalone') {
-        flashpoint.log.info('Using Standalone Ruffle for supported game...');
-        const defaultConfig = standaloneMiddleware.getDefaultConfig(launchInfo.game);
-        standaloneMiddleware.execute(launchInfo, {
-          middlewareId: '',
-          name: '',
-          enabled: true,
-          version: defaultConfig.version,
-          config: defaultConfig.config,
-        });
-        return;
-      } else if (launchInfo.game.ruffleSupport.toLowerCase() === 'launcher') {
-        launchInfo.launchInfo.component = 'ruffle/LauncherEmbedPage';
+        const useLauncherEmbed = flashpoint.getExtConfigValue('com.ruffle.use-launcher-embed');
+        if (useLauncherEmbed) {
+          flashpoint.log.info('Using Launcher Embed Ruffle for supported game...');
+          launchInfo.launchInfo.component = 'ruffle/LauncherEmbedPage';
+          return;
+        } else {
+          flashpoint.log.info('Using Standalone Ruffle for supported game...');
+          const defaultConfig = standaloneMiddleware.getDefaultConfig(launchInfo.game);
+          standaloneMiddleware.execute(launchInfo, {
+            middlewareId: '',
+            name: '',
+            enabled: true,
+            version: defaultConfig.version,
+            config: defaultConfig.config,
+          });
+          return;
+        }
       } else if (launchInfo.game.ruffleSupport.toLowerCase() === 'webhosted') {
         flashpoint.log.info('Using Web Embed Ruffle for supported game...');
         const defaultConfig = webEmbedMiddleware.getDefaultConfig(launchInfo.game);

extensions/core-ruffle/static/ruffle.css

@@ -25,3 +25,8 @@
   margin: auto;
   box-shadow: 0 0 20px rgba(245, 245, 245, 0.4);
 }
+
+ruffle-player {
+  width: 100%;
+  height: 100%;
+}

gulpfile.js

@@ -203,8 +203,7 @@ async function watchRenderer() {
   const config = await loadConfig();
   const rsbuild = await createRsbuild({
     rsbuildConfig: {
-      ...config.content,
-      mode: 'development'
+      ...config.content
     }
   });
   await rsbuild.build({

src/renderer/components/CurateBox.tsx

@@ -606,9 +606,6 @@ export function CurateBox(props: CurateBoxProps) {
                 }, {
                   key: 'standalone',
                   value: 'Standalone'
-                }, {
-                  key: 'launcher',
-                  value: 'Launcher Embed'
                 }]}
                 warned={false}
                 property='ruffleSupport'

src/renderer/components/RightBrowseSidebar.tsx

@@ -1,7 +1,7 @@
 import * as remote from '@electron/remote';
 import { WithConfirmDialogProps } from '@renderer/containers/withConfirmDialog';
 import { LangContext } from '@renderer/util/lang';
-import { ArchiveState, BackIn, BackOut, BackOutTemplate } from '@shared/back/types';
+import { ArchiveState, BackIn } from '@shared/back/types';
 import { LOGOS, SCREENSHOTS } from '@shared/constants';
 import { GamePropSuggestions, PickType, ProcessAction } from '@shared/interfaces';
 import { generateTagFilterGroup, sizeToString } from '@shared/Util';

src/renderer/components/SearchBar.tsx

@@ -279,9 +279,6 @@ export function SearchBar() {
   }, {
     value: 'standalone',
     orderVal: 'Standalone'
-  }, {
-    value: 'launcher',
-    orderVal: 'Launcher Embed',
   }];
   const tagItems = search.dropdowns.tags ? search.dropdowns.tags.map(tag => {
     const categoryId = tag.category ? categoryOrder.indexOf(tag.category) : 99999;