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

random color on launch, dynamic map color

Browse source
This commit is contained in:
Vinzenz Schroeter 2024-04-14 13:23:04 +02:00
parent cd3c054ee8
commit 44b66c37fc
2 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
tank-frontend/src/ClientScreen.tsx
View file

@ -5,9 +5,6 @@ import './ClientScreen.css';
const pixelsPerRow = 352; const pixelsPerRow = 352;
const pixelsPerCol = 160; const pixelsPerCol = 160;
const onColor = [0, 180, 0, 255];
const offColor = [0, 0, 0, 255];
function getIndexes(bitIndex: number) { function getIndexes(bitIndex: number) {
return { return {
byteIndex: Math.floor(bitIndex / 8), byteIndex: Math.floor(bitIndex / 8),
@ -15,11 +12,24 @@ function getIndexes(bitIndex: number) {
}; };
} }
// @ts-ignore
const rootElement = document.querySelector(':root')!;
function normalizeColor(context: CanvasRenderingContext2D, color: string) {
context.fillStyle = color;
context.fillRect(0, 0, 1, 1);
return context.getImageData(0, 0, 1, 1).data;
}
function drawPixelsToCanvas(pixels: Uint8Array, canvas: HTMLCanvasElement) { function drawPixelsToCanvas(pixels: Uint8Array, canvas: HTMLCanvasElement) {
const drawContext = canvas.getContext('2d'); const drawContext = canvas.getContext('2d');
if (!drawContext) if (!drawContext)
throw new Error('could not get draw context'); throw new Error('could not get draw context');
const rootStyle = getComputedStyle(rootElement);
const colorPrimary = normalizeColor(drawContext, rootStyle.getPropertyValue('--color-primary'));
const colorBackground = normalizeColor(drawContext, rootStyle.getPropertyValue('--color-background'));
const imageData = drawContext.getImageData(0, 0, canvas.width, canvas.height, {colorSpace: 'srgb'}); const imageData = drawContext.getImageData(0, 0, canvas.width, canvas.height, {colorSpace: 'srgb'});
const data = imageData.data; const data = imageData.data;
@ -30,7 +40,7 @@ function drawPixelsToCanvas(pixels: Uint8Array, canvas: HTMLCanvasElement) {
const {byteIndex, bitInByteIndex} = getIndexes(pixelIndex); const {byteIndex, bitInByteIndex} = getIndexes(pixelIndex);
const mask = (1 << bitInByteIndex); const mask = (1 << bitInByteIndex);
const isOn = (pixels[byteIndex] & mask) !== 0; const isOn = (pixels[byteIndex] & mask) !== 0;
const color = isOn ? onColor : offColor; const color = isOn ? colorPrimary : colorBackground;
for (let colorChannel of [0, 1, 2, 3]) for (let colorChannel of [0, 1, 2, 3])
data[pixelIndex * 4 + colorChannel] = color[colorChannel]; data[pixelIndex * 4 + colorChannel] = color[colorChannel];

16
tank-frontend/src/index.tsx
View file

@ -3,6 +3,22 @@ import {createRoot} from 'react-dom/client';
import './index.css'; import './index.css';
import App from "./App.tsx"; import App from "./App.tsx";
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 3; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
// @ts-ignore
const rootStyle = document.querySelector(':root')?.style;
if (rootStyle) {
rootStyle.setProperty('--color-primary', getRandomColor());
rootStyle.setProperty('--color-secondary', getRandomColor());
rootStyle.setProperty('--color-background', getRandomColor());
}
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>