81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { FC, useState, useEffect } from "react";
|
|
import { socket } from "../socket";
|
|
import { Vector3 } from "three";
|
|
|
|
import { createPlayerCards } from "../objects/cards";
|
|
import PlayerCard from "./PlayerCard";
|
|
import { PlayerWithVisualCards, Player } from "../types/gameTypes";
|
|
import CardCache from "./CardCache";
|
|
|
|
type PlayerCardsProps = {
|
|
playersData: Player[];
|
|
};
|
|
|
|
const PlayerCards: FC<PlayerCardsProps> = ({ playersData }) => {
|
|
const [playersWithCards, setPlayersWithCards] = useState<
|
|
PlayerWithVisualCards[]
|
|
>([]);
|
|
|
|
const updatePlayerCards = (playersData: Player[]) => {
|
|
const playersWithCards: PlayerWithVisualCards[] = [];
|
|
const currentPlayerWithCards: PlayerWithVisualCards[] = [];
|
|
let nonCurrentPlayerIndex = 1;
|
|
playersData.forEach((player) => {
|
|
const positionOffset = 14;
|
|
const playerWithCards: PlayerWithVisualCards = {
|
|
player,
|
|
cards: [],
|
|
};
|
|
if (player.socketId === socket.id) {
|
|
playerWithCards.cards = createPlayerCards(
|
|
player.cards,
|
|
new Vector3(0, 20, positionOffset)
|
|
);
|
|
currentPlayerWithCards.push(playerWithCards);
|
|
} else {
|
|
const playerOffset = positionOffset + nonCurrentPlayerIndex * -20;
|
|
playerWithCards.cards = createPlayerCards(
|
|
player.cards,
|
|
new Vector3(0, 20, playerOffset)
|
|
);
|
|
playersWithCards.push(playerWithCards);
|
|
nonCurrentPlayerIndex++;
|
|
}
|
|
});
|
|
setPlayersWithCards([...currentPlayerWithCards, ...playersWithCards]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!playersData) return;
|
|
updatePlayerCards(playersData);
|
|
}, [playersData]);
|
|
|
|
if (!playersWithCards) return null;
|
|
|
|
return (
|
|
<>
|
|
{playersWithCards.map((playerWithCards, playerIndex) => (
|
|
<>
|
|
{playerWithCards.cards.map((card, index) => (
|
|
<PlayerCard
|
|
key={index}
|
|
card={card}
|
|
playerWithCards={playerWithCards}
|
|
index={index}
|
|
isCurrentPlayer={playerIndex === 0}
|
|
/>
|
|
))}
|
|
<CardCache
|
|
playerData={playerWithCards.player}
|
|
// current player is always at index 0
|
|
position={new Vector3(9, 20, 6 - playerIndex * 12)}
|
|
/>
|
|
</>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PlayerCards;
|
|
// ich (0) --> 4
|
|
// andere (1) --> -8
|