2023-10-16 10:54:34 +00:00
<!doctype html>
< html lang = "EN-us" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
2023-10-17 01:29:57 +00:00
< title > Terry Cherry< / title >
2023-10-16 10:54:34 +00:00
2023-10-17 01:29:57 +00:00
< meta name = "title" content = "Terry Cherry" >
< meta name = "description" content = "Terry fends off the hordes of cherries" >
2023-10-16 10:54:34 +00:00
< meta name = "viewport" content = "width=device-width" >
< style >
body {
font-family: arial;
margin: 0;
padding: none;
2023-10-17 01:29:57 +00:00
background: #301010;
2023-10-16 10:54:34 +00:00
}
#header {
2023-10-17 11:07:20 +00:00
font-weight: bold;
color: white;
2023-10-17 01:29:57 +00:00
height: 30px;
2023-10-17 11:07:20 +00:00
text-align: center;
2023-10-17 01:29:57 +00:00
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
2023-10-17 11:07:20 +00:00
padding-bottom: 10px;
2023-10-16 10:54:34 +00:00
}
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }
2023-10-17 01:29:57 +00:00
div.emscripten_border { border: 0px solid black; }
div.emscripten_status { border: 0px solid black; }
2023-10-16 10:54:34 +00:00
/* NOTE: Canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten {
border: 0px none;
background: black;
2023-10-17 01:29:57 +00:00
width: 75vw;
2023-10-16 10:54:34 +00:00
}
#status {
display: inline-block;
vertical-align: top;
2023-10-17 11:07:20 +00:00
font-weight: normal;
font-size: 0.8em;
color: darkgray;
2023-10-16 10:54:34 +00:00
}
#progress {
height: 0px;
width: 0px;
}
#controls {
display: inline-block;
float: right;
vertical-align: top;
}
#output {
2023-10-17 01:29:57 +00:00
width: 90%;
2023-10-16 10:54:34 +00:00
height: 140px;
margin: 0 auto;
margin-top: 10px;
display: block;
background-color: black;
2023-10-17 01:29:57 +00:00
color: white;
2023-10-16 10:54:34 +00:00
font-family: 'Lucida Console', Monaco, monospace;
outline: none;
}
input[type=button] {
background-color: lightgray;
color: black;
text-decoration: none;
cursor: pointer;
width: 140px;
}
input[type=button]:hover {
background-color: #f5f5f5ff;
border-color: black;
}
< / style >
< / head >
< body >
< div id = "header" >
2023-10-17 11:07:20 +00:00
< h1 style = "font-size: 1em; text-align: center; margin-top: 0; margin-bottom: 0; padding-bottom: 3px" > Terry Cherry< / h1 >
2023-10-16 10:54:34 +00:00
< div class = "emscripten" id = "status" > Downloading...< / div >
< div class = "emscripten" >
2023-10-17 01:29:57 +00:00
< progress value = "0" max = "100" id = "progress" hidden = 0 > < / progress >
2023-10-16 10:54:34 +00:00
< / div >
< / div >
< div class = "emscripten_border" >
< canvas class = "emscripten" id = "canvas" oncontextmenu = "event.preventDefault()" tabindex = -1 > < / canvas >
< / div >
2023-10-17 11:07:20 +00:00
< div style = "display: flex; justify-content: space-around;" >
< span id = 'controls' >
< span > < input type = "button" value = "🖵 FULLSCREEN" onclick = "Module.requestFullscreen(false, false)" > < / span >
< span > < input type = "button" id = "btn-audio" value = "🔇 SUSPEND" onclick = "toggleAudio()" > < / span >
< / span >
< / div >
2023-10-16 10:54:34 +00:00
< textarea id = "output" rows = "8" > < / textarea >
< script type = 'text/javascript' >
var statusElement = document.querySelector('#status');
var progressElement = document.querySelector('#progress');
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, "& ");
//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.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 = true;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
}
2023-10-17 11:07:20 +00:00
if (text) {
statusElement.innerHTML = '@version@: ' + text;
} else {
statusElement.innerHTML = '@version@';
}
2023-10-16 10:54:34 +00:00
},
totalDependencies: 0,
monitorRunDependencies: function(left) {
this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
},
//noInitialRun: true
};
Module.setStatus('Downloading...');
window.onerror = function() {
Module.setStatus('Exception thrown, see JavaScript console');
Module.setStatus = function(text) { if (text) Module.printErr('[post-exception status] ' + text); };
};
< / script >
<!-- REF: https://developers.google.com/web/updates/2018/11/web - audio - autoplay -->
< script type = 'text/javascript' >
var audioBtn = document.querySelector('#btn-audio');
// An array of all contexts to resume on the page
const audioContexList = [];
(function() {
// A proxy object to intercept AudioContexts and
// add them to the array for tracking and resuming later
self.AudioContext = new Proxy(self.AudioContext, {
construct(target, args) {
const result = new target(...args);
audioContexList.push(result);
if (result.state == "suspended") audioBtn.value = "🔈 RESUME";
return result;
}
});
})();
function toggleAudio() {
var resumed = false;
audioContexList.forEach(ctx => {
if (ctx.state == "suspended") { ctx.resume(); resumed = true; }
else if (ctx.state == "running") ctx.suspend();
});
if (resumed) audioBtn.value = "🔇 SUSPEND";
else audioBtn.value = "🔈 RESUME";
}
< / script >
{{{ SCRIPT }}}
< / body >
< / html >
