535 lines
16 KiB
TypeScript
535 lines
16 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
import { ReactSortable, ReactSortableProps } from "react-sortablejs";
|
||
import { apiAuth, User } from "./api";
|
||
import { TeamState, useSession } from "./Session";
|
||
import TabController from "./TabController";
|
||
import { Chemistry, MVPRanking, PlayerType } from "./types";
|
||
|
||
type PlayerListProps = Partial<ReactSortableProps<any>> & {
|
||
orderedList?: boolean;
|
||
gender?: boolean;
|
||
};
|
||
|
||
function PlayerList(props: PlayerListProps) {
|
||
const fmps = props.list?.filter((item) => item.gender === "fmp").length;
|
||
return (
|
||
<ReactSortable
|
||
{...props}
|
||
className="buttons is-centered is-clearfix"
|
||
direction={"vertical"}
|
||
animation={200}
|
||
swapThreshold={1}
|
||
handle=".handle"
|
||
draggable=".handle"
|
||
>
|
||
{props.list &&
|
||
props.list.map((item, index) => (
|
||
<div className="handle" key={item.id}>
|
||
<button
|
||
className={
|
||
"button is-primary is-light " +
|
||
(props.gender ? item.gender : "")
|
||
}
|
||
>
|
||
{props.orderedList
|
||
? props.gender
|
||
? index +
|
||
1 -
|
||
(item.gender !== "fmp" ? fmps! : 0) +
|
||
". " +
|
||
item.display_name
|
||
: index + 1 + ". " + item.display_name
|
||
: item.display_name}
|
||
</button>
|
||
</div>
|
||
))}
|
||
</ReactSortable>
|
||
);
|
||
}
|
||
|
||
function PlayerMenuList(props: PlayerListProps) {
|
||
const fmps = props.list?.filter((item) => item.gender === "fmp").length;
|
||
return (
|
||
<ReactSortable
|
||
{...props}
|
||
className="menu-list"
|
||
animation={200}
|
||
swapThreshold={1}
|
||
>
|
||
{props.list &&
|
||
props.list.map((item, index) => (
|
||
<p
|
||
key={item.id}
|
||
className={
|
||
"menu-item is-primary is-light " +
|
||
(props.gender ? item.gender : "")
|
||
}
|
||
>
|
||
{props.orderedList
|
||
? props.gender
|
||
? index +
|
||
1 -
|
||
(item.gender !== "fmp" ? fmps! : 0) +
|
||
". " +
|
||
item.display_name
|
||
: index + 1 + ". " + item.display_name
|
||
: item.display_name}
|
||
</p>
|
||
))}
|
||
</ReactSortable>
|
||
);
|
||
}
|
||
|
||
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 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([]);
|
||
}}
|
||
onSubmit={handleSubmit}
|
||
/>
|
||
<div className="columns container is-multiline is-mobile is-1-mobile">
|
||
<div className="column is-full is-flex is-justify-content-center">
|
||
<div className="box" style={{ maxWidth: 800 }}>
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
available players
|
||
</p>
|
||
<PlayerList
|
||
list={availablePlayers}
|
||
setList={setAvailablePlayers}
|
||
group={"type-shared"}
|
||
className="dragbox reservoir"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="column">
|
||
<div className="columns">
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
handler
|
||
</p>
|
||
<PlayerList
|
||
list={handlers}
|
||
setList={setHandlers}
|
||
group={"type-shared"}
|
||
className="dragbox"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
combi
|
||
</p>
|
||
<PlayerList
|
||
list={combis}
|
||
setList={setCombis}
|
||
group={"type-shared"}
|
||
className="middle dragbox"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
cutter
|
||
</p>
|
||
<PlayerList
|
||
list={cutters}
|
||
setList={setCutters}
|
||
group={"type-shared"}
|
||
className="dragbox"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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);
|
||
const [mixed, setMixed] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const activeTeam = teams.teams.find((team) => team.id == teams.activeTeam);
|
||
activeTeam && setMixed(activeTeam.mixed);
|
||
handleGet();
|
||
}, [players]);
|
||
|
||
useEffect(() => {
|
||
handleGet();
|
||
// setMixedList(rankedPlayers);
|
||
}, [mixed]);
|
||
|
||
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");
|
||
}
|
||
|
||
const setMixedList = (newList: User[]) =>
|
||
mixed
|
||
? setRankedPlayers(
|
||
newList.sort((a, b) =>
|
||
a.gender && b.gender ? a.gender.localeCompare(b.gender) : -1
|
||
)
|
||
)
|
||
: setRankedPlayers(newList);
|
||
|
||
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;
|
||
setMixedList(filterSort(players, mvps.mvps));
|
||
setAvailablePlayers(
|
||
players.filter((user) => !mvps.mvps.includes(user.id))
|
||
);
|
||
}
|
||
setLoading(false);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<HeaderControl
|
||
onLoad={handleGet}
|
||
onClear={() => {
|
||
setAvailablePlayers(players);
|
||
setRankedPlayers([]);
|
||
}}
|
||
onSubmit={handleSubmit}
|
||
/>
|
||
{loading ? (
|
||
<div className="container">
|
||
<progress className="progress is-primary" max="100"></progress>
|
||
</div>
|
||
) : (
|
||
<div className="columns container is-mobile is-1-mobile">
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
available players
|
||
</p>
|
||
<PlayerList
|
||
list={availablePlayers}
|
||
setList={setAvailablePlayers}
|
||
group={{
|
||
name: "mvp-shared",
|
||
}}
|
||
className="dragbox"
|
||
gender={mixed}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-2 has-text-centered is-uppercase has-text-weight-light">
|
||
🏆
|
||
</p>
|
||
<div className="menu">
|
||
<PlayerMenuList
|
||
list={rankedPlayers}
|
||
setList={setMixedList}
|
||
group={{
|
||
name: "mvp-shared",
|
||
}}
|
||
className="dragbox"
|
||
orderedList
|
||
gender={mixed}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<dialog
|
||
ref={dialogRef}
|
||
id="MVPDialog"
|
||
onClick={(event) => {
|
||
event.currentTarget.close();
|
||
}}
|
||
>
|
||
{dialog}
|
||
</dialog>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ChemistryDnDMobile({ 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([]);
|
||
}}
|
||
onSubmit={handleSubmit}
|
||
/>
|
||
{loading ? (
|
||
<div className="container">
|
||
<progress className="progress is-primary" max="100"></progress>
|
||
</div>
|
||
) : (
|
||
<div className="columns container is-multiline is-mobile is-1-mobile">
|
||
<div className="column is-full is-flex is-justify-content-center">
|
||
<div className="box" style={{ maxWidth: 800 }}>
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
neutral
|
||
</p>
|
||
<PlayerList
|
||
list={playersMiddle}
|
||
setList={setPlayersMiddle}
|
||
group={"shared"}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="column">
|
||
<div className="columns is-mobile">
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
rather not
|
||
</p>
|
||
<PlayerList
|
||
list={playersLeft}
|
||
setList={setPlayersLeft}
|
||
group={"shared"}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="column">
|
||
<div className="box">
|
||
<p className="subtitle is-6 is-uppercase has-text-weight-light">
|
||
yes, please ♥️
|
||
</p>
|
||
<PlayerList
|
||
list={playersRight}
|
||
setList={setPlayersRight}
|
||
group={"shared"}
|
||
orderedList
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<dialog
|
||
ref={dialogRef}
|
||
id="ChemistryDialog"
|
||
onClick={(event) => {
|
||
event.currentTarget.close();
|
||
}}
|
||
>
|
||
{dialog}
|
||
</dialog>
|
||
</>
|
||
);
|
||
}
|
||
|
||
interface HeaderControlProps {
|
||
onLoad: () => void;
|
||
onClear: () => void;
|
||
onSubmit: () => void;
|
||
}
|
||
function HeaderControl({ onLoad, onClear, onSubmit }: HeaderControlProps) {
|
||
return (
|
||
<div className="buttons is-centered">
|
||
<button className="button is-small is-light" onClick={onLoad}>
|
||
🗃️ restore previous
|
||
</button>
|
||
<button className="button is-small is-light" onClick={onClear}>
|
||
🗑️ start over
|
||
</button>
|
||
<button className="button is-small is-light" onClick={onSubmit}>
|
||
💾 submit
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function Rankings() {
|
||
const { user, teams, players } = useSession();
|
||
const tabs = [
|
||
{ id: "Chemistry", label: "🧪 Chemistry" },
|
||
{ id: "MVP", label: "🏆 MVP" },
|
||
{ id: "Type", label: "🃏 Type" },
|
||
];
|
||
|
||
return (
|
||
<div className="container block">
|
||
<p className="notification is-warning is-light">
|
||
assign as many or as few players as you want and don't forget to 💾
|
||
<strong> submit</strong> when you're done :)
|
||
</p>
|
||
{user && teams && players ? (
|
||
<TabController tabs={tabs}>
|
||
<ChemistryDnDMobile {...{ user, teams, players }} />
|
||
<MVPDnD {...{ user, teams, players }} />
|
||
<TypeDnD {...{ user, teams, players }} />
|
||
</TabController>
|
||
) : (
|
||
<div className="container">
|
||
<progress className="progress is-primary" max="100"></progress>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|