add EJS_videoRotation & other minor fixes

components/globals/Sandbox.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  dir: {
+    type: String,
+    default: ''
+  },
+  file: {
+    type: String,
+    default: 'app.vue'
+  }
+})
+
+const url = ref('')
+
+onMounted(() => {
+  url.value = props.src
+})
+</script>
+
+<template>
+  <div class="sandbox">
+    <iframe
+      v-if="url"
+      :src="url"
+      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+    />
+  </div>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.sandbox': {
+    '--sandbox-height': '700px',
+    background: '{elements.surface.background.base}',
+    width: '100%',
+    height: 'var(--sandbox-height)',
+    overflow: 'hidden',
+    fontSize: '{text.3xl.fontSize}',
+    lineHeight: '{text.3xl.lineHeight}',
+    border: '1px solid {elements.border.secondary.static}',
+    borderRadius: '{radii.md}',
+    iframe: {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }
+})
+</style>

content/1.docs/6.3rd Party.md

@@ -39,6 +39,6 @@ To use systems that require a bios, like psx, add the bios under the BIOS folder
 Example: psx.bin
 ```
 
-### Installation (WIP)
+#### Installation (WIP)
 
 This is a drag and drop extension, with the exception that it requires something to host PHP files like XAMPP. Put your roms in the /roms/ folder and bios in the /bios/ folder, following the above naming scheme.

content/1.docs/7.options.md

@@ -133,6 +133,14 @@ URL to game patch file.
 - Default: `''`
 - Example: `EJS_gamePatchUrl = 'someFile.patch'`
 
+### `EJS_videoRotation`
+
+Sets the rotation of the video from retroarch. It can be `0` - No rotation, `1` - 90 degrees, `2` - 180 degrees, `3` - 270 degrees.
+
+- Type: `number`
+- Default: `0`
+- Example: `EJS_videoRotation = 1`
+
 ### `EJS_threads`
 
 Runs the core using threads. This may improve performance. As of 4.2.0, if the `SharedArrayBuffer` function is exposed (see below), and `EJS_threads` is not true, the user will have the option to opt-in to threads.

nuxt.config.ts

@@ -1,11 +1,15 @@
+import { createResolver } from '@nuxt/kit'
+const { resolve: resolvePath } = createResolver(import.meta.url)
+
 export default defineNuxtConfig({
   extends: ['@nuxt-themes/docus'],
   devtools: { enabled: false },
 
   components: [{
     dirs: ['~/components'],
     level: -1
-  }],
+  },
+  { path: resolvePath('components/globals'), global: true, prefix: '' },],
 
   modules: [
     'nuxt-gtag',
@@ -56,4 +60,8 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-12-21',
-})
+})
+
+function resolve(arg0: string): string | undefined {
+  throw new Error("Function not implemented.");
+}

package.json

@@ -1,13 +1,13 @@
 {
   "name": "emulatorjs.org",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "The EmulatorJS Website",
   "main": "index.js",
-  "author": "Ethan O'Brien <ethan.a.obrien@gmail.com> (https://github.com/ethanaobrien)",
   "license": "MIT",
   "contributors": [
-    "Isaiah Koontz <isaiah.koontz@gmail.com> (https://github.com/KingIzzymon)",
-    "Allan Niles (https://github.com/allancoding)"
+    "Allan Niles (https://github.com/allancoding)",
+    "Ethan O'Brien <ethan.a.obrien@gmail.com> (https://github.com/ethanaobrien)",
+    "Isaiah Koontz <isaiah.koontz@gmail.com> (https://github.com/KingIzzymon)"
   ],
   "repository": "https://github.com/EmulatorJS/emulatorjs.org",
   "scripts": {

public/demo.html

@@ -3,9 +3,28 @@
     html, body {
         margin: 0;
         padding: 0;
+        background-image: url('flappybird.png');
+    }
+    #game {
+        opacity: 0;
+        animation: fadeIn 1s ease-in-out;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    .background {
+        background-image: url('flappybird.png');
+        background-size: cover;
+        background-position: center center;
+        background-repeat: no-repeat;
+        position: absolute;
+        width: 100%;
+        height: 100%;
     }
 </style>
 <div style="width:100%; height:100%;">
+    <div class="background"></div>
     <div id='game'></div>
 </div>
 <script type='text/javascript'>
@@ -18,13 +37,14 @@
     EJS_backgroundImage = window.location.href.substring(0, window.location.href.indexOf('/',  window.location.href.indexOf('//') + 2)) + '/flappybird.png';
     EJS_backgroundBlur = true;
     EJS_AdMode = 1;
+    EJS_videoRotation = 0;
     window.EJS_AdUrl = "https://ads.emulatorjs.org/";
-    window.EJS_disableDatabases = true;
     window.EJS_ready = function() {
+        document.getElementById('game').style.opacity = 1;
         detectAdBlock("data:text/html;base64,PGh0bWw+PHN0eWxlPiNhZGJsb2Nre2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwuOCk7cG9zaXRpb246Zml4ZWQ7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTt0b3A6MDtsZWZ0OjA7ei1pbmRleDoxMDAwO3RleHQtYWxpZ246Y2VudGVyO2NvbG9yOiNmZmZ9Ym9keSxodG1se2JhY2tncm91bmQtY29sb3I6dHJhbnNwYXJlbnR9PC9zdHlsZT48Ym9keSBzdHlsZT0ibWFyZ2luOjAiPjxkaXYgaWQ9ImFkYmxvY2siPjxoMT5IaSBBZGJsb2NrIFVzZXIhPC9oMT48cD5BZHMgb24gdGhpcyBwYWdlIG1heSBjb21lIGFuZCBnbyBkZXBlbmRpbmcgb24gaG93IG1hbnkgcGVvcGxlIGFyZSBmdW5kaW5nIHRoaXMgcHJvamVjdC48YnI+WW91IGNhbiBoZWxwIGZ1bmQgdGhpcyBwcm9qZWN0IG9uPGEgaHJlZj0iaHR0cHM6Ly9wYXRyZW9uLmNvbS9FbXVsYXRvckpTIj5wYXRyZW9uPC9hPjwvcD48L2Rpdj48L2JvZHk+PC9odG1sPg==");
     }
+    let adBlockEnabled = false;
     function detectAdBlock(url) {
-        let adBlockEnabled = false;
         try {
             const adframe = document.querySelector('iframe[src="'+window.EJS_AdUrl+'"]');
             var adpage = adframe.contentWindow.document;
@@ -36,7 +56,13 @@
             adBlockEnabled = true;
         }
         if (adBlockEnabled) {
-            window.EJS_adBlocked(url);    
+            window.EJS_adBlocked(url);
+
+        }
+    }
+    window.EJS_onGameStart = function() {
+        if (adBlockEnabled) {
+            document.querySelector('.ejs_ad_iframe').remove();
         }
     }
 </script>