feat: simple analysis page with sociogram

src/App.css

@@ -45,6 +45,30 @@ h3 {
   padding: 8px 16px;
 }
 
+.stack {
+  display: flex;
+
+  button,
+  img {
+    padding: 0 1em;
+    margin: 3px auto;
+  }
+}
+
+.column {
+  flex-direction: column;
+}
+
+
+#control-panel {
+  display: flex;
+  flex-direction: column;
+
+  input {
+    margin: auto
+  }
+}
+
 .container {
   display: flex;
   flex-wrap: nowrap;
@@ -61,10 +85,12 @@ h3 {
 .box {
   position: relative;
   flex: 1;
+
   &.one {
     max-width: min(96%, 768px);
     margin: 4px auto;
   }
+
   padding: 4px;
   margin: 4px 0.5%;
   border-style: solid;
@@ -82,6 +108,7 @@ h3 {
   max-width: 240px;
   min-width: 100px;
   margin: 4px auto;
+
   .item {
     font-weight: bold;
     border-style: solid;
@@ -115,26 +142,26 @@ button {
   .submit_text {
     display: none;
   }
+
   .submit {
     position: fixed;
     right: 16px;
     bottom: 16px;
-    padding: 0px;
-    background-color: unset;
+    padding: 0.4em;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0.6);
     font-size: xx-large;
-    margin-bottom: 20px;
-    margin-right: 20px;
+    margin-bottom: 16px;
+    margin-right: 16px;
   }
 }
 
 ::backdrop {
-  background-image: linear-gradient(
-    45deg,
-    magenta,
-    rebeccapurple,
-    dodgerblue,
-    green
-  );
+  background-image: linear-gradient(45deg,
+      magenta,
+      rebeccapurple,
+      dodgerblue,
+      green);
   opacity: 0.75;
 }
 
@@ -152,6 +179,7 @@ button {
     padding-top: 4px;
     padding-bottom: 4px;
     opacity: 50%;
+
     &:hover {
       opacity: 75%;
     }
@@ -178,10 +206,12 @@ button {
   text-align: center;
   height: 140px;
   margin-bottom: 20px;
+
   img {
     display: block;
     margin: auto;
   }
+
   h3 {
     position: absolute;
     font-size: medium;
@@ -206,6 +236,7 @@ button {
   border: 4px solid black;
   overflow: hidden;
 }
+
 .loader::after {
   content: "";
   width: 32%;
@@ -223,6 +254,7 @@ button {
     left: 0;
     transform: translateX(-100%);
   }
+
   100% {
     left: 100%;
     transform: translateX(0%);

src/App.tsx

@@ -1,31 +1,27 @@
+import Analysis from "./Analysis";
 import { baseUrl } from "./api";
 import "./App.css";
+import Footer from "./Footer";
+import Header from "./Header";
 import Rankings from "./Rankings";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 function App() {
+  //const [data, setData] = useState({ nodes: [], links: [] } as SociogramData);
+  //async function loadData() {
+  //  await fetch(`${baseUrl}analysis/json`, { method: "GET" }).then(resp => resp.json() as unknown as SociogramData).then(json => { setData(json) })
+  //}
+  //useEffect(() => { loadData() }, [])
+  //
   return (
-    <>
-      <div className="logo">
-        <a href={baseUrl}>
-          <img alt="logo" height="66%" src="logo.svg" />
-          <h3 className="centered">cutt</h3>
-        </a>
-        <span className="grey">cool ultimate team tool</span>
-      </div>
-      <Rankings />
-      <footer>
-        <p className="grey">
-          something not working?
-          <br />
-          message <a href="https://t.me/x0124816">me</a>.
-          <br />
-          or fix it here:{" "}
-          <a href="https://git.0124816.xyz/julius/cutt" key="gitea">
-            <img src="gitea.svg" alt="gitea" height="16" />
-          </a>
-        </p>
-      </footer>
-    </>
+    <BrowserRouter>
+      <Header />
+      <Routes>
+        <Route index element={<Rankings />} />
+        <Route path="analysis" element={<Analysis />} />
+      </Routes>
+      <Footer />
+    </BrowserRouter>
   );
 }
 export default App;

src/Rankings.tsx

@@ -136,8 +136,7 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
           <h2>😬</h2>
           {playersLeft.length < 1 && (
             <span className="grey hint">
-              drag people here that you'd rather not play with from worst to ...
-              ok
+              drag people here that you'd rather not play with
             </span>
           )}
           <PlayerList
@@ -145,7 +144,6 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
             setList={setPlayersLeft}
             group={"shared"}
             className="dragbox"
-            orderedList
           />
         </div>
         <div className="box three">