move frontend stuff to its own directory
This commit is contained in:
500
frontend/src/Rankings.tsx
Normal file
500
frontend/src/Rankings.tsx
Normal file
@@ -0,0 +1,500 @@
|
||||
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;
|
||||
gender?: boolean;
|
||||
};
|
||||
|
||||
function PlayerList(props: PlayerListProps) {
|
||||
const fmps = props.list?.filter((item) => item.gender === "fmp").length;
|
||||
return (
|
||||
<ReactSortable
|
||||
{...props}
|
||||
animation={200}
|
||||
swapThreshold={0.2}
|
||||
style={{ minHeight: props.list && props.list?.length < 1 ? 64 : 32 }}
|
||||
>
|
||||
{props.list &&
|
||||
props.list.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={"item " + (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}
|
||||
</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);
|
||||
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([]);
|
||||
}}
|
||||
/>
|
||||
{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",
|
||||
}}
|
||||
className="dragbox"
|
||||
gender={mixed}
|
||||
/>
|
||||
</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={setMixedList}
|
||||
group={{
|
||||
name: "mvp-shared",
|
||||
}}
|
||||
className="dragbox"
|
||||
orderedList
|
||||
gender={mixed}
|
||||
/>
|
||||
</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" />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user