new: Show error message in HTML

yhara · Jan 18, 2018 · 45baf03 · 45baf03
1 parent 1a6a561
commit 45baf03
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - new: Image#set_color_key
 - new: Window.draw_scale
+- new: Show the message of an exception if there is a `<div id='dxopal-errors'>`
 - fix: Multiple loops runs when Window.loop is called more than once
 - internal: Upgrade to Opal 0.11.0
 

diff --git a/examples/apple_catcher/index.html b/examples/apple_catcher/index.html
@@ -4,13 +4,16 @@
     <meta charset= "utf-8" />
     <title>DXOpal demo</title>
     <script type="text/javascript" src="../../build/dxopal.js"></script>
-    <script type="text/ruby" src="main.rb"></script>
+    <script type="text/ruby">
+      DXOpal.dump_error{ require_remote 'main.rb' }
+    </script>
   </head>
 
   <body>
     <h1><a href="https://yhara.github.io/dxopal/">DXOpal</a> demo</h1>
     <canvas id="dxopal-canvas"></canvas><br>
     <input type='button' id='pause' value='Pause/Resume'>
+    <div id="dxopal-errors"></div>
 
     <h2>Source code</h2>
     <div id="editor" style='width: 640px; height: 600px;'></div>

diff --git a/examples/collision/index.html b/examples/collision/index.html
@@ -4,13 +4,16 @@
     <meta charset= "utf-8" />
     <title>DXOpal demo</title>
     <script type="text/javascript" src="../../build/dxopal.js"></script>
-    <script type="text/ruby" src="main.rb"></script>
+    <script type="text/ruby">
+      DXOpal.dump_error{ require_remote 'main.rb' }
+    </script>
   </head>
 
   <body>
     <h1><a href="https://yhara.github.io/dxopal/">DXOpal</a> demo</h1>
     <canvas id="dxopal-canvas"></canvas><br>
     <input type='button' id='pause' value='Pause/Resume'>
+    <div id="dxopal-errors"></div>
 
     <h2>Source code</h2>
     <div id="editor" style='width: 640px; height: 600px;'></div>

diff --git a/examples/matter/index.html b/examples/matter/index.html
@@ -4,13 +4,16 @@
     <meta charset= "utf-8" />
     <title>DXOpal demo</title>
     <script type="text/javascript" src="../../build/dxopal.js"></script>
-    <script type="text/ruby" src="main.rb"></script>
+    <script type="text/ruby">
+      DXOpal.dump_error{ require_remote 'main.rb' }
+    </script>
   </head>
 
   <body>
     <h1><a href="https://yhara.github.io/dxopal/">DXOpal</a> demo</h1>
     <canvas id="dxopal-canvas"></canvas><br>
     <input type='button' id='pause' value='Pause/Resume'>
+    <div id="dxopal-errors"></div>
 
     <h2>Source code</h2>
     <div id="editor" style='width: 640px; height: 600px;'></div>

diff --git a/examples/triangles/index.html b/examples/triangles/index.html
@@ -4,13 +4,16 @@
     <meta charset= "utf-8" />
     <title>DXOpal demo</title>
     <script type="text/javascript" src="../../build/dxopal.js"></script>
-    <script type="text/ruby" src="main.rb"></script>
+    <script type="text/ruby">
+      DXOpal.dump_error{ require_remote 'main.rb' }
+    </script>
   </head>
 
   <body>
     <h1><a href="https://yhara.github.io/dxopal/">DXOpal</a> demo</h1>
     <canvas id="dxopal-canvas"></canvas><br>
     <input type='button' id='pause' value='Pause/Resume'>
+    <div id="dxopal-errors"></div>
 
     <h2>Source code</h2>
     <div id="editor" style='width: 640px; height: 600px;'></div>

diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@ <h1 class="header"><a href='index.html'>DXOpal</a></h1>
         <canvas id="dxopal-canvas" style='float: left'></canvas>
         <div id="editor" style='width: 350px; height: 300px; position: relative'></div>
         <input type='button' style='float: right' id='run' value='Run'>
+        <div id="dxopal-errors"></div>
       </section>
     </div>
 
@@ -42,6 +43,7 @@ <h1 class="header"><a href='index.html'>DXOpal</a></h1>
         editor.setValue(rb, -1); // -1: set cursor to document start
       });
       $('#run').on("click", function() {
+        $('#dxopal-errors').empty();
         try {
           eval(Opal.compile(editor.getValue()));
         }

diff --git a/opal/dxopal.rb b/opal/dxopal.rb
@@ -33,6 +33,29 @@ module DXOpal
   include DXOpal::Input::MouseCodes
   include DXOpal::SoundEffect::WaveTypes
 
+  # Call block and dump backtrace if an exception is raised.
+  # Nothing is shown if a tag with `id='dxopal-errors'` does not exist
+  def self.dump_error(&block)
+    block.call
+  rescue Exception => ex
+    div = `document.getElementById('dxopal-errors')`
+    if `div && !ex.DXOpalPrinted`
+      %x{
+        div.textContent = "ERROR: " + #{ex.class.name};
+        var ul = document.createElement('ul');
+        // Note: ex.backtrace may be an Array or a String
+        #{Array(ex.backtrace)}.forEach(function(line){
+          var li = document.createElement('li');
+          li.textContent = line;
+          ul.appendChild(li);
+        });
+        div.appendChild(ul);
+        ex.DXOpalPrinted = true;
+      }
+    end
+    raise ex
+  end
+
   # Like `Kernel.p`, but prints only limited times for each `key`
   # This is useful for debugging your game without flooding the
   # developer console.

diff --git a/opal/dxopal/window.rb b/opal/dxopal/window.rb
@@ -14,7 +14,9 @@ module Window
     # Load resources specified with Image.register or Sound.register
     # Call block when loaded
     def self.load_resources(&block)
-      RemoteResource._load_resources(&block)
+      RemoteResource._load_resources do
+        DXOpal.dump_error(&block)
+      end
     end
 
     # Start main loop
@@ -68,7 +70,7 @@ def self._loop(time=0)
       if @@paused
         Window.draw_pause_screen
       else
-        @@block.call
+        DXOpal.dump_error(&@@block)
       end
 
       # Draw

diff --git a/template/index.html b/template/index.html
@@ -4,10 +4,13 @@
     <meta charset= "utf-8" />
     <title>DXOpal game</title>
     <script type="text/javascript" src="dxopal.min.js"></script>
-    <script type="text/ruby" src="main.rb"></script>
+    <script type="text/ruby">
+      DXOpal.dump_error{ require_remote 'main.rb' }
+    </script>
   </head>
 
   <body>
     <canvas id="dxopal-canvas"></canvas>
+    <div id="dxopal-errors"></div>
   </body>
 </html>