72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
import { minifyJs } from "./utils.js";
|
|
|
|
export class HtmlExporter {
|
|
constructor(assetProvider) {
|
|
this.assetProvider = assetProvider;
|
|
}
|
|
|
|
async export(projectName, code) {
|
|
const js = code
|
|
.split("\n")
|
|
.map((line) => " ".repeat(12) + line).join("\n");
|
|
|
|
let lib = await (await fetch("./src/gamelib.js")).text();
|
|
lib = minifyJs(lib);
|
|
|
|
const assets = await this.assetProvider.getAll();
|
|
|
|
const html = `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="generator" content="karlkoder playground">
|
|
<title>${projectName}</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"gamelib": "data:text/javascript,${encodeURIComponent(lib)}"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import { Gamelib } from "gamelib";
|
|
|
|
const assets = ${JSON.stringify(assets)}
|
|
|
|
class AssetProvider {
|
|
url(name) {
|
|
return assets[name];
|
|
}
|
|
}
|
|
|
|
const gamelib = new Gamelib(console, null, new AssetProvider(), document.querySelector('canvas'));
|
|
|
|
window.karlkoder = {
|
|
lib() {
|
|
return gamelib.getAdapter();
|
|
},
|
|
};
|
|
</script>
|
|
<script type="module">
|
|
${js}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas width="480" height="360"></canvas>
|
|
</body>
|
|
</html>`;
|
|
|
|
return html;
|
|
}
|
|
}
|