initial grass test.

start working on tile updating code; add grass as test & demo for this.
add temporary "texture" for grass, and keybind for creating it.

TODO.md

@@ -0,0 +1 @@
+- rewrite import paths to be absolute.

js/graphics.mjs

@@ -62,6 +62,15 @@ function draw_tile (tile, x, y, scale) {
 			draw_rect(x, y, scale);
 			break;
 		}
+		// temporary: in the future, textures will exist and tile definitions will exist and keep track of textures for tiles.
+		case "grass": {
+			graphics.set_color("#2a0");
+			draw_rect(x, y, scale);
+			graphics.set_color("#4c0");
+			draw_rect(x, y, scale * 0.5);
+			draw_rect(x + scale / 2, y + scale / 2, scale * 0.5);
+			break;
+		}
 	}
 }
 

js/main.mjs

@@ -2,20 +2,31 @@ import * as graphics from "./graphics.mjs";
 import { BOX_SIZE, get_tile } from "./world.mjs";
 import { get_player_box } from "./player.mjs";
 import { save_in_browser, load_from_browser } from "./save_load.mjs";
+import { tick } from "/js/tile_update.mjs";
 
 
 
 load_from_browser();
 
-function render (timestamp) {
+function render (_delta_time) {
 	graphics.clear();
 	graphics.draw_world(get_player_box());
 	graphics.render();
-
-	requestAnimationFrame(render);
 }
 
-requestAnimationFrame(render);
+let last_time = new Date().getTime();
+function main (timestamp) {
+	let dt_ms = timestamp - last_time;
+	last_time += dt_ms;
+	const delta = dt_ms / 1000;
+
+	render(delta);
+	tick(delta);
+
+	requestAnimationFrame(main);
+}
+
+requestAnimationFrame(main);
 
 function autosave () {
 	save_in_browser();

js/player.mjs

@@ -48,12 +48,16 @@ export function get_player_box () {
 	return player.box;
 }
 
-function set_painting_key (key, color) {
+function set_place_key (key, tile) {
 	on_press(key, _ => {
-		world.set_tile(player.box, player.x, player.y, {
-			type: "paint",
-			color,
-		});
+		world.set_tile(player.box, player.x, player.y, structuredClone(tile));
+	});
+}
+
+function set_painting_key (key, color) {
+	set_place_key(key, {
+		type: "paint",
+		color,
 	});
 }
 
@@ -71,3 +75,7 @@ set_painting_key("x", "#aaa");
 // black and white
 set_painting_key("c", "#000");
 set_painting_key("v", "#fff");
+// grass test
+set_place_key("g", {
+	type: "grass",
+});

js/tile_update.mjs

@@ -0,0 +1,38 @@
+import * as world from "/js/world.mjs";
+import { get_player_box } from "/js/player.mjs";
+import * as random from "/js/utils/random.mjs";
+
+
+
+// lots of this code is very hacky temporary for testing things out & getting started with tile updates.
+
+export function tick (delta_time) {
+	const box = get_player_box();
+	world.for_each_tile(box, (x, y, tile) => {
+		if (tile_tickers.has(tile.type)) {
+			tile_tickers.get(tile.type)(box, x, y, delta_time);
+		}
+	});
+}
+
+const tile_tickers = new Map();
+
+const dirs = [
+	[ -1, 0 ],
+	[ 1, 0 ],
+	[ 0, -1 ],
+	[ 0, 1 ],
+];
+
+tile_tickers.set("grass", (box, x, y, delta_time) => {
+	const tile = world.get_tile(box, x, y);
+	if (Math.random() > 0.9 ** delta_time) {
+		const dir = random.item(dirs);
+		const [ d_x, d_y ] = dir;
+		if (world.get_tile(box, x + d_x, y + d_y).type === "empty") {
+			world.set_tile(box, x + d_x, y + d_y, {
+				type: "grass",
+			});
+		}
+	};
+});

js/utils/random.mjs

@@ -0,0 +1,11 @@
+export function range (min, max) {
+	return min + Math.random() * (max - min);
+}
+
+export function integer (min, max) {
+	return Math.floor(range(min, max));
+}
+
+export function item (array) {
+	return array[integer(0, array.length)];
+}

js/utils/range.mjs

@@ -19,8 +19,8 @@ export function range (start, end) {
 }
 
 export function iter_2d (range_1d, callback) {
-	for (const y in range_1d) {
-		for (const x in range_1d) {
+	for (const y of range_1d) {
+		for (const x of range_1d) {
 			callback(x, y);
 		}
 	}