example2 player x

example2-playerx.tsx

const BOARD_SIZE = 208 as const;
const BOARD_PADDING = 4 as const;
const LINE_WIDTH = 8 as const;
const LINE_CAP_SIZE = LINE_WIDTH / 2;
const CELL_SIZE = 64 as const;
const CELL_PADDING = 4 as const;
const CELL_CENTER = CELL_SIZE / 2;
const COLOR1 = '#FFD103';
const COLOR2 = '#A303FF';
const COLOR3 = '#CCCCCC';

function PlayerXCanvas(
  props: React.DetailedHTMLProps<
    React.CanvasHTMLAttributes<HTMLCanvasElement>,
    HTMLCanvasElement
  >
) {
  const canvas = useRef<HTMLCanvasElement>(null)

  useEffect(
    () => {
      const lineStart = BOARD_PADDING + LINE_CAP_SIZE + CELL_PADDING + LINE_CAP_SIZE;
      const lineLength = CELL_SIZE - lineStart;

      const context = canvas.current!.getContext('2d')!;
      context.lineWidth = LINE_WIDTH;
      context.lineCap = 'round';
      context.strokeStyle = COLOR2;
      context.beginPath();

      context.moveTo(lineStart, lineStart);
      context.lineTo(lineLength, lineLength);

      context.moveTo(lineLength, lineStart);
      context.lineTo(lineStart, lineLength);

      context.stroke();
    },
    [canvas]
  )

  return (
    <canvas
      {...props}
      height={CELL_SIZE}
      width={CELL_SIZE}
      ref={canvas}
    />
  )
}