All files / src/components SpaceCanvas.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, {useEffect, useRef, useState} from 'react';
import {GameData} from '../utils/pixiUtils/GameData';
import {
  pixiCanvasDestroy,
  pixiCanvasStart,
} from '../utils/pixiUtils/PixiCanvas';
import PeerManager, {PlayerDto, Peer, DataDtoType} from '../utils/RTCGameUtils';
import SpaceLoading from './SpaceLoading';
import YoutubeEmbedRenderer from './YoutubeEmbed';
 
interface spaceCanvasProps {
  peerManager: PeerManager;
}
 
function SpaceCanvas(props: spaceCanvasProps): JSX.Element {
  const [loadingPercentage, setLoadingPercentage] = useState(0);
  const canvasRef = useRef<HTMLCanvasElement>(null);
 
  useEffect(() => {
    if (!canvasRef.current) return;
    props.peerManager.setDataChannelEventHandler(
      DataDtoType.PLAYER_INFO,
      (playerDto: PlayerDto, peer: Peer) => {
        peer.update(playerDto);
      },
    );
    // pixi Start
    GameData.setPeerManager(props.peerManager);
    pixiCanvasStart(canvasRef.current, setLoadingPercentage);
    return () => {
      props.peerManager.close();
      pixiCanvasDestroy();
      YoutubeEmbedRenderer.clear();
    };
  }, []);
  return (
    <>
      {loadingPercentage < 100 ? (
        <SpaceLoading loadingPercentage={loadingPercentage} />
      ) : null}
      <canvas ref={canvasRef}></canvas>
    </>
  );
}
 
export default SpaceCanvas;