Spritesheets get 2 pages

maptab.ts

@@ -1,8 +1,8 @@
 import { clearScreen, fillRect } from "./window.ts";
 import { drawSprite, drawText } from "./builtins.ts";
 import { COLOR } from "./colors.ts";
-import { getMapSheet, getSheet, getSpriteSheet, setSheet } from "./sheet.ts";
+import { getMapSheet, getSheet, setSheet } from "./sheet.ts";
-import { mouseHeld, mousePos } from "./mouse.ts";
+import { mouseClick, mouseHeld, mousePos } from "./mouse.ts";
 import { inRect, reGrid } from "./util.ts";
 import { page } from "./viewsheets.ts";
 import { useSpritesheet } from "./builtins.ts";
@@ -11,6 +11,18 @@ const state = {
 	selectedSpriteSheet: 0,
 	selectedSprite: 0,
 	selectedPatch: 0,
+	get spriteSheetPage() {
+		return Math.floor(this.selectedSprite/64);
+	},
+	set spriteSheetPage(val) {
+		this.selectedSprite = 64*val+this.spriteWithinPage;
+	},
+	get spriteWithinPage() {
+		return this.selectedSprite%64;
+	},
+	set spriteWithinPage(val) {
+		this.selectedSprite = 64*this.spriteSheetPage+val;
+	},
 	get map() {
 		return getMapSheet(page.activeSheet);
 	},
@@ -40,7 +52,7 @@ const miniPatchH = 4;
 const overviewW = 8;
 const overviewH = 8;
 
-const patchX = 8;
+const patchX = 4;
 const patchY = 12;
 const patchW = 8;
 const patchH = 8;
@@ -54,11 +66,16 @@ const spriteSheetW = 16;
 const spriteSheetH = 4;
 
 const spriteSheetPickerX = 0;
-const spriteSheetPickerY = 79;
+const spriteSheetPickerY = 80;
 const spriteSheetPickerW = 16;
 const spriteSheetPickerH = 1;
-const spriteSheetPickerTabW = 8;
+const spriteSheetPickerTabW = 7;
-const spriteSheetPickerTabH = 8;
+const spriteSheetPickerTabH = 7;
+
+const spriteSheetPageSwapX = 121;
+const spriteSheetPageSwapY = 80;
+const spriteSheetPageSwapW = 7;
+const spriteSheetPageSwapH = 7;
 
 const update = () => {
 	if (mouseHeld()) {
@@ -82,7 +99,13 @@ const update = () => {
 		}
 		if (inSpriteSheet) {
 			const {x, y} = reGrid(mouseX, mouseY, spriteSheetX, spriteSheetY, spriteW, spriteH);
-			state.selectedSprite = spriteSheetW*y+x;
+			state.spriteWithinPage = spriteSheetW*y+x;
+		}
+	} else if (mouseClick()) {
+		const {x: mouseX, y: mouseY} = mousePos();
+		const inSpriteSheetPageSwap = inRect(mouseX, mouseY, spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH);
+		if (inSpriteSheetPageSwap) {
+			state.spriteSheetPage = (1+state.spriteSheetPage)%2;
 		}
 	}
 }
@@ -97,7 +120,8 @@ const outlineRect = (x: number, y: number, w: number, h: number, color: number)
 const draw = () => {
 	const {
 		selectedSpriteSheet,
-		selectedSprite,
+		spriteWithinPage,
+		spriteSheetPage,
 		selectedPatch
 	} = state;
 	clearScreen();
@@ -146,16 +170,21 @@ const draw = () => {
 		fillRect(tabX, tabY, spriteSheetPickerTabW, spriteSheetPickerTabH, color);
 		drawText(tabX+2, tabY+1, ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"][i]);
 	});
+
+	// Draw the spritesheet page swap button
+	fillRect(spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH, COLOR.BLUE);
+	drawText(spriteSheetPageSwapX+2, spriteSheetPageSwapY+1, state.spriteSheetPage.toString());
 	
 	// Draw the spritesheet
 	fillRect(spriteSheetX, spriteSheetY-1, (spriteSheetW*spriteW), (spriteSheetH*spriteH)+1, COLOR.BLACK);
 	if (getSheet(selectedSpriteSheet).sheet_type === "spritesheet") {
 		useSpritesheet(selectedSpriteSheet);
-		getSpriteSheet(selectedSpriteSheet).forEach((_sprite, i) => {
+		Array(64).fill(0).forEach((_, i) => {
+			const sprI = i+64*spriteSheetPage;
 			const sprX = spriteSheetX+spriteW*(i%spriteSheetW);
 			const sprY = spriteSheetY+spriteH*Math.floor(i/spriteSheetW);
-			drawSprite(sprX, sprY, i);
+			drawSprite(sprX, sprY, sprI);
-			if (i === selectedSprite) {
+			if (i === spriteWithinPage) {
 				outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE);
 			}
 		});

nonetab.ts

@@ -18,7 +18,7 @@ const gapY = 8;
 const sheetTypes = ["code", "spritesheet", "map"] as const;
 const defaultSheetVal = {
 	code: () => "",
-	spritesheet: () => Array(64).fill(0).map(() => Array(64).fill(0)),
+	spritesheet: () => Array(128).fill(0).map(() => Array(64).fill(0)),
 	map: () => Array(64*64).fill(0).map(() => [0, 0]),
 	none: () =>null,
 }

sheet.ts

@@ -39,6 +39,9 @@ export const getSpriteSheet = (sheet: number) => {
 	if (sheet_type !== "spritesheet") {
 		throw Error("Trying to use a non-sprite sheet as a spritesheet.");
 	}
+	while (value.length < 128) {
+		value.push(Array(64).fill(0));
+	}
 	return value;
 }
 
@@ -48,6 +51,4 @@ export const getMapSheet = (sheet: number) => {
 		throw "Trying to use a non-map sheet as a map."
 	}
 	return value;
-}
+}
-
-// addToContext("code", codeSheet);

spritetab.ts

@@ -1,8 +1,8 @@
 import { clearScreen, fillRect, setPixelColor } from "./window.ts";
-import { drawSprite } from "./builtins.ts";
+import { drawSprite, drawText } from "./builtins.ts";
 import { COLOR } from "./colors.ts";
 import { getSpriteSheet, setSheet } from "./sheet.ts";
-import { mouseHeld, mousePos } from "./mouse.ts";
+import { mouseClick, mouseHeld, mousePos } from "./mouse.ts";
 import { inRect, reGrid } from "./util.ts";
 import { page } from "./viewsheets.ts";
 import { useSpritesheet } from "./builtins.ts";
@@ -10,6 +10,18 @@ import { useSpritesheet } from "./builtins.ts";
 const state = {
 	selectedSprite: 0,
 	selectedColor: 0,
+	get spriteSheetPage() {
+		return Math.floor(this.selectedSprite/64);
+	},
+	set spriteSheetPage(val) {
+		this.selectedSprite = 64*val+this.spriteWithinPage;
+	},
+	get spriteWithinPage() {
+		return this.selectedSprite%64;
+	},
+	set spriteWithinPage(val) {
+		this.selectedSprite = 64*this.spriteSheetPage+val;
+	},
 	get sprites() {
 		return getSpriteSheet(page.activeSheet);
 	},
@@ -38,6 +50,11 @@ const sheetY = 88;
 const sheetW = 16;
 const sheetH = 4;
 
+const spriteSheetPageSwapX = 121;
+const spriteSheetPageSwapY = 80;
+const spriteSheetPageSwapW = 7;
+const spriteSheetPageSwapH = 7;
+
 const update = () => {
 	if (mouseHeld()) {
 		const {x: mouseX, y: mouseY} = mousePos();
@@ -55,7 +72,13 @@ const update = () => {
 		}
 		if (inSheet) {
 			const {x, y} = reGrid(mouseX, mouseY, sheetX, sheetY, spriteW, spriteH);
-			state.selectedSprite = sheetW*y+x;
+			state.spriteWithinPage = sheetW*y+x;
+		}
+	} else if (mouseClick()) {
+		const {x: mouseX, y: mouseY} = mousePos();
+		const inSpriteSheetPageSwap = inRect(mouseX, mouseY, spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH);
+		if (inSpriteSheetPageSwap) {
+			state.spriteSheetPage = (1+state.spriteSheetPage)%2;
 		}
 	}
 }
@@ -103,13 +126,19 @@ const draw = () => {
 		fillRect(spriteX+pixelW*(i%spriteW), spriteY+pixelH*Math.floor(i/spriteW), pixelW, pixelH, pix);
 	});
 
+	// Draw the spritesheet page swap button
+	fillRect(spriteSheetPageSwapX, spriteSheetPageSwapY, spriteSheetPageSwapW, spriteSheetPageSwapH, COLOR.BLUE);
+	drawText(spriteSheetPageSwapX+2, spriteSheetPageSwapY+1, state.spriteSheetPage.toString());
+	
 	// Draw the spritesheet
 	fillRect(sheetX, sheetY-1, (sheetW*spriteW), (sheetH*spriteH)+1, COLOR.BLACK);
-	sprites.forEach((_sprite, i) => {
+	Array(64).fill(0).forEach((_, i) => {
+		const sprI = i+64*state.spriteSheetPage;
 		const sprX = sheetX+spriteW*(i%sheetW);
 		const sprY = sheetY+spriteH*Math.floor(i/sheetW);
-		drawSprite(sprX, sprY, i);
+		console.log(sprI, getSpriteSheet(page.activeSheet).length);
-		if (i === selectedSprite) {
+		drawSprite(sprX, sprY, sprI);
+		if (i === state.spriteWithinPage) {
 			outlineRect(sprX, sprY, spriteW, spriteH, COLOR.WHITE);
 		}
 	});