Improved color palette

codetab.ts

@@ -351,9 +351,9 @@ const valueColor = COLOR.ORANGE;
 const stringColor = COLOR.GREEN;
 const regexColor = stringColor;
 const punctuationColor = COLOR.LIGHTGRAY;
-const commentColor = COLOR.GRAY;
+const commentColor = COLOR.DARKGREEN;
-const identifierColor = COLOR.REDDISH;
+const identifierColor = COLOR.RED;
-const invalidColor = COLOR.RED;
+const invalidColor = COLOR.DARKRED;
 
 const tokenColors = {
 	"StringLiteral": stringColor,
@@ -382,7 +382,7 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
 		focusX,
 		focusY,
 	} = state;
-	fillRect(x, y, w, h, COLOR.DARKBLUE);
+	fillRect(x, y, w, h, COLOR.DARKERBLUE);
 	if (anchor === focus) {
 		fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
 	} else {

colors.ts

@@ -1,22 +1,119 @@
+const hue_gray = 230;
+const hue_brown = 30;
+const hue_orange = 37;
+const hue_purple = 280;
+const hue_pink = 310;
+const hue_red = 340;
+const hue_red_shade = 335;
+const hue_yellow = 57;
+const hue_green = 130;
+const hue_green_shade = 145;
+const hue_sky = 203;
+const hue_blue = 224;
+const hue_blue_shade = 235;
+const hue_blue_shade_2 = 240;
+
+const saturation_max = 90;
+const saturation_normal = 60;
+const saturation_low = 40;
+const saturation_min = 13;
+
+const lightness_max = 95;
+const lightness_light = 67;
+const lightness_mediumlight = 62;
+const lightness_medium = 50;
+const lightness_mediumdark = 40;
+const lightness_dark = 30;
+const lightness_almostverydark = 25;
+const lightness_verydark = 20;
+const lightness_min = 5;
+
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   Number  h       The hue
+ * @param   Number  s       The saturation
+ * @param   Number  l       The lightness
+ * @return  Array           The RGB representation
+ */
+ function hsl(h: number, s: number, l: number): [number, number, number] {
+	h = h / 360;
+	s = s/100;
+	l = l/100;
+	let r, g, b;
+  
+	if (s == 0) {
+	  r = g = b = l; // achromatic
+	} else {
+	  const hue2rgb = (p: number, q: number, t: number) => {
+		if (t < 0) t += 1;
+		if (t > 1) t -= 1;
+		if (t < 1/6) return p + (q - p) * 6 * t;
+		if (t < 1/2) return q;
+		if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+		return p;
+	  }
+  
+	  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+	  const p = 2 * l - q;
+  
+	  r = hue2rgb(p, q, h + 1/3);
+	  g = hue2rgb(p, q, h);
+	  b = hue2rgb(p, q, h - 1/3);
+	}
+  
+	return [ r , g , b ];
+}
+
 const colors = {
 	TRANSPARENT: [0, 0, 0],
-	BLACK: [0, 0, 0],
+	BLACK2: [0, 0, 0],
-	WHITE: [1, 1, 1],
+	BLACK3: [0, 0, 0],
-	RED: [1, 0, 0],
+	BLACK4: [0, 0, 0],
-	YELLOW: [1, 1, 0],
+	WHITE: hsl(hue_gray, saturation_min, lightness_max),
-	GREEN: [0, 1, 0],
+	LIGHTGRAY: hsl(hue_gray, saturation_min, lightness_light),
-	BLUE: [0.1, 0.5, 1],
+	DARKGRAY: hsl(hue_gray, saturation_min, lightness_dark),
-	DARKBLUE: [0.05, 0.1, 0.3],
+	BLACK: hsl(hue_gray, saturation_min, lightness_min),
-	BROWN: [0.6, 0.5, 0.4],
+	ORANGE: hsl(hue_orange, saturation_normal, lightness_medium),
-	GRAY: [0.5, 0.5, 0.5],
+	TAN: hsl(hue_brown, saturation_low, lightness_light),
-	PURPLE: [0.7, 0.1, 0.85],
+	BROWN: hsl(hue_brown, saturation_low, lightness_mediumdark),
-	ORANGE: [0.95, 0.75, 0.25],
+	DARKBROWN: hsl(hue_brown, saturation_low, lightness_almostverydark),
-	CYAN: [0, 0.9, 0.9],
+	PURPLE: hsl(hue_purple, saturation_normal, lightness_medium),
-	LIGHTGRAY: [0.75, 0.75, 0.75],
+	PINK: hsl(hue_pink, saturation_normal, lightness_light),
-	REDDISH: [216/255, 59/255, 113/255],
+	RED: hsl(hue_red, saturation_normal, lightness_medium),
-	DARKGREEN: [0, 0.6, 0.2],
+	DARKRED: hsl(hue_red_shade, saturation_normal, lightness_dark),
+	YELLOW: hsl(hue_yellow, saturation_max, lightness_mediumlight),
+	GREEN: hsl(hue_green, saturation_normal, lightness_medium),
+	DARKGREEN: hsl(hue_green_shade, saturation_normal, lightness_dark),
+	DARKERGREEN: hsl(hue_green_shade, saturation_normal, lightness_verydark),
+	CYAN: hsl(hue_sky, saturation_max, lightness_light),
+	BLUE: hsl(hue_blue, saturation_normal, lightness_medium),
+	DARKBLUE: hsl(hue_blue_shade, saturation_normal, lightness_mediumdark),
+	DARKERBLUE: hsl(hue_blue_shade_2, saturation_normal, lightness_dark),
 } as const;
 
+// const colors = {
+// 	TRANSPARENT: [0, 0, 0],
+// 	BLACK: [0, 0, 0],
+// 	WHITE: [1, 1, 1],
+// 	RED: [1, 0, 0],
+// 	YELLOW: [1, 1, 0],
+// 	GREEN: [0, 1, 0],
+// 	BLUE: [0.1, 0.5, 1],
+// 	DARKBLUE: [0.05, 0.1, 0.3],
+// 	BROWN: [0.6, 0.5, 0.4],
+// 	GRAY: [0.5, 0.5, 0.5],
+// 	PURPLE: [0.7, 0.1, 0.85],
+// 	ORANGE: [0.95, 0.75, 0.25],
+// 	CYAN: [0, 0.9, 0.9],
+// 	LIGHTGRAY: [0.75, 0.75, 0.75],
+// 	REDDISH: [216/255, 59/255, 113/255],
+// 	DARKGREEN: [0, 0.6, 0.2],
+// } as const;
+
 export const palette: Array<[number, number, number, number]> = Object.values(colors).map(val => [...val, 1]);
 
 export const COLOR = Object.fromEntries(Object.keys(colors).map((name, i) => [name, Number(i)])) as {[key in keyof typeof colors]: number};

initialCart.json

@@ -1 +1 @@
-[{"sheet_type":"code","value":""},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null}]
+[{"sheet_type":"code","value":"// Sample\n\nreturn {\n\tinit() {},\n\tupdate() {},\n\tdraw() {\n\t\tcls();\n\t\ttxt(10,10,\"Hello, World!\");\n\t}\n}"},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null},{"sheet_type":"none","value":null}]

spritetab.ts

@@ -19,14 +19,14 @@ const state = {
 }
 
 const paletteX = 88;
-const paletteY = 12;
+const paletteY = 16;
 const swatchW = 8;
 const swatchH = 8;
 const paletteW = 4;
-const paletteH = 4;
+const paletteH = 6;
 
 const spriteX = 8;
-const spriteY = 12;
+const spriteY = 16;
 const pixelW = 8;
 const pixelH = 8;
 
@@ -71,7 +71,7 @@ const drawTransparentRect = (x: number, y: number, w: number, h: number) => {
 	Array(w*h).fill(0).map((_z, j) => {
 		const jx = j%w;
 		const jy = Math.floor(j/w);
-		setPixelColor(x+jx, y+jy, (jx+jy)%2 ? COLOR.BLACK : COLOR.DARKBLUE);
+		setPixelColor(x+jx, y+jy, (jx+jy)%2 ? COLOR.BLACK : COLOR.DARKGRAY);
 	})
 }
 
@@ -79,7 +79,7 @@ const draw = () => {
 	const {sprites, selectedSprite, selectedColor} = state;
 	clearScreen();
 	useSpritesheet(page.activeSheet);
-	fillRect(0, 8, 128, 112, COLOR.BROWN);
+	fillRect(0, 8, 128, 112, COLOR.DARKGRAY);
 
 	// Draw the palette
 	fillRect(paletteX-1, paletteY-1, (paletteW*swatchW)+2, (paletteH*swatchH)+2, COLOR.BLACK);
@@ -87,12 +87,12 @@ const draw = () => {
 		const swatchX = paletteX+swatchW*(i%paletteW);
 		const swatchY = paletteY+swatchH*Math.floor(i/paletteW);
 		fillRect(swatchX, swatchY, swatchW, swatchH, COLOR[name as keyof typeof COLOR]);
-		if (i === 0) {
+		if (name == "TRANSPARENT") {
 			// transparent
 			drawTransparentRect(swatchX, swatchY, swatchW, swatchH);
 		}
 		if (i === selectedColor) {
-			outlineRect(swatchX, swatchY, swatchW, swatchH, COLOR.WHITE);
+			outlineRect(swatchX, swatchY, swatchW, swatchH, name === "WHITE" ? COLOR.BLACK : COLOR.WHITE);
 		}
 	});
 

viewsheets.ts

@@ -31,7 +31,7 @@ const update = () => {
 
 const draw = () => {
 	clearScreen();
-	fillRect(0, 8, 128, 112, COLOR.BROWN);
+	fillRect(0, 8, 128, 112, COLOR.DARKGRAY);
 
 	// Draw the sheet grid
 	getCart().forEach((sheet, i) => {