feat: make entire logo clickable

main.py

@@ -46,7 +46,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()
 
 

public/gitea.svg

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

src/App.css

@@ -1,5 +1,5 @@
 * {
-  border-radius: 8px;
+  border-radius: 16px;
 }
 
 body {
@@ -7,6 +7,7 @@ body {
   position: relative;
   z-index: 0;
   color: black;
+  text-align: center;
   overflow-wrap: anywhere;
   height: 100%;
 }
@@ -19,7 +20,6 @@ footer {
   max-width: 1280px;
   margin: 0 auto;
   padding: 8px;
-  text-align: center;
 }
 
 .grey {
@@ -29,7 +29,7 @@ footer {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 4px;
+  padding: 8px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -42,14 +42,13 @@ h2,
 h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 4px 16px;
+  padding: 8px 16px;
 }
 
 .container {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-evenly;
-  min-width: 737px;
+  width: min(96vw, 900px);
 }
 
 .dragbox {
@@ -59,6 +58,19 @@ 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,28 +78,9 @@ 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;
@@ -99,33 +92,26 @@ h3 {
   cursor: pointer;
   font-size: small;
   border: 3px dashed black;
-  border-radius: 4px;
+  border-radius: 1.2em;
   margin: 8px auto;
-  padding: 4px 8px;
+  padding: 4px 16px;
 }
 
 .extra-margin {
   padding: 0px 8px;
+  margin: auto;
 }
 
 button {
   font-weight: bold;
   font-size: large;
-  color: ghostwhite;
+  color: aliceblue;
   background-color: black;
+  border-radius: 1.2em;
   z-index: 1;
-  &:focus {
-    outline: black;
-  }
-  &:hover {
-    border-color: black;
-  }
 }
 
 @media only screen and (max-width: 768px) {
-  .container {
-    min-width: 96vw;
-  }
   .submit_text {
     display: none;
   }
@@ -153,15 +139,23 @@ button {
 }
 
 .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 {
+  button {
+    font-size: medium;
+    margin: 4px 0.5%;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    opacity: 50%;
+    &:hover {
+      opacity: 75%;
+    }
+  }
 }
 
 /* Style the tab content (and add height:100% for full page content) */
@@ -182,15 +176,16 @@ button {
 .logo {
   position: relative;
   text-align: center;
-  height: 196px;
-  margin: auto;
+  height: 140px;
+  margin-bottom: 20px;
   img {
     display: block;
     margin: auto;
   }
   h3 {
     position: absolute;
-    width: 200px;
+    font-size: medium;
+    width: 140px;
     top: 33%;
     left: 50%;
     transform: translate(-50%, -50%);

src/App.tsx

@@ -8,8 +8,8 @@ function App() {
       <div className="logo">
         <a href={baseUrl}>
           <img alt="logo" height="66%" src="logo.svg" />
-        </a>
           <h3 className="centered">cutt</h3>
+        </a>
         <span className="grey">cool ultimate team tool</span>
       </div>
       <Rankings />

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";
 
@@ -268,7 +268,28 @@ export function MVP({ user, players }: PlayerInfoProps) {
   );
 }
 
-function openPage(pageName: string, color: string) {
+export default function Rankings() {
+  const [user, setUser] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [openTab, setOpenTab] = useState("Chemistry");
+
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayers(data as Player[]);
+  }
+
+  useMemo(() => {
+    loadPlayers();
+  }, []);
+
+  useEffect(() => {
+    user.length === 1 && openPage(openTab, "aliceblue");
+  }, [user]);
+
+  function openPage(pageName: string, color: string) {
     // Hide all elements with class="tabcontent" by default */
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
@@ -279,10 +300,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,48 +308,31 @@ function openPage(pageName: string, color: string) {
     let activeButton = document.getElementById(
       pageName + "Button"
     ) as HTMLElement;
-  activeButton.style.textDecoration = "underline";
     activeButton.style.fontWeight = "bold";
-  activeButton.style.backgroundColor = "#3366cc";
-  activeButton.style.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>