feat: implement login auth for all

also show the username underneath the logo

.env

@@ -1 +0,0 @@
-VITE_BASE_URL=

.env.example

@@ -0,0 +1,3 @@
+VITE_BASE_URL=
+SECRET_KEY="tg07Cp0daCpcbeeFw+lI4RG2lEuT8oq5xOwB5ETs9YaJTylG1euC4ogjTK4zym/d"
+ACCESS_TOKEN_EXPIRE_MINUTES = 30

README.md

@@ -1,3 +1,3 @@
-# cutt
+# cutt - cool ultimate team tool
 
-cool ultimate team tool
+app to survey the chemistry between the players in your team and determine the most valued players in your team

analysis.py

@@ -0,0 +1,237 @@
+from datetime import datetime
+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, MVPRanking, Player, engine
+import networkx as nx
+import numpy as np
+import matplotlib
+
+matplotlib.use("agg")
+import matplotlib.pyplot as plt
+
+
+analysis_router = APIRouter(prefix="/analysis")
+
+
+C = Chemistry
+R = MVPRanking
+P = Player
+
+
+def sociogram_json():
+    nodes = []
+    necessary_nodes = set()
+    edges = []
+    with Session(engine) as session:
+        for p in session.exec(select(P)).fetchall():
+            nodes.append({"id": p.name, "label": 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).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)
+                edges.append({"from": c.user, "to": p, "relation": "likes"})
+            for p in c.hate:
+                edges.append({"from": c.user, "to": p, "relation": "dislikes"})
+    # nodes = [n for n in nodes if n["name"] in necessary_nodes]
+    return JSONResponse({"nodes": nodes, "edges": edges})
+
+
+def graph_json():
+    nodes = []
+    edges = []
+    with Session(engine) as session:
+        for p in session.exec(select(P)).fetchall():
+            nodes.append({"id": p.name, "label": 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).join(
+            subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
+        )
+        for c in session.exec(statement2):
+            for i, p in enumerate(c.love):
+                edges.append(
+                    {
+                        "id": f"{c.user}->{p}",
+                        "source": c.user,
+                        "target": p,
+                        "size": max(1.0 - 0.1 * i, 0.3),
+                        "data": {
+                            "relation": 2,
+                            "origSize": max(1.0 - 0.1 * i, 0.3),
+                            "origFill": "#bed4ff",
+                        },
+                    }
+                )
+            for p in c.hate:
+                edges.append(
+                    {
+                        "id": f"{c.user}-x>{p}",
+                        "source": c.user,
+                        "target": p,
+                        "size": 0.3,
+                        "data": {"relation": 0, "origSize": 0.3, "origFill": "#ff7c7c"},
+                        "fill": "#ff7c7c",
+                    }
+                )
+
+    G = nx.DiGraph()
+    G.add_weighted_edges_from([(e["source"], e["target"], e["size"]) for e in edges])
+    in_degrees = G.in_degree(weight="weight")
+    nodes = [
+        dict(node, **{"data": {"inDegree": in_degrees[node["id"]]}}) for node in nodes
+    ]
+    return JSONResponse({"nodes": nodes, "edges": edges})
+
+
+def sociogram_data(show: int | None = 2):
+    G = nx.DiGraph()
+    with Session(engine) as session:
+        for p in session.exec(select(P)).fetchall():
+            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):
+            if show >= 1:
+                for i, p in enumerate(c.love):
+                    G.add_edge(c.user, p, group="love", rank=i, popularity=1 - 0.08 * i)
+            if show <= 1:
+                for i, p in enumerate(c.hate):
+                    G.add_edge(c.user, p, group="hate", rank=8, popularity=-0.16)
+    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")
+    distance: float | None = 0.2
+    weighting: bool | None = True
+    popularity: bool | None = True
+    show: int | None = 2
+
+
+ARROWSTYLE = {"love": "-|>", "hate": "-|>"}
+EDGESTYLE = {"love": "-", "hate": ":"}
+EDGECOLOR = {"love": "#404040", "hate": "#cc0000"}
+
+
+async def render_sociogram(params: 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(show=params.show)
+    pos = nx.spring_layout(G, scale=2, k=params.distance, iterations=50, seed=None)
+    nodes = nx.draw_networkx_nodes(
+        G,
+        pos,
+        node_color=[
+            v for k, v in G.in_degree(weight="popularity" if params.weighting else None)
+        ]
+        if params.popularity
+        else "#99ccff",
+        edgecolors="#404040",
+        linewidths=0,
+        # node_shape="8",
+        node_size=params.node_size,
+        cmap="coolwarm",
+        alpha=0.86,
+    )
+    if params.popularity:
+        cbar = plt.colorbar(nodes)
+        cbar.ax.set_xlabel("popularity")
+    nx.draw_networkx_labels(G, pos, font_size=params.font_size)
+    nx.draw_networkx_edges(
+        G,
+        pos,
+        arrows=True,
+        edge_color=[EDGECOLOR[G.edges()[*edge]["group"]] for edge in G.edges()],
+        arrowsize=params.arrow_size,
+        node_size=params.node_size,
+        width=params.edge_width,
+        style=[EDGESTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        arrowstyle=[ARROWSTYLE[G.edges()[*edge]["group"]] for edge in G.edges()],
+        connectionstyle="arc3,rad=0.12",
+        alpha=[1 - 0.08 * G.edges()[*edge]["rank"] for edge in G.edges()]
+        if params.weighting
+        else 1,
+    )
+
+    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}
+
+
+def mvp():
+    ranks = dict()
+    with Session(engine) as session:
+        subquery = (
+            select(R.user, func.max(R.time).label("latest"))
+            .where(R.time > datetime(2025, 2, 8))
+            .group_by(R.user)
+            .subquery()
+        )
+        statement2 = select(R).join(
+            subquery, (R.user == subquery.c.user) & (R.time == subquery.c.latest)
+        )
+        for r in session.exec(statement2):
+            for i, p in enumerate(r.mvps):
+                ranks[p] = ranks.get(p, []) + [i + 1]
+    return [
+        {
+            "name": p,
+            "rank": f"{np.mean(v):.02f}",
+            "std": f"{np.std(v):.02f}",
+            "n": len(v),
+        }
+        for p, v in ranks.items()
+    ]
+
+
+analysis_router.add_api_route("/json", endpoint=sociogram_json, methods=["GET"])
+analysis_router.add_api_route("/graph_json", endpoint=graph_json, methods=["GET"])
+analysis_router.add_api_route("/image", endpoint=render_sociogram, methods=["POST"])
+analysis_router.add_api_route("/mvp", endpoint=mvp, methods=["GET"])
+
+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)

db.py

@@ -1,10 +1,18 @@
 from datetime import datetime, timezone
-from sqlmodel import ARRAY, Column, Relationship, SQLModel, Field, create_engine, String
+from sqlmodel import (
+    ARRAY,
+    Column,
+    Relationship,
+    SQLModel,
+    Field,
+    create_engine,
+    String,
+)
 
 with open("db.secrets", "r") as f:
     db_secrets = f.readline().strip()
 
-engine = create_engine(db_secrets)
+engine = create_engine(db_secrets, connect_args={"connect_timeout": 8})
 del db_secrets
 
 
@@ -54,4 +62,14 @@ class MVPRanking(SQLModel, table=True):
     mvps: list[str] = Field(sa_column=Column(ARRAY(String)))
 
 
+class User(SQLModel, table=True):
+    username: str = Field(default=None, primary_key=True)
+    email: str | None = None
+    full_name: str | None = None
+    disabled: bool | None = None
+    hashed_password: str | None = None
+    player_id: int | None = Field(default=None, foreign_key="player.id")
+    scopes: str = ""
+
+
 SQLModel.metadata.create_all(engine)

main.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, FastAPI, status
+from fastapi import APIRouter, Depends, FastAPI, Security, status
 from fastapi.staticfiles import StaticFiles
 from db import Player, Team, Chemistry, MVPRanking, engine
 from sqlmodel import (
@@ -6,14 +6,20 @@ from sqlmodel import (
     select,
 )
 from fastapi.middleware.cors import CORSMiddleware
+from analysis import analysis_router
+from security import (
+    get_current_active_user,
+    login_for_access_token,
+    read_users_me,
+    read_own_items,
+)
 
 
 app = FastAPI(title="cutt")
+api_router = APIRouter(prefix="/api")
 origins = [
-    "*",
-    "http://localhost",
-    "http://localhost:3000",
-    "http://localhost:8000",
+    "https://cutt.0124816.xyz",
+    "http://localhost:5173",
 ]
 
 app.add_middleware(
@@ -46,7 +52,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()
 
 
@@ -58,11 +64,21 @@ def list_teams():
 
 player_router = APIRouter(prefix="/player")
 player_router.add_api_route("/list", endpoint=list_players, methods=["GET"])
-player_router.add_api_route("/add", endpoint=add_player, methods=["POST"])
+player_router.add_api_route(
+    "/add",
+    endpoint=add_player,
+    methods=["POST"],
+    dependencies=[Depends(get_current_active_user)],
+)
 
 team_router = APIRouter(prefix="/team")
 team_router.add_api_route("/list", endpoint=list_teams, methods=["GET"])
-team_router.add_api_route("/add", endpoint=add_team, methods=["POST"])
+team_router.add_api_route(
+    "/add",
+    endpoint=add_team,
+    methods=["POST"],
+    dependencies=[Depends(get_current_active_user)],
+)
 
 
 @app.post("/mvps/", status_code=status.HTTP_200_OK)
@@ -79,6 +95,22 @@ def submit_chemistry(chemistry: Chemistry):
         session.commit()
 
 
-app.include_router(player_router)
-app.include_router(team_router)
-app.mount("/", StaticFiles(directory="dist", html=True), name="site")
+class SPAStaticFiles(StaticFiles):
+    async def get_response(self, path: str, scope):
+        response = await super().get_response(path, scope)
+        if response.status_code == 404:
+            response = await super().get_response(".", scope)
+        return response
+
+
+api_router.include_router(player_router)
+api_router.include_router(team_router)
+api_router.include_router(
+    analysis_router,
+    dependencies=[Security(get_current_active_user, scopes=["analysis"])],
+)
+api_router.add_api_route("/token", endpoint=login_for_access_token, methods=["POST"])
+api_router.add_api_route("/users/me/", endpoint=read_users_me, methods=["GET"])
+api_router.add_api_route("/users/me/items/", endpoint=read_own_items, methods=["GET"])
+app.include_router(api_router)
+app.mount("/", SPAStaticFiles(directory="dist", html=True), name="site")

package.json

@@ -10,25 +10,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "d3": "^7.9.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-sortablejs": "^6.1.4",
+    "reagraph": "^4.21.2",
     "sortablejs": "^1.15.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@types/d3": "^7.4.3",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "react-router": "^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>

pyproject.toml

@@ -1,15 +1,19 @@
 [project]
 name = "cutt"
-version = "0.1.0"
-description = "Add your description here"
+version = "0.1.1"
+description = "cool ultimate team tool"
 author = "julius"
 readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [
+    "argon2-cffi>=23.1.0",
     "fastapi[standard]>=0.115.7",
     "matplotlib>=3.10.0",
     "networkx>=3.4.2",
+    "passlib>=1.7.4",
     "psycopg>=3.2.4",
+    "pydantic-settings>=2.7.1",
+    "pyjwt>=2.10.1",
     "pyqt6>=6.8.0",
     "sqlmodel>=0.0.22",
     "uvicorn>=0.34.0",

security.py

@@ -0,0 +1,164 @@
+from datetime import timedelta, timezone, datetime
+from typing import Annotated
+from fastapi import Depends, HTTPException, Response, status
+from pydantic import BaseModel, ValidationError
+import jwt
+from jwt.exceptions import InvalidTokenError
+from sqlmodel import Session, select
+from db import engine, User
+from fastapi.security import (
+    OAuth2PasswordBearer,
+    OAuth2PasswordRequestForm,
+    SecurityScopes,
+)
+from pydantic_settings import BaseSettings, SettingsConfigDict
+from passlib.context import CryptContext
+from sqlalchemy.exc import OperationalError
+
+
+class Config(BaseSettings):
+    secret_key: str = ""
+    access_token_expire_minutes: int = 30
+    model_config = SettingsConfigDict(
+        env_file=".env", env_file_encoding="utf-8", extra="ignore"
+    )
+
+
+config = Config()
+
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+
+
+class TokenData(BaseModel):
+    username: str | None = None
+    scopes: list[str] = []
+
+
+pwd_context = CryptContext(schemes=["argon2"], deprecated="auto")
+
+
+oauth2_scheme = OAuth2PasswordBearer(
+    tokenUrl="api/token",
+    scopes={
+        "analysis": "Access the results.",
+    },
+)
+
+
+def verify_password(plain_password, hashed_password):
+    return pwd_context.verify(plain_password, hashed_password)
+
+
+def get_password_hash(password):
+    return pwd_context.hash(password)
+
+
+def get_user(username: str | None):
+    if username:
+        try:
+            with Session(engine) as session:
+                return session.exec(
+                    select(User).where(User.username == username)
+                ).one_or_none()
+        except OperationalError:
+            return
+
+
+def authenticate_user(username: str, password: str):
+    user = get_user(username)
+    if not user:
+        return False
+    if not verify_password(password, user.hashed_password):
+        return False
+    return user
+
+
+def create_access_token(data: dict, expires_delta: timedelta | None = None):
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.now(timezone.utc) + expires_delta
+    else:
+        expire = datetime.now(timezone.utc) + timedelta(minutes=15)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, config.secret_key, algorithm="HS256")
+    return encoded_jwt
+
+
+async def get_current_user(
+    security_scopes: SecurityScopes, token: Annotated[str, Depends(oauth2_scheme)]
+):
+    if security_scopes.scopes:
+        authenticate_value = f'Bearer scope="{security_scopes.scope_str}"'
+    else:
+        authenticate_value = "Bearer"
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": authenticate_value},
+    )
+    try:
+        payload = jwt.decode(token, config.secret_key, algorithms=["HS256"])
+        username: str = payload.get("sub")
+        if username is None:
+            raise credentials_exception
+        token_scopes = payload.get("scopes", [])
+        token_data = TokenData(username=username, scopes=token_scopes)
+    except (InvalidTokenError, ValidationError):
+        raise credentials_exception
+    user = get_user(username=token_data.username)
+    if user is None:
+        raise credentials_exception
+    for scope in security_scopes.scopes:
+        if scope not in token_data.scopes:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Not enough permissions",
+                headers={"WWW-Authenticate": authenticate_value},
+            )
+    return user
+
+
+async def get_current_active_user(
+    current_user: Annotated[User, Depends(get_current_user)],
+):
+    if current_user.disabled:
+        raise HTTPException(status_code=400, detail="Inactive user")
+    return current_user
+
+
+async def login_for_access_token(
+    form_data: Annotated[OAuth2PasswordRequestForm, Depends()], response: Response
+) -> Token:
+    user = authenticate_user(form_data.username, form_data.password)
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Bearer"},
+        )
+    access_token_expires = timedelta(minutes=config.access_token_expire_minutes)
+    allowed_scopes = set(user.scopes.split())
+    requested_scopes = set(form_data.scopes)
+    access_token = create_access_token(
+        data={"sub": user.username, "scopes": list(allowed_scopes)},
+        expires_delta=access_token_expires,
+    )
+    response.set_cookie(
+        "Authorization", value=f"Bearer {access_token}", httponly=True, samesite="none"
+    )
+    return Token(access_token=access_token, token_type="bearer")
+
+
+async def read_users_me(
+    current_user: Annotated[User, Depends(get_current_active_user)],
+):
+    return current_user
+
+
+async def read_own_items(
+    current_user: Annotated[User, Depends(get_current_active_user)],
+):
+    return [{"item_id": "Foo", "owner": current_user.username}]

src/Analysis.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useState } from "react";
+import { apiAuth } from "./api";
+
+//const debounce = <T extends (...args: any[]) => void>(
+//  func: T,
+//  delay: number
+//): ((...args: Parameters<T>) => void) => {
+//  let timeoutId: number | null = null;
+//  return (...args: Parameters<T>) => {
+//    if (timeoutId !== null) {
+//      clearTimeout(timeoutId);
+//    }
+//    console.log(timeoutId);
+//    timeoutId = setTimeout(() => {
+//      func(...args);
+//    }, delay);
+//  };
+//};
+//
+interface Prop {
+  name: string;
+  min: string;
+  max: string;
+  step: string;
+  value: string;
+}
+
+interface Params {
+  nodeSize: number;
+  edgeWidth: number;
+  arrowSize: number;
+  fontSize: number;
+  distance: number;
+  weighting: boolean;
+  popularity: boolean;
+  show: number;
+}
+
+interface DeferredProps {
+  timeout: number;
+  func: () => void;
+}
+
+
+let timeoutID: NodeJS.Timeout | null = null;
+export default function Analysis() {
+  const [image, setImage] = useState("");
+  const [params, setParams] = useState<Params>({
+    nodeSize: 2000,
+    edgeWidth: 1,
+    arrowSize: 16,
+    fontSize: 10,
+    distance: 2,
+    weighting: true,
+    popularity: true,
+    show: 2,
+  });
+  const [showControlPanel, setShowControlPanel] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // Function to generate and fetch the graph image
+  async function loadImage() {
+    setLoading(true);
+    await apiAuth("analysis/image", params, "POST")
+      .then((data) => {
+        setImage(data.image);
+        setLoading(false);
+      }).catch((e) => {
+        console.log("best to just reload... ", e);
+      })
+  }
+
+  useEffect(() => {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+    timeoutID = setTimeout(() => {
+      loadImage();
+    }, 1000);
+  }, [params]);
+
+  function showLabel() {
+    switch (params.show) {
+      case 0: return "dislike";
+      case 1: return "both";
+      case 2: return "like";
+    }
+  }
+
+  return (
+    <div className="stack column dropdown">
+      <button onClick={() => setShowControlPanel(!showControlPanel)}>
+        Parameters <svg viewBox="0 0 24 24" height="1.2em" style={{ fill: "#ffffff", display: "inline", top: "0.2em", position: "relative", transform: showControlPanel ? "rotate(180deg)" : "unset" }} > <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" > </path></svg >
+      </button>
+      <div id="control-panel" className={showControlPanel ? "opened" : ""}>
+
+        <div className="control">
+          <datalist id="markers">
+            <option value="0"></option>
+            <option value="1"></option>
+            <option value="2"></option>
+          </datalist>
+          <div id="three-slider">
+            <label>😬</label>
+            <input
+              type="range"
+              list="markers"
+              min="0"
+              max="2"
+              step="1"
+              width="16px"
+              onChange={(evt) => setParams({ ...params, show: Number(evt.target.value) })}
+            />
+            <label>😍</label>
+          </div>
+          {showLabel()}
+        </div>
+        <div className="control">
+          <div className="checkBox">
+            <input
+              type="checkbox"
+              checked={params.weighting}
+              onChange={(evt) => setParams({ ...params, weighting: evt.target.checked })}
+            />
+            <label>weighting</label>
+          </div>
+
+          <div className="checkBox">
+            <input
+              type="checkbox"
+              checked={params.popularity}
+              onChange={(evt) => setParams({ ...params, popularity: evt.target.checked })}
+            />
+            <label>popularity</label>
+          </div>
+        </div>
+
+        <div className="control">
+          <label>distance between nodes</label>
+          <input
+            type="range"
+            min="0.01"
+            max="3.001"
+            step="0.05"
+            value={params.distance}
+            onChange={(evt) => setParams({ ...params, distance: Number(evt.target.value) })}
+          />
+          <span>{params.distance}</span></div>
+
+        <div className="control">
+          <label>node size</label>
+          <input
+            type="range"
+            min="500"
+            max="3000"
+            value={params.nodeSize}
+            onChange={(evt) => setParams({ ...params, nodeSize: Number(evt.target.value) })}
+          />
+          <span>{params.nodeSize}</span>
+        </div>
+
+        <div className="control">
+          <label>font size</label>
+          <input
+            type="range"
+            min="4"
+            max="24"
+            value={params.fontSize}
+            onChange={(evt) => setParams({ ...params, fontSize: Number(evt.target.value) })}
+          />
+          <span>{params.fontSize}</span>
+        </div>
+
+        <div className="control">
+          <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) })}
+          />
+          <span>{params.edgeWidth}</span>
+        </div>
+
+        <div className="control">
+          <label>arrow size</label>
+          <input
+            type="range"
+            min="10"
+            max="50"
+            value={params.arrowSize}
+            onChange={(evt) => setParams({ ...params, arrowSize: Number(evt.target.value) })}
+          />
+          <span>{params.arrowSize}</span>
+        </div>
+
+      </div>
+      <button onClick={() => loadImage()}>reload ↻</button>
+      {
+        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,19 +7,129 @@ body {
   position: relative;
   z-index: 0;
   color: black;
+  text-align: center;
   overflow-wrap: anywhere;
   height: 100%;
 }
 
-footer {
-  font-size: x-small;
-}
-
 #root {
   max-width: 1280px;
   margin: 0 auto;
   padding: 8px;
-  text-align: center;
+}
+
+footer {
+  margin-top: 24px;
+  font-size: x-small;
+}
+
+.fixed-footer {
+  position: absolute;
+  bottom: 4px;
+  left: 8px;
+}
+
+/*=========Network Controls=========*/
+
+.infobutton {
+  position: fixed;
+  right: 8px;
+  bottom: 8px;
+  padding: 0.4em;
+  border-radius: 1em;
+  background-color: rgba(0, 0, 0, 0.3);
+  font-size: medium;
+  margin-bottom: 16px;
+  margin-right: 16px;
+}
+
+.controls {
+  z-index: 9;
+  position: absolute;
+  top: 1vh;
+  right: 0px;
+  padding: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+
+  .control {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 240px;
+    margin: 0px;
+    background-color: #F0F8FFdd;
+
+    .slider,
+    span {
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+
+  #three-slider {
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  width: 48px;
+  height: 24px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  border-radius: 34px;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  border-radius: 50%;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: #2196F3;
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(24px);
+  -ms-transform: translateX(24px);
+  transform: translateX(24px);
 }
 
 .grey {
@@ -29,7 +139,7 @@ footer {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 4px;
+  padding: 8px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -37,19 +147,38 @@ footer {
   z-index: -1;
 }
 
+input {
+  padding: 0.2em 16px;
+  margin-bottom: 0.5em;
+}
+
 h1,
 h2,
 h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 4px 16px;
+  padding: 8px 16px;
 }
 
+.stack {
+  display: flex;
+
+  button,
+  img {
+    padding: 0px 1em 4px 1em;
+    margin: 3px auto;
+  }
+}
+
+.column {
+  flex-direction: column;
+}
+
+
 .container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-evenly;
-  min-width: 737px;
+  width: min(96vw, 900px);
 }
 
 .dragbox {
@@ -59,6 +188,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 +210,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;
-  min-width: 200px;
+  max-width: 240px;
+  min-width: 100px;
   margin: 4px auto;
+
   .item {
     font-weight: bold;
     border-style: solid;
@@ -99,69 +225,124 @@ 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 {
+button,
+.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;
+#control-panel {
+  display: none;
+  overflow: hidden;
+  margin: auto;
+  gap: 16px;
+  grid-template-columns: repeat(3, 1fr);
+  transition: display 1s ease-out 0s;
+}
+
+#control-panel.opened {
+  display: grid;
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #404040;
+  padding: 8px 16px;
+}
+
+#three-slider input {
+  margin: 4px;
+  width: 50%;
+}
+
+@media only screen and (max-width: 1000px) {
+  #control-panel {
+    grid-template-columns: repeat(2, 1fr);
   }
+
+  .control {
+    font-size: 80%;
+    margin: 0px;
+  }
+
+}
+
+
+@media only screen and (max-width: 768px) {
+  #control-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .networkroute {
+    display: none;
+  }
+
   .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.3);
     font-size: xx-large;
-    margin-bottom: 20px;
-    margin-right: 20px;
+    margin-bottom: 16px;
+    margin-right: 16px;
   }
 }
 
 ::backdrop {
-  background-image: linear-gradient(
-    45deg,
+  background-image: linear-gradient(45deg,
       magenta,
       rebeccapurple,
       dodgerblue,
-    green
-  );
+      green);
   opacity: 0.75;
 }
 
 .tablink {
-  background-color: unset;
-  font-weight: unset;
-  color: black;
-  border: 2px solid black;
-  border-radius: unset;
-  outline: black;
+  color: white;
   cursor: pointer;
-  padding: 8px 16px;
-  width: 50%;
+  flex: 1;
+  margin: 4px auto;
+}
+
+.navbar {
+  span {
+    padding: 4px;
+  }
+
+  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) */
@@ -179,18 +360,27 @@ button {
   font-size: 150%;
 }
 
+/*======LOGO=======*/
+
 .logo {
   position: relative;
   text-align: center;
-  height: 196px;
-  margin: auto;
+  height: 140px;
+
+  span {
+    display: block;
+    margin: 2px;
+  }
+
   img {
     display: block;
     margin: auto;
   }
+
   h3 {
     position: absolute;
-    width: 200px;
+    font-size: medium;
+    width: 140px;
     top: 33%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -203,6 +393,22 @@ button {
   }
 }
 
+.avatar {
+  background-color: lightsteelblue;
+  padding: 2px 8px;
+  width: fit-content;
+  margin: auto;
+}
+
+.networkroute {
+  z-index: 3;
+  position: absolute;
+  top: 24px;
+  left: 48px;
+}
+
+/*======SPINNER=======*/
+
 .loader {
   display: block;
   position: relative;
@@ -211,6 +417,7 @@ button {
   border: 4px solid black;
   overflow: hidden;
 }
+
 .loader::after {
   content: "";
   width: 32%;
@@ -228,6 +435,7 @@ button {
     left: 0;
     transform: translateX(-100%);
   }
+
   100% {
     left: 100%;
     transform: translateX(0%);

src/App.tsx

@@ -1,31 +1,28 @@
-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";
+import { SessionProvider } from "./Session";
+import { GraphComponent } from "./Network";
+import MVPChart from "./MVPChart";
+import Avatar from "./Avatar";
 
 function App() {
   return (
-    <>
-      <div className="logo">
-        <a href={baseUrl}>
-          <img alt="logo" height="66%" src="logo.svg" />
-        </a>
-        <h3 className="centered">cutt</h3>
-        <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>
+      <SessionProvider>
+        <Header />
+        <Routes>
+          <Route index element={<Rankings />} />
+          <Route path="/network" element={<GraphComponent />} />
+          <Route path="/analysis" element={<Analysis />} />
+          <Route path="/mvp" element={<MVPChart />} />
+        </Routes>
+        <Footer />
+      </SessionProvider>
+    </BrowserRouter>
   );
 }
 export default App;

src/Avatar.tsx

@@ -0,0 +1,99 @@
+import { MouseEventHandler, useEffect, useState } from "react";
+import { useSession } from "./Session";
+import { logout } from "./api";
+
+interface ContextMenuItem {
+  label: string;
+  onClick: () => void;
+}
+
+export default function Avatar() {
+  const { user, onLogout } = useSession();
+  const [contextMenu, setContextMenu] = useState<{
+    open: boolean;
+    mouseX: number;
+    mouseY: number;
+  }>({ open: false, mouseX: 0, mouseY: 0 });
+
+  const contextMenuItems: ContextMenuItem[] = [
+    { label: "View Profile", onClick: () => console.log("View Profile") },
+    { label: "Edit Profile", onClick: () => console.log("Edit Profile") },
+    { label: "Logout", onClick: onLogout },
+  ];
+
+  const handleMenuClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    event.preventDefault();
+    setContextMenu({
+      open: !contextMenu.open,
+      mouseX: event.clientX + 4,
+      mouseY: event.clientY + 2,
+    });
+  };
+  useEffect(() => {
+    if (contextMenu.open) {
+      document.addEventListener("click", handleCloseContextMenuOutside);
+    }
+    return () => {
+      document.removeEventListener("click", handleCloseContextMenuOutside);
+    };
+  }, [contextMenu.open]);
+
+  const handleMenuClose = () => {
+    setContextMenu({ ...contextMenu, open: false });
+  };
+  const handleCloseContextMenuOutside: MouseEventHandler<Document> = (
+    event
+  ) => {
+    if (
+      !event.target ||
+      (!(event.target as Element).closest(".context-menu") &&
+        !(event.target as Element).closest(".avatar"))
+    ) {
+      handleMenuClose();
+    }
+  };
+
+  return (
+    <div
+      className="avatar"
+      onContextMenu={handleMenuClick}
+      style={{ display: user ? "block" : "none" }}
+      onClick={handleMenuClick}
+    >
+      {user?.username}
+      {contextMenu.open && (
+        <ul
+          className="context-menu"
+          style={{
+            zIndex: 3,
+            position: "absolute",
+            top: contextMenu.mouseY,
+            left: contextMenu.mouseX,
+            background: "white",
+            border: "1px solid #ddd",
+            padding: 0,
+            margin: 0,
+            listStyle: "none",
+          }}
+        >
+          {contextMenuItems.map((item, index) => (
+            <li
+              key={index}
+              style={{
+                padding: "10px",
+                borderBottom: "1px solid #ddd",
+                cursor: "pointer",
+              }}
+              onClick={() => {
+                item.onClick();
+                handleMenuClose();
+              }}
+            >
+              {item.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

src/BarChart.tsx

@@ -0,0 +1,95 @@
+import { FC } from 'react';
+import { PlayerRanking } from './types';
+
+interface BarChartProps {
+  players: PlayerRanking[];
+  width: number;
+  height: number;
+  std: boolean;
+}
+
+const BarChart: FC<BarChartProps> = ({ players, width, height, std }) => {
+  const padding = 24;
+  const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
+  const barWidth = (width - 2 * padding) / players.length;
+
+  return (
+    <svg width={width} height={height}>
+
+      {players.map((player, index) => (
+        <rect
+          key={index}
+          x={index * barWidth + padding}
+          y={height - (1 - player.rank / maxValue) * height}
+          width={barWidth - 8} // subtract 2 for some spacing between bars
+          height={(1 - player.rank / maxValue) * height}
+          fill="#69f"
+        />
+      ))}
+
+      {players.map((player, index) => (
+        <text
+          key={index}
+          x={index * barWidth + barWidth / 2 - 4 + padding}
+          y={height - (1 - player.rank / maxValue) * height - 5}
+          textAnchor="middle"
+          //transform='rotate(-27)'
+          //style={{ transformOrigin: "center", transformBox: "fill-box" }}
+          fontSize="16px"
+          fill="#404040"
+        >
+          {player.name}
+        </text>
+      ))}
+
+      {players.map((player, index) => (
+        <text
+          key={index}
+          x={index * barWidth + barWidth / 2 + padding - 4}
+          y={height - 8}
+          textAnchor="middle"
+          fontSize="12px"
+          fill="#404040"
+        >
+          {player.rank}
+        </text>
+      ))}
+
+      {std && players.map((player, index) => (
+        <line
+          key={`error-${index}`}
+          x1={index * barWidth + barWidth / 2 + padding}
+          y1={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
+          x2={index * barWidth + barWidth / 2 + padding}
+          y2={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
+          stroke="#ff0000"
+          strokeWidth="1"
+        />
+      ))}
+      {std && players.map((player, index) => (
+        <line
+          key={`cap-${index}-top`}
+          x1={index * barWidth + barWidth / 2 - 2 + padding}
+          y1={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
+          x2={index * barWidth + barWidth / 2 + 2 + padding}
+          y2={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
+          stroke="#ff0000"
+          strokeWidth="1"
+        />
+      ))}
+      {std && players.map((player, index) => (
+        <line
+          key={`cap-${index}-bottom`}
+          x1={index * barWidth + barWidth / 2 - 2 + padding}
+          y1={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
+          x2={index * barWidth + barWidth / 2 + 2 + padding}
+          y2={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
+          stroke="#ff0000"
+          strokeWidth="1"
+        />
+      ))}
+    </svg>
+  );
+};
+
+export default BarChart;

src/Footer.tsx

@@ -0,0 +1,33 @@
+import { useLocation } from "react-router";
+import { Link } from "react-router";
+
+export default function Footer() {
+  const location = useLocation();
+  return (
+    <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
+      <div className="navbar">
+        <Link to="/">
+          <span>Form</span>
+        </Link>
+        <span>|</span>
+        <Link to="/network">
+          <span>Trainer Analysis</span>
+        </Link>
+        <span>|</span>
+        <Link to="/mvp">
+          <span>MVP</span>
+        </Link>
+      </div>
+      <p className="grey extra-margin">
+        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,18 @@
+import { Link, useLocation } from "react-router";
+import Avatar from "./Avatar";
+
+export default function Header() {
+  const location = useLocation();
+  return (
+    <div className={location.pathname === "/network" ? "networkroute" : ""}>
+      <div className="logo">
+        <Link to="/">
+          <img alt="logo" height="66%" src="logo.svg" />
+          <h3 className="centered">cutt</h3>
+        </Link>
+        <span className="grey">cool ultimate team tool</span>
+      </div>
+      <Avatar />
+    </div>
+  );
+}

src/Login.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { currentUser, login, User } from "./api";
+import Header from "./Header";
+
+export interface LoginProps {
+  onLogin: (user: User) => void;
+}
+
+export const Login = ({ onLogin }: LoginProps) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function doLogin() {
+    setLoading(true);
+    setError(null);
+    const timeout = new Promise((r) => setTimeout(r, 1000));
+    let user: User;
+    try {
+      await login({ username, password });
+      user = await currentUser();
+    } catch (e) {
+      await timeout;
+      setError(e);
+      setLoading(false);
+      return;
+    }
+    await timeout;
+    onLogin(user);
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    doLogin();
+  }
+
+  return (
+    <>
+      <Header />
+      <form onSubmit={handleSubmit}>
+        <div>
+          <input
+            type="text"
+            id="username"
+            name="username"
+            placeholder="username"
+            required
+            value={username}
+            onChange={(evt) => setUsername(evt.target.value)}
+          />
+        </div>
+        <div>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="password"
+            minLength={8}
+            value={password}
+            required
+            onChange={(evt) => setPassword(evt.target.value)}
+          />
+        </div>
+        <button type="submit" value="login" style={{ fontSize: "small" }}>
+          login
+        </button>
+        {loading && <span className="loader" />}
+      </form>
+    </>
+  );
+};

src/MVPChart.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { apiAuth } from "./api";
+import BarChart from "./BarChart";
+import { PlayerRanking } from "./types";
+import RaceChart from "./RaceChart";
+
+
+const MVPChart = () => {
+  const [data, setData] = useState({} as PlayerRanking[]);
+  const [loading, setLoading] = useState(true);
+  const [showStd, setShowStd] = useState(false);
+
+  async function loadData() {
+    setLoading(true);
+    await apiAuth("analysis/mvp", null)
+      .then(json => json as Promise<PlayerRanking[]>).then(json => { setData(json.sort((a, b) => a.rank - b.rank)) })
+    setLoading(false);
+  }
+
+  useEffect(() => { loadData() }, [])
+
+  return (
+    <>
+      {loading ? <span className="loader" /> : <RaceChart std={showStd} players={data} />
+      }
+    </>)
+}
+
+export default MVPChart;

src/Network.tsx

@@ -0,0 +1,276 @@
+import { useEffect, useRef, useState } from "react";
+import { apiAuth } from "./api";
+import {
+  GraphCanvas,
+  GraphCanvasRef,
+  GraphEdge,
+  GraphNode,
+  SelectionProps,
+  SelectionResult,
+  useSelection,
+} from "reagraph";
+import { customTheme } from "./NetworkTheme";
+
+interface NetworkData {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}
+interface CustomSelectionProps extends SelectionProps {
+  ignore: (GraphEdge | undefined)[];
+}
+
+const useCustomSelection = (props: CustomSelectionProps): SelectionResult => {
+  var result = useSelection(props);
+  result.actives = result.actives.filter(
+    (s) => !props.ignore.map((edge) => edge?.id).includes(s)
+  );
+  const ignored_nodes = props.ignore.map((edge) =>
+    edge &&
+    result.selections?.includes(edge.source) &&
+    !result.selections?.includes(edge.target)
+      ? edge.target
+      : ""
+  );
+  result.actives = result.actives.filter((s) => !ignored_nodes.includes(s));
+  return result;
+};
+
+export const GraphComponent = () => {
+  const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
+  const [loading, setLoading] = useState(true);
+  const [threed, setThreed] = useState(false);
+  const [likes, setLikes] = useState(2);
+  const [popularity, setPopularity] = useState(false);
+  const [mutuality, setMutuality] = useState(false);
+
+  async function loadData() {
+    setLoading(true);
+    await apiAuth("analysis/graph_json", null)
+      .then((json) => json as Promise<NetworkData>)
+      .then((json) => {
+        setData(json);
+      });
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const graphRef = useRef<GraphCanvasRef | null>(null);
+
+  function handleThreed() {
+    setThreed(!threed);
+    graphRef.current?.fitNodesInView();
+    graphRef.current?.centerGraph();
+    graphRef.current?.resetControls();
+  }
+
+  function handlePopularity() {
+    setPopularity(!popularity);
+  }
+
+  function handleMutuality() {
+    colorMatches(!mutuality);
+    setMutuality(!mutuality);
+  }
+
+  function showLabel() {
+    switch (likes) {
+      case 0:
+        return "dislike";
+      case 1:
+        return "both";
+      case 2:
+        return "like";
+    }
+  }
+
+  function findMatches(edges: GraphEdge[]) {
+    const adjacencyList = edges.map(
+      (edge) => edge.source + edge.target + edge.data.relation
+    );
+    return edges.filter((edge) =>
+      adjacencyList.includes(edge.target + edge.source + edge.data.relation)
+    );
+  }
+  //const matches = useMemo(() => findMatches(data.edges), [])
+
+  function colorMatches(mutuality: boolean) {
+    const matches = findMatches(data.edges);
+    const newEdges = data.edges;
+    if (mutuality) {
+      newEdges.forEach((edge) => {
+        if (
+          (likes === 1 || edge.data.relation === likes) &&
+          matches.map((edge) => edge.id).includes(edge.id)
+        ) {
+          edge.fill = "#9c3";
+          if (edge.size) edge.size = edge.size * 1.5;
+        }
+      });
+    } else {
+      newEdges.forEach((edge) => {
+        if (
+          (likes === 1 || edge.data.relation === likes) &&
+          matches.map((edge) => edge.id).includes(edge.id)
+        ) {
+          edge.fill = edge.data.origFill;
+          edge.size = edge.data.origSize;
+        }
+      });
+    }
+    setData({ nodes: data.nodes, edges: newEdges });
+  }
+  useEffect(() => {
+    if (mutuality) colorMatches(false);
+    colorMatches(mutuality);
+  }, [likes]);
+
+  const {
+    selections,
+    actives,
+    onNodeClick,
+    onCanvasClick,
+    onNodePointerOver,
+    onNodePointerOut,
+  } = useCustomSelection({
+    ref: graphRef,
+    nodes: data.nodes,
+    edges: data.edges.filter((edge) => edge.data.relation === likes),
+    ignore: data.edges.map((edge) => {
+      if (likes === 1 && edge.data.relation !== 2) return edge;
+    }),
+    pathSelectionType: "out",
+    pathHoverType: "in",
+    type: "multiModifier",
+  });
+
+  return (
+    <div style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}>
+      <div className="controls">
+        <div className="control" onClick={handleMutuality}>
+          <div className="switch">
+            <input type="checkbox" checked={mutuality} />
+            <span className="slider round"></span>
+          </div>
+          <span>mutuality</span>
+        </div>
+
+        <div className="control" onClick={handleThreed}>
+          <span>2D</span>
+          <div className="switch">
+            <input type="checkbox" checked={threed} />
+            <span className="slider round"></span>
+          </div>
+          <span>3D</span>
+        </div>
+
+        <div className="control">
+          <div className="stack column">
+            <datalist id="markers">
+              <option value="0"></option>
+              <option value="1"></option>
+              <option value="2"></option>
+            </datalist>
+            <div id="three-slider">
+              <label>😬</label>
+              <input
+                type="range"
+                list="markers"
+                min="0"
+                max="2"
+                step="1"
+                width="16px"
+                onChange={(evt) => setLikes(Number(evt.target.value))}
+              />
+              <label>😍</label>
+            </div>
+            {showLabel()}
+          </div>
+        </div>
+
+        <div className="control" onClick={handlePopularity}>
+          <div className="switch">
+            <input type="checkbox" checked={popularity} />
+            <span className="slider round"></span>
+          </div>
+          <span>
+            popularity<sup>*</sup>
+          </span>
+        </div>
+      </div>
+
+      {popularity && (
+        <div
+          style={{ position: "absolute", bottom: 0, right: "10px", zIndex: 10 }}
+        >
+          <span className="grey" style={{ fontSize: "70%" }}>
+            <sup>*</sup>popularity meassured by rank-weighted in-degree
+          </span>
+        </div>
+      )}
+
+      {loading ? (
+        <span className="loader" />
+      ) : (
+        <GraphCanvas
+          draggable
+          cameraMode={threed ? "rotate" : "pan"}
+          layoutType={threed ? "forceDirected3d" : "forceDirected2d"}
+          layoutOverrides={{
+            nodeStrength: -200,
+            linkDistance: 100,
+          }}
+          labelType="nodes"
+          sizingType="attribute"
+          sizingAttribute={popularity ? "inDegree" : undefined}
+          ref={graphRef}
+          theme={customTheme}
+          nodes={data.nodes}
+          edges={data.edges.filter(
+            (edge) => edge.data.relation === likes || likes === 1
+          )}
+          selections={selections}
+          actives={actives}
+          onCanvasClick={onCanvasClick}
+          onNodeClick={onNodeClick}
+          onNodePointerOut={onNodePointerOut}
+          onNodePointerOver={onNodePointerOver}
+        />
+      )}
+      <button
+        className="infobutton"
+        onClick={() => {
+          const dialog = document.querySelector("dialog[id='InfoDialog']");
+          (dialog as HTMLDialogElement).showModal();
+        }}
+      >
+        info
+      </button>
+
+      <dialog
+        id="InfoDialog"
+        style={{ textAlign: "left" }}
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
+      >
+        scroll to zoom
+        <br />
+        <br />
+        <b>hover</b>: show inbound links
+        <br />
+        <b>click</b>: show outward links
+        <br />
+        <br />
+        multi-selection possible
+        <br />
+        with <i>Ctrl</i> or <i>Shift</i>
+        <br />
+        <br />
+        drag to pan/rotate
+      </dialog>
+    </div>
+  );
+};

src/NetworkTheme.tsx

@@ -0,0 +1,59 @@
+import { Theme } from "reagraph";
+
+export const customTheme: Theme = {
+  canvas: {
+    background: 'aliceblue',
+  },
+  node: {
+    fill: '#69F',
+    activeFill: '#36C',
+    opacity: 1,
+    selectedOpacity: 1,
+    inactiveOpacity: 0.333,
+    label: {
+      color: '#404040',
+      stroke: 'white',
+      activeColor: 'black'
+    },
+    subLabel: {
+      color: '#ddd',
+      stroke: 'transparent',
+      activeColor: '#1DE9AC'
+    }
+  },
+  lasso: {
+    border: '1px solid #55aaff',
+    background: 'rgba(75, 160, 255, 0.1)'
+  },
+  ring: {
+    fill: '#69F',
+    activeFill: '#36C'
+  },
+  edge: {
+    fill: '#bed4ff',
+    activeFill: '#36C',
+    opacity: 1,
+    selectedOpacity: 1,
+    inactiveOpacity: 0.333,
+    label: {
+      stroke: '#fff',
+      color: '#2A6475',
+      activeColor: '#1DE9AC',
+      fontSize: 6
+    }
+  },
+  arrow: {
+    fill: '#bed4ff',
+    activeFill: '#36C'
+  },
+  cluster: {
+    stroke: '#D8E6EA',
+    opacity: 1,
+    selectedOpacity: 1,
+    inactiveOpacity: 0.1,
+    label: {
+      stroke: '#fff',
+      color: '#2A6475'
+    }
+  }
+};

src/RaceChart.tsx

@@ -0,0 +1,99 @@
+import { FC, useEffect, useState } from "react";
+import { PlayerRanking } from "./types";
+import { useSession } from "./Session";
+
+interface RaceChartProps {
+  players: PlayerRanking[];
+  std: boolean;
+}
+
+const determineNiceWidth = (width: number) => {
+  const max = 1080;
+  if (width >= max) return max;
+  else if (width > 768) return width * 0.8;
+  else return width * 0.96;
+};
+
+const RaceChart: FC<RaceChartProps> = ({ players, std }) => {
+  // State to store window's width and height
+  const [width, setWidth] = useState(determineNiceWidth(window.innerWidth));
+  //const [height, setHeight] = useState(window.innerHeight);
+  const height = players.length * 40;
+
+  // Update state on  resize
+  useEffect(() => {
+    const handleResize = () => {
+      setWidth(determineNiceWidth(window.innerWidth));
+      //setHeight(window.innerHeight);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  const padding = 24;
+  const gap = 8;
+  const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
+  const barHeight = (height - 2 * padding) / players.length;
+  const fontSize = Math.min(barHeight - 1.5 * gap, width / 22);
+
+  return (
+    <svg width={width} height={height} id="RaceChartSVG">
+      {players.map((player, index) => (
+        <rect
+          key={String(index)}
+          x={0}
+          y={index * barHeight + padding}
+          width={(1 - player.rank / maxValue) * width}
+          height={barHeight - gap} // subtract 2 for some spacing between bars
+          fill="#36c"
+        />
+      ))}
+
+      {players.map((player, index) => (
+        <g key={"group" + index}>
+          <text
+            key={index + "_name"}
+            x={4}
+            y={index * barHeight + barHeight / 2 + padding + gap / 2}
+            width={(1 - player.rank / maxValue) * width}
+            height={barHeight - 8} // subtract 2 for some spacing between bars
+            fontSize={fontSize}
+            fill="aliceblue"
+            stroke="#36c"
+            strokeWidth={4}
+            fontWeight={"bold"}
+            paintOrder={"stroke fill"}
+            fontFamily="monospace"
+            style={{ whiteSpace: "pre" }}
+          >
+            {`${String(index + 1).padStart(2)}. ${player.name}`}
+          </text>
+          <text
+            key={index + "_value"}
+            x={
+              4 +
+              (4 + Math.max(...players.map((p, _) => p.name.length))) *
+                fontSize *
+                0.66
+            }
+            y={index * barHeight + barHeight / 2 + padding + gap / 2}
+            width={(1 - player.rank / maxValue) * width}
+            height={barHeight - 8} // subtract 2 for some spacing between bars
+            fontSize={0.8 * fontSize}
+            fill="aliceblue"
+            stroke="#36c"
+            fontWeight={"bold"}
+            fontFamily="monospace"
+            strokeWidth={4}
+            paintOrder={"stroke fill"}
+            style={{ whiteSpace: "pre" }}
+          >
+            {`${String(player.rank).padStart(5)} ± ${player.std}   N = ${player.n}`}
+          </text>
+        </g>
+      ))}
+    </svg>
+  );
+};
+export default RaceChart;

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 ...
-              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">
@@ -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}api/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.textDecoration = "unset";
-    button.style.fontWeight = "unset";
-    button.style.color = "unset";
+      button.style.opacity = "50%";
     }
     // Show the specific tab content
     (document.getElementById(pageName) as HTMLElement).style.display = "block";
@@ -290,51 +306,37 @@ 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.color = "white";
+    activeButton.style.opacity = "100%";
     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[]);
+    setOpenTab(pageName);
   }
 
-  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>
 
+          <span className="grey">assign as many or as few players as you want<br />
+            and don't forget to <b>submit</b> (💾) when you're done :)</span>
+
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />
           </div>

src/Session.tsx

@@ -0,0 +1,98 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { currentUser, logout, User } from "./api";
+import { Login } from "./Login";
+import Header from "./Header";
+
+export interface SessionProviderProps {
+  children: ReactNode;
+}
+
+export interface Session {
+  user: User | null;
+  onLogout: () => void;
+}
+
+const sessionContext = createContext<Session>({
+  user: null,
+  onLogout: () => {},
+});
+
+export function SessionProvider(props: SessionProviderProps) {
+  const { children } = props;
+
+  const [user, setUser] = useState<User | null>(null);
+  const [err, setErr] = useState<unknown>(null);
+  const [loading, setLoading] = useState(false);
+
+  function loadUser() {
+    setLoading(true);
+    currentUser()
+      .then((user) => {
+        setUser(user);
+        setErr(null);
+      })
+      .catch((err) => {
+        setUser(null);
+        setErr(err);
+      })
+      .finally(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  function onLogin(user: User) {
+    setUser(user);
+    setErr(null);
+  }
+
+  async function onLogout() {
+    try {
+      logout();
+      setUser(null);
+      setErr({ message: "Logged out successfully" });
+      console.log("logged out.");
+      setLoading(true); // Set loading to true
+      loadUser();
+    } catch (e) {
+      console.error(e);
+      setErr(e); // Update the error state if logout fails
+    }
+  }
+  console.log("sanity", user);
+
+  let content: ReactNode;
+  if (loading || (!err && !user))
+    content = (
+      <>
+        <Header />
+        <span className="loader" />
+      </>
+    );
+  else if (err) {
+    if ((err as any).message === "Logged out successfully") {
+      setTimeout(() => setErr(null), 1000);
+      content = <Login onLogin={onLogin} />;
+    } else {
+      content = <Login onLogin={onLogin} />;
+    }
+  } else
+    content = (
+      <sessionContext.Provider value={{ user, onLogout }}>
+        {children}
+      </sessionContext.Provider>
+    );
+
+  return content;
+}
+
+export function useSession() {
+  return useContext(sessionContext);
+}

src/api.ts

@@ -1,4 +1,6 @@
 export const baseUrl = import.meta.env.VITE_BASE_URL as string;
+export const token = () => localStorage.getItem("access_token") as string;
+
 export default async function api(path: string, data: any): Promise<any> {
   const request = new Request(`${baseUrl}${path}/`, {
     method: "POST",
@@ -15,3 +17,100 @@ export default async function api(path: string, data: any): Promise<any> {
   }
   return response;
 }
+
+export async function apiAuth(
+  path: string,
+  data: any,
+  method: string = "GET"
+): Promise<any> {
+  const req = new Request(`${baseUrl}api/${path}`, {
+    method: method,
+    headers: {
+      Authorization: `Bearer ${token()} `,
+      "Content-Type": "application/json",
+    },
+    ...(data && { body: JSON.stringify(data) }),
+  });
+  let resp: Response;
+  try {
+    resp = await fetch(req);
+  } catch (e) {
+    throw new Error(`request failed: ${e}`);
+  }
+
+  if (!resp.ok) {
+    if (resp.status === 401) {
+      logout();
+      throw new Error("Unauthorized");
+    }
+  }
+  return resp.json();
+}
+
+export type User = {
+  username: string;
+  full_name: string;
+  email: string;
+  player_id: number;
+};
+
+export async function currentUser(): Promise<User> {
+  if (!token()) throw new Error("you have no access token");
+  const req = new Request(`${baseUrl}api/users/me/`, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token()} `,
+      "Content-Type": "application/json",
+    },
+  });
+  let resp: Response;
+  try {
+    resp = await fetch(req);
+  } catch (e) {
+    throw new Error(`request failed: ${e}`);
+  }
+
+  if (!resp.ok) {
+    if (resp.status === 401) {
+      logout();
+      throw new Error("Unauthorized");
+    }
+  }
+  return resp.json() as Promise<User>;
+}
+
+export type LoginRequest = {
+  username: string;
+  password: string;
+};
+export type Token = {
+  access_token: string;
+  token_type: string;
+};
+
+// api.js
+export const login = async (req: LoginRequest): Promise<void> => {
+  try {
+    const response = await fetch(`${baseUrl}api/token`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams(req).toString(),
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const token = (await response.json()) as Token;
+    if (token && token.access_token) {
+      localStorage.setItem("access_token", token.access_token);
+    } else {
+      console.log("Token not acquired");
+    }
+  } catch (e) {
+    console.error(e);
+    throw e; // rethrow the error so it can be caught by the caller
+  }
+};
+
+export const logout = () => localStorage.removeItem("access_token");

src/types.ts

@@ -0,0 +1,20 @@
+export interface Edge {
+  from: string;
+  to: string;
+  color: string;
+  relation: "likes" | "dislikes";
+}
+export interface Node {
+  id: string;
+}
+export default interface NetworkData {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+export interface PlayerRanking {
+  name: string;
+  rank: number;
+  std: number;
+  n: number;
+}

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"
+  ]
 }