feat: calendar display for latest submissions

src/TeamPanel.tsx

@@ -3,6 +3,7 @@ import { apiAuth, Gender, loadPlayers, User } from "./api";
 import { useSession } from "./Session";
 import { ErrorState } from "./types";
 import { useNavigate } from "react-router";
+import Calendar from "./Calendar";
 
 const TeamPanel = () => {
   const { user, teams } = useSession();
@@ -97,7 +98,11 @@ const TeamPanel = () => {
               {players &&
                 players.map((p) => (
                   <button
-                    className={"team-player " + p.gender}
+                    className={
+                      "team-player " +
+                      p.gender +
+                      (p.id === player.id ? " active-player" : "")
+                    }
                     key={p.id}
                     onClick={() => {
                       setPlayer(p);
@@ -133,8 +138,10 @@ const TeamPanel = () => {
                 onChange={(e) => {
                   setPlayer({
                     ...player,
+                    ...(player.id === 0 && {
+                      username: e.target.value.toLowerCase().replace(/\W/g, ""),
+                    }),
                     display_name: e.target.value,
-                    username: e.target.value.toLowerCase().replace(/\W/g, ""),
                   });
                   setError({ ok: true, message: "" });
                 }}
@@ -219,6 +226,7 @@ const TeamPanel = () => {
             )}
           </form>
         </div>
+        <Calendar playerId={player.id} />
       </div>
     );
   } else <span className="loader" />;