도구 일러스트 에셋 7종 추가 및 건물 아이콘 적용

- public/assets/tools/: 낚싯대·도끼·곡괭이·약초바구니·냄비·톱·빗 (적성 키 이름)
- 원본 파일명 axe/pickaxe가 서로 뒤바뀌어 있어 교정
- VillageView 건물 스프라이트를 일러스트로 교체 (로드 전 이모지 폴백)
- BuildingCard 헤더 아이콘도 일러스트 사용

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
이 커밋은 다음에 포함됨:
kjs
2026-08-13 12:20:38 +09:00
co-authored by Claude Fable 5
부모 348ca5ded7
커밋 b50a22c6b9
11개의 변경된 파일과 41개의 추가작업 그리고 6개의 파일을 삭제
+19 -1
파일 보기
@@ -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";