feat: choose user once at the beginning

src/App.css

@@ -48,15 +48,26 @@ h2 {
   height: 92%;
 }
 
+.reservoir {
+  flex-direction: unset;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+}
+
 .box {
   position: relative;
+  &.one {
+    max-width: min(80vw, 500px);
+  }
   &.two {
     min-width: 43%;
+    max-width: 20vw;
   }
   &.three {
     min-width: 27%;
-  }
     max-width: 10vw;
+  }
   padding: 4px;
   margin: 4px auto;
   border-style: solid;
@@ -82,6 +93,10 @@ h2 {
   padding: 4px 8px;
 }
 
+.extra-margin {
+  padding: 0px 8px;
+}
+
 button {
   font-weight: bold;
   color: ghostwhite;
@@ -120,7 +135,6 @@ button {
   width: 50%;
 }
 
-
 /* Style the tab content (and add height:100% for full page content) */
 .tabcontent {
   display: none;

src/App.tsx

@@ -1,63 +1,13 @@
 import "./App.css";
-import { Chemistry, MVP } from "./Rankings";
+import Rankings from "./Rankings";
 
 function App() {
-  function openPage(pageName: string, color: string) {
-    // Hide all elements with class="tabcontent" by default */
-    var i, tabcontent, tablinks;
-    tabcontent = document.getElementsByClassName("tabcontent");
-    for (i = 0; i < tabcontent.length; i++) {
-      (tabcontent[i] as HTMLElement).style.display = "none";
-    }
-    // Remove the background color of all tablinks/buttons
-    tablinks = document.getElementsByClassName("tablink");
-    for (i = 0; i < tablinks.length; i++) {
-      let button = tablinks[i] as HTMLElement;
-      button.style.backgroundColor = "unset";
-      button.style.textDecoration = "unset";
-      button.style.fontWeight = "unset";
-      button.style.color = "unset";
-    }
-    // Show the specific tab content
-    (document.getElementById(pageName) as HTMLElement).style.display = "block";
-    // Add the specific color to the button used to open the tab content
-    let activeButton = document.getElementById(
-      pageName + "Button"
-    ) as HTMLElement;
-    activeButton.style.textDecoration = "underline";
-    activeButton.style.fontWeight = "bold";
-    activeButton.style.backgroundColor = "#3366cc";
-    activeButton.style.color = "white";
-    document.body.style.backgroundColor = color;
-  }
   return (
     <>
       <img alt="logo" height="128px" src="logo.svg" />
       <h1>cutt</h1>
       <span className="grey">cool ultimate team tool</span>
-      <div className="container">
+      <Rankings />
-        <button
-          className="tablink"
-          id="ChemistryButton"
-          onClick={() => openPage("Chemistry", "aliceblue")}
-        >
-          Chemistry
-        </button>
-        <button
-          className="tablink"
-          id="MVPButton"
-          onClick={() => openPage("MVP", "aliceblue")}
-        >
-          MVP
-        </button>
-      </div>
-
-      <div id="Chemistry" className="tabcontent">
-        <Chemistry />
-      </div>
-      <div id="MVP" className="tabcontent">
-        <MVP />
-      </div>
       <footer>
         <p className="grey">
           something not working? message <a href="https://t.me/x0124816">me</a>.

src/Rankings.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
+import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
 interface Player {
@@ -24,26 +24,83 @@ function PlayerList(props: PlayerListProps) {
   );
 }
 
+interface PlayerStateProps {
+  user: Player[];
+  setUser: Dispatch<SetStateAction<Player[]>>;
+  players: Player[];
+  setPlayers: Dispatch<SetStateAction<Player[]>>;
+}
+
+export function SelectUser({
+  user,
+  setUser,
+  players,
+  setPlayers,
+}: PlayerStateProps) {
+  return (
+    <>
+      <div className="box user">
+        <span>your name?</span>
+        {user.length < 1 ? (
+          <>
+            <br /> <span className="grey hint">drag your name here</span>
+          </>
+        ) : (
+          <>
+            <span
+              className="renew"
+              onClick={() => {
+                setUser([]);
+              }}
+            >
+              {" ✕"}
+            </span>
+            <br />
+          </>
+        )}
+        <PlayerList
+          list={user}
+          setList={setUser}
+          group={{
+            name: "user-shared",
+            put: function (to) {
+              return to.el.children.length < 1;
+            },
+          }}
+          className="dragbox"
+        />
+      </div>
+      {user.length < 1 && (
+        <div className="box one">
+          <h2>🥏🏃</h2>
+          <ReactSortable
+            list={players}
+            setList={setPlayers}
+            group={"user-shared"}
+            className="dragbox reservoir"
+            animation={200}
+          >
+            {players.map((item, _) => (
+              <div className="extra-margin">
+                <div key={item.id} className="item">
+                  {item.name}
+                </div>
+              </div>
+            ))}
+          </ReactSortable>
+        </div>
+      )}
+    </>
+  );
+}
+
 export function Chemistry() {
-  const [user, setUser] = useState<Player[]>([]);
   const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
   const [playersMiddle, setPlayersMiddle] = useState<Player[]>([]);
   const [playersRight, setPlayersRight] = useState<Player[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
-  async function loadPlayers() {
-    const response = await fetch(`${baseUrl}player/list`, {
-      method: "GET",
-    });
-    const data = await response.json();
-    setPlayersMiddle(data as Player[]);
-  }
-
-  useEffect(() => {
-    loadPlayers();
-  }, []);
-
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='ChemistryDialog']");
     (dialog as HTMLDialogElement).showModal();
@@ -63,39 +120,6 @@ export function Chemistry() {
 
   return (
     <>
-      <div className="box user">
-        <span>your name?</span>
-        {user.length < 1 ? (
-          <>
-            <br /> <span className="grey hint">drag your name here</span>
-          </>
-        ) : (
-          <>
-            <span
-              className="renew"
-              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 three">
           <h2>😬</h2>
@@ -273,3 +297,82 @@ export function MVP() {
     </>
   );
 }
+
+function openPage(pageName: string, color: string) {
+  // Hide all elements with class="tabcontent" by default */
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    (tabcontent[i] as HTMLElement).style.display = "none";
+  }
+  // Remove the background color of all tablinks/buttons
+  tablinks = document.getElementsByClassName("tablink");
+  for (i = 0; i < tablinks.length; i++) {
+    let button = tablinks[i] as HTMLElement;
+    button.style.backgroundColor = "unset";
+    button.style.textDecoration = "unset";
+    button.style.fontWeight = "unset";
+    button.style.color = "unset";
+  }
+  // Show the specific tab content
+  (document.getElementById(pageName) as HTMLElement).style.display = "block";
+  // Add the specific color to the button used to open the tab content
+  let activeButton = document.getElementById(
+    pageName + "Button"
+  ) as HTMLElement;
+  activeButton.style.textDecoration = "underline";
+  activeButton.style.fontWeight = "bold";
+  activeButton.style.backgroundColor = "#3366cc";
+  activeButton.style.color = "white";
+  document.body.style.backgroundColor = color;
+}
+
+export default function Rankings() {
+  const [user, setUser] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<Player[]>([]);
+
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayers(data as Player[]);
+  }
+
+  useEffect(() => {
+    loadPlayers();
+  }, []);
+
+  return (
+    <>
+      <SelectUser {...{ user, setUser, players, setPlayers }} />
+      {user.length === 1 && (
+        <>
+          <div className="container">
+            <button
+              className="tablink"
+              id="ChemistryButton"
+              onClick={() => openPage("Chemistry", "aliceblue")}
+            >
+              Chemistry
+            </button>
+            <button
+              className="tablink"
+              id="MVPButton"
+              onClick={() => openPage("MVP", "aliceblue")}
+            >
+              MVP
+            </button>
+          </div>
+
+          <div id="Chemistry" className="tabcontent">
+            <Chemistry />
+          </div>
+          <div id="MVP" className="tabcontent">
+            <MVP />
+          </div>
+        </>
+      )}
+    </>
+  );
+}