476 lines
13 KiB
TypeScript
476 lines
13 KiB
TypeScript
import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
|
||
import { ReactSortable, ReactSortableProps } from "react-sortablejs";
|
||
import { apiAuth, User } from "./api";
|
||
import { TeamState, useSession } from "./Session";
|
||
import { Chemistry, MVPRanking, PlayerType } from "./types";
|
||
import TabController from "./TabController";
|
||
|
||
type PlayerListProps = Partial<ReactSortableProps<any>> & {
|
||
orderedList?: boolean;
|
||
};
|
||
|
||
function PlayerList(props: PlayerListProps) {
|
||
return (
|
||
<ReactSortable
|
||
{...props}
|
||
animation={200}
|
||
swapThreshold={0.2}
|
||
style={{ minHeight: props.list && props.list?.length < 1 ? 64 : 32 }}
|
||
>
|
||
{props.list?.map((item, index) => (
|
||
<div key={item.id} className="item">
|
||
{props.orderedList
|
||
? index + 1 + ". " + item.display_name
|
||
: item.display_name}
|
||
</div>
|
||
))}
|
||
</ReactSortable>
|
||
);
|
||
}
|
||
|
||
const LoadButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
|
||
return (
|
||
<button {...props} style={{ padding: "4px 16px" }}>
|
||
🗃️ restore previous
|
||
</button>
|
||
);
|
||
};
|
||
|
||
const ClearButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
|
||
return (
|
||
<button {...props} style={{ padding: "4px 16px" }}>
|
||
🗑️ start over
|
||
</button>
|
||
);
|
||
};
|
||
|
||
function filterSort(list: User[], ids: number[]): User[] {
|
||
const objectMap = new Map(list.map((obj) => [obj.id, obj]));
|
||
const filteredAndSortedObjects = ids
|
||
.map((id) => objectMap.get(id))
|
||
.filter((obj) => obj !== undefined);
|
||
return filteredAndSortedObjects;
|
||
}
|
||
|
||
interface PlayerInfoProps {
|
||
user: User;
|
||
teams: TeamState;
|
||
players: User[];
|
||
}
|
||
|
||
function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
|
||
var otherPlayers = players.filter((player) => player.id !== user.id);
|
||
const [playersLeft, setPlayersLeft] = useState<User[]>([]);
|
||
const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
|
||
const [playersRight, setPlayersRight] = useState<User[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
handleGet();
|
||
}, [players]);
|
||
|
||
const [dialog, setDialog] = useState("dialog");
|
||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||
|
||
async function handleSubmit() {
|
||
if (dialogRef.current) dialogRef.current.showModal();
|
||
setDialog("sending...");
|
||
let left = playersLeft.map(({ id }) => id);
|
||
let middle = playersMiddle.map(({ id }) => id);
|
||
let right = playersRight.map(({ id }) => id);
|
||
const data = {
|
||
user: user.id,
|
||
hate: left,
|
||
undecided: middle,
|
||
love: right,
|
||
team: teams.activeTeam,
|
||
};
|
||
const response = await apiAuth("chemistry", data, "PUT");
|
||
setDialog(response || "try sending again");
|
||
}
|
||
|
||
async function handleGet() {
|
||
setLoading(true);
|
||
const data = await apiAuth(`chemistry/${teams.activeTeam}`, null, "GET");
|
||
if (data.detail) {
|
||
console.log(data.detail);
|
||
setPlayersRight([]);
|
||
setPlayersMiddle(otherPlayers);
|
||
setPlayersLeft([]);
|
||
} else {
|
||
const chemistry = data as Chemistry;
|
||
setPlayersLeft(filterSort(otherPlayers, chemistry.hate));
|
||
setPlayersMiddle(
|
||
otherPlayers.filter(
|
||
(player) =>
|
||
!chemistry.hate.includes(player.id) &&
|
||
!chemistry.love.includes(player.id)
|
||
)
|
||
);
|
||
setPlayersRight(filterSort(otherPlayers, chemistry.love));
|
||
}
|
||
setLoading(false);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<HeaderControl
|
||
onLoad={handleGet}
|
||
onClear={() => {
|
||
setPlayersRight([]);
|
||
setPlayersMiddle(otherPlayers);
|
||
setPlayersLeft([]);
|
||
}}
|
||
/>
|
||
{loading ? (
|
||
<span className="loader" style={{ width: 300 }} />
|
||
) : (
|
||
<div className="container">
|
||
<div className="box three">
|
||
<h2>😬</h2>
|
||
{playersLeft.length < 1 && (
|
||
<span className="grey hint">
|
||
drag people here that you'd rather not play with
|
||
</span>
|
||
)}
|
||
<PlayerList
|
||
list={playersLeft}
|
||
setList={setPlayersLeft}
|
||
group={"shared"}
|
||
className="dragbox"
|
||
/>
|
||
</div>
|
||
<div className="box three">
|
||
<h2>🤷</h2>
|
||
<PlayerList
|
||
list={playersMiddle}
|
||
setList={setPlayersMiddle}
|
||
group={"shared"}
|
||
className="middle dragbox"
|
||
/>
|
||
</div>
|
||
<div className="box three">
|
||
<h2>😍</h2>
|
||
{playersRight.length < 1 && (
|
||
<span className="grey hint">
|
||
drag people here that you love playing with from best to ... ok
|
||
</span>
|
||
)}
|
||
<PlayerList
|
||
list={playersRight}
|
||
setList={setPlayersRight}
|
||
group={"shared"}
|
||
className="dragbox"
|
||
orderedList
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<button className="submit wavering" onClick={() => handleSubmit()}>
|
||
💾 <span className="submit_text">submit</span>
|
||
</button>
|
||
<dialog
|
||
ref={dialogRef}
|
||
id="ChemistryDialog"
|
||
onClick={(event) => {
|
||
event.currentTarget.close();
|
||
}}
|
||
>
|
||
{dialog}
|
||
</dialog>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function TypeDnD({ user, teams, players }: PlayerInfoProps) {
|
||
const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
|
||
const [handlers, setHandlers] = useState<User[]>([]);
|
||
const [combis, setCombis] = useState<User[]>([]);
|
||
const [cutters, setCutters] = useState<User[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
handleGet();
|
||
}, [players]);
|
||
|
||
const [dialog, setDialog] = useState("dialog");
|
||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||
|
||
async function handleSubmit() {
|
||
if (dialogRef.current) dialogRef.current.showModal();
|
||
setDialog("sending...");
|
||
let handlerlist = handlers.map(({ id }) => id);
|
||
let combilist = combis.map(({ id }) => id);
|
||
let cutterlist = cutters.map(({ id }) => id);
|
||
const data = {
|
||
user: user.id,
|
||
handlers: handlerlist,
|
||
combis: combilist,
|
||
cutters: cutterlist,
|
||
team: teams.activeTeam,
|
||
};
|
||
const response = await apiAuth("playertype", data, "PUT");
|
||
setDialog(response || "try sending again");
|
||
}
|
||
|
||
async function handleGet() {
|
||
setLoading(true);
|
||
const data = await apiAuth(`playertype/${teams.activeTeam}`, null, "GET");
|
||
if (data.detail) {
|
||
console.log(data.detail);
|
||
setAvailablePlayers(players);
|
||
setHandlers([]);
|
||
setCombis([]);
|
||
setCutters([]);
|
||
} else {
|
||
const playertype = data as PlayerType;
|
||
setAvailablePlayers(
|
||
players.filter(
|
||
(player) =>
|
||
!playertype.handlers.includes(player.id) &&
|
||
!playertype.combis.includes(player.id) &&
|
||
!playertype.cutters.includes(player.id)
|
||
)
|
||
);
|
||
setHandlers(filterSort(players, playertype.handlers));
|
||
setCombis(filterSort(players, playertype.combis));
|
||
setCutters(filterSort(players, playertype.cutters));
|
||
}
|
||
setLoading(false);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<HeaderControl
|
||
onLoad={handleGet}
|
||
onClear={() => {
|
||
setAvailablePlayers(players);
|
||
setHandlers([]);
|
||
setCombis([]);
|
||
setCutters([]);
|
||
}}
|
||
/>
|
||
<div className="container">
|
||
<div className="box one">
|
||
<PlayerList
|
||
list={availablePlayers}
|
||
setList={setAvailablePlayers}
|
||
group={"type-shared"}
|
||
className="dragbox reservoir"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="container">
|
||
<div className="box three">
|
||
<h4>handler</h4>
|
||
{handlers.length < 1 && (
|
||
<span className="grey hint">
|
||
drag people here that you like to see as handlers
|
||
</span>
|
||
)}
|
||
<PlayerList
|
||
list={handlers}
|
||
setList={setHandlers}
|
||
group={"type-shared"}
|
||
className="dragbox"
|
||
/>
|
||
</div>
|
||
<div className="box three">
|
||
<h4>combi</h4>
|
||
{combis.length < 1 && (
|
||
<span className="grey hint">
|
||
drag people here that switch between handling and cutting
|
||
</span>
|
||
)}
|
||
<PlayerList
|
||
list={combis}
|
||
setList={setCombis}
|
||
group={"type-shared"}
|
||
className="middle dragbox"
|
||
/>
|
||
</div>
|
||
<div className="box three">
|
||
<h4>cutter</h4>
|
||
{cutters.length < 1 && (
|
||
<span className="grey hint">
|
||
drag people here that you think are the best cutters
|
||
</span>
|
||
)}
|
||
<PlayerList
|
||
list={cutters}
|
||
setList={setCutters}
|
||
group={"type-shared"}
|
||
className="dragbox"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<button className="submit wavering" onClick={() => handleSubmit()}>
|
||
💾 <span className="submit_text">submit</span>
|
||
</button>
|
||
<dialog
|
||
ref={dialogRef}
|
||
id="PlayerTypeDialog"
|
||
onClick={(event) => {
|
||
event.currentTarget.close();
|
||
}}
|
||
>
|
||
{dialog}
|
||
</dialog>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function MVPDnD({ user, teams, players }: PlayerInfoProps) {
|
||
const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
|
||
const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
useEffect(() => {
|
||
handleGet();
|
||
}, [players]);
|
||
|
||
const [dialog, setDialog] = useState("dialog");
|
||
const dialogRef = useRef<HTMLDialogElement>(null);
|
||
|
||
async function handleSubmit() {
|
||
if (dialogRef.current) dialogRef.current.showModal();
|
||
setDialog("sending...");
|
||
let mvps = rankedPlayers.map(({ id }) => id);
|
||
const data = { user: user.id, mvps: mvps, team: teams.activeTeam };
|
||
const response = await apiAuth("mvps", data, "PUT");
|
||
response ? setDialog(response) : setDialog("try sending again");
|
||
}
|
||
|
||
async function handleGet() {
|
||
setLoading(true);
|
||
const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
|
||
if (data.detail) {
|
||
console.log(data.detail);
|
||
setAvailablePlayers(players);
|
||
setRankedPlayers([]);
|
||
} else {
|
||
const mvps = data as MVPRanking;
|
||
setRankedPlayers(filterSort(players, mvps.mvps));
|
||
setAvailablePlayers(
|
||
players.filter((user) => !mvps.mvps.includes(user.id))
|
||
);
|
||
}
|
||
setLoading(false);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<HeaderControl
|
||
onLoad={handleGet}
|
||
onClear={() => {
|
||
setAvailablePlayers(players);
|
||
setRankedPlayers([]);
|
||
}}
|
||
/>
|
||
{loading ? (
|
||
<span className="loader" style={{ width: 300 }} />
|
||
) : (
|
||
<div className="container">
|
||
<div className="box two">
|
||
<h2>🥏🏃</h2>
|
||
{availablePlayers.length < 1 && (
|
||
<span className="grey hint">all sorted 👍</span>
|
||
)}
|
||
<PlayerList
|
||
list={availablePlayers}
|
||
setList={setAvailablePlayers}
|
||
group={{
|
||
name: "mvp-shared",
|
||
pull: function (to) {
|
||
return to.el.classList.contains("putclone") ? "clone" : true;
|
||
},
|
||
}}
|
||
className="dragbox"
|
||
/>
|
||
</div>
|
||
<div className="box two">
|
||
<h1>🏆</h1>
|
||
{rankedPlayers.length < 1 && (
|
||
<span className="grey hint">
|
||
carefully place as many of the <i>Most Valuable Players</i>{" "}
|
||
(according to your humble opinion) in this box
|
||
</span>
|
||
)}
|
||
<PlayerList
|
||
list={rankedPlayers}
|
||
setList={setRankedPlayers}
|
||
group={{
|
||
name: "mvp-shared",
|
||
pull: function (to) {
|
||
return to.el.classList.contains("putclone") ? "clone" : true;
|
||
},
|
||
}}
|
||
className="dragbox"
|
||
orderedList
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<button className="submit wavering" onClick={() => handleSubmit()}>
|
||
💾 <span className="submit_text">submit</span>
|
||
</button>
|
||
<dialog
|
||
ref={dialogRef}
|
||
id="MVPDialog"
|
||
onClick={(event) => {
|
||
event.currentTarget.close();
|
||
}}
|
||
>
|
||
{dialog}
|
||
</dialog>
|
||
</>
|
||
);
|
||
}
|
||
|
||
interface HeaderControlProps {
|
||
onLoad: () => void;
|
||
onClear: () => void;
|
||
}
|
||
function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
|
||
return (
|
||
<>
|
||
<div>
|
||
<ClearButton onClick={onClear} />
|
||
<LoadButton onClick={onLoad} />
|
||
</div>
|
||
<div>
|
||
<span className="grey">
|
||
assign as many or as few players as you want and don't forget to{" "}
|
||
<b>submit</b> 💾 when you're done :)
|
||
</span>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
export default function Rankings() {
|
||
const { user, teams, players } = useSession();
|
||
|
||
const tabs = [
|
||
{ id: "Chemistry", label: "🧪 Chemistry" },
|
||
{ id: "Type", label: "🃏 Type" },
|
||
{ id: "MVP", label: "🏆 MVP" },
|
||
];
|
||
|
||
return (
|
||
<>
|
||
{user && teams && players ? (
|
||
<TabController tabs={tabs}>
|
||
<ChemistryDnD {...{ user, teams, players }} />
|
||
<TypeDnD {...{ user, teams, players }} />
|
||
<MVPDnD {...{ user, teams, players }} />
|
||
</TabController>
|
||
) : (
|
||
<span className="loader" />
|
||
)}
|
||
</>
|
||
);
|
||
}
|