feat: implement MVP

main.py

@@ -47,4 +47,4 @@ def submit_chemistry(chemistry: Chemistry):
 app.mount("/", StaticFiles(directory="dist", html=True), name="site")
 
 # if __name__ == "__main__":
-#     uvicorn.run("main:app", workers=1, port=8096)
+#     uvicorn.run("main:app", workers=1, port=8000, host="0.0.0.0")

src/App.tsx

@@ -1,10 +1,19 @@
 import "./App.css";
-import Chemistry from "./Chemistry";
+import { Chemistry, MVP } from "./Chemistry";
 
 function App() {
   return (
     <>
+      <img alt="logo" height="128px" src="logo.svg" />
+      <h1>cutt</h1>
+      <span className="grey">cool ultimate team tool</span>
       <Chemistry />
+      <MVP />
+      <footer>
+        <p className="grey">
+          something not working? message <a href="https://t.me/x0124816">me</a>.
+        </p>
+      </footer>
     </>
   );
 }

src/Chemistry.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ReactSortable, ReactSortableProps } from "react-sortablejs";
+import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
 import api from "./api";
 
 interface Player {
@@ -42,7 +42,7 @@ function PlayerList(props: PlayerListProps) {
   );
 }
 
-export default function Chemistry() {
+export function Chemistry() {
   const players = loadPlayers();
   const [user, setUser] = useState<Player[]>([]);
   const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
@@ -70,13 +70,26 @@ export default function Chemistry() {
 
   return (
     <>
-      <img alt="logo" height="128px" src="logo.svg" />
-      <h1>cutt</h1>
-      <span className="grey">cool ultimate team tool</span>
       <div className="box user">
-        <h2>your name?</h2>
-        {user.length < 1 && (
-          <span className="grey hint">drag your name here:</span>
+        <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}
@@ -95,7 +108,8 @@ export default function Chemistry() {
           <h2>😬</h2>
           {playersLeft.length < 1 && (
             <span className="grey hint">
-              drag people here that you'd rather not play with
+              drag people here that you'd rather not play with from worst to ...
+              ok
             </span>
           )}
           <PlayerList
@@ -119,7 +133,7 @@ export default function Chemistry() {
           <h2>😍</h2>
           {playersRight.length < 1 && (
             <span className="grey hint">
-              drag people here that you love playing with
+              drag people here that you love playing with from best to ... ok
             </span>
           )}
           <PlayerList
@@ -140,11 +154,119 @@ export default function Chemistry() {
       >
         {dialog}
       </dialog>
-      <footer>
-        <p className="grey">
-          something not working? message <a href="https://t.me/x0124816">me</a>.
-        </p>
-      </footer>
+    </>
+  );
+}
+
+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>
     </>
   );
 }