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

.github/workflows/BuildDockerOnTag.yml

@@ -12,6 +12,8 @@ jobs:
       -
         name: Checkout
         uses: actions/checkout@v3
+        with:
+          submodules: 'true'
       -
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "gaseous-server/wwwroot/EmulatorJS"]
+	path = gaseous-server/wwwroot/EmulatorJS
+	url = https://github.com/EmulatorJS/EmulatorJS.git

README.MD

@@ -16,6 +16,7 @@ The following projects are used by Gaseous
 * https://github.com/JamesNK/Newtonsoft.Json
 * https://www.nuget.org/packages/MySql.Data/8.0.32.1
 * https://github.com/kamranayub/igdb-dotnet
+* https://github.com/EmulatorJS/EmulatorJS
 
 ## Configuration File
 When Gaseous-Server is started for the first time, it creates a configuration file at ~/.gaseous-server/config.json if it doesn't exist. Some values can be filled in using environment variables (such as in the case of using docker).
@@ -57,10 +58,17 @@ When Gaseous-Server is started for the first time, it creates a configuration fi
 
 ## Deploy with Docker
 Dockerfile and docker-compose.yml files have been provided to make deployment of the server as easy as possible.
+1. Download the docker-compose.yml file
+2. Open the docker-compose.yml file and edit the igdbclientid and igdbclientsecret to the values retrieved from your IGDB account
+3. Run the command "docker-compose up -d"
+4. Connect to the host on port 5198
+
+## Build and Deploy with Docker
+Dockerfile and docker-compose-build.yml files have been provided to make deployment of the server as easy as possible.
 1. Clone the repo with "git clone https://github.com/gaseous-project/gaseous-server.git"
 2. Change into the gaseous-server directory
-3. Open the docker-compose.yml file and edit the igdbclientid and igdbclientsecret to the values retrieved from your IGDB account
-4. Run the command "docker-compose up -d"
+3. Open the docker-compose-build.yml file and edit the igdbclientid and igdbclientsecret to the values retrieved from your IGDB account
+4. Run the command "docker-compose up --file docker-compose-build.yml -d"
 5. Connect to the host on port 5198
 
 ## Adding Content
@@ -98,4 +106,4 @@ Loop through each of the search candidates searching using:
 2. "wherefuzzy" - partial match using wildcards
 3. "search" - uses a more flexible search method
 
-Note: that if more than one result is found, the image will be set as "Unknown" as there is no way for Gaseous to know which title is the correct one.
+Note: that if more than one result is found, the image will be set as "Unknown" as there is no way for Gaseous to know which title is the correct one.

gaseous-server/Classes/Roms.cs

@@ -107,6 +107,19 @@ namespace gaseous_server.Classes
                 Path = (string)romDR["path"],
 				Source = (GameRomItem.SourceType)(Int32)romDR["metadatasource"]
             };
+
+			// check for a web emulator and update the romItem
+			foreach (Models.PlatformMapping.PlatformMapItem platformMapping in Models.PlatformMapping.PlatformMap)
+			{
+				if (platformMapping.IGDBId == romItem.PlatformId)
+				{
+					if (platformMapping.WebEmulator != null)
+					{
+						romItem.Emulator = platformMapping.WebEmulator;
+					}
+				}
+			}
+
             return romItem;
         }
 
@@ -115,6 +128,7 @@ namespace gaseous_server.Classes
 			public long Id { get; set; }
 			public long PlatformId { get; set; }
 			public IGDB.Models.Platform Platform { get; set; }
+			public Dictionary<string, string>? Emulator { get; set; }
 			public long GameId { get; set; }
 			public string? Name { get; set; }
 			public long Size { get; set; }

gaseous-server/Controllers/GamesController.cs

@@ -749,6 +749,7 @@ namespace gaseous_server.Controllers
         }
 
         [HttpGet]
+        [HttpHead]
         [Route("{GameId}/roms/{RomId}/file")]
         [ProducesResponseType(typeof(FileStreamResult), StatusCodes.Status200OK)]
         [ProducesResponseType(StatusCodes.Status404NotFound)]

gaseous-server/Models/PlatformMapping.cs

@@ -78,6 +78,8 @@ namespace gaseous_server.Models
             public string IGDBName { get; set; }
             public List<string> AlternateNames { get; set; } = new List<string>();
             public List<string> KnownFileExtensions { get; set; } = new List<string>();
+            public Dictionary<string, string>? WebEmulator { get; set; }
+
         }
 	}
 }

gaseous-server/Program.cs

@@ -76,7 +76,11 @@ app.UseResponseCaching();
 app.UseAuthorization();
 
 app.UseDefaultFiles();
-app.UseStaticFiles();
+app.UseStaticFiles(new StaticFileOptions
+{
+    ServeUnknownFileTypes = true, //allow unkown file types also to be served
+    DefaultContentType = "plain/text" //content type to returned if fileType is not known.
+});
 
 app.MapControllers();
 

gaseous-server/Support/PlatformMap.json

@@ -60,7 +60,11 @@
             ".MD",
             ".SG",
             ".SMD"
-        ]
+        ],
+        "WebEmulator": {
+            "Type": "EmulatorJS",
+            "Core": "segaMD"
+        }
     },
     {
         "IGDBId": 4,
@@ -71,7 +75,11 @@
         ],
         "KnownFileExtensions": [
             ".Z64"
-        ]
+        ],
+        "WebEmulator": {
+            "Type": "EmulatorJS",
+            "Core": "n64"
+        }
     },
     {
         "IGDBId": 18,
@@ -88,6 +96,10 @@
             ".SFC",
             ".SMC",
             ".SWC"
-        ]
+        ],
+        "WebEmulator": {
+            "Type": "EmulatorJS",
+            "Core": "nes"
+        }
     }
 ]

gaseous-server/gaseous-server.csproj

@@ -119,6 +119,10 @@
   </ItemGroup>
   <ItemGroup>
     <Content Remove="Support\PlatformMap.json" />
+    <Content Remove="wwwroot\styles\select2.min.css" />
+    <Content Remove="wwwroot\scripts\select2.min.js" />
+    <Content Remove="wwwroot\scripts\moment.js" />
+    <Content Remove="wwwroot\scripts\jquery-3.6.0.min.js" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="Support\PlatformMap.json" Condition="'$(ExcludeConfigFilesFromBuildOutput)'!='true'">
@@ -165,4 +169,9 @@
     <EmbeddedResource Include="Assets\Ratings\CLASS_IND\CLASS_IND_Ten.svg" />
     <EmbeddedResource Include="Assets\Ratings\CLASS_IND\CLASS_IND_Twelve.svg" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Update="wwwroot\EmulatorJS\data\old\sega-old-wasm.data">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
 </Project>

gaseous-server/wwwroot/index.html

@@ -3,10 +3,10 @@
 <head>
     <meta charset="utf-8" />
     <link type="text/css" rel="stylesheet" href="/styles/style.css" />
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://momentjs.com/downloads/moment.js"></script>
-    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
-    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+    <script src="/scripts/jquery-3.6.0.min.js"></script>
+    <script src="/scripts/moment.js"></script>
+    <link href="/styles/select2.min.css" rel="stylesheet" />
+    <script src="/scripts/select2.min.js"></script>
     <script src="/scripts/main.js" type="text/javascript"></script>
     <script src="/scripts/filterformating.js" type="text/javascript"></script>
     <script src="/scripts/gamesformating.js" type="text/javascript"></script>

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;
 }