쿼터뷰 마을 뷰 v1: 아이소메트릭 캔버스 + 고양이 이동·작업 애니메이션
- 11x11 아이소 타일 (잔디·물가·나무·장식), 회관/부두/벌목장 배치 - 고양이: 미배치 시 마을 배회, 배치 시 건물로 걸어가 작업(바운스+💦) - 생산 말풍선, 건물 배지 클릭으로 산출물 회수 - 렌더 루프는 engine.peek() 라이브 참조 사용 (매 프레임 클론 회피) - 컬러 이모지에 fillStyle 알파가 적용되는 문제 수정, 페이지 타이틀 변경 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
이 커밋은 다음에 포함됨:
kjs
@@ -0,0 +1,375 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import { engine, catRate } from "@/lib/game/engine";
|
||||
|
||||
// ---------- 아이소메트릭 그리드 ----------
|
||||
const COLS = 11;
|
||||
const ROWS = 11;
|
||||
const TW = 64; // 타일 가로
|
||||
const TH = 32; // 타일 세로
|
||||
const PAD_Y = 56;
|
||||
const CANVAS_W = ((COLS + ROWS) * TW) / 2 + 16;
|
||||
const CANVAS_H = ((COLS + ROWS) * TH) / 2 + PAD_Y + 48;
|
||||
const ORIGIN_X = (ROWS * TW) / 2 + 8;
|
||||
|
||||
const isoX = (i: number, j: number) => ORIGIN_X + ((i - j) * TW) / 2;
|
||||
const isoY = (i: number, j: number) => PAD_Y + ((i + j) * TH) / 2;
|
||||
|
||||
// 물 (동쪽 끝 열), 부두는 물가에 붙임
|
||||
const isWater = (i: number, j: number) => i >= COLS - 1;
|
||||
|
||||
// 건물 위치 (타일 좌표)
|
||||
const BUILDING_TILES: Record<string, { i: number; j: number }> = {
|
||||
hall: { i: 5, j: 3 },
|
||||
dock_1: { i: 9, j: 5 },
|
||||
lumberyard_1: { i: 2, j: 8 },
|
||||
};
|
||||
|
||||
const TREES: Array<{ i: number; j: number }> = [
|
||||
{ i: 0, j: 7 }, { i: 1, j: 9 }, { i: 3, j: 9 }, { i: 0, j: 9 },
|
||||
{ i: 1, j: 6 }, { i: 3, j: 7 },
|
||||
];
|
||||
const DECOR: Array<{ i: number; j: number; emoji: string }> = [
|
||||
{ i: 7, j: 1, emoji: "🌼" }, { i: 3, j: 2, emoji: "🌷" },
|
||||
{ i: 8, j: 8, emoji: "🌾" }, { i: 6, j: 9, emoji: "🍄" },
|
||||
{ i: 1, j: 3, emoji: "🪨" },
|
||||
];
|
||||
|
||||
const isBuildingTile = (i: number, j: number) =>
|
||||
Object.values(BUILDING_TILES).some((t) => t.i === i && t.j === j);
|
||||
const isWalkable = (i: number, j: number) =>
|
||||
i >= 0 && i < COLS - 1 && j >= 0 && j < ROWS &&
|
||||
!isBuildingTile(i, j) &&
|
||||
!TREES.some((t) => t.i === i && t.j === j);
|
||||
|
||||
// ---------- 고양이 이동 상태 (렌더 전용, 저장 안 함) ----------
|
||||
interface CatAnim {
|
||||
x: number;
|
||||
y: number;
|
||||
tx: number;
|
||||
ty: number;
|
||||
mode: "wander" | "toWork" | "working";
|
||||
waitUntil: number;
|
||||
flip: boolean;
|
||||
}
|
||||
interface Bubble {
|
||||
x: number;
|
||||
y: number;
|
||||
born: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const WALK_SPEED = 42; // px/초
|
||||
|
||||
function randomWalkTarget(): { x: number; y: number } {
|
||||
for (let tries = 0; tries < 30; tries++) {
|
||||
const i = Math.floor(Math.random() * (COLS - 1));
|
||||
const j = Math.floor(Math.random() * ROWS);
|
||||
if (isWalkable(i, j)) return { x: isoX(i, j), y: isoY(i, j) + TH / 2 };
|
||||
}
|
||||
return { x: isoX(5, 5), y: isoY(5, 5) + TH / 2 };
|
||||
}
|
||||
|
||||
function workSpot(buildingId: string, slotIndex: number) {
|
||||
const tile = BUILDING_TILES[buildingId] ?? BUILDING_TILES.hall;
|
||||
// 건물 이름 라벨(정남쪽)을 피해서 좌우·아래대각에 배치
|
||||
const angle = (slotIndex * 2 * Math.PI) / 3 + Math.PI / 6;
|
||||
return {
|
||||
x: isoX(tile.i, tile.j) + Math.cos(angle) * 42,
|
||||
y: isoY(tile.i, tile.j) + TH / 2 + Math.sin(angle) * 16 + 8,
|
||||
};
|
||||
}
|
||||
|
||||
export default function VillageView() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const animsRef = useRef<Map<string, CatAnim>>(new Map());
|
||||
const bubblesRef = useRef<Bubble[]>([]);
|
||||
const hitRectsRef = useRef<
|
||||
Array<{ id: string; x: number; y: number; w: number; h: number }>
|
||||
>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return;
|
||||
|
||||
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
||||
canvas.width = CANVAS_W * dpr;
|
||||
canvas.height = CANVAS_H * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
let raf = 0;
|
||||
let last = performance.now();
|
||||
|
||||
const draw = (now: number) => {
|
||||
const dt = Math.min((now - last) / 1000, 0.1);
|
||||
last = now;
|
||||
const state = engine.peek();
|
||||
if (!state) {
|
||||
raf = requestAnimationFrame(draw);
|
||||
return;
|
||||
}
|
||||
|
||||
// --- 고양이 이동 갱신 ---
|
||||
const anims = animsRef.current;
|
||||
const alive = new Set<string>();
|
||||
for (const cat of state.cats) {
|
||||
alive.add(cat.id);
|
||||
let anim = anims.get(cat.id);
|
||||
if (!anim) {
|
||||
const start = randomWalkTarget();
|
||||
anim = { ...start, tx: start.x, ty: start.y, mode: "wander", waitUntil: 0, flip: false };
|
||||
anims.set(cat.id, anim);
|
||||
}
|
||||
|
||||
if (cat.assignedTo) {
|
||||
const building = state.buildings.find((b) => b.id === cat.assignedTo);
|
||||
const slot = building ? building.assigned.indexOf(cat.id) : 0;
|
||||
const spot = workSpot(cat.assignedTo, Math.max(0, slot));
|
||||
if (anim.mode !== "working" && (anim.tx !== spot.x || anim.ty !== spot.y)) {
|
||||
anim.tx = spot.x;
|
||||
anim.ty = spot.y;
|
||||
anim.mode = "toWork";
|
||||
}
|
||||
} else if (anim.mode !== "wander") {
|
||||
anim.mode = "wander";
|
||||
const t = randomWalkTarget();
|
||||
anim.tx = t.x;
|
||||
anim.ty = t.y;
|
||||
}
|
||||
|
||||
const dx = anim.tx - anim.x;
|
||||
const dy = anim.ty - anim.y;
|
||||
const dist = Math.hypot(dx, dy);
|
||||
if (dist > 2) {
|
||||
const step = Math.min(WALK_SPEED * dt, dist);
|
||||
anim.x += (dx / dist) * step;
|
||||
anim.y += (dy / dist) * step;
|
||||
anim.flip = dx < 0;
|
||||
} else if (anim.mode === "toWork") {
|
||||
anim.mode = "working";
|
||||
} else if (anim.mode === "working") {
|
||||
// 일하는 중 — 생산 말풍선 (약 2.5초에 한 번)
|
||||
if (Math.random() < dt / 2.5 && cat.assignedTo) {
|
||||
const b = state.buildings.find((x) => x.id === cat.assignedTo);
|
||||
if (b && catRate(cat, b.aptitude) > 0) {
|
||||
bubblesRef.current.push({
|
||||
x: anim.x, y: anim.y - 34, born: now,
|
||||
text: b.resource === "fish" ? "🐟" : "🪵",
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (anim.mode === "wander") {
|
||||
if (anim.waitUntil === 0) {
|
||||
anim.waitUntil = now + 800 + Math.random() * 2600;
|
||||
} else if (now >= anim.waitUntil) {
|
||||
anim.waitUntil = 0;
|
||||
const t = randomWalkTarget();
|
||||
anim.tx = t.x;
|
||||
anim.ty = t.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const id of anims.keys()) if (!alive.has(id)) anims.delete(id);
|
||||
|
||||
// --- 그리기 ---
|
||||
ctx.clearRect(0, 0, CANVAS_W, CANVAS_H);
|
||||
|
||||
// 하늘 배경 없음(투명) — 타일부터
|
||||
for (let j = 0; j < ROWS; j++) {
|
||||
for (let i = 0; i < COLS; i++) {
|
||||
const x = isoX(i, j);
|
||||
const y = isoY(i, j);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x + TW / 2, y + TH / 2);
|
||||
ctx.lineTo(x, y + TH);
|
||||
ctx.lineTo(x - TW / 2, y + TH / 2);
|
||||
ctx.closePath();
|
||||
if (isWater(i, j)) {
|
||||
const shimmer = 0.85 + 0.15 * Math.sin(now / 700 + j);
|
||||
ctx.fillStyle = `rgba(96, 165, 250, ${shimmer})`;
|
||||
} else {
|
||||
ctx.fillStyle = (i + j) % 2 === 0 ? "#86c66b" : "#7dbd62";
|
||||
}
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.10)";
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// 그릴 것들을 y 순으로 정렬해 겹침 처리
|
||||
type Sprite = { y: number; draw: () => void };
|
||||
const sprites: Sprite[] = [];
|
||||
|
||||
const drawEmoji = (emoji: string, x: number, y: number, size: number, flip = false) => {
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
if (flip) ctx.scale(-1, 1);
|
||||
ctx.font = `${size}px serif`;
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "alphabetic";
|
||||
// 컬러 이모지에도 fillStyle의 알파가 적용되므로 반드시 불투명으로 리셋
|
||||
ctx.fillStyle = "#111";
|
||||
ctx.fillText(emoji, 0, 0);
|
||||
ctx.restore();
|
||||
};
|
||||
const shadow = (x: number, y: number, w: number) => {
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(x, y, w, w * 0.35, 0, 0, Math.PI * 2);
|
||||
ctx.fillStyle = "rgba(0,0,0,0.15)";
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
for (const t of TREES) {
|
||||
const x = isoX(t.i, t.j);
|
||||
const y = isoY(t.i, t.j) + TH / 2;
|
||||
sprites.push({ y, draw: () => { shadow(x, y + 4, 14); drawEmoji("🌲", x, y + 6, 34); } });
|
||||
}
|
||||
for (const d of DECOR) {
|
||||
const x = isoX(d.i, d.j);
|
||||
const y = isoY(d.i, d.j) + TH / 2;
|
||||
sprites.push({ y: y - 6, draw: () => drawEmoji(d.emoji, x, y + 4, 18) });
|
||||
}
|
||||
|
||||
// 회관
|
||||
{
|
||||
const t = BUILDING_TILES.hall;
|
||||
const x = isoX(t.i, t.j);
|
||||
const y = isoY(t.i, t.j) + TH / 2;
|
||||
sprites.push({
|
||||
y,
|
||||
draw: () => {
|
||||
shadow(x, y + 6, 26);
|
||||
drawEmoji("🏛️", x, y + 8, 48);
|
||||
ctx.font = "bold 12px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillStyle = "#374151";
|
||||
ctx.fillText(`마을 회관 Lv${state.hall.level}`, x, y + 24);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 생산 건물 + 회수 배지
|
||||
hitRectsRef.current = [];
|
||||
for (const b of state.buildings) {
|
||||
const t = BUILDING_TILES[b.id];
|
||||
if (!t) continue;
|
||||
const x = isoX(t.i, t.j);
|
||||
const y = isoY(t.i, t.j) + TH / 2;
|
||||
const stored = Math.floor(b.stored);
|
||||
hitRectsRef.current.push({ id: b.id, x: x - 30, y: y - 44, w: 60, h: 72 });
|
||||
sprites.push({
|
||||
y,
|
||||
draw: () => {
|
||||
shadow(x, y + 6, 24);
|
||||
drawEmoji(b.emoji, x, y + 8, 42);
|
||||
ctx.font = "bold 12px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillStyle = "#374151";
|
||||
ctx.fillText(b.name, x, y + 24);
|
||||
if (stored > 0) {
|
||||
const label = `${b.resource === "fish" ? "🐟" : "🪵"}${stored}`;
|
||||
ctx.font = "bold 12px sans-serif";
|
||||
const w = ctx.measureText(label).width + 12;
|
||||
ctx.beginPath();
|
||||
ctx.roundRect(x - w / 2, y - 58, w, 20, 10);
|
||||
ctx.fillStyle = "#f97316";
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.fillText(label, x, y - 43);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 고양이
|
||||
for (const cat of state.cats) {
|
||||
const anim = anims.get(cat.id);
|
||||
if (!anim) continue;
|
||||
const working = anim.mode === "working";
|
||||
const moving = Math.hypot(anim.tx - anim.x, anim.ty - anim.y) > 2;
|
||||
const bob = working
|
||||
? Math.sin(now / 130) * 3
|
||||
: moving
|
||||
? Math.abs(Math.sin(now / 110)) * -3
|
||||
: 0;
|
||||
sprites.push({
|
||||
y: anim.y,
|
||||
draw: () => {
|
||||
shadow(anim.x, anim.y + 2, 10);
|
||||
drawEmoji(cat.emoji, anim.x, anim.y + bob, 30, anim.flip);
|
||||
ctx.font = "10px sans-serif";
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillStyle = "rgba(55,65,81,0.85)";
|
||||
ctx.fillText(cat.name, anim.x, anim.y + 12);
|
||||
if (working) drawEmoji("💦", anim.x + 12, anim.y - 20 + bob, 10);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
sprites.sort((a, b) => a.y - b.y);
|
||||
for (const s of sprites) s.draw();
|
||||
|
||||
// 생산 말풍선
|
||||
const bubbles = bubblesRef.current;
|
||||
for (let k = bubbles.length - 1; k >= 0; k--) {
|
||||
const bub = bubbles[k];
|
||||
const age = (now - bub.born) / 1200;
|
||||
if (age >= 1) {
|
||||
bubbles.splice(k, 1);
|
||||
continue;
|
||||
}
|
||||
ctx.globalAlpha = 1 - age;
|
||||
drawEmoji(bub.text, bub.x, bub.y - age * 22, 14);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
raf = requestAnimationFrame(draw);
|
||||
};
|
||||
|
||||
raf = requestAnimationFrame(draw);
|
||||
|
||||
const onClick = (e: MouseEvent) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * CANVAS_W;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * CANVAS_H;
|
||||
for (const r of hitRectsRef.current) {
|
||||
if (x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h) {
|
||||
const state = engine.peek();
|
||||
const b = state?.buildings.find((bb) => bb.id === r.id);
|
||||
const amount = b ? Math.floor(b.stored) : 0;
|
||||
if (b && amount > 0) {
|
||||
engine.collect(r.id);
|
||||
engine.save();
|
||||
bubblesRef.current.push({
|
||||
x: r.x + r.w / 2, y: r.y, born: performance.now(),
|
||||
text: `+${amount} ${b.resource === "fish" ? "🐟" : "🪵"}`,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
canvas.addEventListener("click", onClick);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
canvas.removeEventListener("click", onClick);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200 bg-linear-to-b from-sky-100 to-emerald-50 dark:border-gray-800 dark:from-sky-950 dark:to-emerald-950">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{ width: CANVAS_W, height: CANVAS_H, display: "block", margin: "0 auto", cursor: "pointer" }}
|
||||
/>
|
||||
<p className="pb-3 text-center text-xs text-gray-500 dark:text-gray-400">
|
||||
건물 위 주황 배지를 클릭하면 산출물을 회수합니다
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
새 이슈에서 참조
사용자 차단