Updated fiddle, with latest version of DRGTK Standard.

Author: amirrajan

.DS_Store

@@ -1,7 +1,7 @@
 var GDragonRubyGameId = 'dragonruby-sandbox';
 var GDragonRubyGameTitle = 'DragonRuby Sandbox';
 var GDragonRubyDevTitle = 'DragonRuby';
-var GDragonRubyGameVersion = '2.0';
+var GDragonRubyGameVersion = '3.0';
 var GDragonRubyIcon = '/metadata/icon.png';
 
 function syncDataFiles(dbname, baseurl)
@@ -360,27 +360,56 @@ function syncDataFiles(dbname, baseurl)
     return retval;
 }
 
+var prepareFilesystem = function()
+{
+  // Download the game data and set up the filesystem!
+  // set up a persistent store for save games, etc.
+  FS.mkdir('/persistent');
+  FS.mount(IDBFS, {}, '/persistent');
+  FS.syncfs(true, function(err) {
+    if (err) {
+      console.log("WARNING: Failed to populate persistent store. Save games likely lost?");
+    } else {
+      console.log("Read in from persistent store.");
+    }
+
+    loadDataFiles(GDragonRubyGameId, 'gamedata/', function() {
+      console.log("Game data is sync'd to MEMFS. Starting click-to-play()...");
+      //Module.setStatus("Ready!");
+      //setTimeout(function() { Module.setStatus(""); statusElement.style.display='none'; }, 1000);
+      Module.setStatus("");
+      statusElement.style.display='none';
+      Module.startClickToPlay();
+    });
+  });
+}
+
+
 var statusElement = document.getElementById('status');
 var progressElement = document.getElementById('progress');
 var canvasElement = document.getElementById('canvas');
 
-canvasElement.style.width =  '480px';
-canvasElement.style.height = '270px';
+canvasElement.style.width = '100%';
+canvasElement.style.height = '100%';
+document.getElementById('borderdiv').style.border = '0px';
 
-statusElement.style.display = 'none';
-progressElement.style.display = 'none';
-document.getElementById('progressdiv').style.display = 'none';
+//statusElement.style.display = 'none';
+//progressElement.style.display = 'none';
+//document.getElementById('progressdiv').style.display = 'none';
 document.getElementById('output').style.display = 'none';
-document.getElementById('game-input').style.display = "none"
 
-if (!window.parent.window.gtk) {
-  window.parent.window.gtk = {};
-}
+// if (!window.parent.window.gtk) {
+//   window.parent.window.gtk = {};
+// }
 
 window.parent.window.gtk.saveMain = function(text) {
   FS.writeFile('app/main.rb', text);
   window.gtk.play();
 }
+// window.parent.window.gtk.saveMain = function(text) {
+//   FS.writeFile('app/main.rb', text);
+//   window.gtk.play();
+// }
 
 
 var loadDataFiles = function(dbname, baseurl, onsuccess) {
@@ -498,8 +527,14 @@ var base64Encode = function(ui8array) {
     return out;
 }
 
+function startGame()
+{
+    Module["removeRunDependency"]("dragonruby_init");
+}
+
+
 var Module = {
-  noInitialRun: true,
+  noInitialRun: false,
   preInit: [],
   clickedToPlay: false,
   clickToPlayListener: function() {
@@ -510,32 +545,50 @@ var Module = {
         div.removeEventListener('click', Module.clickToPlayListener);
         document.body.removeChild(div);
     }
-    if (window.parent.window.gtk.starting) {
-      window.parent.window.gtk.starting();
-    }
-    Module["callMain"]();  // go go go!
+    // if (window.parent.window.gtk.starting) {
+    //   window.parent.window.gtk.starting();
+    // }
+
+    startGame();  // go go go!
   },
   startClickToPlay: function() {
     var base64 = base64Encode(FS.readFile(GDragonRubyIcon, {}));
     var div = document.createElement('div');
+    var leftPx = ((window.innerWidth - 640) / 2);
+    var leftPerc = Math.floor((leftPx / window.innerWidth) * 100);
     div.id = 'clicktoplaydiv';
+    div.style.width = '360px';
+    div.style.height = '360px';
     div.style.backgroundColor = 'rgb(40, 44, 52)';
-
+    div.style.position = 'absolute';
+    div.style.top = '50%';
+    div.style.left = '50%';
+    div.style.transform = 'translate(-50%, -50%)';
 
     var img = new Image();
     img.onload = function() {  // once we know its size, scale it, keeping aspect ratio.
-      img.style.width = '128px';
-      img.style.height = '101px';
+      var pct = 30;
+      var w = img.naturalWidth;
+      var h = img.naturalHeight;
+      if (!w || !h || (w == h)) {
+        img.style.width = '' + pct + '%';
+        img.style.height = '' + pct + '%';
+      } else if (w > h) {
+        img.style.width = '' + pct + '%';
+      } else {
+        img.style.height = '' + pct + '%';
+      }
       img.style.display = 'block';
     }
 
     img.style.display = 'none';
-    img.style.width = '128px';
-    img.style.height = '101px';
+    img.style.width = 'auto';
+    img.style.height = 'auto';
     img.style.margin = 0;
     img.style.position = 'absolute';
-    img.style.top = '10px';
-    img.style.left = '176px';
+    img.style.top = '25%';
+    img.style.left = '50%';
+    img.style.transform = 'translate(-50%, -50%)';
     img.src = 'data:image/png;base64,' + base64;
     div.appendChild(img);
 
@@ -553,40 +606,26 @@ var Module = {
     div.appendChild(p);
 
     p = document.createElement('p');
-    p.innerHTML = 'Click here to begin, or press Ctrl+S<br/>in the code editor to the left.';
+    p.innerHTML = 'Click the run button, or press Ctrl+S<br/>in the code editor to the left.';
     p.style['font-family'] = "monospace";
+    p.style['font-size'] = "14px";
     p.style.textAlign = 'center';
     p.style.backgroundColor = 'rgb(40, 44, 52)';
     p.style.color = '#FFFFFF';
     p.style.width = '100%';
     p.style.position = 'absolute';
-    p.style.top = '70%';
+    p.style.top = '60%';
     div.appendChild(p);
 
     document.body.appendChild(div);
     div.addEventListener('click', Module.clickToPlayListener);
     window.gtk.play = Module.clickToPlayListener;
   },
   preRun: function() {
-    // set up a persistent store for save games, etc.
-    FS.mkdir('/persistent');
-    FS.mount(IDBFS, {}, '/persistent');
-    FS.syncfs(true, function(err) {
-      if (err) {
-        console.log("WARNING: Failed to populate persistent store. Save games likely lost?");
-      } else {
-        console.log("Read in from persistent store.");
-      }
-
-      loadDataFiles(GDragonRubyGameId, 'gamedata/', function() {
-        console.log("Game data is sync'd to MEMFS. Starting click-to-play()...");
-        //Module.setStatus("Ready!");
-        //setTimeout(function() { Module.setStatus(""); statusElement.style.display='none'; }, 1000);
-        Module.setStatus("");
-        statusElement.style.display='none';
-        Module.startClickToPlay();
-      });
-    });
+    // this prevents the game from running. We'll remove the dependency when
+    //  we have downloaded everything and the user has clicked-through to play.
+    Module["addRunDependency"]("dragonruby_init");
+    prepareFilesystem();   // will get data, async.
   },
   postRun: [],
   print: (function() {
@@ -624,11 +663,6 @@ var Module = {
     canvas.addEventListener("click", function() {
       document.getElementById('toplevel').click();
       document.getElementById('toplevel').focus();
-      document.getElementById('game-input').style.display = "inline"
-      document.getElementById('game-input').focus();
-      document.getElementById('game-input').blur();
-      document.getElementById('game-input').style.display = "none"
-      window.scrollTo(0, 0);
       canvas.focus();
     });
 
@@ -668,36 +702,26 @@ window.onerror = function(event) {
   };
 };
 
+// sanity check this before downloading anything heavy.
 var hasWebAssembly = false;
 if (typeof WebAssembly==="object" && typeof WebAssembly.Memory==="function") {
   hasWebAssembly = true;
 }
 //console.log("Do we have WebAssembly? " + ((hasWebAssembly) ? "YES" : "NO"));
+if (!hasWebAssembly) {
+  Module.setStatus("Your browser doesn't have WebAssembly support. Please upgrade.");
+} else {
+  var buildtype = "wasm";
+  var module = "dragonruby-" + buildtype + ".js";
+  window.gtk = {};
+  window.gtk.module = Module;
 
-var buildtype = hasWebAssembly ? "wasm" : "asmjs";
-var module = "dragonruby-" + buildtype + ".js";
-window.gtk = {};
-window.gtk.module = Module;
-
-//console.log("Our main module is: " + module);
+  //console.log("Our main module is: " + module);
 
-var script = document.createElement('script');
-script.src = module;
-if (hasWebAssembly) {
+  var script = document.createElement('script');
+  script.src = module;
   script.async = true;
-} else {
-  script.async = false;  // !!! FIXME: can this be async?
-  (function() {
-    var memoryInitializer = module + '.mem';
-    if (typeof Module['locateFile'] === 'function') {
-      memoryInitializer = Module['locateFile'](memoryInitializer);
-    } else if (Module['memoryInitializerPrefixURL']) {
-      memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
-    }
-    var meminitXHR = Module['memoryInitializerRequest'] = new XMLHttpRequest();
-    meminitXHR.open('GET', memoryInitializer, true);
-    meminitXHR.responseType = 'arraybuffer';
-    meminitXHR.send(null);
-  })();
+  document.body.appendChild(script);
 }
-document.body.appendChild(script);
+
+// end of dragonruby-html5-loader.js ...

dragonruby-html5-loader.js

@@ -4,14 +4,5 @@ body {
     border: 0;
 }
 canvas {
-    background-color: rgb(80, 80, 80);
-    border: 0px none;
-}
-
-#borderdiv {
-    width: 1280px;
-    height: 720px;
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
+    background-color: rgb(40, 44, 52);
 }

dragonruby-wasm.js

@@ -2,16 +2,85 @@
 <html lang="en-us">
   <head>
     <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="icon" href="favicon.png" type="image/png" />
+    <title>DragonRuby</title>
+    <style>
+      body {
+        font-family: arial;
+        margin: 0;
+        padding: none;
+        background: #000000;
+      }
+
+      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+      div.emscripten { text-align: center; }
+      div.emscripten_border { border: 1px solid black; }
+      /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { border: 0px none; background-color: black; }
+
+      #emscripten_logo {
+        display: inline-block;
+        margin: 0;
+      }
+
+      @-webkit-keyframes rotation {
+        from {-webkit-transform: rotate(0deg);}
+        to {-webkit-transform: rotate(360deg);}
+      }
+      @-moz-keyframes rotation {
+        from {-moz-transform: rotate(0deg);}
+        to {-moz-transform: rotate(360deg);}
+      }
+      @-o-keyframes rotation {
+        from {-o-transform: rotate(0deg);}
+        to {-o-transform: rotate(360deg);}
+      }
+      @keyframes rotation {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+      }
+
+      #status {
+        display: inline-block;
+        font-weight: bold;
+        color: rgb(120, 120, 120);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      #progress {
+        height: 20px;
+        width: 30px;
+      }
+
+      #output {
+        width: 100%;
+        height: 200px;
+        margin: 0 auto;
+        margin-top: 10px;
+        border-left: 0px;
+        border-right: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+        display: none;
+        background-color: black;
+        color: white;
+        font-family: 'Lucida Console', Monaco, monospace;
+        outline: none;
+      }
+    </style>
     <link rel="stylesheet" href="game.css" />
     <title>DragonRuby Game Toolkit Tutorial</title>
   </head>
   <body id='toplevel'>
-    <textarea style="display: none;" id="output" rows="1"></textarea>
     <div class="emscripten_border" id='borderdiv'>
-      <input id="game-input" autocomplete="off" />
-      <canvas class="game emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     </div>
-    <br/>
+    <textarea style="display: none;" id="output" rows="8"></textarea>
+
     <div class="emscripten" id="status"></div>
     <div class="emscripten" id='progressdiv'>
       <progress value="0" max="100" id="progress"></progress>

dragonruby-wasm.wasm

@@ -1,3 +1,6 @@
 def tick args
-  args.outputs.background_color = [40, 44, 52]
+  args.outputs.labels  << [640, 500, 'Hello World!', 5, 1]
+  args.outputs.labels  << [640, 460, 'Go to docs/docs.html and read it!', 5, 1]
+  args.outputs.labels  << [640, 420, 'Join the Discord! http://discord.dragonruby.org', 5, 1]
+  args.outputs.sprites << [576, 280, 128, 101, 'dragonruby.png']
 end