Move emscripten web shell to src

This commit is contained in:
Ray 2019-05-22 10:40:51 +02:00
parent e6ca2c4ba3
commit be7e56f51e
18 changed files with 66 additions and 54 deletions

View File

@ -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")

View File

@ -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

View File

@ -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()

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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) {

View File

@ -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

View File

@ -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

View File

@ -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