setFindAddress(e.target.value)}
diff --git a/frontend/apps/vara-man/src/feature/game/components/game-canvas/game-canvas.tsx b/frontend/apps/vara-man/src/feature/game/components/game-canvas/game-canvas.tsx
index 7e51de1de..c18390576 100644
--- a/frontend/apps/vara-man/src/feature/game/components/game-canvas/game-canvas.tsx
+++ b/frontend/apps/vara-man/src/feature/game/components/game-canvas/game-canvas.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
import BackgroundMapImg from '@/assets/images/border.png';
import MobileController from '../mobile-controller/mobile-controller';
import { GameEngine } from '../../models/Game';
@@ -10,13 +10,17 @@ type GameCanvasProps = {
isPause?: boolean;
};
-export const GameCanvas = ({ canvasRef, fogCanvasRef, gameInstanceRef, isPause }: GameCanvasProps) => {
+const useResizeCanvas = (
+ canvasRef: GameCanvasProps['canvasRef'],
+ fogCanvasRef: GameCanvasProps['fogCanvasRef'],
+ gameInstanceRef: GameCanvasProps['gameInstanceRef'],
+) => {
useEffect(() => {
const resizeCanvas = () => {
const canvas = canvasRef.current;
const fogCanvas = fogCanvasRef.current;
if (canvas && fogCanvas) {
- const dpr = window.devicePixelRatio || 1;
+ const dpr = window.devicePixelRatio;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
fogCanvas.width = fogCanvas.clientWidth * dpr;
@@ -31,20 +35,26 @@ export const GameCanvas = ({ canvasRef, fogCanvasRef, gameInstanceRef, isPause }
}
};
+ if (gameInstanceRef.current) {
+ resizeCanvas();
+ } else {
+ const timeoutId = setTimeout(resizeCanvas, 100);
+ return () => clearTimeout(timeoutId);
+ }
+
window.addEventListener('resize', resizeCanvas);
- resizeCanvas();
return () => {
window.removeEventListener('resize', resizeCanvas);
};
- }, [canvasRef, fogCanvasRef, gameInstanceRef]);
+ }, [canvasRef, fogCanvasRef, gameInstanceRef.current]);
+};
+
+export const GameCanvas = ({ canvasRef, fogCanvasRef, gameInstanceRef, isPause }: GameCanvasProps) => {
+ useResizeCanvas(canvasRef, fogCanvasRef, gameInstanceRef);
return (
-
+