From 99e80c80776bf59c9f7fc8011856a1f2fc700812 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Thu, 6 Mar 2025 09:28:55 +0100
Subject: [PATCH] feat: clickable username with context menu

---
 src/App.css     | 15 +++++++++++++--
 src/App.tsx     | 33 ++++++++++++---------------------
 src/Header.tsx  | 16 +++++++++-------
 src/Network.tsx |  3 ++-
 4 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/App.css b/src/App.css
index 29c2ae2..876888f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -29,7 +29,6 @@ footer {
   left: 8px;
 }
 
-
 /*=========Network Controls=========*/
 
 .infobutton {
@@ -367,7 +366,11 @@ button,
   position: relative;
   text-align: center;
   height: 140px;
-  margin-bottom: 20px;
+
+  span {
+    display: block;
+    margin: 2px;
+  }
 
   img {
     display: block;
@@ -390,6 +393,14 @@ button,
   }
 }
 
+.avatar {
+  background-color: lightsteelblue;
+  padding: 2px 8px;
+  width: fit-content;
+  margin: auto;
+  z-index: 3;
+}
+
 .networkroute {
   z-index: 10;
   position: absolute;
diff --git a/src/App.tsx b/src/App.tsx
index eac95a6..7fcb82b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,34 +7,25 @@ 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 (
     <BrowserRouter>
-      <Header />
-      <Routes>
-        <Route index element={<Rankings />} />
+      <SessionProvider>
+        <Header />
+        <Avatar />
+        <Routes>
+          <Route index element={<Rankings />} />
 
-        <Route path="/network" element={
-          <SessionProvider>
-            <GraphComponent />
-          </SessionProvider>
-        } />
+          <Route path="/network" element={<GraphComponent />} />
 
-        <Route path="/analysis" element={
-          <SessionProvider>
-            <Analysis />
-          </SessionProvider>
-        } />
+          <Route path="/analysis" element={<Analysis />} />
 
-        <Route path="/mvp" element={
-          <SessionProvider>
-            <MVPChart />
-          </SessionProvider>
-        } />
-
-      </Routes>
-      <Footer />
+          <Route path="/mvp" element={<MVPChart />} />
+        </Routes>
+        <Footer />
+      </SessionProvider>
     </BrowserRouter>
   );
 }
diff --git a/src/Header.tsx b/src/Header.tsx
index 5ce0ea1..8663a7a 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,9 +1,11 @@
 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>
+  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>
+  );
 }
diff --git a/src/Network.tsx b/src/Network.tsx
index 07ca2ab..3ec41b3 100644
--- a/src/Network.tsx
+++ b/src/Network.tsx
@@ -49,7 +49,8 @@ export const GraphComponent = () => {
   }
   const footer = document.getElementsByTagName("footer");
   if (footer) {
-    (footer.item(0) as HTMLElement).className = "fixed-footer";
+    footer.length &&
+      ((footer.item(0) as HTMLElement).className = "fixed-footer");
   }
 
   async function loadData() {