world ScenePriorityMap.tsx

0% Statements 0/23

0% Branches 0/4

0% Functions 0/2

0% Lines 0/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useEffect, useRef } from "react";
import { TILE_COLOR_PROP_PRIORITY } from "consts";
 
const TILE_SIZE = 8;
 
interface ScenePriorityMapProps {
  width: number;
  height: number;
  tileColors: number[];
}
 
const ScenePriorityMap = ({
  width,
  height,
  tileColors,
}: ScenePriorityMapProps) => {
  const canvas = useRef<HTMLCanvasElement>(null);
 
  useEffect(() => {
    Iif (canvas.current) {
      // eslint-disable-next-line no-self-assign
      canvas.current.width = canvas.current.width; // Clear canvas
      const ctx = canvas.current.getContext("2d");
 
      Iif (!ctx) return;
 
      for (let yi = 0; yi < height; yi++) {
        for (let xi = 0; xi < width; xi++) {
          const tileIndex = width * yi + xi;
          const tile = tileColors[tileIndex];
          if ((tile & TILE_COLOR_PROP_PRIORITY) === TILE_COLOR_PROP_PRIORITY) {
            ctx.fillStyle = "rgba(40,250,40,0.3)";
          } else {
            ctx.fillStyle = "rgba(40,40,40,0.6)";
          }
          ctx.fillRect(xi * TILE_SIZE, yi * TILE_SIZE, TILE_SIZE, TILE_SIZE);
        }
      }
    }
  }, [tileColors, height, width]);
 
  return (
    <canvas
      ref={canvas}
      width={width * TILE_SIZE}
      height={height * TILE_SIZE}
    />
  );
};
 
export default ScenePriorityMap;