EmulatorJS - First Version (#23)

* feat: added EmulatorJS support for Mega Drive, NES, and N64 (see: #15)

* doc: updated attribution in README.MD to include EmulatorJS

* ci: updated action to include submodules

gaseous-server/wwwroot/pages/EmulatorJS.html

@@ -0,0 +1,25 @@
+<div style='width:640px;height:480px;max-width:100%'>
+    <div id='game'></div>
+</div>
+
+<script type='text/javascript'>
+    EJS_player = '#game';
+
+    // Can also be fceumm or nestopia
+    EJS_core = urlParams.get('core');
+
+    // Lightgun
+    EJS_lightgun = false; // can be true or false
+
+    // URL to BIOS file
+    EJS_biosUrl = ''; // example: https://dl.dropboxusercontent.com/s/[random-code]/bios.bin
+
+    // URL to Game rom
+    EJS_gameUrl = decodeURIComponent(urlParams.get('rompath'));
+
+    // Path to the data directory
+    EJS_pathtodata = '/EmulatorJS/data/';
+
+    EJS_DEBUG_XX = false;
+</script>
+<script src='/EmulatorJS/data/loader.js'></script>

gaseous-server/wwwroot/pages/emulator.html

@@ -0,0 +1,48 @@
+<div id="bgImage">
+    <div id="bgImage_Opacity"></div>
+</div>
+
+<div id="emulator"></div>
+
+<script type="text/javascript">
+    const urlParams = new URLSearchParams(window.location.search);
+
+    var gameId = urlParams.get('gameid');
+    var gameData;
+    var artworks = null;
+    var artworksPosition = 0;
+
+    ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
+        gameData = result;
+
+        // load artwork
+        if (result.artworks) {
+            artworks = result.artworks.ids;
+            var startPos = randomIntFromInterval(0, result.artworks.ids.length);
+            artworksPosition = startPos;
+            rotateBackground();
+        } else {
+            if (result.cover) {
+                var bg = document.getElementById('bgImage');
+                bg.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/cover/image"); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px);');
+            }
+        }
+    });
+
+    function rotateBackground() {
+        if (artworks) {
+            artworksPosition += 1;
+            if (artworks[artworksPosition] == null) {
+                artworksPosition = 0;
+            }
+            var bg = document.getElementById('bgImage');
+            bg.setAttribute('style', 'background-image: url("/api/v1/Games/' + gameId + '/artwork/' + artworks[artworksPosition] + '/image"); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(10px); -webkit-filter: blur(10px);');
+        }
+    }
+
+    switch (urlParams.get('engine')) {
+        case 'EmulatorJS':
+            $('#emulator').load('/pages/EmulatorJS.html');
+            break;
+    }
+</script>

gaseous-server/wwwroot/pages/game.html

@@ -304,7 +304,7 @@
                 var newTable = document.createElement('table');
                 newTable.className = 'romtable';
                 newTable.setAttribute('cellspacing', 0);
-                newTable.appendChild(createTableRow(true, ['Name', 'Size', 'Media', '', '']));
+                newTable.appendChild(createTableRow(true, ['Name', 'Size', 'Media', '', '', '']));
 
                 var lastPlatform = '';
                 for (var i = 0; i < result.length; i++) {
@@ -318,11 +318,17 @@
                         newTable.appendChild(platformRow);
                     }
 
+                    var launchButton = '';
+                    if (result[i].emulator) {
+                        launchButton = '<a href="/index.html?page=emulator&engine=' + result[i].emulator.Type + '&core=' + result[i].emulator.Core + '&gameid=' + gameId + '&rompath=' + encodeURIComponent('/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/file') + '" class="romlink">Start</a>';
+                    }
+
                     var newRow = [
                         '<a href="/api/v1/Games/' + gameId + '/roms/' + result[i].id + '/file" class="romlink">' + result[i].name + '</a>',
                         formatBytes(result[i].size, 2),
                         result[i].romTypeMedia,
                         result[i].mediaLabel,
+                        launchButton,
                         '<span class="romlink" onclick="showDialog(\'rominfo\', ' + result[i].id + ');">...</span>'
                     ];
                     newTable.appendChild(createTableRow(false, newRow, 'romrow', 'romcell'));

gaseous-server/wwwroot/styles/style.css

@@ -578,4 +578,10 @@ button:disabled {
 
 .redbutton:disabled {
     background-color: #555;
+}
+
+#emulator {
+    margin: 0 auto;
+    width: 640px;
+    padding-top: 100px;
 }