vinzenz/servicepoint-tanks
0
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

color bullets and popups (same color currently)

Browse source
This commit is contained in:
Vinzenz Schroeter 2024-05-06 12:58:36 +02:00
parent f481bb638a
commit ba56edf588
1 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
tank-frontend/src/components/PixelGridCanvas.tsx
View file

@ -9,7 +9,8 @@ const observerMessageSize = pixelsPerCol * pixelsPerRow / 8;
enum GamePixelEntityType { enum GamePixelEntityType {
Wall = 0x0, Wall = 0x0,
Tank = 0x1, Tank = 0x1,
Bullet = 0x2 Bullet = 0x2,
PowerUp = 0x3
} }
function getPixelDataIndexes(bitIndex: number) { function getPixelDataIndexes(bitIndex: number) {
@ -37,26 +38,30 @@ function parseAdditionalDataNibble(nibble: number) {
function drawPixelsToCanvas( function drawPixelsToCanvas(
{ {
context, width, height, pixels, additional, foreground, background, playerColor, otherTanksColor context, width, height, pixels, additional, colors
}: { }: {
context: CanvasRenderingContext2D, context: CanvasRenderingContext2D,
width: number, width: number,
height: number, height: number,
pixels: Uint8ClampedArray, pixels: Uint8ClampedArray,
additional: Uint8ClampedArray | null, additional: Uint8ClampedArray | null,
colors: {
background: Uint8ClampedArray, background: Uint8ClampedArray,
foreground: Uint8ClampedArray, foreground: Uint8ClampedArray,
playerColor: Uint8ClampedArray, player: Uint8ClampedArray,
otherTanksColor: Uint8ClampedArray tanks: Uint8ClampedArray,
powerUps: Uint8ClampedArray,
bullets: Uint8ClampedArray
}
} }
) { ) {
let additionalDataIndex = 0; let additionalDataIndex = 0;
let additionalDataByte: number | null = null; let additionalDataByte: number | null = null;
const nextPixelColor = (isOn: boolean) => { const nextPixelColor = (isOn: boolean) => {
if (!isOn) if (!isOn)
return background; return colors.background;
if (!additional) if (!additional)
return foreground; return colors.foreground;
let info; let info;
if (additionalDataByte === null) { if (additionalDataByte === null) {
@ -69,12 +74,16 @@ function drawPixelsToCanvas(
} }
if (info.isCurrentPlayer) if (info.isCurrentPlayer)
return playerColor; return colors.player;
if (info.entityType == GamePixelEntityType.Tank) if (info.entityType === GamePixelEntityType.Tank)
return otherTanksColor; return colors.tanks;
if (info.entityType === GamePixelEntityType.PowerUp)
return colors.powerUps;
if (info.entityType === GamePixelEntityType.Bullet)
return colors.bullets;
return foreground; return colors.foreground;
}; };
const imageData = context.getImageData(0, 0, width, height, {colorSpace: 'srgb'}); const imageData = context.getImageData(0, 0, width, height, {colorSpace: 'srgb'});
@ -127,10 +136,14 @@ export default function PixelGridCanvas({pixels, theme}: {
height: canvas.height, height: canvas.height,
pixels, pixels,
additional: additionalData, additional: additionalData,
colors: {
background: normalizeColor(drawContext, hslToString(theme.background)), background: normalizeColor(drawContext, hslToString(theme.background)),
foreground: normalizeColor(drawContext, hslToString(theme.primary)), foreground: normalizeColor(drawContext, hslToString(theme.primary)),
playerColor: normalizeColor(drawContext, hslToString(theme.secondary)), player: normalizeColor(drawContext, hslToString(theme.secondary)),
otherTanksColor: normalizeColor(drawContext, hslToString(theme.tertiary)) tanks: normalizeColor(drawContext, hslToString(theme.tertiary)),
powerUps: normalizeColor(drawContext, hslToString(theme.tertiary)),
bullets: normalizeColor(drawContext, hslToString(theme.tertiary))
}
}); });
}; };