Web build

2024-02-12 15:41:31 +01:00
parent e69fdeed1f
commit 4252547342
5 changed files with 85 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>PixelDefense</title>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+        /*
+        #canvas {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            margin: 0px;
+            border: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            display: block;
+        }
+
+         */
+    </style>
+</head>
+
+<body>
+
+<!-- Create the canvas that the C code will draw into -->
+<div>
+    <canvas id="canvas" oncontextmenu="event.preventDefault()" style="position: absolute; background-color: #000;"></canvas>
+    <div class="emscripten" style="position: absolute; right: 0; bottom: 0;">
+        <input type="checkbox" id="resize" checked style="display: none;">
+        <input type="checkbox" id="pointerLock" style="display: none;">
+        <button type="button" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
+                                                                                  document.getElementById('resize').checked)">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-120v-240h80v104l124-124 56 56-124 124h104v80H120Zm480 0v-80h104L580-324l56-56 124 124v-104h80v240H600ZM324-580 200-704v104h-80v-240h240v80H256l124 124-56 56Zm312 0-56-56 124-124H600v-80h240v240h-80v-104L636-580Z"/></svg>
+        </button>
+        <!--
+        <input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
+        &nbsp;&nbsp;&nbsp;
+        <input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
+                                                                                    document.getElementById('resize').checked)">
+        -->
+    </div>
+</div>
+
+<!-- Allow the C code to access the canvas element -->
+<script type='text/javascript'>
+    //const canvas = document.getElementById('canvas');
+    // For some reason WebGL default is true :/
+    //const gl = canvas.getContext("webgl", { premultipliedAlpha: false });
+    var Module = {
+        canvas: (function() { return document.getElementById('canvas'); })()
+    };
+</script>
+
+<!-- Add the javascript glue code generated by Emscripten -->
+<!-- <script src="PixelDefense.js"></script> -->
+{{{ SCRIPT }}}
+
+</body>
+
+</html>