117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import { lerp, useKeyPress, useMotion } from "@rbxts/pretty-react-hooks";
|
|
import React, { Component, ReactNode, StrictMode, useEffect, useState } from "@rbxts/react";
|
|
import { Players } from "@rbxts/services";
|
|
import Profile from "./profile";
|
|
|
|
function PlayerEntry({
|
|
player,
|
|
selectedPlayer,
|
|
setSelectedPlayer,
|
|
}: {
|
|
player: Player;
|
|
setSelectedPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
|
selectedPlayer: Player | undefined;
|
|
}) {
|
|
const [enable, enableMotor] = useMotion(0);
|
|
useEffect(() => {
|
|
if (player === selectedPlayer) {
|
|
enableMotor.spring(90);
|
|
} else {
|
|
enableMotor.spring(0);
|
|
}
|
|
}, [selectedPlayer]);
|
|
return (
|
|
<frame BackgroundTransparency={1}>
|
|
<uistroke Color={new Color3(1, 1, 1)} Thickness={3} Transparency={0.2} />
|
|
<textbutton
|
|
Text={player.DisplayName}
|
|
TextScaled={true}
|
|
BackgroundTransparency={0.8}
|
|
BackgroundColor3={new Color3(0.26, 0.65, 0.91)}
|
|
TextColor3={new Color3(1, 1, 1)}
|
|
TextTransparency={0.2}
|
|
BorderColor3={new Color3(1, 1, 1)}
|
|
Size={UDim2.fromScale(1, 1)}
|
|
Event={{
|
|
Activated: () => {
|
|
setSelectedPlayer(player === selectedPlayer ? undefined : player);
|
|
},
|
|
}}
|
|
></textbutton>
|
|
<textlabel
|
|
Text={">"}
|
|
TextColor3={new Color3(1, 1, 1)}
|
|
TextScaled={true}
|
|
BackgroundTransparency={1}
|
|
Size={new UDim2(0.5, 0, 0.5, 0)}
|
|
Position={UDim2.fromScale(0, 0.25)}
|
|
SizeConstraint={Enum.SizeConstraint.RelativeYY}
|
|
Rotation={enable.map((t) => t)}
|
|
></textlabel>
|
|
</frame>
|
|
);
|
|
}
|
|
|
|
export default function PlayersBoard() {
|
|
const [players, setPlayers] = useState<Player[]>(Players.GetPlayers());
|
|
const [selectedPlayer, setSelectedPlayer] = useState<Player>();
|
|
const [activated, setActivated] = useState(true);
|
|
const tabPressed = useKeyPress(["Tab"]);
|
|
|
|
useEffect(() => {
|
|
const playerAdded = Players.PlayerAdded.Connect(() => {
|
|
setPlayers(Players.GetPlayers());
|
|
});
|
|
const playerRemoving = Players.PlayerRemoving.Connect(() => {
|
|
setPlayers(Players.GetPlayers());
|
|
});
|
|
return () => {
|
|
playerAdded.Disconnect();
|
|
playerRemoving.Disconnect();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (tabPressed) setActivated(!activated);
|
|
}, [tabPressed]);
|
|
|
|
return (
|
|
<>
|
|
<frame
|
|
Size={UDim2.fromScale(0.2, 0.6)}
|
|
Position={UDim2.fromScale(0.8, 0.1)}
|
|
BackgroundColor3={new Color3(0, 0.72, 1)}
|
|
BackgroundTransparency={0.7}
|
|
Visible={activated}
|
|
>
|
|
<frame
|
|
BorderColor3={new Color3(1, 1, 1)}
|
|
BorderSizePixel={5}
|
|
BackgroundTransparency={1}
|
|
Position={new UDim2(0, 10, 0, 10)}
|
|
Size={new UDim2(1, -20, 1, -20)}
|
|
>
|
|
<scrollingframe
|
|
CanvasSize={UDim2.fromScale(1, 0)}
|
|
Size={new UDim2(1, 0, 1, 0)}
|
|
AutomaticCanvasSize={Enum.AutomaticSize.Y}
|
|
BackgroundTransparency={1}
|
|
ScrollingDirection={Enum.ScrollingDirection.Y}
|
|
>
|
|
<uigridlayout CellSize={new UDim2(1, 0, 0, 50)} CellPadding={new UDim2()} />
|
|
{players.map((p) => (
|
|
<PlayerEntry
|
|
player={p}
|
|
selectedPlayer={selectedPlayer}
|
|
setSelectedPlayer={setSelectedPlayer}
|
|
/>
|
|
))}
|
|
</scrollingframe>
|
|
<uistroke Color={new Color3(1, 1, 1)} Thickness={5} Transparency={0.2} />
|
|
</frame>
|
|
</frame>
|
|
{selectedPlayer ? <Profile player={selectedPlayer} /> : undefined}
|
|
</>
|
|
);
|
|
}
|