Move emscripten web shell to src

18 files changed, 66 insertions, 54 deletions

diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt
index f3457b04..6f9e4428 100644
--- a/examples/CMakeLists.txt
+++ b/examples/CMakeLists.txt
@@ -81,7 +81,7 @@ elseif(${PLATFORM} MATCHES "Web")
   set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Os -s USE_GLFW=3 -s ASSERTIONS=1 -s WASM=1 -s EMTERPRETIFY=1 -s EMTERPRETIFY_ASYNC=1")
   # Since WASM is used, ALLOW_MEMORY_GROWTH has no extra overheads
   set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -s ALLOW_MEMORY_GROWTH=1 --no-heap-copy")
-  set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} --shell-file ${CMAKE_SOURCE_DIR}/templates/web_shell/shell.html")
+  set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} --shell-file ${CMAKE_SOURCE_DIR}/src/shell.html")
 
   set(OUTPUT_EXT ".html")
 
diff --git a/examples/Makefile b/examples/Makefile
index cb015fa7..e79bc364 100644
--- a/examples/Makefile
+++ b/examples/Makefile
@@ -240,7 +240,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     # logic to a self contained function: UpdateDrawFrame(), check core_basic_window_web.c for reference.
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/CMakeLists.txt b/games/CMakeLists.txt
index d3f9d9fc..3ec6cb29 100644
--- a/games/CMakeLists.txt
+++ b/games/CMakeLists.txt
@@ -8,7 +8,7 @@ set(OUTPUT_EXT)
 
 if(${PLATFORM} MATCHES "Web")
   set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Os -s USE_GLFW=3 -s ASSERTIONS=1 -s WASM=1 -s EMTERPRETIFY=1 -s EMTERPRETIFY_ASYNC=1")
-  set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} --shell-file ${CMAKE_SOURCE_DIR}/templates/web_shell/shell.html")
+  set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} --shell-file ${CMAKE_SOURCE_DIR}/src/shell.html")
   set(OUTPUT_EXT ".html")
 endif()
 
diff --git a/games/cat_vs_roomba/Makefile b/games/cat_vs_roomba/Makefile
index 620df80f..87b052d2 100644
--- a/games/cat_vs_roomba/Makefile
+++ b/games/cat_vs_roomba/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/drturtle/Makefile b/games/drturtle/Makefile
index 4bab3e36..8a7c6732 100644
--- a/games/drturtle/Makefile
+++ b/games/drturtle/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/just_do/Makefile b/games/just_do/Makefile
index 9bd09dd4..7b2d4d5f 100644
--- a/games/just_do/Makefile
+++ b/games/just_do/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/koala_seasons/Makefile b/games/koala_seasons/Makefile
index 4688f3ac..5f3493e3 100644
--- a/games/koala_seasons/Makefile
+++ b/games/koala_seasons/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/light_my_ritual/Makefile b/games/light_my_ritual/Makefile
index 1a90642e..b1446831 100644
--- a/games/light_my_ritual/Makefile
+++ b/games/light_my_ritual/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/skully_escape/Makefile b/games/skully_escape/Makefile
index d57075da..aa21763a 100644
--- a/games/skully_escape/Makefile
+++ b/games/skully_escape/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/transmission/Makefile b/games/transmission/Makefile
index c78d7ef5..f4b30331 100644
--- a/games/transmission/Makefile
+++ b/games/transmission/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/games/wave_collector/Makefile b/games/wave_collector/Makefile
index 7f9b94e6..e2c039b6 100644
--- a/games/wave_collector/Makefile
+++ b/games/wave_collector/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/projects/4coder/Makefile b/projects/4coder/Makefile
index c7b9162a..63d093a2 100644
--- a/projects/4coder/Makefile
+++ b/projects/4coder/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/projects/VSCode/Makefile b/projects/VSCode/Makefile
index c7b9162a..63d093a2 100644
--- a/projects/VSCode/Makefile
+++ b/projects/VSCode/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/src/core.c b/src/core.c
index d8d85144..8dd1090b 100644
--- a/src/core.c
+++ b/src/core.c
@@ -1640,7 +1640,7 @@ void TakeScreenshot(const char *fileName)
 
 #if defined(PLATFORM_WEB)
     // Download file from MEMFS (emscripten memory filesystem)
-    // SaveFileFromMEMFSToDisk() function is defined in raylib/templates/web_shel/shell.html
+    // SaveFileFromMEMFSToDisk() function is defined in raylib/src/shell.html
     emscripten_run_script(TextFormat("SaveFileFromMEMFSToDisk('%s','%s')", GetFileName(path), GetFileName(path)));
 #endif
 
diff --git a/templates/web_shell/shell.html b/src/shell.html
index 641cfc02..5d8e7e91 100644
--- a/templates/web_shell/shell.html
+++ b/src/shell.html
@@ -27,51 +27,65 @@
     <meta name="twitter:url" content="https://www.raylib.com/games.html">
     <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
     
-    <!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
+    <!-- Favicon -->
     <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
     
     <style>
-      body {
-        font-family: arial;
-        margin: 0;
+      body { 
+        font-family: arial; 
+        margin: 0; 
         padding: none;
       }
       
-      #header_part {
-        width: 100%;
-        height: 80px;
-        background-color: #888888;
+      #header { 
+        width: 100%; 
+        height: 80px; 
+        background-color: #888888; 
       }
       
-      #logo {
+      /* NOTE: raylib logo is embedded in the page as base64 png image */
+      #logo { 
         width:64px; 
         height:64px; 
         float:left; 
         position:relative; 
         margin:10px; 
-        background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAA7JJREFUaEPtk0FyWzEMQ+37X7fZhxX4YY3AD1OKF1nkzTRlSBCCLeVBnvl/AUdaELOunPno1kts1kixdtEZKVs+xIxebBkZsVknn/L5nFGDLR8T4zVC9fX19S/+tTFijrYK4jUjbPUtqBHpnEE6PkZD7jQZV8n5Recw1XQKciZuPaEtR6UjNs5ENVGMsBVqpPtER0ZMOhpyp8m4YL4OjD9yxsyZxnQycfMJETNSzsRE1+dihK3YMiJmpHTW3xpmXPC6BXlCHfqnBlsjY5hxf/6EVEOM2BTEi0fYCX4ONSI6Kq3Blg/prIOMq2CsRur4KQ0x64SdjOufEDEdHZGOhmz5RDHCVqhRuQ86YsVskbc+GXchLiHnFyYH+UigQDVGnImbT8hwFkgLg2qiM8JO6Ylx1FNLa3DmYwqCTsZd4BPqGJG7MwKzpeiWKTKxXkLMVE3MSOmsdwxLH6Rd/wCCLSNDx6djeKfJuArGeoYamRHpaEjnCBYZVy8hZqo2GI36qPjsiOiMsBXGcev4Mx9TLGTchbgEjN/uz6jGrBvDjg+LTNx8Qp2CbG2xMKgmOiPslJ4Yxx+eSnSkzlosZNwFPiHl7FRTkLNRJm4+IeVM0ymIH42wE/wcKalQI4MRl4EW3p6VcRWMua8F6WjIlqZDxvVPiHQ6CjVbYkV9ohhhp/Rk1wiYgpyJ78i4CsZbjkb8Qx+ihvzu3RPaKogZkY6GlEeMsKdPSOFIC8VoOusg44L5c+T8ouOoGhWbdWJ8tMi4egkxo4hoh2yNTGf3iIyr5Lyic4bRENXo+lvDjAt4C1Hk/OKtUaAj0+n4dMSZ2D+hrYJsaYh2SClG2jV9kJKKzhlGQ1SsW299Mq6C8dYZHTExo8fzieI5ivipYnYy7nwJqGKmOYyRwfiUBXITfh5qSHRGWEkfqJqURgvsdHyWYv7Ko8DnYYegk3EB00cxprdrJRzFd7YQzawu8L1GMTYS/KpPaAFTkIn1EmJmspJSs5xBzSyGhlkBmlxfNFiP5mw4wlbMh4F5Ddxp5jNINBdCEz9zPOC1zD7Q0HBdmXndwv0TMtydEdzlWJT4VZ8Qt9Qn4/onxMIwa5ZYGJU5yufBiCjwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaBBfOTCGHM2aEbZi1+gO1XTWVXMnzrhAn5DSOZVsiQlHnSITKzGj6DeTcZWc/3oy7h9//PF4PL4BlvsWrb6RE+oAAAAASUVORK5CYII=);
+        background-image:url('data:image/png;base64,\
+iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADs\
+MAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAA7JJREFUaEPtk0FyWzEMQ+37X7fZhxX4\
+YY3AD1OKF1nkzTRlSBCCLeVBnvl/AUdaELOunPno1kts1kixdtEZKVs+xIxebBkZsVknn/L5nFGDLR8T4zVC9fX19S/+tTFijr\
+YK4jUjbPUtqBHpnEE6PkZD7jQZV8n5Recw1XQKciZuPaEtR6UjNs5ENVGMsBVqpPtER0ZMOhpyp8m4YL4OjD9yxsyZxnQycfMJ\
+ETNSzsRE1+dihK3YMiJmpHTW3xpmXPC6BXlCHfqnBlsjY5hxf/6EVEOM2BTEi0fYCX4ONSI6Kq3Blg/prIOMq2CsRur4KQ0x64\
+SdjOufEDEdHZGOhmz5RDHCVqhRuQ86YsVskbc+GXchLiHnFyYH+UigQDVGnImbT8hwFkgLg2qiM8JO6Ylx1FNLa3DmYwqCTsZd\
+4BPqGJG7MwKzpeiWKTKxXkLMVE3MSOmsdwxLH6Rd/wCCLSNDx6djeKfJuArGeoYamRHpaEjnCBYZVy8hZqo2GI36qPjsiOiMsB\
+XGcev4Mx9TLGTchbgEjN/uz6jGrBvDjg+LTNx8Qp2CbG2xMKgmOiPslJ4Yxx+eSnSkzlosZNwFPiHl7FRTkLNRJm4+IeVM0ymI\
+H42wE/wcKalQI4MRl4EW3p6VcRWMua8F6WjIlqZDxvVPiHQ6CjVbYkV9ohhhp/Rk1wiYgpyJ78i4CsZbjkb8Qx+ihvzu3RPaKo\
+gZkY6GlEeMsKdPSOFIC8VoOusg44L5c+T8ouOoGhWbdWJ8tMi4egkxo4hoh2yNTGf3iIyr5Lyic4bRENXo+lvDjAt4C1Hk/OKt\
+UaAj0+n4dMSZ2D+hrYJsaYh2SClG2jV9kJKKzhlGQ1SsW299Mq6C8dYZHTExo8fzieI5ivipYnYy7nwJqGKmOYyRwfiUBXITfh\
+5qSHRGWEkfqJqURgvsdHyWYv7Ko8DnYYegk3EB00cxprdrJRzFd7YQzawu8L1GMTYS/KpPaAFTkIn1EmJmspJSs5xBzSyGhlkB\
+mlxfNFiP5mw4wlbMh4F5Ddxp5jNINBdCEz9zPOC1zD7Q0HBdmXndwv0TMtydEdzlWJT4VZ8Qt9Qn4/onxMIwa5ZYGJU5yufBiC\
+jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaBBfOTCGHM2aEbZi1+gO\
+1XTWVXMnzrhAn5DSOZVsiQlHnSITKzGj6DeTcZWc/3oy7h9//PF4PL4BlvsWrb6RE+oAAAAASUVORK5CYII=');
       }
       
       .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: black; width: 100% }
-      
-      #emscripten_logo {
-        display: inline-block;
-        margin: 0;
+      /* NOTE: Canvas *must not* have any border or padding, or mouse coords will be wrong */
+      canvas.emscripten { 
+        border: 0px none; 
+        background: black; 
+        width: 100% 
       }
-      
-      .spinner {
-        height: 30px;
-        width: 30px;
-        margin: 0;
-        margin-top: 20px;
+     
+      .spinner { 
+        height: 30px; 
+        width: 30px; 
+        margin: 0; 
+        margin-top: 20px; 
         margin-left: 20px;
-        display: inline-block;
-        vertical-align: top;
+        display: inline-block; vertical-align: top;
         -webkit-animation: rotation .8s linear infinite;
         -moz-animation: rotation .8s linear infinite;
         -o-animation: rotation .8s linear infinite;
@@ -80,7 +94,6 @@
         border-right: 5px solid black;
         border-bottom: 5px solid black;
         border-top: 5px solid red;
-        
         border-radius: 100%;
         background-color: rgb(245, 245, 245);
       }
@@ -137,7 +150,7 @@
     </style>
   </head>
   <body>
-    <div id="header_part">
+    <div id="header">
         <a id="logo" href="https://www.raylib.com"></a>
         
         <div class="spinner" id='spinner'></div>
@@ -153,7 +166,7 @@
     </div>
     
     <div class="emscripten_border">
-      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
     </div>
     
     <textarea id="output" rows="8"></textarea>
@@ -202,26 +215,26 @@
         })(),
         printErr: function(text) {
           if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
-          if (0) { // XXX disabled for safety typeof dump == 'function') {
-            dump(text + '\n'); // fast, straight to the real console
-          } else {
-            console.error(text);
-          }
+          console.error(text);
         },
         canvas: (function() {
           var canvas = document.querySelector('#canvas');
+
           // As a default initial behavior, pop up an alert when webgl context is lost. To make your
           // application robust, you may want to override this behavior before shipping!
           // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
           canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
           return canvas;
         })(),
         setStatus: function(text) {
           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
-          if (text === Module.setStatus.text) return;
+          if (text === Module.setStatus.last.text) return;
           var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
           var now = Date.now();
-          if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
+          if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
+          Module.setStatus.last.time = now;
+          Module.setStatus.last.text = text;
           if (m) {
             text = m[1];
             progressElement.value = parseInt(m[2])*100;
@@ -232,7 +245,7 @@
             progressElement.value = null;
             progressElement.max = null;
             progressElement.hidden = true;
-            if (!text) spinnerElement.style.display = 'none';
+            if (!text) spinnerElement.hidden = true;
           }
           statusElement.innerHTML = text;
         },
@@ -243,8 +256,7 @@
         }
       };
       Module.setStatus('Downloading...');
-      window.onerror = function(event) {
-        // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
+      window.onerror = function() {
         Module.setStatus('Exception thrown, see JavaScript console');
         spinnerElement.style.display = 'none';
         Module.setStatus = function(text) {
diff --git a/templates/advance_game/Makefile b/templates/advance_game/Makefile
index 784c7dca..95fb6f6f 100644
--- a/templates/advance_game/Makefile
+++ b/templates/advance_game/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/templates/simple_game/Makefile b/templates/simple_game/Makefile
index a1e65772..ea732c92 100644
--- a/templates/simple_game/Makefile
+++ b/templates/simple_game/Makefile
@@ -236,7 +236,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif
 
diff --git a/templates/standard_game/Makefile b/templates/standard_game/Makefile
index bd7906b8..56b76b42 100644
--- a/templates/standard_game/Makefile
+++ b/templates/standard_game/Makefile
@@ -230,7 +230,7 @@ ifeq ($(PLATFORM),PLATFORM_WEB)
     endif
 
     # Define a custom shell .html and output extension
-    CFLAGS += --shell-file $(RAYLIB_PATH)\templates\web_shell\shell.html
+    CFLAGS += --shell-file $(RAYLIB_PATH)\src\shell.html
     EXT = .html
 endif