<!doctype html>
<html lang="EN-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Terry Cherry</title>
<meta name="title" content="Terry Cherry">
<meta name="description" content="Terry fends off the hordes of cherries">
<meta name="viewport" content="width=device-width">
<style>
body {
font-family: arial;
margin: 0;
padding: none;
background: #301010;
}
#header {
font-weight: bold;
color: white;
height: 30px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
div.emscripten { text-align: center; }
div.emscripten_border { border: 0px solid black; }
div.emscripten_status { border: 0px 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: 75vw;
}
#status {
display: inline-block;
vertical-align: top;
font-weight: normal;
font-size: 0.8em;
color: darkgray;
}
#progress {
height: 0px;
width: 0px;
}
#controls {
display: inline-block;
float: right;
vertical-align: top;
}
#output {
width: 90%;
height: 140px;
margin: 0 auto;
margin-top: 10px;
display: block;
background-color: black;
color: white;
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">
<h1 style="font-size: 1em; text-align: center; margin-top: 0; margin-bottom: 0; padding-bottom: 3px">Terry Cherry</h1>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=0></progress>
</div>
</div>
<div class="emscripten_border">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
</div>
<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>
<div style="margin-left:5%;margin-right:5%;text-align:center;color:#fff">
<p>Help Terry fend off the horde by defending the lanes and
constructing buildings to slow them down.</br>Developed by Doyle, Josh
and Tom over 4 weeks.</br><a style="color:inherit;" href="https://git.doylet.dev/doylet/feely_pona">Source code here!</a></p>
</div>
<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;
}
if (text) {
statusElement.innerHTML = '@version@: ' + text;
} else {
statusElement.innerHTML = '@version@';
}
},
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>