export const buildBitTimeHtml = (bitTime: BitTime): string => {
const bitDigitsHtml = bitTime
.map(bitDigit => buildBitDigitHtml(bitDigit))
.join('\n');
return `<div class="time">
${bitDigitsHtml}
</div>`;
};
const updateCanvas: UpdateFn = (bitTime: BitTime): void => {
const bitTimeWithoutSeconds = bitTime.slice(0, 4);
const canvas = getCanvas();
canvas.style.display = 'none';
const bitWidth = canvas.width / bitTimeWithoutSeconds.length;
const bitHeight = canvas.height / bitTimeWithoutSeconds[0].length;
drawCanvas(canvas, bitTimeWithoutSeconds, bitWidth, bitHeight);
};
const drawCanvas = (
canvas: HTMLCanvasElement,
bitTime: BitTime,
bitWidth: number,
bitHeight: number
): void => {
const ctx: CanvasRenderingContext2D = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
bitTime.forEach((bitDigit: BitDigit, x: number) => {
bitDigit.forEach((bit: number, y: number) => {
drawBit(ctx, bit, x, y, bitWidth, bitHeight);
});
});
};