main.py

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

src/App.css

@@ -1,5 +1,5 @@
 * {
-  border-radius: 16px;
+  border-radius: 8px;
 }
 
 body {
@@ -7,19 +7,15 @@ 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;
 }
 
 .grey {
@@ -29,7 +25,6 @@ footer {
 .hint {
   position: absolute;
   font-size: 80%;
-  padding: 8px;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -38,17 +33,16 @@ footer {
 }
 
 h1,
-h2,
+h2 {
-h3 {
   margin-top: 0px;
   margin-bottom: 0px;
-  padding: 8px 16px;
 }
 
 .container {
   display: flex;
   flex-wrap: nowrap;
-  width: min(96vw, 900px);
+  justify-content: space-evenly;
+  min-width: min(80vw, 800px);
 }
 
 .dragbox {
@@ -58,19 +52,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;
@@ -78,9 +59,28 @@ 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: 240px;
+  max-width: 400px;
-  min-width: 100px;
+  min-width: 200px;
   margin: 4px auto;
   .item {
     font-weight: bold;
@@ -92,38 +92,27 @@ 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 {
   font-weight: bold;
-  font-size: large;
+  color: ghostwhite;
-  color: aliceblue;
   background-color: black;
-  border-radius: 1.2em;
+  border: 4px solid black;
+  position: relative;
   z-index: 1;
-}
+  &:focus {
-
+    outline: black;
-@media only screen and (max-width: 768px) {
-  .submit_text {
-    display: none;
   }
-  .submit {
+  &:hover {
-    position: fixed;
+    border-color: black;
-    right: 16px;
-    bottom: 16px;
-    padding: 0px;
-    background-color: unset;
-    font-size: xx-large;
-    margin-bottom: 20px;
-    margin-right: 20px;
   }
 }
 
@@ -139,23 +128,15 @@ button {
 }
 
 .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 {
-  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) */
@@ -173,29 +154,6 @@ button {
   font-size: 150%;
 }
 
-.logo {
-  position: relative;
-  text-align: center;
-  height: 160px;
-  img {
-    display: block;
-    margin: auto;
-  }
-  h3 {
-    position: absolute;
-    width: 200px;
-    top: 33%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: aliceblue;
-    background-color: black;
-    border-radius: unset;
-    letter-spacing: 8px;
-    padding: 0px 40px;
-    font-family: monospace;
-  }
-}
-
 .loader {
   display: block;
   position: relative;

src/App.tsx

@@ -5,24 +5,15 @@ import Rankings from "./Rankings";
 function App() {
   return (
     <>
-      <div className="logo">
+      <a href={baseUrl}>
-        <a href={baseUrl}>
+        <img alt="logo" height="128px" src="logo.svg" />
-          <img alt="logo" height="66%" src="logo.svg" />
+      </a>
-        </a>
+      <h1>cutt</h1>
-        <h3 className="centered">cutt</h3>
+      <span className="grey">cool ultimate team tool</span>
-        <span className="grey">cool ultimate team tool</span>
-      </div>
       <Rankings />
       <footer>
         <p className="grey">
-          something not working?
+          something not working? message <a href="https://t.me/x0124816">me</a>.
-          <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/Rankings.tsx

@@ -40,9 +40,9 @@ export function SelectUser({
   return (
     <>
       <div className="box user">
+        <span>your name?</span>
         {user.length < 1 ? (
           <>
-            <span>your name?</span>
             <br /> <span className="grey hint">drag your name here</span>
           </>
         ) : (
@@ -55,6 +55,7 @@ export function SelectUser({
             >
               {" ✕"}
             </span>
+            <br />
           </>
         )}
         <PlayerList
@@ -174,9 +175,7 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
         </div>
       </div>
 
-      <button className="submit" onClick={() => handleSubmit()}>
+      <button onClick={() => handleSubmit()}>submit</button>
-        💾 <span className="submit_text">submit</span>
-      </button>
       <dialog
         id="ChemistryDialog"
         onClick={(event) => {
@@ -234,8 +233,8 @@ export function MVP({ user, players }: PlayerInfoProps) {
           <h1>🏆</h1>
           {rankedPlayers.length < 1 && (
             <span className="grey hint">
-              carefully place as many of the <i>Most Valuable Players</i>{" "}
+              carefully place the <i>Most Valuable Player</i> (according to your
-              (according to your humble opinion) in this box
+              humble opinion) in this box
             </span>
           )}
           <PlayerList
@@ -253,9 +252,7 @@ export function MVP({ user, players }: PlayerInfoProps) {
         </div>
       </div>
 
-      <button className="submit" onClick={() => handleSubmit()}>
+      <button onClick={() => handleSubmit()}>submit</button>
-        💾 <span className="submit_text">submit</span>
-      </button>
       <dialog
         id="MVPDialog"
         onClick={(event) => {
@@ -279,7 +276,10 @@ 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.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";
@@ -287,8 +287,10 @@ function openPage(pageName: string, color: string) {
   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;
 }
 
@@ -313,22 +315,22 @@ export default function Rankings() {
       <SelectUser {...{ user, setUser, players, setPlayers }} />
       {user.length === 1 && (
         <>
-          <div className="container navbar">
+          <div className="container">
-              <button
+            <button
-                className="tablink"
+              className="tablink"
-                id="ChemistryButton"
+              id="ChemistryButton"
-                onClick={() => openPage("Chemistry", "aliceblue")}
+              onClick={() => openPage("Chemistry", "aliceblue")}
-              >
+            >
-                🧪 Chemistry
+              Chemistry
-              </button>
+            </button>
-              <button
+            <button
-                className="tablink"
+              className="tablink"
-                id="MVPButton"
+              id="MVPButton"
-                onClick={() => openPage("MVP", "aliceblue")}
+              onClick={() => openPage("MVP", "aliceblue")}
-              >
+            >
-                🏆 MVP
+              MVP
-              </button>
+            </button>
-            </div>
+          </div>
 
           <div id="Chemistry" className="tabcontent">
             <Chemistry {...{ user, players }} />