172 lines
4.9 KiB
HTML
172 lines
4.9 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta content="text/html" http-equiv="Content-Type"/>
|
|||
|
|
<title>Minecraft Plus!</title>
|
|||
|
|
|
|||
|
|
<!-- I definitely wasn’t hired for my webdev skills haha -->
|
|||
|
|
<style type="text/css">
|
|||
|
|
html, body {
|
|||
|
|
margin: 0 !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#panel {
|
|||
|
|
width: 500px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls:not([hidden]) {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls img {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls * {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
display: inline-block;
|
|||
|
|
|
|||
|
|
background-color: #34aa2f !important;
|
|||
|
|
border-color: #34aa2f !important;
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
|
|||
|
|
color: #fff !important;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
padding: 0.5rem 3.25rem !important;
|
|||
|
|
font-size: 19.2px !important;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.alt {
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
.alt::before {
|
|||
|
|
content: "~";
|
|||
|
|
}
|
|||
|
|
.alt::after {
|
|||
|
|
content: "~";
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- What is this? Where are all the libraries? This is never going to work in IE -->
|
|||
|
|
<script type="module">
|
|||
|
|
import init, { start, pick_splash } from './pkg/mcse_web.js';
|
|||
|
|
|
|||
|
|
function swapElements(toHide, toShow) {
|
|||
|
|
document.getElementById(toHide).hidden = true;
|
|||
|
|
document.getElementById(toShow).hidden = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function run(params) {
|
|||
|
|
swapElements("start", "status-resources");
|
|||
|
|
swapElements("header-product", "header-squid");
|
|||
|
|
|
|||
|
|
let resource_request = await fetch("/pkg/resources.zip");
|
|||
|
|
let resource_data = await resource_request.arrayBuffer();
|
|||
|
|
|
|||
|
|
swapElements("status-resources", "status-code");
|
|||
|
|
await init();
|
|||
|
|
console.log(pick_splash());
|
|||
|
|
|
|||
|
|
let canvas = document.createElement("canvas");
|
|||
|
|
document.body.appendChild(canvas);
|
|||
|
|
|
|||
|
|
let autorun = params.get("autorun");
|
|||
|
|
|
|||
|
|
let start_display = function() {
|
|||
|
|
document.getElementById("panel").remove();
|
|||
|
|
canvas.width = window.innerWidth;
|
|||
|
|
canvas.height = window.innerHeight;
|
|||
|
|
start(canvas, params.get("module"), resource_data);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (autorun == "window") {
|
|||
|
|
start_display();
|
|||
|
|
} else {
|
|||
|
|
swapElements("status-code", "select");
|
|||
|
|
|
|||
|
|
document.getElementById("fullscreen").onclick = function() {
|
|||
|
|
canvas.requestFullscreen()
|
|||
|
|
.then(start_display)
|
|||
|
|
.catch(function(e) {
|
|||
|
|
console.log("Failed to request fullscreen", e);
|
|||
|
|
start_display();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.getElementById("window").onclick = start_display;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.onload = function() {
|
|||
|
|
let params = new URLSearchParams(window.location.search);
|
|||
|
|
if (params.has("autorun")) {
|
|||
|
|
run(params);
|
|||
|
|
} else {
|
|||
|
|
document.getElementById("webgl").onclick = function() {
|
|||
|
|
run(params);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- Is that written by hand? Puzzling! -->
|
|||
|
|
<div id="panel" aria-live="polite">
|
|||
|
|
<div id="header-product" class="controls">
|
|||
|
|
<div><img src="box.jpg" alt="The Product" /></div>
|
|||
|
|
</div>
|
|||
|
|
<div hidden id="header-squid" class="controls">
|
|||
|
|
<div><img src="glowsquid.gif" alt="Glowsquid goes 'whoosh'" /></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="start" class="controls">
|
|||
|
|
<div>Thank you for choosing Minecraft Plus! as your primary source of entertainment!</div>
|
|||
|
|
<a href="/screensaver.zip" download>Download for Desktop</a>
|
|||
|
|
<div><sub>(available only for fairly modern Windows x64)</sub></div>
|
|||
|
|
<div><sub>(<b>Note</b>: actual executable screen saver. Like we had in the 90's)</sub></div>
|
|||
|
|
<div class="alt">or</div>
|
|||
|
|
<a id="webgl" href="#">Run in Browser</a>
|
|||
|
|
<div><sub>(requires browser with adequate amount of modern magic)</sub></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div hidden id="status-resources" class="controls" role="status">
|
|||
|
|
<div>Downloading resources</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div hidden id="status-code" class="controls" role="status">
|
|||
|
|
<div>Downloading code</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div hidden id="select" class="controls">
|
|||
|
|
<div>All done!</div>
|
|||
|
|
<a id="fullscreen" href="#">Run in fullscreen</a>
|
|||
|
|
<div class="alt">or</div>
|
|||
|
|
<a id="window" href="#">Run windowed</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|