engine time!

RSDKv3 has plus disabled, dw :)

README.md

@@ -4,12 +4,13 @@
 Website source code for RSDK-Library
 
 ## Known issues
-* Uploading files *might* just hang. This can be caused by having an insufficient amount of disk space available.
+* Uploading files *might* just hang. This can be caused by having an insufficient amount of disk space available. Both locally, and in-browser (IDBFS has a limit)
 
 ## Building
 ###### [(You're gonna need node.js for this.)](https://nodejs.org/en/download/package-manager)
-##### Simply run this command, and you should be good to go -
+##### Simply run these two commands, and you should be good to go -
 ```
+npm install
 npm run build
 ```
 

app/controls/settings-content.tsx

@@ -34,7 +34,6 @@ import { z } from 'zod';
 const FormSchema = z.object({
     theme: z.enum(['auto', 'light', 'dark']).default('auto').optional(),
     enablePlus: z.boolean().default(false).optional(),
-    enableConsole: z.boolean().default(false).optional(),
     deviceProfile: z.string().default('desktop').optional(),
 });
 
@@ -104,15 +103,13 @@ export function SettingsContent() {
         resolver: zodResolver(FormSchema),
         defaultValues: {
             enablePlus: instSettings.enablePlus ?? false,
-            enableConsole: instSettings.enableConsole ?? false,
             deviceProfile: instSettings.deviceProfile,
         },
     });
 
     const actionSave = (data: z.infer<typeof FormSchema>) => {
         const settingsToSave: Settings.ISettings = {
             enablePlus: data.enablePlus ?? false,
-            enableConsole: data.enableConsole ?? false,
             deviceProfile: data.deviceProfile || 'desktop',
         };
 
@@ -153,30 +150,6 @@ export function SettingsContent() {
                             )}
                         />
 
-                        <Form.FormField
-                            control={form.control}
-                            name='enableConsole'
-                            render={({ field }) => (
-                                <Form.FormItem className='flex flex-row items-center justify-between rounded-lg border p-4'>
-                                    <div className='space-y-0.5'>
-                                        <Form.FormLabel>Enable Console</Form.FormLabel>
-                                        <Form.FormDescription>
-                                            Enables the emscripten console for the engines
-                                        </Form.FormDescription>
-                                    </div>
-                                    <Form.FormControl>
-                                        <Switch
-                                            checked={field.value}
-                                            onCheckedChange={(checked) => {
-                                                field.onChange(checked);
-                                                actionSave({ ...form.getValues(), enableConsole: checked });
-                                            }}
-                                        />
-                                    </Form.FormControl>
-                                </Form.FormItem>
-                            )}
-                        />
-
                         <Form.FormField
                             control={form.control}
                             name='deviceProfile'

app/globals.css

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 :root {
-  --font-sans: 'GeistSans', 
-  --font-mono:
+  --font-sans: 'GeistSans',
+    --font-mono:
 }
 
 body {
@@ -15,6 +15,33 @@ code {
   font-family: var(--font-mono), monospace;
 }
 
+.enginePage {
+  background-color: #000000;
+  color: var(--text-color-light);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.engineSplash {
+  z-index: 10;
+  transition: opacity 0.083s linear;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+/* The canvas *must not* have any border or padding, or mouse coords will be wrong */
+.engineCanvas {
+  background-color: black;
+  border: 0px none;
+  width: 100vw;
+  height: 100vh;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+
 @layer utilities {
   .text-balance {
     text-wrap: balance;
@@ -49,22 +76,23 @@ code {
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
     --sidebar-background:
-  0 0% 98%;
+      0 0% 98%;
     --sidebar-foreground:
-  240 5.3% 26.1%;
+      240 5.3% 26.1%;
     --sidebar-primary:
-  240 5.9% 10%;
+      240 5.9% 10%;
     --sidebar-primary-foreground:
-  0 0% 98%;
+      0 0% 98%;
     --sidebar-accent:
-  240 4.8% 95.9%;
+      240 4.8% 95.9%;
     --sidebar-accent-foreground:
-  240 5.9% 10%;
+      240 5.9% 10%;
     --sidebar-border:
-  220 13% 91%;
+      220 13% 91%;
     --sidebar-ring:
-  217.2 91.2% 59.8%;
+      217.2 91.2% 59.8%;
   }
+
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -91,29 +119,30 @@ code {
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --sidebar-background:
-  240 5.9% 10%;
+      240 5.9% 10%;
     --sidebar-foreground:
-  240 4.8% 95.9%;
+      240 4.8% 95.9%;
     --sidebar-primary:
-  224.3 76.3% 48%;
+      224.3 76.3% 48%;
     --sidebar-primary-foreground:
-  0 0% 100%;
+      0 0% 100%;
     --sidebar-accent:
-  240 3.7% 15.9%;
+      240 3.7% 15.9%;
     --sidebar-accent-foreground:
-  240 4.8% 95.9%;
+      240 4.8% 95.9%;
     --sidebar-border:
-  240 3.7% 15.9%;
+      240 3.7% 15.9%;
     --sidebar-ring:
-  217.2 91.2% 59.8%;
+      217.2 91.2% 59.8%;
   }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
+}

lib/settings.ts

@@ -6,15 +6,13 @@
 
 export interface ISettings {
     enablePlus: boolean;
-    enableConsole: boolean;
     deviceProfile: string;
 }
 
 const SETTINGS_KEY = 'settings';
 
 const defaultSettings: ISettings = {
     enablePlus: false,
-    enableConsole: false,
     deviceProfile: 'desktop',
 };
 

pages/v2.tsx

@@ -0,0 +1,42 @@
+'use-client'
+
+import '@/app/globals.css';
+import * as React from 'react';
+
+// --------------------
+// UI Component Imports
+// --------------------
+
+import Script from 'next/script'
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { ThemeProvider } from '@/app/controls/theme-provider'
+
+// ---------------------
+// Component Definitions
+// ---------------------
+
+// Content of host/v2
+export default function v2() {
+    return (
+        <html lang='en' className='enginePage' suppressHydrationWarning>
+            <body className='enginePage'>
+                <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+                    <div id='splash' className='engineSplash relative flex min-h-screen flex-col bg-background items-center justify-center'>
+                        <div className="flex flex-col space-y-3">
+                            <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-[250px]" />
+                                <Skeleton className="h-4 w-[200px]" />
+                            </div>
+                        </div>
+                    </div>
+                    <canvas className='engineCanvas' id='canvas' />
+                </ThemeProvider>
+                <Script src='./lib/Emscripten.js' />
+                <Script src='./lib/RSDKv2.js' />
+                <Script src='./modules/RSDKv2.js' />
+            </body>
+        </html>
+    )
+}

pages/v3.tsx

@@ -0,0 +1,42 @@
+'use-client'
+
+import '@/app/globals.css';
+import * as React from 'react';
+
+// --------------------
+// UI Component Imports
+// --------------------
+
+import Script from 'next/script'
+
+import { Skeleton } from "@/components/ui/skeleton"
+import { ThemeProvider } from '@/app/controls/theme-provider'
+
+// ---------------------
+// Component Definitions
+// ---------------------
+
+// Content of host/v2
+export default function v2() {
+    return (
+        <html lang='en' className='enginePage' suppressHydrationWarning>
+            <body className='enginePage'>
+                <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+                    <div id='splash' className='engineSplash relative flex min-h-screen flex-col bg-background items-center justify-center'>
+                        <div className="flex flex-col space-y-3">
+                            <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+                            <div className="space-y-2">
+                                <Skeleton className="h-4 w-[250px]" />
+                                <Skeleton className="h-4 w-[200px]" />
+                            </div>
+                        </div>
+                    </div>
+                    <canvas className='engineCanvas' id='canvas' />
+                </ThemeProvider>
+                <Script src='./lib/Emscripten.js' />
+                <Script src='./lib/RSDKv3.js' />
+                <Script src='./modules/RSDKv3.js' />
+            </body>
+        </html>
+    )
+}

public/lib/Emscripten.js

@@ -0,0 +1,75 @@
+var Module = {
+    onRuntimeInitialized: function () {
+        FS.mkdir('FileSystem');
+        FS.mount(IDBFS, { autoPersist: true }, 'FileSystem');
+
+        FS.syncfs(true, function (err) {
+            if (err) {
+                alert('Error syncing FS: ' + err);
+                console.error('Error syncing FS:', err);
+                reject(err);
+            } else {
+                const splash = document.getElementById("splash");
+                splash.style.opacity = 0;
+
+                setTimeout(() => {
+                    splash.remove();
+                }, 1000);
+
+                console.log('FileSystem initialized');
+                RSDK_Init();
+            }
+        });
+    },
+    print: (function () {
+        var element = document.getElementById('output');
+        if (element) element.value = ''; // clear browser cache
+        return function (text) {
+            if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+
+            console.log(text);
+            if (element) {
+                element.value += text + "\n";
+                element.scrollTop = element.scrollHeight; // focus on bottom
+            }
+        };
+    })(),
+    canvas: (() => {
+        var canvas = document.getElementById('canvas');
+
+        // As a default initial behavior, pop up an alert when the webgl context is lost.
+        // To make your application robust, you may want to override this behavior before shipping!
+        // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+        canvas.addEventListener("webglcontextlost", (e) => { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+        return canvas;
+    })(),
+    setStatus: (text) => {
+        if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
+        if (text === Module.setStatus.last.text) return;
+        var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+        var now = Date.now();
+        if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
+        Module.setStatus.last.time = now;
+        Module.setStatus.last.text = text;
+
+        if (m) {
+            text = m[1];
+        }
+
+        // statusElement.innerHTML = text;
+    },
+    totalDependencies: 0,
+    monitorRunDependencies: (left) => {
+        this.totalDependencies = Math.max(this.totalDependencies, left);
+        Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
+    }
+};
+Module.setStatus('Downloading...');
+window.onerror = () => {
+    Module.setStatus('Exception thrown, see JavaScript console');
+
+    Module.setStatus = (text) => {
+        if (text) console.error('[post-exception status] ' + text);
+    };
+};

public/lib/RSDKv2.js

@@ -0,0 +1,7 @@
+// Defined for Emscripten.js to call
+function RSDK_Init()
+{
+    // TODO: Custom FS Path
+    FS.chdir('/FileSystem/RSDKv2')
+    _RSDK_Initialize();
+}

public/lib/RSDKv3.js

@@ -0,0 +1,11 @@
+// Defined for Emscripten.js to call
+function RSDK_Init()
+{
+    // TODO: Custom FS Path, settings
+    FS.chdir('/FileSystem/RSDKv3')
+
+    // value, index
+    // index 0 - plus
+    _RSDK_Configure(0, 0);
+    _RSDK_Initialize();
+}