UI improvements

src/App.css

@@ -4,6 +4,7 @@ body {
   z-index: 0;
   color: black;
   overflow-wrap: anywhere;
+  height: 100%;
 }
 
 #root {
@@ -19,6 +20,7 @@ body {
 
 .hint {
   position: absolute;
+  font-size: 80%;
   top: auto;
   left: 4px;
   bottom: auto;
@@ -42,15 +44,18 @@ h2 {
 .dragbox {
   display: flex;
   flex-direction: column;
-  flex-basis: 0;
-  flex-grow: 1;
   min-height: 32px;
-  height: 100%;
+  height: 92%;
 }
 
 .box {
   position: relative;
-  min-width: 30%;
+  &.two {
+    min-width: 48%;
+  }
+  &.three {
+    min-width: 30%;
+  }
   max-width: 10vw;
   padding: 4px;
   margin: 4px min(2px, 4%);
@@ -69,6 +74,7 @@ h2 {
 }
 
 .item {
+  cursor: pointer;
   font-size: small;
   border: 3px dashed black;
   border-radius: 4px;
@@ -81,6 +87,8 @@ button {
   color: ghostwhite;
   background-color: black;
   border: 4px solid black;
+  position: relative;
+  z-index: 1;
 }
 
 ::backdrop {
@@ -93,3 +101,24 @@ button {
   );
   opacity: 0.75;
 }
+
+.tablink {
+  background-color: unset;
+  font-weight: unset;
+  color: black;
+  border: 2px solid black;
+  border-radius: unset;
+  cursor: pointer;
+  padding: 8px 16px;
+  width: 50%;
+}
+
+.tablink:hover {
+  background-color: #777;
+}
+
+/* Style the tab content (and add height:100% for full page content) */
+.tabcontent {
+  display: none;
+  height: 100%;
+}

src/App.tsx

@@ -2,13 +2,62 @@ import "./App.css";
 import { Chemistry, MVP } from "./Rankings";
 
 function App() {
+  function openPage(pageName: string, color: string) {
+    // Hide all elements with class="tabcontent" by default */
+    var i, tabcontent, tablinks;
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+      (tabcontent[i] as HTMLElement).style.display = "none";
+    }
+    // Remove the background color of all tablinks/buttons
+    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";
+    }
+    // Show the specific tab content
+    (document.getElementById(pageName) as HTMLElement).style.display = "block";
+    // Add the specific color to the button used to open the tab content
+    let activeButton = document.getElementById(
+      pageName + "Button"
+    ) as HTMLElement;
+    activeButton.style.textDecoration = "underline";
+    activeButton.style.fontWeight = "bold";
+    activeButton.style.backgroundColor = "#3366cc";
+    activeButton.style.color = "white";
+    document.body.style.backgroundColor = color;
+  }
   return (
     <>
       <img alt="logo" height="128px" src="logo.svg" />
       <h1>cutt</h1>
       <span className="grey">cool ultimate team tool</span>
-      <Chemistry />
-      <MVP />
+      <div className="container">
+        <button
+          className="tablink"
+          id="ChemistryButton"
+          onClick={() => openPage("Chemistry", "aliceblue")}
+        >
+          Chemistry
+        </button>
+        <button
+          className="tablink"
+          id="MVPButton"
+          onClick={() => openPage("MVP", "aliceblue")}
+        >
+          MVP
+        </button>
+      </div>
+
+      <div id="Chemistry" className="tabcontent">
+        <Chemistry />
+      </div>
+      <div id="MVP" className="tabcontent">
+        <MVP />
+      </div>
       <footer>
         <p className="grey">
           something not working? message <a href="https://t.me/x0124816">me</a>.

src/Rankings.tsx

@@ -104,7 +104,7 @@ export function Chemistry() {
         />
       </div>
       <div className="container">
-        <div className="box">
+        <div className="box three">
           <h2>😬</h2>
           {playersLeft.length < 1 && (
             <span className="grey hint">
@@ -120,7 +120,7 @@ export function Chemistry() {
             orderedList
           />
         </div>
-        <div className="box">
+        <div className="box three">
           <h2>🤷</h2>
           <PlayerList
             list={playersMiddle}
@@ -129,7 +129,7 @@ export function Chemistry() {
             className="middle dragbox"
           />
         </div>
-        <div className="box">
+        <div className="box three">
           <h2>😍</h2>
           {playersRight.length < 1 && (
             <span className="grey hint">
@@ -216,8 +216,8 @@ export function MVP() {
         />
       </div>
       <div className="container">
-        <div className="box">
-          <h1>🥏🏃</h1>
+        <div className="box two">
+          <h2>🥏🏃</h2>
           {availablePlayers.length < 1 && (
             <span className="grey hint">all sorted 👍</span>
           )}
@@ -230,18 +230,15 @@ export function MVP() {
                 return to.el.classList.contains("putclone") ? "clone" : true;
               },
             }}
-            className="dragbox reservoir"
+            className="dragbox"
           />
         </div>
-        <div className="box">
+        <div className="box two">
           <h1>🏆</h1>
           {rankedPlayers.length < 1 && (
             <span className="grey hint">
-              carefully place the{" "}
-              <b>
-                <i>Most Valued Player</i>
-              </b>{" "}
-              (according to your humble opinion) in this box
+              carefully place the <i>Most Valuable Player</i> (according to your
+              humble opinion) in this box
             </span>
           )}
           <PlayerList