111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
class Theme {
|
|
drawTile(color, matrix, ctx) {
|
|
}
|
|
}
|
|
|
|
class DefaultTheme extends Theme {
|
|
drawTile(color, matrix, ctx) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(tileGap / 2, tileGap / 2, 1 - tileGap, 1 - tileGap);
|
|
}
|
|
}
|
|
|
|
class CleanTheme extends Theme {
|
|
drawTile(color, matrix, ctx) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(0, 0, 1, 1);
|
|
}
|
|
}
|
|
|
|
class ModernTheme extends Theme {
|
|
drawTile(color, matrix, ctx) {
|
|
ctx.fillStyle = color;
|
|
drawRoundRect(ctx, tileGap / 2, tileGap / 2, 1 - tileGap, 1 - tileGap, .15);
|
|
}
|
|
}
|
|
|
|
class SnakesTheme extends Theme {
|
|
drawTile(color, matrix, ctx, x, y) {
|
|
let r1 = .15, // top right
|
|
r2 = .15, // bottom right
|
|
r3 = .15, // bottom left
|
|
r4 = .15; // top left
|
|
// Is there a tile to the left?
|
|
if (matrix[y][x - 1] > 0) {
|
|
r3 = 0;
|
|
r4 = 0;
|
|
}
|
|
// Is there a tile to the right?
|
|
if (matrix[y][x + 1] > 0) {
|
|
r1 = 0;
|
|
r2 = 0;
|
|
}
|
|
// Is there a tile to the top?
|
|
if (matrix[y - 1] !== undefined && matrix[y - 1][x] > 0) {
|
|
r1 = 0;
|
|
r4 = 0;
|
|
}
|
|
// Is there a tile to the bottom?
|
|
if (matrix[y + 1] !== undefined && matrix[y + 1][x] > 0) {
|
|
r2 = 0;
|
|
r3 = 0;
|
|
}
|
|
drawRoundRect(ctx, x, y, 1, 1, [r1, r2, r3, r4]);
|
|
}
|
|
}
|
|
|
|
class RetroTheme extends Theme {
|
|
static drawReliefRect(ctx, x, y, width, height, elevation, color) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(x + elevation, y + elevation, width - (2 * elevation), height - (2 * elevation));
|
|
|
|
ctx.fillStyle = colorLuminance(color, .6);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(x + width, y);
|
|
ctx.lineTo(x + width - elevation, y + elevation);
|
|
ctx.lineTo(x + elevation, y + elevation);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
|
|
ctx.fillStyle = colorLuminance(color, .3);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
ctx.lineTo(x, y + height);
|
|
ctx.lineTo(x + elevation, y + height - elevation);
|
|
ctx.lineTo(x + elevation, y + elevation);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
|
|
ctx.fillStyle = colorLuminance(color, -.6);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y + height);
|
|
ctx.lineTo(x + width, y + height);
|
|
ctx.lineTo(x + width - elevation, y + height - elevation);
|
|
ctx.lineTo(x + elevation, y + height - elevation);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
|
|
ctx.fillStyle = colorLuminance(color, -.3);
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + width, y);
|
|
ctx.lineTo(x + width, y + height);
|
|
ctx.lineTo(x + width - elevation, y + height - elevation);
|
|
ctx.lineTo(x + width - elevation, y + elevation);
|
|
ctx.fill();
|
|
ctx.closePath();
|
|
}
|
|
|
|
drawTile(color, matrix, ctx) {
|
|
RetroTheme.drawReliefRect(ctx, 0, 0, 1, 1, .15, color);
|
|
}
|
|
}
|
|
|
|
const themes = {
|
|
default: new DefaultTheme(),
|
|
clean: new CleanTheme(),
|
|
modern: new ModernTheme(),
|
|
snakes: new SnakesTheme(),
|
|
retro: new RetroTheme()
|
|
};
|