commit 82a1cd243a66b6d9a75701e0c0efb70efa93e6e9
Author: HyperOnion <>
Date: Fri Jun 23 11:00:12 2023 +0200
get basic graphics set up.
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..69c2f64
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7a8d157
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+ boxes
+
+
+
+
+
+
+
diff --git a/js/graphics.mjs b/js/graphics.mjs
new file mode 100644
index 0000000..008d569
--- /dev/null
+++ b/js/graphics.mjs
@@ -0,0 +1,25 @@
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d");
+
+export function set_size (w, h) {
+ canvas.width = w;
+ canvas.height = h;
+}
+
+export function set_color (color) {
+ ctx.fillStyle = color;
+ ctx.strokeStyle = color;
+}
+
+export function clear (color = "#000") {
+ set_color(color);
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+export function fill_rect (x, y, w, h) {
+ ctx.fillRect(x, y, w, h);
+}
+
+export function render (target_canvas) {
+ target_canvas.drawImage(canvas, 0, 0);
+}
diff --git a/js/main.mjs b/js/main.mjs
new file mode 100644
index 0000000..bc36428
--- /dev/null
+++ b/js/main.mjs
@@ -0,0 +1,27 @@
+import * as graphics from "./graphics.mjs";
+import { range } from "./utils/range.mjs";
+
+const canvas = document.getElementById("canvas");
+const canvas_context = canvas.getContext("2d");
+graphics.set_size(canvas.width, canvas.height);
+
+const BOX_SIZE = 9;
+const SCALE = 64;
+
+function draw_tile (x, y) {
+ graphics.fill_rect(x * SCALE, y * SCALE, SCALE, SCALE);
+}
+
+function draw_box_floor () {
+ graphics.clear("#888");
+ graphics.set_color("#aaa");
+ for (const x in range(0, BOX_SIZE)) {
+ for (const y in range(0, BOX_SIZE)) {
+ if (((x ^ y) & 1) === 0)
+ draw_tile(x, y);
+ }
+ }
+}
+
+draw_box_floor();
+graphics.render(canvas_context);
diff --git a/js/utils/range.mjs b/js/utils/range.mjs
new file mode 100644
index 0000000..8e298f1
--- /dev/null
+++ b/js/utils/range.mjs
@@ -0,0 +1,27 @@
+export {
+ is_in_range,
+ clamp,
+ range,
+};
+
+
+
+function is_in_range (number, min, max) {
+ return number >= min && number <= max;
+}
+
+function clamp (number, min, max) {
+ return number < min
+ ? min
+ : number > max
+ ? max
+ : number;
+}
+
+function range (start, end) {
+ const result = [];
+ for (let n = start; n <= end; n++) {
+ result.push(n);
+ }
+ return result;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..8178f5c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,16 @@
+html, body {
+ margin: 0;
+ min-height: 100vh;
+ overflow: auto;
+}
+
+body {
+ background-color: #000;
+ color: #fff;
+
+ padding: 0;
+}
+
+a {
+ color: #0f0;
+}