Refactor: make tilemap rendering faster than before logic

[kimgh06]

• Divide tilemap to Opened tile map, and dynamic tilemap
• Setting render range smaller
• Refactor values to constant values

[Copilot]

Pull Request Overview

This PR significantly refactors tilemap rendering for improved performance by separating opened and dynamic tilemaps, implementing more efficient rendering strategies, and consolidating constants across the codebase.

Key changes include:

• Complete restructuring of tilemap rendering with optimized texture generation, pooled sprite management, and web worker support for tile parsing
• Consolidation of type definitions, constants, and utilities into centralized modules
• Performance optimizations across components including memory-efficient DOM updates and high-resolution canvas rendering

Reviewed Changes

Copilot reviewed 27 out of 27 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/utils/makePath2d.ts	New utility for Path2D creation and array processing
src/utils/canvas.ts	Canvas rendering helper for filling paths with colors
src/types/position.ts	Type definitions for coordinates and directions
src/types/message.ts	WebSocket message types and event constants
src/types/canvas.ts	Canvas-related types including vector images and tile content
src/constants/cursor.ts	Cursor color mappings and directional arrays
src/constants/click.ts	Click type constants
src/components/tilemap/index.tsx	Major refactor with texture caching, sprite pooling, and worker support
src/components/canvas/index.tsx	High-resolution canvas setup and optimized rendering
src/app/play/page.tsx	Web worker implementation for tile parsing and performance improvements

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The variable name 'tileMinializedSize' contains a typo. It should be 'tileMiniaturizedSize' or 'tileMinimizedSize'.

[Copilot]

The magic number 0.001 should be defined as a named constant to explain its purpose and make it easier to maintain.

[Copilot]

The type assertion 'as unknown as never' suggests an API compatibility issue. This should be properly typed or the underlying type issue should be addressed rather than using unsafe type assertions.

Suggested change

	outer.eventMode = 'none' as unknown as never;
	outer.cullable = true;
	const inner = new PixiSprite();
	inner.roundPixels = true;
	inner.eventMode = 'none' as unknown as never;
	outer.eventMode = 'none' as PixiSprite['eventMode'];
	outer.cullable = true;
	const inner = new PixiSprite();
	inner.roundPixels = true;
	inner.eventMode = 'none' as PixiSprite['eventMode'];

[Copilot]

The property 'textRenderingOptimization' doesn't exist on CanvasRenderingContext2D. This should be removed or properly feature-detected with correct property names.

Suggested change

if ('textRenderingOptimization' in ctx) ctx.textRenderingOptimization = 'optimizeQuality';

[Copilot]

Using globalThis to store worker references is an anti-pattern that can cause memory leaks and state pollution. Consider using a proper singleton pattern or module-level variable instead.

Suggested change

	const workerRef: { current: Worker | null } = ((globalThis as unknown as Record<string, unknown>)._tileWorkerRef as { current: Worker | null }) || {
	current: null,
	};
	const workerInitRef: { current: boolean } = ((globalThis as unknown as Record<string, unknown>)._tileWorkerInit as { current: boolean }) || {
	current: false,
	};
	const generationRef: { current: number } = ((globalThis as unknown as Record<string, unknown>)._tileWorkerGen as { current: number }) || {
	current: 0,
	};
	(globalThis as unknown as Record<string, unknown>)._tileWorkerRef = workerRef;
	(globalThis as unknown as Record<string, unknown>)._tileWorkerInit = workerInitRef;
	(globalThis as unknown as Record<string, unknown>)._tileWorkerGen = generationRef;
	// Inline Worker: parse tiles off main thread for large payloads
	const workerRef = useRef<Worker | null>(null);
	const workerInitRef = useRef<boolean>(false);
	const generationRef = useRef<number>(0);

[Copilot]

The magic numbers 57, 70, 48, 55, 87 should be defined as named constants (e.g., CHAR_CODE_9, CHAR_CODE_F, etc.) to improve code readability and maintainability.

[Copilot]

The devicePixelRatio multiplication is repeated multiple times. Consider extracting this calculation into variables like 'canvasWidth' and 'canvasHeight' to reduce duplication and improve maintainability.