get basic graphics set up.

2023-06-23 11:00:12 +02:00 · 2023-06-23 11:00:12 +02:00 · 82a1cd243a
commit 82a1cd243a
6 changed files with 109 additions and 0 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+	<meta charset="utf-8">
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+
+	<title>boxes</title>
+
+	<script defer type="module" src="js/main.mjs"></script>
+</head>
+
+<body>
+	<canvas id="canvas" width="576" height="576"></canvas>
+</body>
--- a/js/graphics.mjs
+++ 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);
+}
--- a/js/main.mjs
+++ 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);
--- a/js/utils/range.mjs
+++ 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;
+}
--- a/style.css
+++ 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;
+}