cakefoot/index.html

166 lines
5.4 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" />
<style>
@import url("../../../lib/fonts/rounded-mplus/2m-medium/style.css");
@import url("../../../lib/fonts/rounded-mplus/2p-thin/style.css ");
@import url("../../../lib/fonts/notcouriersans/regular/style.css");
html
{
height: 100%;
color: #eee;
}
body
{
margin: 0px;
background: #000;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 85% 1fr 5%;
height: 100%;
font-family: RoundedMPlus2MMedium;
font-size: 18px;
text-align: center;
/* Gap between the screen and text */
grid-gap: 3%;
}
canvas
{
margin: 0px auto;
width: 100%;
max-height: 100%;
aspect-ratio: 16 / 9;
align-self: center;
}
div#message
{
margin: 0px auto;
padding: 0% 1%;
align-self: start;
}
a
{
color: #999;
}
div#title
{
color: #fff;
font-family: RoundedMPlus2pThin;
margin-bottom: 8px;
font-size: 28px;
}
div#session
{
font-family: NotCourierSans;
font-size: 18px;
text-align: center;
align-self: end;
padding: 0% 1%;
margin-top: 8px;
}
</style>
</head>
<body>
<!-- Emscripten's module object will update this canvas with WebGL content. -->
<canvas id="canvas"></canvas>
<div id="message">
🚧 Cakefoot by <a href="https://ohsqueezy.itch.io">@ohsqueezy</a> is under construction at <a href="https://shampoo.ooo/cakefoot">shampoo.ooo/cakefoot</a>. Send feedback with <a href="https://forms.gle/V3o5kCPygngm8bEi8", target="new">this form</a>, message
@ohsqueezy on Discord, or email mailbox at shampoo.ooo 😺
<br/>
<div id="session"></div>
</div>
<script>
var databaseName = "/storage";
function collectData()
{
/* Open the database Emscripten's IDBFS library created. */
var open = indexedDB.open(databaseName);
var database;
open.onerror = (event) => {
console.error("Unable to open IndexedDB to read progress data.");
};
open.onsuccess = (event) => {
database = event.target.result;
/* Read the key created by Emscripten which corresponds to the file containing the progress data JSON. */
var path = databaseName + "/cakefoot_progress.json";
var read = database.transaction("FILE_DATA").objectStore("FILE_DATA").get(path);
read.onerror = (event) => {
console.error("Unable to read from", path);
};
read.onsuccess = (event) => {
/* Decode a string encoded as a UInt8Array of chars. The string is serialized JSON data. */
var contents = String.fromCharCode.apply(null, read.result.contents);
/* Pass play log to PHP script as JSON */
fetch("www/collect.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: contents
}).then((response) => {
if (!response.ok)
{
console.log("Error collecting progress to play history");
}
else
{
return response.json();
}
}).then((response) => {
document.getElementById("session").innerHTML = "Progress is automatically saved to your browser (session ID: " + response["id"] + ")";
});
}
};
}
var Module = {
/* Set Emscripten to use a canvas for display. */
canvas: document.getElementById("canvas"),
/* Turn off automatic call to main function */
noInitialRun: true,
/* Mount storage for the save file and run game */
onRuntimeInitialized: function()
{
FS.mkdir("/storage");
FS.mount(IDBFS, {}, "/storage");
FS.syncfs(true, function(error) {
if (error !== null)
{
console.log("Error mounting storage with Filesystem API", error);
}
else
{
_main();
}
});
}
};
</script>
<!-- This file is built by Emscripten when compiling the program -->
<script src="cakefoot.js"></script>
</body>
</html>