All files / src/components/collisions CollisionTileIcon.tsx

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
53
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { defaultCollisionTileColor, defaultCollisionTileIcon } from "consts";
import React, { useEffect, useRef } from "react";
import { renderCollisionTileIcon } from "shared/lib/collisions/collisionTiles";
import styled from "styled-components";
 
interface CollisionTileIconProps {
  icon?: string;
  color?: string;
}
 
const CollisionTileIconCanvas = styled.canvas`
  image-rendering: pixelated;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: ${(props) => props.theme.colors.input.background};
  border: 2px solid ${(props) => props.theme.colors.input.background};
  outline: 1px solid ${(props) => props.theme.colors.input.border};
`;
 
export const CollisionTileIcon = ({ icon, color }: CollisionTileIconProps) => {
  const ref = useRef<HTMLCanvasElement>(null);
 
  useEffect(() => {
    const canvas = ref.current;
    Iif (!canvas) {
      return;
    }
    const ctx = canvas.getContext("2d");
    Iif (!ctx) {
      return;
    }
 
    // eslint-disable-next-line no-self-assign
    canvas.width = canvas.width;
 
    const tileIcon = renderCollisionTileIcon(
      icon ?? defaultCollisionTileIcon,
      color ?? defaultCollisionTileColor
    );
 
    ctx.drawImage(tileIcon, 0, 0);
  }, [icon, color]);
 
  return (
    <CollisionTileIconCanvas
      ref={ref}
      width="8"
      height="8"
    ></CollisionTileIconCanvas>
  );
};