From ce7ba91411e8dead29ab711ab48c64623030f81e Mon Sep 17 00:00:00 2001
From: radius <andres.430@gmail.com>
Date: Tue, 2 Aug 2016 19:37:01 -0500
Subject: [PATCH] simplify template

---
 emscripten/template.html | 240 ++++++++++++++++++---------------------
 1 file changed, 113 insertions(+), 127 deletions(-)
diff --git a/emscripten/template.html b/emscripten/template.html
index 805edc2df6..f76b3bc7b7 100644
--- a/emscripten/template.html
+++ b/emscripten/template.html
@@ -1,50 +1,43 @@
 <!doctype html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>RetroArch - Template</title>
-    <style>
+
+<html lang="en">
+<head>
+   <meta charset="utf-8">
+   <title>RetroArch Web Player</title>
+   <script type="text/javascript" src="browserfs.js"></script>
+
+   <style>
       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-      textarea.emscripten { font-family: monospace; width: 80%; }
-      div.emscripten, h1 { text-align: center; }
-      div.emscripten_border { border: 1px solid black; }
-      #fakerom { font-size: 20pt; margin: 5pt;}
-      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      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.emscripten { border: 0px none; }
-    </style>
-  </head>
-  <body>
-    <h1>Template</h1>
-    <hr/>
-    <div class="emscripten" id="status">Downloading...</div>
-    <div class="emscripten">
-      <progress value="0" max="100" id="progress" hidden=1></progress>  
-    </div>
-    <div class="emscripten_border" id="canvas_div" style="display: none">
+   </style>
+</head>
+<body>
+   <hr/>
+   <div class="emscripten_border" id="canvas_div" style="display: none">
       <canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
-    </div>
-    <div class="emscripten emscripten_border" id="openrom">
-      <button id="fakerom" onclick="document.getElementById('rom').click()">Select content</button>
-      <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('fakerom').click();" onchange="runEmulator(event.target.files);" multiple />
-    </div>
-    <hr/>
-    <div class="emscripten">
-      
+   </div>
+   <div class="emscripten emscripten_border" id="openrom">
+      <button id="btnLoad" onclick="document.getElementById('rom').click()">Select content</button>
+      <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()">Select content</button>
+   </div>
+   <hr/>
+   <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>
-      &nbsp;&nbsp;&nbsp;
-      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, 
-                                                                                document.getElementById('resize').checked)"><br>
+      <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br>
       <input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label><br>
       <input type="checkbox" id="sdl2"><label for="sdl2" id="sdl2-label">Enable SDL2</label><br>
       <input type="textbox" id="latency" size="3" maxlength="3" value="96"> <label for="latency" id="latency-label">Audio latency (ms) (increase if you hear pops at fullspeed, can only be done before loading game)</label>
-    </div>
-    
-    <hr/>
-    <textarea class="emscripten" id="output" rows="8"></textarea>
-    <hr>
-    <div class="emscripten" id="controls">
+   </div>
+
+   <hr/>
+   <textarea class="emscripten" id="output" rows="8"></textarea>
+   <hr>
+   <div class="emscripten" id="controls">
       Controls:<br>
       <br>
       A button (OK in menu): X<br>
@@ -61,96 +54,89 @@
       Slow motion: E (hold)</br>
       Save state: F2<br>
       Load state: F4
-    </div>
-    <script type='text/javascript'>
-      var count = 0;
-      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(){initFromData(this.result, this.file_name)};
-          filereader.readAsArrayBuffer(files[i]);
-        }
-      }
+   </div>
 
-      function initFromData(data, name){
-        var dataView = new Uint8Array(data);
-        Module.FS_createDataFile('/', name, dataView, true, false);
-        count--;
-        if (count === 0) {
-          Module.FS_createFolder('/', 'etc', true, true);
-          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';
-          Module['callMain'](Module['arguments']);
-        }
-      }
-    </script>
-    <script type='text/javascript'>
-      // connect to canvas
-      var Module = {
-	     noInitialRun: true,
-		  arguments: ["-v", "--menu"],
-        preRun: [],
-        postRun: [],
-        print: (function() {
-          var element = document.getElementById('output');
-          element.value = ''; // clear browser cache
-          return function(text) {
+</body>
+</html>
+<script type='text/javascript'>
+   var count = 0;
+   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);
+      Module.FS_createFolder('/', 'savefiles', true, true);
+      Module.FS_createFolder('/', 'savestates', true, true);
+      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';
+      Module['callMain'](Module['arguments']);
+  }
+
+   function uploadData(data, name)
+   {
+      var dataView = new Uint8Array(data);
+      Module.FS_createDataFile('/', name, dataView, true, false);
+   }
+
+   var Module = 
+   {
+      noInitialRun: true,
+      arguments: ["-v", "--menu"],
+      preRun: [],
+      postRun: [],
+      print: (function() 
+      {
+         var element = document.getElementById('output');
+         element.value = ''; // clear browser cache
+         return function(text) 
+         {
             text = Array.prototype.slice.call(arguments).join(' ');
-            // These replacements are necessary if you render to raw HTML
-            //text = text.replace(/&/g, "&amp;");
-            //text = text.replace(/</g, "&lt;");
-            //text = text.replace(/>/g, "&gt;");
-            //text = text.replace('\n', '<br>', 'g');
             element.value += text + "\n";
             element.scrollTop = 99999; // focus on bottom
-          };
-        })(),
-        printErr: function(text) {
-          var text = Array.prototype.slice.call(arguments).join(' ');
-          var element = document.getElementById('output');
-          element.value += text + "\n";
-          element.scrollTop = 99999; // focus on bottom
-        },
-        canvas: document.getElementById('canvas'),
-        setStatus: function(text) {
-          if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
-          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
-          var statusElement = document.getElementById('status');
-          var progressElement = document.getElementById('progress');
-          if (m) {
-            text = m[1];
-            progressElement.value = parseInt(m[2])*100;
-            progressElement.max = parseInt(m[4])*100;
-            progressElement.hidden = false;
-          } else {
-            progressElement.value = null;
-            progressElement.max = null;
-            progressElement.hidden = true;
-          }
-          statusElement.innerHTML = text;
-        },
-        totalDependencies: 0,
-        monitorRunDependencies: function(left) {
-          this.totalDependencies = Math.max(this.totalDependencies, left);
-          Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
-        }
-      };
-      Module.setStatus('Downloading...');
-    </script>
-	<script type="text/javascript" src="retroarch.js"></script>
+         };
+      })(),
+
+      printErr: function(text)
+      {
+         var text = Array.prototype.slice.call(arguments).join(' ');
+         var element = document.getElementById('output');
+         element.value += text + "\n";
+         element.scrollTop = 99999; // focus on bottom
+      },
+      canvas: document.getElementById('canvas'),
+
+      totalDependencies: 0,
+      monitorRunDependencies: function(left) 
+      {
+         this.totalDependencies = Math.max(this.totalDependencies, left);
+      }
+   };
+
+</script>
+<script type="text/javascript" src="browserfs.js"></script>
+<script type="text/javascript" src="retroarch.js"></script>
\ No newline at end of file
