update readme.

create a constant that represents the amount of tiles a box extends out
from its center in all 4 directions. compute the box size and box center
position constants from this new constant, instead of having them be
hard-coded.

README.md

@@ -14,6 +14,7 @@ there's a demo video at `/assets/demo_video.webm`.
 - QWEASD: paint with RGBYCM colors, respectively.
 - ZX: paint with background colors.
 - CV: paint with black and white.
+- G: create grass.
 - space: create box.
 - backspace: delete/clear/empty tiles to your left and right, and where you're standing.
 

js/graphics.mjs

@@ -21,14 +21,29 @@ function checkerboard (x, y) {
 	return ((x ^ y) & 1) === 0;
 }
 
+function should_be_darker (x, y) {
+	const CENTER  = world.CENTER;
+	const BOX_SIZE = world.BOX_SIZE;
+
+	return x === CENTER && y === CENTER
+		|| (x === 0 || x === BOX_SIZE - 1) && (y === 0 || y === BOX_SIZE - 1)
+}
+
 export function draw_floor (start_x, start_y, scale, invert = false) {
 	iter_2d(range(0, world.BOX_SIZE - 1), (x, y) => {
-		if (checkerboard(x, y) !== invert) {
-			graphics.set_color("#aaa");
-		} else {
-			graphics.set_color("#888");
+		let dark = "#888";
+		let bright = "#aaa";
+		if (should_be_darker(x, y)) {
+			dark = "#555";
+			bright = "#666";
 		}
+
+		graphics.set_color(dark);
 		draw_rect(x * scale + start_x, y * scale + start_y, scale);
+
+		graphics.set_color(bright);
+		draw_rect(x * scale + start_x, y * scale + start_y, scale / 2);
+		draw_rect((x + 0.5) * scale + start_x, (y + 0.5) * scale + start_y, scale / 2);
 	});
 }
 

js/world.mjs

@@ -1,7 +1,8 @@
 import { iter_2d, range } from "./utils/range.mjs";
 
-export const BOX_SIZE = 9;
-export const CENTER = Math.floor(BOX_SIZE / 2);
+const BOX_EXTENT_FROM_CENTER = 4;
+export const BOX_SIZE = BOX_EXTENT_FROM_CENTER * 2 + 1;
+export const CENTER = BOX_EXTENT_FROM_CENTER;