add an erase brush

This commit is contained in:
Amelia Cuss 2022-01-06 12:33:23 +11:00
parent a7cf988214
commit ecf104586f
2 changed files with 42 additions and 12 deletions

View File

@ -79,11 +79,12 @@ export function drawPuzzle(ctx: CanvasRenderingContext2D, puzzle: Puzzle, input:
}
if (c === null) {
const selectedStyle = selectedColor !== null ? puzzle.palette[selectedColor] : puzzle.bg;
if (hovered && hovered.x === x && hovered.y === y && mouseButtonDown !== 'right') {
ctx.fillStyle = puzzle.palette[selectedColor];
ctx.fillStyle = selectedStyle;
ctx.fillRect(sx, sy, SQUARE, SQUARE);
} else {
ctx.strokeStyle = puzzle.palette[selectedColor];
ctx.strokeStyle = selectedStyle;
ctx.strokeRect(sx, sy, SQUARE + GAP, SQUARE + GAP);
}
} else if (c !== null) {
@ -104,16 +105,22 @@ export function drawPuzzle(ctx: CanvasRenderingContext2D, puzzle: Puzzle, input:
}
const sx = offset + puzzle.width * (SQUARE + GAP) + SWATCH_OFFSET;
for (let c = 0; c < puzzle.palette.length; c++) {
for (let c = 0; c < puzzle.palette.length + 1; c++) {
const sy = offset + (c + 0.5) * (SWATCH_HEIGHT + SWATCH_GAP);
const gradient = ctx.createLinearGradient(sx, sy, sx + SWATCH_WIDTH, sy);
gradient.addColorStop(0, puzzle.palette[c]);
gradient.addColorStop(0.5, puzzle.palette[c]);
gradient.addColorStop(1, puzzle.bg);
if (c < puzzle.palette.length) {
gradient.addColorStop(0, puzzle.palette[c]);
gradient.addColorStop(0.5, puzzle.palette[c]);
gradient.addColorStop(1, puzzle.bg);
} else {
gradient.addColorStop(0, puzzle.bg);
gradient.addColorStop(0.5, puzzle.bg);
gradient.addColorStop(1, 'red');
}
ctx.fillStyle = gradient;
ctx.fillRect(sx, sy, SWATCH_WIDTH, SWATCH_HEIGHT);
if (c === selectedColor) {
if (c === selectedColor || (c === puzzle.palette.length && selectedColor === null)) {
ctx.strokeStyle = 'red';
ctx.strokeRect(sx, sy, SWATCH_WIDTH, SWATCH_HEIGHT);
}

View File

@ -12,7 +12,8 @@ export const mouse = { x: 0, y: 0 };
const puzzle = puzzles.mimi;
SaveState.init(puzzle);
export let selectedColor = 0;
export let selectedColor: number | null = 0;
export let mouseButtonDown: 'left' | 'right' | null = null;
function mouseTrigger(): void {
@ -46,15 +47,37 @@ window.addEventListener("mousedown", (e) => {
mouseTrigger();
});
function nextColor(): void {
if (selectedColor === null) {
selectedColor = 0;
} else {
selectedColor = (selectedColor + 1) % puzzle.palette.length;
if (selectedColor === 0) {
selectedColor = null;
}
}
}
function prevColor(): void {
if (selectedColor === null) {
selectedColor = puzzle.palette.length - 1;
} else {
selectedColor = (selectedColor + puzzle.palette.length - 1) % puzzle.palette.length;
if (selectedColor === puzzle.palette.length - 1) {
selectedColor = null;
}
}
}
window.addEventListener("wheel", (e) => {
let deltaY = -e.deltaY;
if ((e as any).webkitDirectionInvertedFromDevice) {
deltaY = -deltaY;
}
if (deltaY < 0) {
selectedColor = (selectedColor + 1) % puzzle.palette.length;
nextColor();
} else {
selectedColor = (selectedColor + puzzle.palette.length - 1) % puzzle.palette.length;
prevColor();
}
});
@ -68,9 +91,9 @@ window.addEventListener("contextmenu", (e) => {
window.addEventListener("keydown", (e) => {
if (e.key === 'ArrowRight') {
selectedColor = (selectedColor + 1) % puzzle.palette.length;
nextColor();
} else if (e.key === 'ArrowLeft') {
selectedColor = (selectedColor + puzzle.palette.length - 1) % puzzle.palette.length;
prevColor();
} else if (e.key === 'c') {
SaveState.pushUndo();
SaveState.clearRedos();