.env

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

.env.example

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

README.md

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

analysis.py

@@ -1,204 +0,0 @@
-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, 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()
-    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},
-                    }
-                )
-            for p in c.hate:
-                edges.append(
-                    {
-                        "id": f"{c.user}-x>{p}",
-                        "source": c.user,
-                        "target": p,
-                        "size": 0.3,
-                        "data": {"relation": 0},
-                        "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}
-
-
-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"])
-
-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,18 +1,10 @@
 from datetime import datetime, timezone
-from sqlmodel import (
+from sqlmodel import ARRAY, Column, Relationship, SQLModel, Field, create_engine, String
-    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, connect_args={"connect_timeout": 8})
+engine = create_engine(db_secrets)
 del db_secrets
 
 
@@ -62,13 +54,4 @@ 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")
-
-
 SQLModel.metadata.create_all(engine)

main.py

@@ -1,4 +1,4 @@
-from fastapi import APIRouter, Depends, FastAPI, status
+from fastapi import APIRouter, FastAPI, status
 from fastapi.staticfiles import StaticFiles
 from db import Player, Team, Chemistry, MVPRanking, engine
 from sqlmodel import (
@@ -6,17 +6,9 @@ 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",
@@ -54,7 +46,7 @@ def add_players(players: list[Player]):
 
 def list_players():
     with Session(engine) as session:
-        statement = select(Player).order_by(Player.name)
+        statement = select(Player)
         return session.exec(statement).fetchall()
 
 
@@ -87,21 +79,6 @@ def submit_chemistry(chemistry: Chemistry):
         session.commit()
 
 
-class SPAStaticFiles(StaticFiles):
+app.include_router(player_router)
-    async def get_response(self, path: str, scope):
+app.include_router(team_router)
-        response = await super().get_response(path, scope)
+app.mount("/", StaticFiles(directory="dist", html=True), name="site")
-        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=[Depends(get_current_active_user)]
-)
-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,14 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "d3": "^7.9.0",
     "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/sortablejs": "^1.15.8",
@@ -26,14 +27,8 @@
     "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

@@ -1,41 +0,0 @@
-<?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,19 +1,15 @@
 [project]
 name = "cutt"
-version = "0.1.1"
+version = "0.1.0"
-description = "cool ultimate team tool"
+description = "Add your description here"
 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

@@ -1,137 +0,0 @@
-from datetime import timedelta, timezone, datetime
-from typing import Annotated
-from fastapi import Depends, HTTPException, Response, status
-from pydantic import BaseModel
-import jwt
-from jwt.exceptions import InvalidTokenError
-from sqlmodel import Session, select
-from db import engine, User
-from fastapi.security import OAuth2PasswordBearer, OAuth2PasswordRequestForm
-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
-
-
-pwd_context = CryptContext(schemes=["argon2"], deprecated="auto")
-
-
-oauth2_scheme = OAuth2PasswordBearer(tokenUrl="api/token")
-
-
-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(token: Annotated[str, Depends(oauth2_scheme)]):
-    credentials_exception = HTTPException(
-        status_code=status.HTTP_401_UNAUTHORIZED,
-        detail="Could not validate credentials",
-        headers={"WWW-Authenticate": "Bearer"},
-    )
-    try:
-        payload = jwt.decode(token, config.secret_key, algorithms=["HS256"])
-        username: str = payload.get("sub")
-        if username is None:
-            raise credentials_exception
-        token_data = TokenData(username=username)
-    except InvalidTokenError:
-        raise credentials_exception
-    user = get_user(username=token_data.username)
-    if user is None:
-        raise credentials_exception
-    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)
-    access_token = create_access_token(
-        data={"sub": user.username}, 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

@@ -1,210 +0,0 @@
-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: number | 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: 16px;
+  border-radius: 8px;
 }
 
 body {
@@ -7,102 +7,19 @@ 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;
-}
-
-/*=========Network Controls=========*/
-
-.controls {
-  z-index: 9;
-  position: absolute;
-  width: 240px;
-  right: 24px;
-  top: 1vh;
-  padding: 16px;
-
-  .control {
-    display: flex;
-    flex-direction: row;
-    margin: 4px 2px;
-    background-color: aliceblue;
-
-    * {
-      margin: 4px;
-    }
-  }
-
-  #three-slider {
-    display: flex;
-    flex-direction: row;
-  }
-}
-
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  width: 68px;
-  height: 42px;
-}
-
-/* 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: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  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(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
 }
 
 .grey {
@@ -112,7 +29,7 @@ input:checked+.slider:before {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 8px;
+  padding: 4px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -120,38 +37,19 @@ input:checked+.slider:before {
   z-index: -1;
 }
 
-input {
-  padding: 0.2em 16px;
-  margin-bottom: 0.5em;
-}
-
 h1,
 h2,
 h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 8px 16px;
+  padding: 4px 16px;
 }
 
-.stack {
-  display: flex;
-
-  button,
-  img {
-    padding: 0px 1em 4px 1em;
-    margin: 3px auto;
-  }
-}
-
-.column {
-  flex-direction: column;
-}
-
-
 .container {
   display: flex;
   flex-wrap: nowrap;
-  width: min(96vw, 900px);
+  justify-content: space-evenly;
+  min-width: 737px;
 }
 
 .dragbox {
@@ -161,21 +59,6 @@ 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;
@@ -183,11 +66,29 @@ h3 {
   width: 100%;
 }
 
-.user {
+.box {
-  max-width: 240px;
+  position: relative;
-  min-width: 100px;
+  &.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;
+  margin: 4px auto;
   .item {
     font-weight: bold;
     border-style: solid;
@@ -198,124 +99,69 @@ h3 {
   cursor: pointer;
   font-size: small;
   border: 3px dashed black;
-  border-radius: 1.2em;
+  border-radius: 4px;
   margin: 8px auto;
-  padding: 4px 16px;
+  padding: 4px 8px;
 }
 
 .extra-margin {
   padding: 0px 8px;
-  margin: auto;
 }
 
-button,
+button {
-.button {
   font-weight: bold;
   font-size: large;
-  color: aliceblue;
+  color: ghostwhite;
   background-color: black;
-  border-radius: 1.2em;
   z-index: 1;
-}
+  &:focus {
-
+    outline: black;
-#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);
   }
-
+  &:hover {
-  .control {
+    border-color: black;
-    font-size: 80%;
-    margin: 0px;
   }
-
 }
 
-
 @media only screen and (max-width: 768px) {
-  #control-panel {
+  .container {
-    grid-template-columns: 1fr;
+    min-width: 96vw;
   }
-
-  .networkroute {
-    display: none;
-  }
-
   .submit_text {
     display: none;
   }
-
   .submit {
     position: fixed;
     right: 16px;
     bottom: 16px;
-    padding: 0.4em;
+    padding: 0px;
-    border-radius: 1em;
+    background-color: unset;
-    background-color: rgba(0, 0, 0, 0.3);
     font-size: xx-large;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
-    margin-right: 16px;
+    margin-right: 20px;
   }
 }
 
 ::backdrop {
-  background-image: linear-gradient(45deg,
+  background-image: linear-gradient(
+    45deg,
     magenta,
     rebeccapurple,
     dodgerblue,
-      green);
+    green
+  );
   opacity: 0.75;
 }
 
 .tablink {
-  color: white;
+  background-color: unset;
+  font-weight: unset;
+  color: black;
+  border: 2px solid black;
+  border-radius: unset;
+  outline: black;
   cursor: pointer;
-  flex: 1;
+  padding: 8px 16px;
-  margin: 4px auto;
+  width: 50%;
-}
-
-.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) */
@@ -333,23 +179,18 @@ button,
   font-size: 150%;
 }
 
-/*======LOGO=======*/
-
 .logo {
   position: relative;
   text-align: center;
-  height: 140px;
+  height: 196px;
-  margin-bottom: 20px;
+  margin: auto;
-
   img {
     display: block;
     margin: auto;
   }
-
   h3 {
     position: absolute;
-    font-size: medium;
+    width: 200px;
-    width: 140px;
     top: 33%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -362,15 +203,6 @@ button,
   }
 }
 
-.networkroute {
-  z-index: 10;
-  position: absolute;
-  top: 24px;
-  left: 48px;
-}
-
-/*======SPINNER=======*/
-
 .loader {
   display: block;
   position: relative;
@@ -379,7 +211,6 @@ button,
   border: 4px solid black;
   overflow: hidden;
 }
-
 .loader::after {
   content: "";
   width: 32%;
@@ -397,7 +228,6 @@ button,
     left: 0;
     transform: translateX(-100%);
   }
-
   100% {
     left: 100%;
     transform: translateX(0%);

src/App.tsx

@@ -1,31 +1,31 @@
-import Analysis from "./Analysis";
+import { baseUrl } from "./api";
 import "./App.css";
-import Footer from "./Footer";
-import Header from "./Header";
 import Rankings from "./Rankings";
-import { BrowserRouter, Routes, Route } from "react-router";
-import { SessionProvider } from "./Session";
-import { GraphComponent } from "./Network";
 
 function App() {
   return (
-    <BrowserRouter>
+    <>
-      <Header />
+      <div className="logo">
-      <Routes>
+        <a href={baseUrl}>
-        <Route index element={<Rankings />} />
+          <img alt="logo" height="66%" src="logo.svg" />
-        <Route path="/network" element={
+        </a>
-          <SessionProvider>
+        <h3 className="centered">cutt</h3>
-            <GraphComponent />
+        <span className="grey">cool ultimate team tool</span>
-          </SessionProvider>
+      </div>
-        } />
+      <Rankings />
-        <Route path="/analysis" element={
+      <footer>
-          <SessionProvider>
+        <p className="grey">
-            <Analysis />
+          something not working?
-          </SessionProvider>
+          <br />
-        } />
+          message <a href="https://t.me/x0124816">me</a>.
-      </Routes>
+          <br />
-      <Footer />
+          or fix it here:{" "}
-    </BrowserRouter>
+          <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

@@ -1,21 +0,0 @@
-import { Link } from "react-router";
-
-export default function Footer() {
-        return <footer>
-                <div className="navbar">
-                        <Link to="/" ><span>Form</span></Link>
-                        <span>|</span>
-                        <Link to="/network" ><span>Trainer Analysis</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

@@ -1,9 +0,0 @@
-export default function Header() {
-  return <div className="logo" id="logo">
-    <a href={"/"}>
-      <img alt="logo" height="66%" src="logo.svg" />
-      <h3 className="centered">cutt</h3>
-    </a>
-    <span className="grey">cool ultimate team tool</span>
-  </div>
-}

src/Login.tsx

@@ -1,86 +0,0 @@
-import { FormEvent, useContext, useState } from "react";
-import { useNavigate } from "react-router";
-import { currentUser, login, LoginRequest, User } from "./api";
-
-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, 1500));
-    let user: User;
-    try {
-      login({ username, password });
-      user = await currentUser();
-    } catch (e) {
-      await timeout;
-      setError(e);
-      setLoading(false);
-      return
-    }
-
-    await timeout;
-    onLogin(user);
-  }
-
-  function handleClick() {
-    doLogin();
-  }
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    doLogin();
-  }
-
-  return (
-    <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" }} onClick={handleClick} >login</button>
-      {loading && <span className="loader" />}
-    </form>
-  )
-}
-
-/*
-export default function Login(props: { onLogin: (user: User) => void }) {
-  const { onLogin } = props;
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
-  async function handleLogin(e: FormEvent) {
-    e.preventDefault()
-    const timeout = new Promise((r) => setTimeout(r, 1500));
-    let user: User;
-    try {
-      login({ username, password })
-      user = await currentUser()
-    } catch (e) { await timeout; return }
-    await timeout;
-    onLogin(user);
-  }
-
-  return <div>
-    <form onSubmit={handleLogin}>
-      <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>
-      <input className="button" type="submit" value="login" onSubmit={handleLogin} />
-    </form>
-  </div>
-} */

src/Network.tsx

@@ -1,151 +0,0 @@
-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: string[];
-}
-
-const useCustomSelection = (props: CustomSelectionProps): SelectionResult => {
-  var result = useSelection(props);
-  result.actives = result.actives.filter((s) => !props.ignore.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 logo = document.getElementById("logo")
-  if (logo) {
-    logo.className = "logo networkroute";
-  }
-
-  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)
-    //graphRef.current?.fitNodesInView();
-    //graphRef.current?.centerGraph();
-    //graphRef.current?.resetControls();
-  }
-
-  function showLabel() {
-    switch (likes) {
-      case 0: return "dislike";
-      case 1: return "both";
-      case 2: return "like";
-    }
-  }
-
-  const { selections, actives, onNodeClick, onCanvasClick } = useCustomSelection({
-    ref: graphRef,
-    nodes: data.nodes,
-    edges: data.edges.filter((edge) => edge.data.relation === likes),
-    ignore: data.edges.map((edge) => { return (likes === 1 && edge.data.relation !== 2) ? edge.id : "" }),
-    pathSelectionType: 'out',
-    type: 'multiModifier'
-  });
-
-
-  return (
-    <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
-      <div className="controls" >
-
-        <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}
-          />
-      }
-    </div >
-  );
-}
-

src/NetworkTheme.tsx

@@ -1,59 +0,0 @@
-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/Rankings.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
@@ -136,7 +136,8 @@ 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
+              drag people here that you'd rather not play with from worst to ...
+              ok
             </span>
           )}
           <PlayerList
@@ -144,6 +145,7 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
             setList={setPlayersLeft}
             group={"shared"}
             className="dragbox"
+            orderedList
           />
         </div>
         <div className="box three">
@@ -266,28 +268,7 @@ export function MVP({ user, players }: PlayerInfoProps) {
   );
 }
 
-export default function Rankings() {
+function openPage(pageName: string, color: string) {
-  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");
@@ -298,7 +279,10 @@ export default function Rankings() {
   tablinks = document.getElementsByClassName("tablink");
   for (i = 0; i < tablinks.length; i++) {
     let button = tablinks[i] as HTMLElement;
-      button.style.opacity = "50%";
+    button.style.backgroundColor = "unset";
+    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";
@@ -306,37 +290,51 @@ export default function Rankings() {
   let activeButton = document.getElementById(
     pageName + "Button"
   ) as HTMLElement;
+  activeButton.style.textDecoration = "underline";
   activeButton.style.fontWeight = "bold";
-    activeButton.style.opacity = "100%";
+  activeButton.style.backgroundColor = "#3366cc";
+  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 navbar">
+          <div className="container">
             <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

@@ -1,40 +0,0 @@
-import { createContext, ReactNode, useContext, useLayoutEffect, useState } from "react";
-import { currentUser, User } from "./api";
-import { Login } from "./Login";
-
-export interface SessionProviderProps {
-  children: ReactNode;
-}
-
-const sessionContext = createContext<User | null>(null);
-
-export function SessionProvider(props: SessionProviderProps) {
-  const { children } = props;
-
-  const [user, setUser] = useState<User | null>(null);
-  const [err, setErr] = useState<unknown>(null);
-
-  function loadUser() {
-    currentUser()
-      .then((user) => { setUser(user); setErr(null); })
-      .catch((err) => { setUser(null); setErr(err); });
-  }
-
-  useLayoutEffect(() => { loadUser(); }, [err]);
-
-  function onLogin(user: User) {
-    setUser(user);
-    setErr(null);
-  }
-
-  let content: ReactNode;
-  if (!err && !user) content = <span className="loader" />;
-  else if (err) content = <Login onLogin={onLogin} />;
-  else content = <sessionContext.Provider value={user}>{children}</sessionContext.Provider>;
-
-  return content;
-}
-
-export function useSession() {
-  return useContext(sessionContext);
-}

src/api.ts

@@ -1,6 +1,4 @@
 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",
@@ -17,80 +15,3 @@ 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;
-  fullName: string;
-}
-
-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;
-};
-
-export const login = (req: LoginRequest) => {
-  fetch(`${baseUrl}api/token`, {
-    method: "POST", headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-    }, body: new URLSearchParams(req).toString()
-  }).then(resp => resp.json() as Promise<Token>).then(token => token ? localStorage.setItem("access_token", token.access_token) : console.log("token not acquired")).catch((e) => console.log("catch error " + e + " in login"));
-  return Promise<void>
-}
-
-export const logout = () => localStorage.removeItem("access_token");

tsconfig.node.json

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