alexandrev-tibco
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { findPlayer } from "@/lib/game-engine";
|
|
import type { Dictionary } from "@/lib/i18n";
|
|
import type { Feedback, Position } from "@/lib/types";
|
|
|
|
type PlayerSlotProps = {
|
|
position: Position;
|
|
playerId: string | null;
|
|
feedback: Feedback;
|
|
fixed: boolean;
|
|
selected: boolean;
|
|
t: Dictionary;
|
|
onClick: () => void;
|
|
};
|
|
|
|
const feedbackClass: Record<Feedback, string> = {
|
|
correct: "border-emerald-300 bg-emerald-500 text-pitch-950",
|
|
partial: "border-yellow-200 bg-yellow-400 text-slate-950",
|
|
wrong: "border-slate-500 bg-slate-600 text-white",
|
|
empty: "border-white/55 bg-pitch-900 text-white",
|
|
};
|
|
|
|
export default function PlayerSlot({ position, playerId, feedback, fixed, selected, t, onClick }: PlayerSlotProps) {
|
|
const player = findPlayer(playerId);
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`flex aspect-square w-[88px] flex-col items-center justify-center rounded-full border-2 p-2 text-center shadow-xl transition sm:w-[108px] ${
|
|
feedbackClass[feedback]
|
|
} ${selected ? "ring-4 ring-white" : ""}`}
|
|
>
|
|
<span className="text-xs font-black">{position}</span>
|
|
<span className="mt-1 line-clamp-2 text-[11px] font-bold leading-tight sm:text-xs">
|
|
{player?.name ?? t.select}
|
|
</span>
|
|
{fixed ? <span className="mt-1 text-[10px] font-semibold opacity-70">{t.fixed}</span> : null}
|
|
</button>
|
|
);
|
|
}
|