Initial commit

src/App.tsx

@@ -0,0 +1,78 @@
+import "./App.css";
+
+import { Dispatch, FC, SetStateAction, useState } from "react";
+import { ReactSortable } from "react-sortablejs";
+
+interface Player {
+  id: number;
+  name: string;
+}
+
+function loadPlayers() {
+  const players = ["August", "Beate", "Ceasar", "Doofus", "Elli"].map(
+    (v, i) => {
+      return { id: i, name: v } as Player;
+    }
+  );
+  return players;
+}
+
+function PlayerList(props: {
+  players: Player[];
+  setPlayers: Dispatch<SetStateAction<Player[]>>;
+}) {
+  return (
+    <ReactSortable
+      list={props.players}
+      setList={props.setPlayers}
+      group={"shared"}
+      animation={300}
+      className="dragbox"
+    >
+      {props.players.map((item) => (
+        <div
+          key={item.id}
+          style={{
+            border: "4px dashed black",
+            borderRadius: 4,
+            margin: "8px 4px",
+            padding: 4,
+          }}
+        >
+          {item.name}
+        </div>
+      ))}
+    </ReactSortable>
+  );
+}
+
+function App() {
+  const players = loadPlayers();
+  const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
+  const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
+  const [playersRight, setPlayersRight] = useState<Player[]>([]);
+  return (
+    <>
+      <h1>yellow ultimate team tool</h1>
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        <div className="box">
+          <h3>hate</h3>
+          <PlayerList players={playersRight} setPlayers={setPlayersRight} />
+        </div>
+        <div className="box">
+          <h3>undecided</h3>
+          <PlayerList players={playersMiddle} setPlayers={setPlayersMiddle} />
+        </div>
+        <div className="box">
+          <h3>love</h3>
+          <PlayerList players={playersLeft} setPlayers={setPlayersLeft} />
+        </div>
+      </div>
+      <p className="read-the-docs">
+        something not working? message <a href="https://t.me/x0124816">me</a>.
+      </p>
+    </>
+  );
+}
+
+export default App;