collect both apps in Rankings.tsx
This commit is contained in:
272
src/Rankings.tsx
Normal file
272
src/Rankings.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import { useState } from "react";
|
||||
import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
|
||||
import api from "./api";
|
||||
|
||||
interface Player {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
function loadPlayers() {
|
||||
const players = [
|
||||
"August",
|
||||
"Beate",
|
||||
"Ceasar",
|
||||
"Daedalus",
|
||||
"Elli",
|
||||
"Ford P.",
|
||||
"Gabriel",
|
||||
"Hugo",
|
||||
"Ivar Johansson",
|
||||
"Jürgen Gordon Malinauskas",
|
||||
"Karsten Uwe Kalinowski",
|
||||
].map((v, i) => {
|
||||
return { id: i, name: v } as Player;
|
||||
});
|
||||
return players;
|
||||
}
|
||||
|
||||
type PlayerListProps = Partial<ReactSortableProps<any>> & {
|
||||
orderedList?: boolean;
|
||||
};
|
||||
|
||||
function PlayerList(props: PlayerListProps) {
|
||||
return (
|
||||
<ReactSortable {...props} animation={200}>
|
||||
{props.list?.map((item, index) => (
|
||||
<div key={item.id} className="item">
|
||||
{props.orderedList ? index + 1 + ". " + item.name : item.name}
|
||||
</div>
|
||||
))}
|
||||
</ReactSortable>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chemistry() {
|
||||
const players = loadPlayers();
|
||||
const [user, setUser] = useState<Player[]>([]);
|
||||
const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
|
||||
const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
|
||||
const [playersRight, setPlayersRight] = useState<Player[]>([]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
|
||||
async function handleSubmit() {
|
||||
const dialog = document.querySelector("dialog");
|
||||
dialog?.showModal();
|
||||
if (user.length < 1) {
|
||||
setDialog("who are you?");
|
||||
} else {
|
||||
setDialog("sending...");
|
||||
let _user = user.map(({ name }) => name)[0];
|
||||
let left = playersLeft.map(({ name }) => name);
|
||||
let middle = playersMiddle.map(({ name }) => name);
|
||||
let right = playersRight.map(({ name }) => name);
|
||||
const data = { user: _user, hate: left, undecided: middle, love: right };
|
||||
const response = await api("chemistry", data);
|
||||
response.ok ? setDialog("success!") : setDialog("try sending again");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="box user">
|
||||
<span>your name?</span>
|
||||
{user.length < 1 ? (
|
||||
<>
|
||||
<br /> <span className="grey hint">drag your name here</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
onClick={() => {
|
||||
let newMiddle = user.concat(playersMiddle);
|
||||
setPlayersMiddle(newMiddle);
|
||||
setUser([]);
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
⟳
|
||||
</span>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<PlayerList
|
||||
list={user}
|
||||
setList={setUser}
|
||||
group={{
|
||||
name: "shared",
|
||||
put: function (to) {
|
||||
return to.el.children.length < 1;
|
||||
},
|
||||
}}
|
||||
className="dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="box">
|
||||
<h2>😬</h2>
|
||||
{playersLeft.length < 1 && (
|
||||
<span className="grey hint">
|
||||
drag people here that you'd rather not play with from worst to ...
|
||||
ok
|
||||
</span>
|
||||
)}
|
||||
<PlayerList
|
||||
list={playersLeft}
|
||||
setList={setPlayersLeft}
|
||||
group={"shared"}
|
||||
className="dragbox"
|
||||
orderedList
|
||||
/>
|
||||
</div>
|
||||
<div className="box">
|
||||
<h2>🤷</h2>
|
||||
<PlayerList
|
||||
list={playersMiddle}
|
||||
setList={setPlayersMiddle}
|
||||
group={"shared"}
|
||||
className="middle dragbox"
|
||||
/>
|
||||
</div>
|
||||
<div className="box">
|
||||
<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 onClick={() => handleSubmit()}>submit</button>
|
||||
<dialog
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function MVP() {
|
||||
const players = loadPlayers();
|
||||
const [user, setUser] = useState<Player[]>([]);
|
||||
const [availablePlayers, setAvailablePlayers] = useState<Player[]>(players);
|
||||
const [rankedPlayers, setRankedPlayers] = useState<Player[]>([]);
|
||||
|
||||
const [dialog, setDialog] = useState("dialog");
|
||||
|
||||
async function handleSubmit() {
|
||||
const dialog = document.querySelector("dialog");
|
||||
dialog?.showModal();
|
||||
if (user.length < 1) {
|
||||
setDialog("who are you?");
|
||||
} else {
|
||||
setDialog("sending...");
|
||||
let _user = user.map(({ name }) => name)[0];
|
||||
let mvps = rankedPlayers.map(({ name }) => name);
|
||||
const data = { user: _user, rankedPlayers: mvps };
|
||||
const response = await api("mvp", data);
|
||||
response.ok ? setDialog("success!") : setDialog("try sending again");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="box user">
|
||||
<span>your name?</span>
|
||||
{user.length < 1 ? (
|
||||
<>
|
||||
<br /> <span className="grey hint">drag your name here</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
onClick={() => {
|
||||
setUser([]);
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
⟳
|
||||
</span>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<PlayerList
|
||||
list={user}
|
||||
setList={setUser}
|
||||
group={{
|
||||
name: "mvp-shared",
|
||||
put: function (to) {
|
||||
return to.el.children.length < 1;
|
||||
},
|
||||
pull: false,
|
||||
}}
|
||||
className="dragbox putclone"
|
||||
/>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="box">
|
||||
<h1>🥏🏃</h1>
|
||||
{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 reservoir"
|
||||
/>
|
||||
</div>
|
||||
<div className="box">
|
||||
<h1>🏆</h1>
|
||||
{rankedPlayers.length < 1 && (
|
||||
<span className="grey hint">
|
||||
carefully place the{" "}
|
||||
<b>
|
||||
<i>Most Valued Player</i>
|
||||
</b>{" "}
|
||||
(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 onClick={() => handleSubmit()}>submit</button>
|
||||
<dialog
|
||||
onClick={(event) => {
|
||||
event.currentTarget.close();
|
||||
}}
|
||||
>
|
||||
{dialog}
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user