feat: make submit button more visible

analysis.py

@@ -0,0 +1,144 @@
+from datetime import datetime
+import numpy as np
+import io
+import base64
+from fastapi import APIRouter
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel, Field
+from sqlmodel import Session, func, select
+from sqlmodel.sql.expression import SelectOfScalar
+from db import Chemistry, Player, engine
+import networkx as nx
+
+import matplotlib
+
+matplotlib.use("agg")
+import matplotlib.pyplot as plt
+
+analysis_router = APIRouter(prefix="/analysis")
+
+
+C = Chemistry
+P = Player
+
+
+def sociogram_json():
+    nodes = []
+    necessary_nodes = set()
+    links = []
+    with Session(engine) as session:
+        for p in session.exec(select(P)).fetchall():
+            nodes.append({"id": p.name, "appearance": 1})
+        subquery = (
+            select(C.user, func.max(C.time).label("latest"))
+            .where(C.time > datetime(2025, 2, 1, 10))
+            .group_by(C.user)
+            .subquery()
+        )
+        statement2 = select(C).join(
+            subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
+        )
+        for c in session.exec(statement2):
+            # G.add_node(c.user)
+            necessary_nodes.add(c.user)
+            for p in c.love:
+                # G.add_edge(c.user, p)
+                # p_id = session.exec(select(P.id).where(P.name == p)).one()
+                necessary_nodes.add(p)
+                links.append({"source": c.user, "target": p})
+    # nodes = [n for n in nodes if n["name"] in necessary_nodes]
+    return JSONResponse({"nodes": nodes, "links": links})
+
+
+def sociogram_data():
+    nodes = []
+    links = []
+    G = nx.DiGraph()
+    with Session(engine) as session:
+        for p in session.exec(select(P)).fetchall():
+            nodes.append({"id": p.name})
+            G.add_node(p.name)
+        subquery = (
+            select(C.user, func.max(C.time).label("latest"))
+            .where(C.time > datetime(2025, 2, 1, 10))
+            .group_by(C.user)
+            .subquery()
+        )
+        statement2 = (
+            select(C)
+            .where(C.user.in_(["Kruse", "Franz", "ck"]))
+            .join(subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest))
+        )
+        for c in session.exec(statement2):
+            for p in c.love:
+                G.add_edge(c.user, p)
+                links.append({"source": c.user, "target": p})
+    return G
+
+
+class Params(BaseModel):
+    node_size: int | None = Field(default=2400, alias="nodeSize")
+    font_size: int | None = Field(default=10, alias="fontSize")
+    arrow_size: int | None = Field(default=20, alias="arrowSize")
+    edge_width: float | None = Field(default=1, alias="edgeWidth")
+
+
+def sociogram_image(params: Params):
+    print(params)
+    plt.figure(figsize=(16, 10), facecolor="none")
+    ax = plt.gca()
+    ax.set_facecolor("none")  # Set the axis face color to none (transparent)
+    ax.axis("off")  # Turn off axis ticks and frames
+
+    G = sociogram_data()
+    pos = nx.spring_layout(
+        G, scale=2, k=1 / np.sqrt(G.number_of_edges()), iterations=50, seed=42
+    )
+    nx.draw_networkx_nodes(
+        G,
+        pos,
+        node_color="#99ccff",
+        edgecolors="#404040",
+        linewidths=1,
+        node_size=params.node_size,
+        alpha=0.86,
+    )
+    nx.draw_networkx_labels(G, pos, font_size=params.font_size)
+    nx.draw_networkx_edges(
+        G,
+        pos,
+        arrows=True,
+        edge_color="#404040",
+        arrowsize=params.arrow_size,
+        node_size=params.node_size,
+        width=params.edge_width,
+    )
+
+    buf = io.BytesIO()
+    plt.savefig(buf, format="png", bbox_inches="tight", dpi=300, transparent=True)
+    buf.seek(0)
+    encoded_image = base64.b64encode(buf.read()).decode("UTF-8")
+    plt.close()
+
+    return {"image": encoded_image}
+
+
+analysis_router.add_api_route("/json", endpoint=sociogram_json, methods=["GET"])
+analysis_router.add_api_route("/image", endpoint=sociogram_image, methods=["POST"])
+
+if __name__ == "__main__":
+    with Session(engine) as session:
+        statement: SelectOfScalar[P] = select(func.count(P.id))
+        print("players in DB: ", session.exec(statement).first())
+    G = sociogram_data()
+    pos = nx.spring_layout(G, scale=1, k=2, iterations=50, seed=42)
+    edges = nx.draw_networkx_edges(
+        G,
+        pos,
+        arrows=True,
+        arrowsize=12,
+    )
+    nx.draw_networkx(
+        G, pos, with_labels=True, node_color="#99ccff", font_size=8, node_size=2000
+    )
+    plt.show()

main.py

@@ -6,6 +6,7 @@ from sqlmodel import (
     select,
 )
 from fastapi.middleware.cors import CORSMiddleware
+from analysis import analysis_router
 
 
 app = FastAPI(title="cutt")
@@ -46,7 +47,7 @@ def add_players(players: list[Player]):
 
 def list_players():
     with Session(engine) as session:
-        statement = select(Player)
+        statement = select(Player).order_by(Player.name)
         return session.exec(statement).fetchall()
 
 
@@ -81,4 +82,5 @@ def submit_chemistry(chemistry: Chemistry):
 
 app.include_router(player_router)
 app.include_router(team_router)
+app.include_router(analysis_router)
 app.mount("/", StaticFiles(directory="dist", html=True), name="site")

package.json

@@ -27,8 +27,14 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "react-router-dom": "^7.1.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true
   }
 }

public/gitea.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xml:space="preserve"
+   width="128"
+   height="128"
+   viewBox="0 0 2560 2560"
+   version="1.1"
+   id="svg3"
+   sodipodi:docname="gitea.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs3" /><sodipodi:namedview
+     id="namedview3"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.4221483"
+     inkscape:cx="89.58989"
+     inkscape:cy="-60.483497"
+     inkscape:window-width="1408"
+     inkscape:window-height="1727"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg3" /><path
+     d="m 1569.914,2282.76 -484.616,-232.952 c -47.736,-22.913 -68.358,-80.96 -45.063,-129.078 l 232.952,-484.617 c 22.913,-47.736 80.96,-68.358 129.078,-45.062 65.685,31.696 103.492,49.645 103.492,49.645 l -0.382,-417.022 63.776,-0.382 0.381,447.191 c 0,0 219.204,92.417 317.35,153.138 14.13,8.783 38.952,25.968 49.263,54.992 8.02,23.295 7.638,50.027 -3.818,73.704 l -232.952,484.617 c -23.678,48.5 -81.725,69.121 -129.46,45.826 z"
+     style="fill:#ffffff;stroke-width:3.81889"
+     id="path1" /><path
+     d="m 2436.037,1005.725 c -15.657,-15.657 -36.66,-15.276 -36.66,-15.276 0,0 -447.574,25.205 -679.38,30.552 -50.792,1.145 -101.201,2.29 -151.228,2.673 v 447.573 c -21.004,-9.929 -42.39,-20.24 -63.394,-30.17 0,-139.007 -0.382,-417.021 -0.382,-417.021 -110.747,1.527 -340.644,-8.402 -340.644,-8.402 0,0 -539.99,-27.114 -598.802,-32.46 -37.425,-2.292 -85.924,-8.02 -148.936,5.728 -33.224,6.874 -127.933,28.26 -205.456,102.728 -171.85,153.137 -127.933,396.782 -122.586,433.443 6.492,44.681 26.35,168.795 121.058,276.87 174.905,214.239 551.447,209.275 551.447,209.275 0,0 46.209,110.365 116.858,211.948 95.472,126.405 193.618,224.932 289.09,236.77 240.59,0 721.387,-0.381 721.387,-0.381 0,0 45.827,0.382 108.075,-39.335 53.464,-32.46 101.2,-89.362 101.2,-89.362 0,0 49.264,-52.7 118.004,-172.995 21.004,-37.043 38.57,-72.941 53.846,-106.93 0,0 210.803,-447.19 210.803,-882.543 -4.201,-131.752 -36.662,-155.047 -44.3,-162.685 z M 537.67,1785.159 c -98.91,-32.46 -140.917,-71.413 -140.917,-71.413 0,0 -72.94,-51.173 -109.602,-151.991 -63.012,-168.795 -5.347,-271.905 -5.347,-271.905 0,0 32.079,-85.925 147.027,-114.567 52.701,-14.13 118.386,-11.838 118.386,-11.838 0,0 27.114,226.842 59.956,359.739 27.496,111.511 94.709,296.727 94.709,296.727 0,0 -99.673,-11.838 -164.212,-34.752 z m 1146.81,410.912 c 0,0 -23.294,55.374 -74.85,58.811 -22.149,1.528 -39.334,-4.582 -39.334,-4.582 0,0 -1.145,-0.382 -20.24,-8.02 l -431.152,-210.039 c 0,0 -41.626,-21.767 -48.882,-59.574 -8.401,-30.933 10.311,-69.122 10.311,-69.122 l 207.366,-427.333 c 0,0 18.33,-37.044 46.59,-49.646 2.291,-1.146 8.784,-3.819 17.185,-5.728 30.933,-8.02 68.74,10.693 68.74,10.693 l 422.75,205.074 c 0,0 48.119,21.767 58.43,61.866 7.255,28.26 -1.91,53.464 -6.874,65.685 -24.06,58.81 -210.04,431.916 -210.04,431.916 z"
+     style="fill:#609926;stroke-width:3.81889"
+     id="path2" /><path
+     d="m 1306.029,1885.214 c -31.314,0.382 -58.81,22.15 -66.066,52.7 -7.256,30.552 7.637,62.249 34.751,76.379 29.406,15.275 66.83,6.874 86.69,-20.622 19.476,-27.114 16.42,-64.54 -6.875,-88.217 l 91.653,-187.507 c 5.729,0.382 14.13,0.764 23.677,-1.91 15.658,-3.436 27.115,-13.747 27.115,-13.747 16.039,6.874 32.842,14.511 50.409,23.295 18.33,9.165 35.516,18.712 51.173,27.878 3.437,1.91 6.874,4.2 10.693,7.256 6.11,4.964 12.984,11.838 17.949,21.003 7.255,21.004 -7.256,56.902 -7.256,56.902 -8.784,29.023 -70.268,155.047 -70.268,155.047 -30.933,-0.764 -58.429,19.094 -67.594,47.736 -9.93,30.933 4.2,66.066 33.988,81.342 29.787,15.275 66.449,6.492 85.925,-20.24 19.094,-25.969 17.567,-62.248 -4.2,-86.307 7.255,-14.13 14.129,-28.26 21.385,-43.153 19.094,-39.717 51.555,-116.094 51.555,-116.094 3.437,-6.493 21.768,-39.335 10.31,-81.343 -9.546,-43.535 -48.117,-63.775 -48.117,-63.775 -46.59,-30.17 -111.512,-58.047 -111.512,-58.047 0,0 0,-15.658 -4.2,-27.114 -4.201,-11.839 -10.693,-19.477 -14.894,-24.06 17.949,-37.042 35.897,-73.704 53.846,-110.747 a 2647.928,2647.928 0 0 1 -46.59,-23.295 c -18.33,37.425 -37.043,75.232 -55.374,112.657 -25.587,-0.382 -49.264,13.366 -61.484,35.898 -12.984,24.058 -10.311,53.846 7.256,75.613 z"
+     style="fill:#609926;stroke-width:3.81889"
+     id="path3" /></svg>

src/Analysis.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { baseUrl } from "./api";
+
+interface Params {
+  nodeSize: number;
+  edgeWidth: number;
+  arrowSize: number;
+  fontSize: number;
+}
+
+export default function Analysis() {
+  const [image, setImage] = useState("");
+  const [params, setParams] = useState<Params>({
+    nodeSize: 1600,
+    edgeWidth: 1,
+    arrowSize: 20,
+    fontSize: 10,
+  });
+  const [showControlPanel, setShowControlPanel] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // Function to generate and fetch the graph image
+  async function loadImage() {
+    setLoading(true);
+    await fetch(`${baseUrl}analysis/image`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(params)
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setImage(data.image);
+        setLoading(false);
+      });
+  }
+  useEffect(() => {
+    loadImage();
+  }, []);
+
+  return (
+    <div className="stack column dropdown">
+      <button onClick={() => setShowControlPanel(!showControlPanel)}>
+        Parameters {showControlPanel ? "⮝" : "⮟"}
+      </button>
+      {showControlPanel && (
+        <div id="control-panel">
+
+          <label>Node Size:</label>
+          <input
+            type="range"
+            min="500"
+            max="3000"
+            value={params.nodeSize}
+            onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
+          />
+          <span>{params.nodeSize}</span>
+
+          <label>Font Size:</label>
+          <input
+            type="range"
+            min="4"
+            max="24"
+            value={params.fontSize}
+            onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
+          />
+          <span>{params.fontSize}</span>
+
+          <label>Edge Width:</label>
+          <input
+            type="range"
+            min="1"
+            max="5"
+            step="0.1"
+            value={params.edgeWidth}
+            onChange={(evt) => setParams({ ...params, edgeWidth: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
+          />
+          <span>{params.edgeWidth}</span>
+
+          <label>Arrow Size:</label>
+          <input
+            type="range"
+            min="10"
+            max="50"
+            value={params.arrowSize}
+            onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
+            onMouseUp={() => loadImage()}
+          />
+          <span>{params.arrowSize}</span>
+
+        </div>
+      )}
+      {loading ? (
+        <span className="loader"></span>
+      ) : (
+        <img src={"data:image/png;base64," + image} width="86%" />
+      )}
+    </div>
+  );
+}

src/App.css

@@ -1,5 +1,5 @@
 * {
-  border-radius: 8px;
+  border-radius: 16px;
 }
 
 body {
@@ -7,6 +7,7 @@ body {
   position: relative;
   z-index: 0;
   color: black;
+  text-align: center;
   overflow-wrap: anywhere;
   height: 100%;
 }
@@ -19,7 +20,6 @@ footer {
   max-width: 1280px;
   margin: 0 auto;
   padding: 8px;
-  text-align: center;
 }
 
 .grey {
@@ -29,7 +29,7 @@ footer {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 4px;
+  padding: 8px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -42,14 +42,37 @@ h2,
 h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 4px 16px;
+  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;
-  justify-content: space-evenly;
+  width: min(96vw, 900px);
-  min-width: 737px;
 }
 
 .dragbox {
@@ -59,6 +82,21 @@ h3 {
   height: 92%;
 }
 
+.box {
+  position: relative;
+  flex: 1;
+
+  &.one {
+    max-width: min(96%, 768px);
+    margin: 4px auto;
+  }
+
+  padding: 4px;
+  margin: 4px 0.5%;
+  border-style: solid;
+  border-color: black;
+}
+
 .reservoir {
   flex-direction: unset;
   flex-wrap: wrap;
@@ -66,29 +104,11 @@ h3 {
   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;
-  border-color: black;
-}
-
 .user {
-  max-width: 400px;
+  max-width: 240px;
-  min-width: 200px;
+  min-width: 100px;
   margin: 4px auto;
+
   .item {
     font-weight: bold;
     border-style: solid;
@@ -99,69 +119,71 @@ h3 {
   cursor: pointer;
   font-size: small;
   border: 3px dashed black;
-  border-radius: 4px;
+  border-radius: 1.2em;
   margin: 8px auto;
-  padding: 4px 8px;
+  padding: 4px 16px;
 }
 
 .extra-margin {
   padding: 0px 8px;
+  margin: auto;
 }
 
 button {
   font-weight: bold;
   font-size: large;
-  color: ghostwhite;
+  color: aliceblue;
   background-color: black;
+  border-radius: 1.2em;
   z-index: 1;
-  &:focus {
-    outline: black;
-  }
-  &:hover {
-    border-color: black;
-  }
 }
 
 @media only screen and (max-width: 768px) {
-  .container {
-    min-width: 96vw;
-  }
   .submit_text {
     display: none;
   }
+
   .submit {
     position: fixed;
     right: 16px;
     bottom: 16px;
-    padding: 0px;
+    padding: 0.4em;
-    background-color: unset;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0.3);
     font-size: xx-large;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
-    margin-right: 20px;
+    margin-right: 16px;
   }
 }
 
 ::backdrop {
-  background-image: linear-gradient(
+  background-image: linear-gradient(45deg,
-    45deg,
       magenta,
       rebeccapurple,
       dodgerblue,
-    green
+      green);
-  );
   opacity: 0.75;
 }
 
 .tablink {
-  background-color: unset;
+  color: white;
-  font-weight: unset;
-  color: black;
-  border: 2px solid black;
-  border-radius: unset;
-  outline: black;
   cursor: pointer;
-  padding: 8px 16px;
+  flex: 1;
-  width: 50%;
+  margin: 4px auto;
+}
+
+.navbar {
+  button {
+    font-size: medium;
+    margin: 4px 0.5%;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    opacity: 50%;
+
+    &:hover {
+      opacity: 75%;
+    }
+  }
 }
 
 /* Style the tab content (and add height:100% for full page content) */
@@ -182,15 +204,18 @@ button {
 .logo {
   position: relative;
   text-align: center;
-  height: 196px;
+  height: 140px;
-  margin: auto;
+  margin-bottom: 20px;
+
   img {
     display: block;
     margin: auto;
   }
+
   h3 {
     position: absolute;
-    width: 200px;
+    font-size: medium;
+    width: 140px;
     top: 33%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -211,6 +236,7 @@ button {
   border: 4px solid black;
   overflow: hidden;
 }
+
 .loader::after {
   content: "";
   width: 32%;
@@ -228,6 +254,7 @@ button {
     left: 0;
     transform: translateX(-100%);
   }
+
   100% {
     left: 100%;
     transform: translateX(0%);

src/App.tsx

@@ -1,31 +1,26 @@
-import { baseUrl } from "./api";
+import Analysis from "./Analysis";
 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 (
-    <>
+    <BrowserRouter>
-      <div className="logo">
+      <Header />
-        <a href={baseUrl}>
+      <Routes>
-          <img alt="logo" height="66%" src="logo.svg" />
+        <Route index element={<Rankings />} />
-        </a>
+        <Route path="analysis" element={<Analysis />} />
-        <h3 className="centered">cutt</h3>
+      </Routes>
-        <span className="grey">cool ultimate team tool</span>
+      <Footer />
-      </div>
+    </BrowserRouter>
-      <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>
-    </>
   );
 }
 export default App;

src/Footer.tsx

@@ -0,0 +1,14 @@
+export default function Footer() {
+        return <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>
+}

src/Header.tsx

@@ -0,0 +1,11 @@
+import { baseUrl } from "./api";
+
+export default function Header() {
+  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>
+}

src/Rankings.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
@@ -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 ...
+              drag people here that you'd rather not play with
-              ok
             </span>
           )}
           <PlayerList
@@ -145,7 +144,6 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
             setList={setPlayersLeft}
             group={"shared"}
             className="dragbox"
-            orderedList
           />
         </div>
         <div className="box three">
@@ -268,7 +266,28 @@ export function MVP({ user, players }: PlayerInfoProps) {
   );
 }
 
-function openPage(pageName: string, color: string) {
+export default function Rankings() {
+  const [user, setUser] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [openTab, setOpenTab] = useState("Chemistry");
+
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayers(data as Player[]);
+  }
+
+  useMemo(() => {
+    loadPlayers();
+  }, []);
+
+  useEffect(() => {
+    user.length === 1 && openPage(openTab, "aliceblue");
+  }, [user]);
+
+  function openPage(pageName: string, color: string) {
     // Hide all elements with class="tabcontent" by default */
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
@@ -279,10 +298,7 @@ function openPage(pageName: string, color: string) {
     tablinks = document.getElementsByClassName("tablink");
     for (i = 0; i < tablinks.length; i++) {
       let button = tablinks[i] as HTMLElement;
-    button.style.backgroundColor = "unset";
+      button.style.opacity = "50%";
-    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";
@@ -290,48 +306,31 @@ function openPage(pageName: string, color: string) {
     let activeButton = document.getElementById(
       pageName + "Button"
     ) as HTMLElement;
-  activeButton.style.textDecoration = "underline";
     activeButton.style.fontWeight = "bold";
-  activeButton.style.backgroundColor = "#3366cc";
+    activeButton.style.opacity = "100%";
-  activeButton.style.color = "white";
     document.body.style.backgroundColor = color;
-}
+    setOpenTab(pageName);
-
-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">
+          <div className="container navbar">
             <button
               className="tablink"
               id="ChemistryButton"
               onClick={() => openPage("Chemistry", "aliceblue")}
             >
-              Chemistry
+              🧪 Chemistry
             </button>
             <button
               className="tablink"
               id="MVPButton"
               onClick={() => openPage("MVP", "aliceblue")}
             >
-              MVP
+              🏆 MVP
             </button>
           </div>
 

tsconfig.node.json

@@ -2,17 +2,17 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": [
+      "ES2023"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
@@ -20,5 +20,7 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }