Make tabs for code and sprite editors

builtins.ts

@@ -18,6 +18,10 @@ export const drawSprite = (x: number, y: number, spr: number) => {
 	setPixelsInRect(x, y, 8, sprites[spr]);
 }
 
+export const drawIcon = (x: number, y: number, icon: Array<number>, color: number) => {
+	setPixelsInRect(x, y, 8, icon.map(n => n*color));
+}
+
 export const drawChar = (x: number, y: number, char: string, color: number) => {
 	setPixelsInRect(x, y, 4, font[char].map(n => n*color));
 }

editmode.ts

@@ -2,11 +2,58 @@ import { clearScreen, fillRect } from "./window.ts";
 import { codetab } from "./codetab.ts";
 import { spritetab } from "./spritetab.ts";
 import { COLOR } from "./colors.ts";
+import { mouseClick, mousePos } from "./mouse.ts";
+import { drawIcon } from "./builtins.ts";
+import { inRect } from "./util.ts";
 
-// deno-lint-ignore prefer-const
+type TabName = "code" | "sprite" | "map" | "sfx" | "music";
-let tab: "code" | "sprite" | "map" | "sfx" | "music" = "sprite";
+
+let tab: TabName = "sprite";
+
+const codeIcon = [
+	0, 0, 0, 0, 0, 0, 0, 0,
+	0, 0, 1, 0, 0, 1, 0, 0,
+	0, 1, 1, 0, 0, 1, 1, 0,
+	0, 1, 0, 0, 0, 0, 1, 0,
+	0, 1, 0, 0, 0, 0, 1, 0,
+	0, 1, 1, 0, 0, 1, 1, 0,
+	0, 0, 1, 0, 0, 1, 0, 0,
+	0, 0, 0, 0, 0, 0, 0, 0,
+];
+
+const spriteIcon = [
+	0, 0, 0, 0, 0, 0, 0, 0,
+	0, 0, 1, 1, 1, 1, 0, 0,
+	0, 1, 1, 0, 1, 1, 1, 0,
+	0, 1, 1, 1, 1, 0, 0, 0,
+	0, 1, 1, 1, 0, 0, 0, 0,
+	0, 1, 1, 1, 1, 1, 1, 0,
+	0, 0, 1, 1, 1, 1, 0, 0,
+	0, 0, 0, 0, 0, 0, 0, 0,
+];
+
+const buttons: Array<{update: () => void, draw: () => void}> = [];
+const makeTabButton = (tabname: TabName, x: number, y: number, icon: Array<number>) => {
+	buttons.push({
+		update() {
+			if (mouseClick()) {
+				const {x: mouseX, y: mouseY} = mousePos();
+				if (inRect(mouseX, mouseY, x, y, 8, 8)) {
+					tab = tabname;
+				}
+			}
+		},
+		draw() {
+			drawIcon(x, y, icon, tab === tabname ? COLOR.YELLOW : COLOR.WHITE);
+		}
+	})
+}
+
+makeTabButton("code", 88, 0, codeIcon);
+makeTabButton("sprite", 88+8, 0, spriteIcon);
 
 const update = () => {
+	buttons.forEach(button => button.update());
 	if (tab === "code") {
 		codetab.update();
 	} else if (tab === "sprite") {
@@ -23,6 +70,7 @@ const draw = () => {
 	}
 	fillRect(0, 0, 128, 8, COLOR.RED);
 	fillRect(0, 120, 128, 8, COLOR.RED);
+	buttons.forEach(button => button.draw());
 }
 
 export const editmode = {

spritetab.ts

@@ -3,6 +3,7 @@ import { drawSprite } from "./builtins.ts";
 import { COLOR } from "./colors.ts";
 import {getSheet, setSheet} from "./sheet.ts";
 import { mouseHeld, mousePos } from "./mouse.ts";
+import { inRect } from "./util.ts";
 
 const state = {
 	selectedSprite: 0,
@@ -39,15 +40,6 @@ const sheetY = 88;
 const sheetW = 16;
 const sheetH = 4;
 
-const inRect = (x: number, y: number, rectX: number, rectY: number, rectW: number, rectH: number) => {
-	return (
-		x >= rectX &&
-		x < rectX+rectW &&
-		y >= rectY &&
-		y < rectY+rectH
-	)
-}
-
 const reGrid = (x: number, y: number, gridX: number, gridY: number, cellW: number, cellH: number) => {
 	return {
 		x: Math.floor((x-gridX)/cellW),

util.ts

@@ -0,0 +1,8 @@
+export const inRect = (x: number, y: number, rectX: number, rectY: number, rectW: number, rectH: number) => {
+	return (
+		x >= rectX &&
+		x < rectX+rectW &&
+		y >= rectY &&
+		y < rectY+rectH
+	)
+}