From 82a1cd243a66b6d9a75701e0c0efb70efa93e6e9 Mon Sep 17 00:00:00 2001 From: HyperOnion <> Date: Fri, 23 Jun 2023 11:00:12 +0200 Subject: [PATCH] get basic graphics set up. --- favicon.ico | Bin 0 -> 127 bytes index.html | 14 ++++++++++++++ js/graphics.mjs | 25 +++++++++++++++++++++++++ js/main.mjs | 27 +++++++++++++++++++++++++++ js/utils/range.mjs | 27 +++++++++++++++++++++++++++ style.css | 16 ++++++++++++++++ 6 files changed, 109 insertions(+) create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 js/graphics.mjs create mode 100644 js/main.mjs create mode 100644 js/utils/range.mjs create mode 100644 style.css diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..69c2f643da6375dc7941ee5202c6425b1cbbf767 GIT binary patch literal 127 zcmeAS@N?(olHy`uVBq!ia0vp^4M3d0!3HF+R#kZdDK}3S$B>FSZx1r^0(plPeD}}g fXBPo7NdbSP4bP0l+XkKH4qdf literal 0 HcmV?d00001 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; +}