dylan/fantasy-console
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Improved color palette

Browse Source
This commit is contained in:
dylan 2023-05-07 13:58:55 -07:00
parent c53373ea47
commit 5ed92b5ff4
6 changed files with 126 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
carts/tmp/some_sprites.fx Normal file
View File

File diff suppressed because one or more lines are too long

8
codetab.ts
View File

@ -351,9 +351,9 @@ const valueColor = COLOR.ORANGE;
const stringColor = COLOR.GREEN;
const regexColor = stringColor;
const punctuationColor = COLOR.LIGHTGRAY;
const commentColor = COLOR.GRAY;
const identifierColor = COLOR.REDDISH;
const invalidColor = COLOR.RED;
const commentColor = COLOR.DARKGREEN;
const identifierColor = 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 {

127
colors.ts
View File

@ -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],
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],
BLACK2: [0, 0, 0],
BLACK3: [0, 0, 0],
BLACK4: [0, 0, 0],
WHITE: hsl(hue_gray, saturation_min, lightness_max),
LIGHTGRAY: hsl(hue_gray, saturation_min, lightness_light),
DARKGRAY: hsl(hue_gray, saturation_min, lightness_dark),
BLACK: hsl(hue_gray, saturation_min, lightness_min),
ORANGE: hsl(hue_orange, saturation_normal, lightness_medium),
TAN: hsl(hue_brown, saturation_low, lightness_light),
BROWN: hsl(hue_brown, saturation_low, lightness_mediumdark),
DARKBROWN: hsl(hue_brown, saturation_low, lightness_almostverydark),
PURPLE: hsl(hue_purple, saturation_normal, lightness_medium),
PINK: hsl(hue_pink, saturation_normal, lightness_light),
RED: hsl(hue_red, saturation_normal, lightness_medium),
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};

2
initialCart.json
View File

@ -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}]

14
spritetab.ts
View File

@ -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);
}
});

2
viewsheets.ts
View File

@ -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) => {