From 0c567cd259285fb33b3e2ab514c48322da0a0000 Mon Sep 17 00:00:00 2001
From: Ray <raysan5@gmail.com>
Date: Tue, 23 Apr 2019 18:10:38 +0200
Subject: WARNING: Issues on web building

Found some issues when building for web using latest emscripten 1.38.30, traced the error and found that eglGetProcAdress does not return function pointers for VAO functionality, supported by extension.

It requires more investigation but now it works (avoiding VAO usage)
---
 templates/web_shell/shell.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'templates/web_shell/shell.html')

diff --git a/templates/web_shell/shell.html b/templates/web_shell/shell.html
index f158c432..2e891461 100644
--- a/templates/web_shell/shell.html
+++ b/templates/web_shell/shell.html
@@ -178,14 +178,14 @@
       }
     </script>
     <script type='text/javascript'>
-      var statusElement = document.getElementById('status');
-      var progressElement = document.getElementById('progress');
-      var spinnerElement = document.getElementById('spinner');
+      var statusElement = document.querySelector('#status');
+      var progressElement = document.querySelector('#progress');
+      var spinnerElement = document.querySelector('#spinner');
       var Module = {
         preRun: [],
         postRun: [],
         print: (function() {
-          var element = document.getElementById('output');
+          var element = document.querySelector('#output');
           if (element) element.value = ''; // clear browser cache
           return function(text) {
             if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
@@ -210,7 +210,7 @@
           }
         },
         canvas: (function() {
-          var canvas = document.getElementById('canvas');
+          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
-- 
cgit v1.2.3


From 3bfcecb3af599aaa868cf0dc128081690e8c43f8 Mon Sep 17 00:00:00 2001
From: Ray <raysan5@gmail.com>
Date: Tue, 21 May 2019 23:30:34 +0200
Subject: Review metat tags and embed logo

---
 templates/web_shell/shell.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

(limited to 'templates/web_shell/shell.html')

diff --git a/templates/web_shell/shell.html b/templates/web_shell/shell.html
index 2e891461..641cfc02 100644
--- a/templates/web_shell/shell.html
+++ b/templates/web_shell/shell.html
@@ -11,22 +11,21 @@
     <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
     <meta name="viewport" content="width=device-width">
     
-    <!-- Facebook metatags for sharing -->
+    <!-- Open Graph metatags for sharing -->
     <meta property="og:title" content="raylib HTML5 GAME">
     <meta property="og:image:type" content="image/png">
     <meta property="og:image" content="https://www.raylib.com/common/img/raylib_logo.png">
-    <meta property="og:image" content="https://www.raylib.com/common/img/raylib_logo.png">
-    <meta property="og:url" content="https://www.raylib.com/games">
     <meta property="og:site_name" content="raylib.com">
-    <meta property="og:description" content="New hmtl5 videogame, developed using raylib videogames library">
+    <meta property="og:url" content="https://www.raylib.com/games.html">
+    <meta property="og:description" content="New HTML5 videogame, developed using raylib videogames library">
 
     <!-- Twitter metatags for sharing -->
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="@raysan5">
     <meta name="twitter:title" content="raylib HTML5 GAME">
+    <meta name="twitter:image" content="https://www.raylib.com/common/raylib_logo.png">
+    <meta name="twitter:url" content="https://www.raylib.com/games.html">
     <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
-    <meta name="twitter:image" content="https://www.raylib.com/common/img/raylib_logo.png">
-    <meta name="twitter:url" content="https://www.raylib.com/common/img/raylib_logo.png">
     
     <!--<link rel="stylesheet" href="./Koala Seasons by emegeme_files/main.css">-->
     <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
@@ -50,7 +49,7 @@
         float:left; 
         position:relative; 
         margin:10px; 
-        background-image:url(https://www.raylib.com/common/img/raylib_logo_64x64.png);
+        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=);
       }
       
       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-- 
cgit v1.2.3


From be7e56f51e0f9c1c8bf38cab8d451f148b46458b Mon Sep 17 00:00:00 2001
From: Ray <raysan5@gmail.com>
Date: Wed, 22 May 2019 10:40:51 +0200
Subject: Move emscripten web shell to src

---
 examples/CMakeLists.txt          |   2 +-
 examples/Makefile                |   2 +-
 games/CMakeLists.txt             |   2 +-
 games/cat_vs_roomba/Makefile     |   2 +-
 games/drturtle/Makefile          |   2 +-
 games/just_do/Makefile           |   2 +-
 games/koala_seasons/Makefile     |   2 +-
 games/light_my_ritual/Makefile   |   2 +-
 games/skully_escape/Makefile     |   2 +-
 games/transmission/Makefile      |   2 +-
 games/wave_collector/Makefile    |   2 +-
 projects/4coder/Makefile         |   2 +-
 projects/VSCode/Makefile         |   2 +-
 src/core.c                       |   2 +-
 src/shell.html                   | 269 +++++++++++++++++++++++++++++++++++++++
 templates/advance_game/Makefile  |   2 +-
 templates/simple_game/Makefile   |   2 +-
 templates/standard_game/Makefile |   2 +-
 templates/web_shell/shell.html   | 257 -------------------------------------
 19 files changed, 286 insertions(+), 274 deletions(-)
 create mode 100644 src/shell.html
 delete mode 100644 templates/web_shell/shell.html

(limited to 'templates/web_shell/shell.html')

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/src/shell.html b/src/shell.html
new file mode 100644
index 00000000..5d8e7e91
--- /dev/null
+++ b/src/shell.html
@@ -0,0 +1,269 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    
+    <title>raylib HTML5 GAME</title>
+    
+    <meta name="title" content="raylib HTML5 GAME">
+    <meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
+    <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
+    <meta name="viewport" content="width=device-width">
+    
+    <!-- Open Graph metatags for sharing -->
+    <meta property="og:title" content="raylib HTML5 GAME">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image" content="https://www.raylib.com/common/img/raylib_logo.png">
+    <meta property="og:site_name" content="raylib.com">
+    <meta property="og:url" content="https://www.raylib.com/games.html">
+    <meta property="og:description" content="New HTML5 videogame, developed using raylib videogames library">
+
+    <!-- Twitter metatags for sharing -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@raysan5">
+    <meta name="twitter:title" content="raylib HTML5 GAME">
+    <meta name="twitter:image" content="https://www.raylib.com/common/raylib_logo.png">
+    <meta name="twitter:url" content="https://www.raylib.com/games.html">
+    <meta name="twitter:description" content="New HTML5 videogame, developed using raylib videogames library">
+    
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
+    
+    <style>
+      body { 
+        font-family: arial; 
+        margin: 0; 
+        padding: none;
+      }
+      
+      #header { 
+        width: 100%; 
+        height: 80px; 
+        background-color: #888888; 
+      }
+      
+      /* 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+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; }
+      
+      /* 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; 
+        margin-left: 20px;
+        display: inline-block; vertical-align: top;
+        -webkit-animation: rotation .8s linear infinite;
+        -moz-animation: rotation .8s linear infinite;
+        -o-animation: rotation .8s linear infinite;
+        animation: rotation 0.8s linear infinite;
+        border-left: 5px solid black;
+        border-right: 5px solid black;
+        border-bottom: 5px solid black;
+        border-top: 5px solid red;
+        border-radius: 100%;
+        background-color: rgb(245, 245, 245);
+      }
+      @-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;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-left: 20px;
+        font-weight: bold;
+        color: rgb(40, 40, 40);
+      }
+      
+      #progress {
+        height: 20px;
+        width: 30px;
+      }
+      
+      #controls {
+        display: inline-block;
+        float: right;
+        vertical-align: top;
+        margin-top: 30px;
+        margin-right: 20px;
+      }
+      
+      #output {
+        width: 100%;
+        height: 140px;
+        margin: 0 auto;
+        margin-top: 10px;
+        display: block;
+        background-color: black;
+        color: rgb(37, 174, 38);
+        font-family: 'Lucida Console', Monaco, monospace;
+        outline: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="header">
+        <a id="logo" href="https://www.raylib.com"></a>
+        
+        <div class="spinner" id='spinner'></div>
+        <div class="emscripten" id="status">Downloading...</div>
+
+        <span id='controls'>
+          <span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(false, false)"></span>
+        </span>
+
+        <div class="emscripten">
+          <progress value="0" max="100" id="progress" hidden=1></progress>
+        </div>
+    </div>
+    
+    <div class="emscripten_border">
+      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+    </div>
+    
+    <textarea id="output" rows="8"></textarea>
+
+    <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
+    <script type='text/javascript'>
+      function SaveFileFromMEMFSToDisk(memoryFSname, localFSname)     // This can be called by C/C++ code
+      {
+        var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+        var data = FS.readFile(memoryFSname);
+        var blob;
+
+        if (isSafari) blob = new Blob([data.buffer], {type: "application/octet-stream"});
+        else blob = new Blob([data.buffer], {type: "application/octet-binary"});
+
+        // NOTE: SaveAs Dialog is a browser setting. For example, in Google Chrome,
+        // in Settings/Advanced/Downloads section you have a setting:
+        // 'Ask where to save each file before downloading' - which you can set true/false.
+        // If you enable this setting it would always ask you and bring the SaveAs Dialog
+        saveAs(blob, localFSname);
+      }
+    </script>
+    <script type='text/javascript'>
+      var statusElement = document.querySelector('#status');
+      var progressElement = document.querySelector('#progress');
+      var spinnerElement = document.querySelector('#spinner');
+      var Module = {
+        preRun: [],
+        postRun: [],
+        print: (function() {
+          var element = document.querySelector('#output');
+          if (element) element.value = ''; // clear browser cache
+          return function(text) {
+            if (arguments.length > 1) 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');
+            console.log(text);
+            if (element) {
+              element.value += text + "\n";
+              element.scrollTop = element.scrollHeight; // focus on bottom
+            }
+          };
+        })(),
+        printErr: function(text) {
+          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
+          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.last.text) return;
+          var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
+          var now = Date.now();
+          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;
+            progressElement.max = parseInt(m[4])*100;
+            progressElement.hidden = false;
+            spinnerElement.hidden = false;
+          } else {
+            progressElement.value = null;
+            progressElement.max = null;
+            progressElement.hidden = true;
+            if (!text) spinnerElement.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...');
+      window.onerror = function() {
+        Module.setStatus('Exception thrown, see JavaScript console');
+        spinnerElement.style.display = 'none';
+        Module.setStatus = function(text) {
+          if (text) Module.printErr('[post-exception status] ' + text);
+        };
+      };
+    </script>
+    {{{ SCRIPT }}}
+  </body>
+</html>
\ No newline at end of file
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
 
diff --git a/templates/web_shell/shell.html b/templates/web_shell/shell.html
deleted file mode 100644
index 641cfc02..00000000
--- a/templates/web_shell/shell.html
+++ /dev/null
@@ -1,257 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    
-    <title>raylib HTML5 GAME</title>
-    
-    <meta name="title" content="raylib HTML5 GAME">
-    <meta name="description" content="New HTML5 videogame, developed using raylib videogames library">
-    <meta name="keywords" content="raylib, games, html5, programming, C, C++, library, learn, videogames">
-    <meta name="viewport" content="width=device-width">
-    
-    <!-- Open Graph metatags for sharing -->
-    <meta property="og:title" content="raylib HTML5 GAME">
-    <meta property="og:image:type" content="image/png">
-    <meta property="og:image" content="https://www.raylib.com/common/img/raylib_logo.png">
-    <meta property="og:site_name" content="raylib.com">
-    <meta property="og:url" content="https://www.raylib.com/games.html">
-    <meta property="og:description" content="New HTML5 videogame, developed using raylib videogames library">
-
-    <!-- Twitter metatags for sharing -->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="@raysan5">
-    <meta name="twitter:title" content="raylib HTML5 GAME">
-    <meta name="twitter:image" content="https://www.raylib.com/common/raylib_logo.png">
-    <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">-->
-    <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
-    
-    <style>
-      body {
-        font-family: arial;
-        margin: 0;
-        padding: none;
-      }
-      
-      #header_part {
-        width: 100%;
-        height: 80px;
-        background-color: #888888;
-      }
-      
-      #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=);
-      }
-      
-      .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;
-      }
-      
-      .spinner {
-        height: 30px;
-        width: 30px;
-        margin: 0;
-        margin-top: 20px;
-        margin-left: 20px;
-        display: inline-block;
-        vertical-align: top;
-        -webkit-animation: rotation .8s linear infinite;
-        -moz-animation: rotation .8s linear infinite;
-        -o-animation: rotation .8s linear infinite;
-        animation: rotation 0.8s linear infinite;
-        border-left: 5px solid black;
-        border-right: 5px solid black;
-        border-bottom: 5px solid black;
-        border-top: 5px solid red;
-        
-        border-radius: 100%;
-        background-color: rgb(245, 245, 245);
-      }
-      @-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;
-        vertical-align: top;
-        margin-top: 30px;
-        margin-left: 20px;
-        font-weight: bold;
-        color: rgb(40, 40, 40);
-      }
-      
-      #progress {
-        height: 20px;
-        width: 30px;
-      }
-      
-      #controls {
-        display: inline-block;
-        float: right;
-        vertical-align: top;
-        margin-top: 30px;
-        margin-right: 20px;
-      }
-      
-      #output {
-        width: 100%;
-        height: 140px;
-        margin: 0 auto;
-        margin-top: 10px;
-        display: block;
-        background-color: black;
-        color: rgb(37, 174, 38);
-        font-family: 'Lucida Console', Monaco, monospace;
-        outline: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="header_part">
-        <a id="logo" href="https://www.raylib.com"></a>
-        
-        <div class="spinner" id='spinner'></div>
-        <div class="emscripten" id="status">Downloading...</div>
-
-        <span id='controls'>
-          <span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(false, false)"></span>
-        </span>
-
-        <div class="emscripten">
-          <progress value="0" max="100" id="progress" hidden=1></progress>
-        </div>
-    </div>
-    
-    <div class="emscripten_border">
-      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-    </div>
-    
-    <textarea id="output" rows="8"></textarea>
-
-    <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
-    <script type='text/javascript'>
-      function SaveFileFromMEMFSToDisk(memoryFSname, localFSname)     // This can be called by C/C++ code
-      {
-        var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-        var data = FS.readFile(memoryFSname);
-        var blob;
-
-        if (isSafari) blob = new Blob([data.buffer], {type: "application/octet-stream"});
-        else blob = new Blob([data.buffer], {type: "application/octet-binary"});
-
-        // NOTE: SaveAs Dialog is a browser setting. For example, in Google Chrome,
-        // in Settings/Advanced/Downloads section you have a setting:
-        // 'Ask where to save each file before downloading' - which you can set true/false.
-        // If you enable this setting it would always ask you and bring the SaveAs Dialog
-        saveAs(blob, localFSname);
-      }
-    </script>
-    <script type='text/javascript'>
-      var statusElement = document.querySelector('#status');
-      var progressElement = document.querySelector('#progress');
-      var spinnerElement = document.querySelector('#spinner');
-      var Module = {
-        preRun: [],
-        postRun: [],
-        print: (function() {
-          var element = document.querySelector('#output');
-          if (element) element.value = ''; // clear browser cache
-          return function(text) {
-            if (arguments.length > 1) 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');
-            console.log(text);
-            if (element) {
-              element.value += text + "\n";
-              element.scrollTop = element.scrollHeight; // focus on bottom
-            }
-          };
-        })(),
-        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);
-          }
-        },
-        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;
-          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) {
-            text = m[1];
-            progressElement.value = parseInt(m[2])*100;
-            progressElement.max = parseInt(m[4])*100;
-            progressElement.hidden = false;
-            spinnerElement.hidden = false;
-          } else {
-            progressElement.value = null;
-            progressElement.max = null;
-            progressElement.hidden = true;
-            if (!text) spinnerElement.style.display = 'none';
-          }
-          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...');
-      window.onerror = function(event) {
-        // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
-        Module.setStatus('Exception thrown, see JavaScript console');
-        spinnerElement.style.display = 'none';
-        Module.setStatus = function(text) {
-          if (text) Module.printErr('[post-exception status] ' + text);
-        };
-      };
-    </script>
-    {{{ SCRIPT }}}
-  </body>
-</html>
\ No newline at end of file
-- 
cgit v1.2.3