도구 일러스트 에셋 7종 추가 및 건물 아이콘 적용
- public/assets/tools/: 낚싯대·도끼·곡괭이·약초바구니·냄비·톱·빗 (적성 키 이름) - 원본 파일명 axe/pickaxe가 서로 뒤바뀌어 있어 교정 - VillageView 건물 스프라이트를 일러스트로 교체 (로드 전 이모지 폴백) - BuildingCard 헤더 아이콘도 일러스트 사용 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
이 커밋은 다음에 포함됨:
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { engine, catRate } from "@/lib/game/engine";
|
||||
import { TOOL_IMG } from "@/lib/game/data";
|
||||
import type { AptitudeKey } from "@/lib/game/types";
|
||||
|
||||
// ---------- 아이소메트릭 그리드 ----------
|
||||
const COLS = 11;
|
||||
@@ -85,6 +87,7 @@ export default function VillageView() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const animsRef = useRef<Map<string, CatAnim>>(new Map());
|
||||
const bubblesRef = useRef<Bubble[]>([]);
|
||||
const toolImagesRef = useRef<Map<AptitudeKey, HTMLImageElement>>(new Map());
|
||||
const hitRectsRef = useRef<
|
||||
Array<{ id: string; x: number; y: number; w: number; h: number }>
|
||||
>([]);
|
||||
@@ -100,6 +103,13 @@ export default function VillageView() {
|
||||
canvas.height = CANVAS_H * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
// 도구 일러스트 프리로드 (로드 전에는 이모지로 폴백)
|
||||
for (const [key, src] of Object.entries(TOOL_IMG)) {
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
img.onload = () => toolImagesRef.current.set(key as AptitudeKey, img);
|
||||
}
|
||||
|
||||
let raf = 0;
|
||||
let last = performance.now();
|
||||
|
||||
@@ -265,7 +275,15 @@ export default function VillageView() {
|
||||
y,
|
||||
draw: () => {
|
||||
shadow(x, y + 6, 24);
|
||||
drawEmoji(b.emoji, x, y + 8, 42);
|
||||
const img = toolImagesRef.current.get(b.aptitude);
|
||||
if (img) {
|
||||
// 세로가 긴 일러스트 — 높이 56px 기준으로 비율 유지
|
||||
const h = 56;
|
||||
const w = (img.width / img.height) * h;
|
||||
ctx.drawImage(img, x - w / 2, y + 8 - h, w, h);
|
||||
} else {
|
||||
drawEmoji(b.emoji, x, y + 8, 42);
|
||||
}
|
||||
ctx.font = "bold 12px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillStyle = "#374151";
|
||||
|
||||
새 이슈에서 참조
사용자 차단