From 0cf79af64695d6d6485d88cde09a9ec49f80fc1e Mon Sep 17 00:00:00 2001
From: radius <andres.430@gmail.com>
Date: Wed, 3 Aug 2016 01:20:35 -0500
Subject: [PATCH] allow loading persistent content in webplayer

---
 emscripten/template.html  |  57 ++++++++++++++++-----
 emscripten/webplayer.html | 105 +++++++++++++++++++++++++++++++++-----
 2 files changed, 136 insertions(+), 26 deletions(-)
diff --git a/emscripten/template.html b/emscripten/template.html
index f6dd4c1c59..b90fbe994f 100644
--- a/emscripten/template.html
+++ b/emscripten/template.html
@@ -7,26 +7,25 @@
    <script type="text/javascript" src="browserfs.js"></script>
 
    <style>
-      .webplayer { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-      textarea.webplayer { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
-      div.webplayer, h1 { text-align: left; }
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      textarea.emscripten { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
+      div.emscripten, h1 { text-align: left; }
       div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; }
-      canvas.webplayer { border: 0px none; }
+      canvas.emscripten { border: 0px none; }
    </style>
 </head>
 <body>
    <hr/>
-   <div class="webplayer_border" id="canvas_div" style="display: none">
-      <canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
+   <div class="emscripten_border" id="canvas_div" style="display: none">
+      <canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
    </div>
-   <hr/>
-   <div class="webplayer webplayer_border" id="openrom">
+   <div class="emscripten emscripten_border" id="openrom">
       <button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
-      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" multiple />
+      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="runEmulator(event.target.files);" multiple />
       <button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
    </div>
    <hr/>
-   <div class="webplayer">
+   <div class="emscripten">
       <input type="checkbox" id="resize"><label for="resize">Resize canvas</label>
       <input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label>
       <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br>
@@ -36,14 +35,46 @@
    </div>
 
    <hr/>
-   <textarea class="webplayer" id="output" rows="15"></textarea>
+   <textarea class="emscripten" id="output" rows="8"></textarea>
    <hr>
+   <div class="emscripten" id="controls">
+      Controls:<br>
+      <br>
+      A button (OK in menu): X<br>
+      B button (Back in menu): Z<br>
+      X Button: S<br>
+      Y Button: A<br>
+      L Button: Q<br>
+      R Button: W<br>
+      D-pad: Arrow Keys<br>
+      Start Button: Enter<br>
+      Select Button: Shift<br>
+      Toggle Menu: F1<br>
+      Fast forward: Spacebar (toggle)<br>
+      Slow motion: E (hold)</br>
+      Save state: F2<br>
+      Load state: F4
+   </div>
+
 </body>
 </html>
 <script type='text/javascript'>
    var count = 0;
-   function startRetroArch()
+   function runEmulator(files)
    {
+      count = files.length;
+      document.getElementById("openrom").innerHTML = '';
+      document.getElementById("openrom").style.display = 'none';
+      for (var i = 0; i < files.length; i++) 
+      {
+         filereader = new FileReader();
+         filereader.file_name = files[i].name;
+         filereader.onload = function(){uploadData(this.result, this.file_name)};
+         filereader.readAsArrayBuffer(files[i]);
+    }
+  }
+  function startRetroArch()
+  {
       Module.FS_createFolder('/', 'etc', true, true);
       Module.FS_createFolder('/', 'config', true, true);
       Module.FS_createFolder('/', 'content', true, true);
@@ -64,7 +95,7 @@
       document.getElementById('latency').disabled = true;
       document.getElementById('latency-label').style.color = 'gray';
       Module['callMain'](Module['arguments']);
-   }
+  }
 
    function uploadData(data, name)
    {
diff --git a/emscripten/webplayer.html b/emscripten/webplayer.html
index cd024b9018..d70198ab1b 100644
--- a/emscripten/webplayer.html
+++ b/emscripten/webplayer.html
@@ -22,7 +22,7 @@
    <hr/>
    <div class="webplayer webplayer_border" id="openrom">
       <button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
-      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" multiple />
+      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="selectFiles(event.target.files)" multiple />
       <button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
    </div>
    <hr/>
@@ -42,30 +42,109 @@
 </html>
 <script type='text/javascript'>
    var count = 0;
+
+   function setupFileSystem()
+   {
+      if(localStorage.getItem("fs_inited")!="true")
+      {
+         var lsfs = new BrowserFS.FileSystem.LocalStorage();
+         BrowserFS.initialize(lsfs);
+         var BFS = new BrowserFS.EmscriptenFS();
+   
+         FS.mount(BFS, {root: '/'}, '/home');
+   
+         console.log('WEBPLAYER: Filesystem initialized');
+      }
+      else
+      {
+         console.log('WEBPLAYER: Filesystem already initialized');
+      }
+   }
+
+
+   function setupFolderStructure()
+   {
+      FS.createPath('/', '/home/web_user', true, true);
+      FS.createPath('/', '/home/web_user/.config', true, true);
+      FS.createPath('/', '/home/web_user/.config/retroarch', true, true);
+      FS.createPath('/', '/home/web_user/content', true, true);
+      FS.createPath('/', '/home/web_user/saves', true, true);
+      FS.createPath('/', '/home/web_user/states', true, true);
+      FS.createPath('/', '/home/web_user/system', true, true);
+   }
+
+   function stat(path)
+   {
+      try{
+         FS.stat(path);
+      }
+      catch(err)
+      {
+         console.log("WEBPLAYER: file " + path + " doesn't exist");
+         return false;
+      }
+      return true;
+   }
+
    function startRetroArch()
    {
-      setupFileSystem();
-      var config = 'input_player1_select = shift\n';
-      var latency = parseInt(document.getElementById('latency').value, 10);
-      if (isNaN(latency)) latency = 96;
-      config += 'audio_latency = ' + latency + '\n'
-      if (document.getElementById('vsync').checked)
-         config += 'video_vsync = true\n';
-      else
-         config += 'video_vsync = false\n';
-      Module.FS_createDataFile('/etc', 'retroarch.cfg', config, true, true);
       document.getElementById('canvas_div').style.display = 'block';
       document.getElementById('vsync').disabled = true;
       document.getElementById('vsync-label').style.color = 'gray';
       document.getElementById('latency').disabled = true;
       document.getElementById('latency-label').style.color = 'gray';
+
+      setupFileSystem();
+      setupFolderStructure();
+      cfgFile = '/home/web_user/.config/retroarch/retroarch.cfg'
+
+      if (!stat(cfgFile))
+      {
+         console.log ("WEBPLAYER: first run, setting defaults");
+         var config = 'input_player1_select = shift\n';
+         var latency = parseInt(document.getElementById('latency').value, 10);
+         if (isNaN(latency)) latency = 96;
+         config += 'audio_latency = ' + latency + '\n'
+         if (document.getElementById('vsync').checked)
+            config += 'video_vsync = true\n';
+         else
+         config += 'video_vsync = false\n';
+         config += 'system_directory = /home/web_user/system/\n';
+         config += 'savefile_directory = /home/web_user/saves/\n';
+         config += 'savestate_directory = /home/web_user/saves/\n';
+         config += 'rgui_browser_directory = /home/web_user/content/\n';
+
+         FS.writeFile(cfgFile, config);
+      }
+      else 
+      {
+         console.log ("WEBPLAYER: loading config from " + cfgFile);
+      }
       Module['callMain'](Module['arguments']);
    }
+   
+   function selectFiles(files)
+   {
+      count = files.length;
 
-   function uploadData(data, name)
+      for (var i = 0; i < files.length; i++) 
+      {
+         filereader = new FileReader();
+         filereader.file_name = files[i].name;
+         filereader.readAsArrayBuffer(files[i]);
+         filereader.onload = function(){uploadData(this.result, this.file_name)};
+      }
+   }
+
+   function uploadData(data,name)
    {
       var dataView = new Uint8Array(data);
-      Module.FS_createDataFile('/', name, dataView, true, false);
+      FS.createDataFile('/', name, dataView, true, false);
+
+      var data = FS.readFile(name,{ encoding: 'binary' });
+      FS.writeFile('/home/web_user/content/' + name, data ,{ encoding: 'binary' });
+      FS.unlink(name);
+
    }
 
    var Module = 
