52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
const DEFAULT_CHESSMAN_SRC = '/chessman/default.png';
|
|
|
|
/** 주사위판 그리드 위에 올리는 말 표시. public/chessman/*.png 로 커스텀 가능. */
|
|
export default function ChessmanPiece({
|
|
x,
|
|
y,
|
|
hopKey,
|
|
src = DEFAULT_CHESSMAN_SRC,
|
|
}: {
|
|
x: number;
|
|
y: number;
|
|
/** 칸이 바뀔 때마다 증가시켜 hop 애니메이션을 다시 재생한다. */
|
|
hopKey: number;
|
|
/** public/chessman 하위 이미지 경로. 기본값: /chessman/default.png */
|
|
src?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
aria-label="chessman"
|
|
style={{
|
|
gridColumn: x + 1,
|
|
gridRow: y + 1,
|
|
zIndex: 5,
|
|
pointerEvents: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
key={hopKey}
|
|
src={src}
|
|
alt="chessman"
|
|
draggable={false}
|
|
className="drinkmarble-chessman-token"
|
|
style={{
|
|
width: '58%',
|
|
height: '58%',
|
|
minWidth: 22,
|
|
minHeight: 22,
|
|
objectFit: 'contain',
|
|
filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.35))',
|
|
animation: hopKey > 0 ? 'drinkmarble-chessman-hop 220ms ease-out' : undefined,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|