-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add custom salmon html shell for web build
- Loading branch information
1 parent
94e46bb
commit 9028d9f
Showing
4 changed files
with
387 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,194 @@ | ||
<!doctype html> | ||
<html lang="en-us"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
|
||
<title>SalmonEngine Game</title> | ||
|
||
<style> | ||
body { margin: 0px; background-color: #abbec1; } | ||
|
||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } | ||
textarea.emscripten { font-family: monospace; width: 80%; } | ||
div.emscripten { text-align: center; } | ||
div.emscripten_border { border: 0px none; } | ||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */ | ||
canvas.emscripten { border: 0px none; background-color: black; } | ||
|
||
.spinner { | ||
height: 30px; | ||
width: 30px; | ||
margin: 20px; | ||
-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: 12px solid rgb(0,84,127); | ||
border-right: 10px solid rgb(0,84,127); | ||
border-bottom: 12px solid rgb(0,84,127); | ||
border-top: 14px solid rgb(255,176,213); | ||
border-radius: 100%; | ||
background-color: rgb(181,251,233); | ||
} | ||
@-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);} | ||
} | ||
|
||
.box { | ||
align-items: center; | ||
justify-content: center; | ||
display: flex; | ||
width: 100%; | ||
height: 80px; | ||
} | ||
|
||
#header { | ||
width: 100%; | ||
height: 80px; | ||
background-color: #63697f; | ||
margin-bottom: 20px; | ||
border-bottom: 2px solid #444488; | ||
} | ||
|
||
#status { | ||
margin: 10px; | ||
font-weight: bold; | ||
color: rgb(40, 40, 40); | ||
} | ||
|
||
</style> | ||
</head> | ||
<body> | ||
<div id="header"> | ||
<div class="box"> | ||
<!--<figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure> --> | ||
<div class="spinner" id='spinner'></div> | ||
<div> | ||
<div id="status">Downloading...</div> | ||
<div> | ||
<progress value="0" max="100" id="progress" hidden=1></progress> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="emscripten_border"> | ||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> | ||
</div> | ||
|
||
<hr> | ||
<textarea class="emscripten" id="output" rows="8"></textarea> | ||
</hr> | ||
<script type='text/javascript'> | ||
var statusElement = document.getElementById('status'); | ||
var progressElement = document.getElementById('progress'); | ||
var spinnerElement = document.getElementById('spinner'); | ||
|
||
var Module = { | ||
preRun: [], | ||
postRun: [], | ||
print: (function() { | ||
var element = document.getElementById('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, "&"); | ||
//text = text.replace(/</g, "<"); | ||
//text = text.replace(/>/g, ">"); | ||
//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.getElementById('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 type='text/javascript'> | ||
// Work-around chromium autoplay policy | ||
// https://github.com/emscripten-core/emscripten/issues/6511 | ||
function resumeAudio(e) { | ||
if (typeof Module === 'undefined' | ||
|| typeof Module.SDL2 == 'undefined' | ||
|| typeof Module.SDL2.audioContext == 'undefined') | ||
return; | ||
if (Module.SDL2.audioContext.state == 'suspended') { | ||
Module.SDL2.audioContext.resume(); | ||
} | ||
if (Module.SDL2.audioContext.state == 'running') { | ||
document.getElementById('canvas').removeEventListener('click', resumeAudio); | ||
document.removeEventListener('keydown', resumeAudio); | ||
} | ||
} | ||
document.getElementById('canvas').addEventListener('click', resumeAudio); | ||
document.addEventListener('keydown', resumeAudio); | ||
</script> | ||
{{{ SCRIPT }}} | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,191 @@ | ||
<!doctype html> | ||
<html lang="en-us"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
|
||
<title>SalmonEngine Game</title> | ||
|
||
<style> | ||
body { margin: 0px; background-color: #abbec1; } | ||
|
||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } | ||
textarea.emscripten { font-family: monospace; width: 80%; } | ||
div.emscripten { text-align: center; } | ||
div.emscripten_border { border: 0px none; } | ||
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */ | ||
canvas.emscripten { border: 0px none; background-color: black; } | ||
|
||
.spinner { | ||
height: 30px; | ||
width: 30px; | ||
margin: 20px; | ||
-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: 12px solid rgb(0,84,127); | ||
border-right: 10px solid rgb(0,84,127); | ||
border-bottom: 12px solid rgb(0,84,127); | ||
border-top: 14px solid rgb(255,176,213); | ||
border-radius: 100%; | ||
background-color: rgb(181,251,233); | ||
} | ||
@-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);} | ||
} | ||
|
||
.box { | ||
align-items: center; | ||
justify-content: center; | ||
display: flex; | ||
width: 100%; | ||
height: 80px; | ||
} | ||
|
||
#header { | ||
width: 100%; | ||
height: 80px; | ||
background-color: #63697f; | ||
margin-bottom: 20px; | ||
border-bottom: 2px solid #444488; | ||
} | ||
|
||
#status { | ||
margin: 10px; | ||
font-weight: bold; | ||
color: rgb(40, 40, 40); | ||
} | ||
|
||
</style> | ||
</head> | ||
<body> | ||
<div id="header"> | ||
<div class="box"> | ||
<!--<figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure> --> | ||
<div class="spinner" id='spinner'></div> | ||
<div> | ||
<div id="status">Downloading...</div> | ||
<div> | ||
<progress value="0" max="100" id="progress" hidden=1></progress> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="emscripten_border"> | ||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> | ||
</div> | ||
|
||
<script type='text/javascript'> | ||
var statusElement = document.getElementById('status'); | ||
var progressElement = document.getElementById('progress'); | ||
var spinnerElement = document.getElementById('spinner'); | ||
|
||
var Module = { | ||
preRun: [], | ||
postRun: [], | ||
print: (function() { | ||
var element = document.getElementById('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, "&"); | ||
//text = text.replace(/</g, "<"); | ||
//text = text.replace(/>/g, ">"); | ||
//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.getElementById('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 type='text/javascript'> | ||
// Work-around chromium autoplay policy | ||
// https://github.com/emscripten-core/emscripten/issues/6511 | ||
function resumeAudio(e) { | ||
if (typeof Module === 'undefined' | ||
|| typeof Module.SDL2 == 'undefined' | ||
|| typeof Module.SDL2.audioContext == 'undefined') | ||
return; | ||
if (Module.SDL2.audioContext.state == 'suspended') { | ||
Module.SDL2.audioContext.resume(); | ||
} | ||
if (Module.SDL2.audioContext.state == 'running') { | ||
document.getElementById('canvas').removeEventListener('click', resumeAudio); | ||
document.removeEventListener('keydown', resumeAudio); | ||
} | ||
} | ||
document.getElementById('canvas').addEventListener('click', resumeAudio); | ||
document.addEventListener('keydown', resumeAudio); | ||
</script> | ||
{{{ SCRIPT }}} | ||
</body> | ||
</html> |