website/public/data/playground.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Carbuncle</title>
<meta content="Carbuncle Playground" name="title" />
<meta
content="New HTML5 videogame, developed using Carbuncle videogames library"
name="description"
/>
<meta
content="raylib, games, html5, programming, C, C++, library, learn, videogames"
name="keywords"
/>
<meta content="width=device-width" name="viewport" />
<meta content="Carbuncle Playground" property="og:title" />
<meta content=image/png property=og:image:type> <meta
content=https://holywyvern.github.io/carbuncle/img/logo.svg
property=og:image> <meta content=https://holywyvern.github.io/carbuncle/
property=og:url>
<meta content="Carbuncle Game Engine" property="og:site_name" />
<meta
content="Carbuncle Game Developed for the web"
property="og:description"
/>
<meta content="summary" name="twitter:card" />
<meta content="@emegemegames" name="twitter:site" />
<meta content="Carbuncle Playground" name="twitter:title" />
<meta
content="Carbuncle Game Developed for the web"
name="twitter:description"
/>
<meta content=https://holywyvern.github.io/carbuncle/img/logo.svg
name=twitter:image> <meta
content=https://holywyvern.github.io/carbuncle/img/logo.svg
name=twitter:url> <link
href=https://holywyvern.github.io/carbuncle/favicon.ico rel="shortcut icon">
<style>
body {
font-family: arial;
margin: 0;
padding: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.container {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.loader {
margin: 100px auto;
font-size: 25px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load5 {
0%,
100% {
box-shadow: 0 -2.6em 0 0 #fff,
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff,
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5),
2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff,
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff,
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5),
0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff,
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff,
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5),
-2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff;
}
}
@keyframes load5 {
0%,
100% {
box-shadow: 0 -2.6em 0 0 #fff,
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0 #fff, 2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 #fff,
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5),
2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 #fff,
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 #fff,
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5),
0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 #fff,
-2.6em 0 0 0 rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 #fff,
-1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2),
2.5em 0 0 0 rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2),
0 2.5em 0 0 rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5),
-2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 #fff;
}
}
</style>
</head>
<body>
<div class="container">
<canvas
height="480"
id="canvas"
oncontextmenu="event.preventDefault()"
width="640"
></canvas>
</div>
<div class="container" id="spinner">
<div class="loader"></div>
</div>
<script>
!(function () {
"use strict";
var e = document.getElementById("spinner"),
t = document.getElementById("canvas");
t.addEventListener(
"webglcontextlost",
function (e) {
alert("WebGL context lost. You will need to reload the page."),
e.preventDefault();
},
!1
),
(window.Module = {
preRun: [],
postRun: [],
arguments: [
new URLSearchParams(window.location.search).get("code") || "",
],
print: console.log,
printErr: console.error,
canvas: t,
setStatus: function (t) {
"" === t && document.body.removeChild(e);
},
});
})();
</script>
<script async src="./playground.js"></script>
</body>
</html>