From d82dee9319e7337e7c222241a1ee979a511579dc Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Fri, 24 Jan 2025 10:30:12 +0100
Subject: [PATCH] feat: rename, word-wrap, some styling

---
 index.html      |   2 +-
 public/logo.svg |   6 +--
 src/App.css     |  33 +++++++++++---
 src/App.tsx     | 118 +++++++++++++++++++++++++++++++++---------------
 4 files changed, 113 insertions(+), 46 deletions(-)
diff --git a/index.html b/index.html
index 11e7284..cc9d993 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>yutt</title>
+    <title>cutt</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/logo.svg b/public/logo.svg
index 7d7b07b..eded6ed 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -24,9 +24,9 @@
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="mm"
      inkscape:zoom="14.329304"
-     inkscape:cx="17.132723"
+     inkscape:cx="17.167617"
      inkscape:cy="25.088448"
-     inkscape:window-width="1263"
+     inkscape:window-width="1408"
      inkscape:window-height="1727"
      inkscape:window-x="0"
      inkscape:window-y="0"
@@ -39,7 +39,7 @@
      inkscape:groupmode="layer"
      id="layer1">
     <ellipse
-       style="fill:#fffae5;stroke:#ffcc00;stroke-width:1.94357;fill-opacity:1"
+       style="fill:#c7d6f1;stroke:#3366cc;stroke-width:1.94357;fill-opacity:1"
        id="path2"
        cx="6.3500028"
        cy="6.3500109"
diff --git a/src/App.css b/src/App.css
index 04c275d..3361349 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,22 +1,25 @@
 body {
-  background-color: #ffcc00;
+  background-color: ghostwhite;
   color: black;
+  overflow-wrap: anywhere;
 }
 
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 8px;
   text-align: center;
 }
 
-.read-the-docs {
+.grey {
   color: #444;
 }
 
-h3 {
+h1,
+h2 {
   margin-top: 0px;
   margin-bottom: 0px;
+  background-color: ghostwhite;
 }
 
 .dragbox {
@@ -24,15 +27,33 @@ h3 {
   flex-direction: column;
   flex-basis: 0;
   flex-grow: 1;
-  position: relative;
+  min-height: 32px;
   height: 100%;
 }
 
 .box {
   min-width: 30%;
   padding: 4px;
-  margin: 4px;
+  margin: 4px auto;
   border-style: solid;
   border-color: black;
 }
 
+.user {
+  max-width: 80%;
+}
+
+.item {
+  font-size: small;
+  border: 3px dashed black;
+  border-radius: 4px;
+  margin: 8px auto;
+  padding: 4px 8px;
+}
+
+button {
+  font-weight: bold;
+  color: ghostwhite;
+  background-color: black;
+  border: 4px solid black;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 06c7923..068b5cf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import "./App.css";
 
 import { Dispatch, FC, SetStateAction, useState } from "react";
-import { ReactSortable } from "react-sortablejs";
+import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
 
 interface Player {
   id: number;
@@ -9,36 +9,29 @@ interface Player {
 }
 
 function loadPlayers() {
-  const players = ["August", "Beate", "Ceasar", "Doofus", "Elli"].map(
-    (v, i) => {
-      return { id: i, name: v } as Player;
-    }
-  );
+  const players = [
+    "August",
+    "Beate",
+    "Ceasar",
+    "Doofus",
+    "Elli",
+    "Ford P.",
+    "Gabriel",
+    "Hugo",
+    "Ivar Johansson",
+    "Jürgen Gordon Malinauskas",
+    "Karsten Uwe Kalinowski",
+  ].map((v, i) => {
+    return { id: i, name: v } as Player;
+  });
   return players;
 }
 
-function PlayerList(props: {
-  players: Player[];
-  setPlayers: Dispatch<SetStateAction<Player[]>>;
-}) {
+function PlayerList(props: Partial<ReactSortableProps<any>>) {
   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,
-          }}
-        >
+    <ReactSortable {...props} animation={200} className="dragbox">
+      {props.list?.map((item) => (
+        <div key={item.id} className="item">
           {item.name}
         </div>
       ))}
@@ -46,29 +39,82 @@ function PlayerList(props: {
   );
 }
 
+function handleSubmit(
+  user: Player[],
+  playersLeft: Player[],
+  playersMiddle: Player[],
+  playersRight: Player[]
+) {
+  console.log(user);
+  console.log(JSON.stringify(playersLeft));
+  console.log(JSON.stringify(playersRight));
+}
+
 function App() {
   const players = loadPlayers();
+  const [user, setUser] = useState<Player[]>([]);
   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" }}>
+      <img alt="logo" height="128px" src="logo.svg" />
+      <h1>cutt</h1>
+      <span className="grey">cool ultimate team tool</span>
+      <div className="box user">
+        <h2>who are you?</h2>
+        <PlayerList
+          list={user}
+          setList={setUser}
+          group={{
+            name: "shared",
+            put: function (to) {
+              return to.el.children.length < 1;
+            },
+          }}
+        />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "nowrap",
+          justifyContent: "space-evenly",
+        }}
+      >
         <div className="box">
-          <h3>hate</h3>
-          <PlayerList players={playersRight} setPlayers={setPlayersRight} />
+          <h2>😬</h2>
+          <PlayerList
+            list={playersRight}
+            setList={setPlayersRight}
+            group={"shared"}
+          />
         </div>
         <div className="box">
-          <h3>undecided</h3>
-          <PlayerList players={playersMiddle} setPlayers={setPlayersMiddle} />
+          <h2>🤷</h2>
+          <PlayerList
+            list={playersMiddle}
+            setList={setPlayersMiddle}
+            group={"shared"}
+          />
         </div>
         <div className="box">
-          <h3>love</h3>
-          <PlayerList players={playersLeft} setPlayers={setPlayersLeft} />
+          <h2>😍</h2>
+          <PlayerList
+            list={playersLeft}
+            setList={setPlayersLeft}
+            group={"shared"}
+          />
         </div>
       </div>
-      <p className="read-the-docs">
+
+      <button
+        onClick={() =>
+          handleSubmit(user, playersLeft, playersMiddle, playersRight)
+        }
+      >
+        submit
+      </button>
+      <p className="grey">
         something not working? message <a href="https://t.me/x0124816">me</a>.
       </p>
     </>
