I am looking to set up a table where players can join and have their usernames displayed at the bottom of the screen just like in other games. How can I achieve this?
export const GameStart = (props) => {
const params = useParams();
const gameID = params.gameID;
const { isConnected, client, occupants } = useGameValue();
const ourTeam = occupants?.findIndex((p) => p.nickname == client.nickname);
console.log(ourTeam);
const startGame = () => {
client.start(gameID);
};
const playerIndex = occupants
.filter((o) => !o.inactive)
.findIndex((o) => o.nickname === client.nickname);
const getPlayerStyle = (index) => {
console.log("condition player index ", playerIndex, index);
if (index === playerIndex) {
const rotate = `rotate(0deg) translate(197px)`;
console.log("if condition", rotate);
return {
transform: `${rotate}`,
};
} else {
const angle = 360 / occupants.length;
const rotate = occupants.length - index;
const rotation = `rotate(${angle * rotate}deg) translate(197px)`;
return {
transform: `${rotation}`,
};
}
};
const playerCount = (players) => {
return players === 1
? "count-1"
: players === 2
? "count-2"
: players === 3
? "count-3"
: players === 4
? "count-4"
: players === 5
? "count-5"
: players === 6
? "count-6"
: "";
};
useEffect(() => {
if (!client.nickname && isConnected) {
client.nickname = prompt("enter nickname");
client.join(gameID, null, client.nickname);
}
}, [isConnected]);
useEffect(() => {
console.log(occupants, "occupants");
}, [occupants]);
return (
<div className="gameStart">
<h2>Game</h2>
{occupants && (
<div className="table">
<div
className={`players ${playerCount(occupants.length)}`}
style={{ "--rotation-xtra-turns": `${playerIndex}` }}
>
{occupants.map((data, index) => {
return (
<div
className={`player`}
style={getPlayerStyle(index)}
key={index}
>
{data.nickname}
</div>
);
})}
</div>
</div>
)}
<button onClick={startGame}>Start Game</button>
</div>
);
};
I have tried implementing this solution but it seems to be not working as expected. Specifically, when a new player joins from another device, my previous username remains in the same bottom position on the screen.
I would appreciate it if someone could help me troubleshoot this issue and provide any modifications needed.