73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import type { WorldPlayer } from "../types";
|
|
|
|
type Props = {
|
|
width: number;
|
|
height: number;
|
|
players: WorldPlayer[];
|
|
portal: { x: number; y: number };
|
|
selfId: string;
|
|
onTileClick: (x: number, y: number) => void;
|
|
onPortalClick: () => void;
|
|
};
|
|
|
|
export default function MapView({
|
|
width,
|
|
height,
|
|
players,
|
|
portal,
|
|
selfId,
|
|
onTileClick,
|
|
onPortalClick,
|
|
}: Props) {
|
|
const cells = [];
|
|
for (let y = 0; y < height; y++) {
|
|
for (let x = 0; x < width; x++) {
|
|
const isPortal = x === portal.x && y === portal.y;
|
|
const here = players.filter((p) => p.x === x && p.y === y);
|
|
const terrain =
|
|
(x + y) % 7 === 0 ? "mire" : (x * 3 + y) % 11 === 0 ? "bone" : "soil";
|
|
|
|
cells.push(
|
|
<button
|
|
key={`${x}-${y}`}
|
|
type="button"
|
|
className={`tile ${terrain} ${isPortal ? "portal" : ""}`}
|
|
style={{ gridColumn: x + 1, gridRow: y + 1 }}
|
|
onClick={() => {
|
|
if (isPortal) onPortalClick();
|
|
else onTileClick(x, y);
|
|
}}
|
|
title={isPortal ? "Dungeon Portal" : `(${x}, ${y})`}
|
|
>
|
|
{isPortal && <span className="portal-glyph" />}
|
|
{here.map((p) => (
|
|
<span
|
|
key={p.characterId}
|
|
className={`avatar ${p.specialty.toLowerCase()} ${
|
|
p.characterId === selfId ? "self" : ""
|
|
}`}
|
|
title={p.name}
|
|
>
|
|
{p.name.slice(0, 1).toUpperCase()}
|
|
</span>
|
|
))}
|
|
</button>
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="map-shell">
|
|
<div
|
|
className="map-grid"
|
|
style={{
|
|
gridTemplateColumns: `repeat(${width}, var(--tile))`,
|
|
gridTemplateRows: `repeat(${height}, var(--tile))`,
|
|
}}
|
|
>
|
|
{cells}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|