feat: make new analysis page responsive + improve leaderboard page de…

…sogm

src/components/Analysis/BlunderMeter.tsx

@@ -17,7 +17,7 @@ export const BlunderMeter: React.FC<Props> = ({
   colorSanMapping,
 }: Props) => {
   return (
-    <div className="flex h-full max-h-full min-w-[40%] max-w-[40%] flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3">
+    <div className="flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3 md:h-full md:w-auto md:min-w-[40%] md:max-w-[40%]">
       <Tooltip id="probability" />
       <p className="text-lg text-primary">Blunder Meter</p>
       <div className="flex h-full w-full flex-col overflow-hidden">

src/components/Analysis/ConfigurableScreens.tsx

@@ -0,0 +1,90 @@
+import { motion } from 'framer-motion'
+import React, { useState } from 'react'
+import { ConfigureAnalysis } from 'src/components/Analysis/ConfigureAnalysis'
+import { AnalysisExportGame } from 'src/components/Misc/AnalysisExportGame'
+import { AnalyzedGame, GameNode } from 'src/types'
+
+interface Props {
+  currentMaiaModel: string
+  setCurrentMaiaModel: (model: string) => void
+  launchContinue: () => void
+  MAIA_MODELS: string[]
+  game: AnalyzedGame
+  currentNode: GameNode
+}
+
+export const ConfigurableScreens: React.FC<Props> = ({
+  currentMaiaModel,
+  setCurrentMaiaModel,
+  launchContinue,
+  MAIA_MODELS,
+  game,
+  currentNode,
+}) => {
+  const screens = [
+    {
+      id: 'configure',
+      name: 'Configure',
+    },
+    {
+      id: 'export',
+      name: 'Export',
+    },
+  ]
+
+  const [screen, setScreen] = useState(screens[0])
+
+  return (
+    <div className="flex w-full flex-1 flex-col overflow-hidden rounded bg-background-1/60 md:w-auto">
+      <div className="flex flex-row border-b border-white/10">
+        {screens.map((s) => {
+          const selected = s.id === screen.id
+          return (
+            <div
+              key={s.id}
+              tabIndex={0}
+              role="button"
+              onKeyPress={(e) => {
+                if (e.key === 'Enter') setScreen(s)
+              }}
+              onClick={() => setScreen(s)}
+              className={`relative flex cursor-pointer select-none flex-row px-3 py-1.5 ${selected ? 'bg-white/5' : 'hover:bg-white hover:bg-opacity-[0.02]'} transition duration-200`}
+            >
+              <p
+                className={`text-sm transition duration-200 ${selected ? 'text-primary' : 'text-secondary'} `}
+              >
+                {s.name}
+              </p>
+              {selected ? (
+                <motion.div
+                  layoutId="selectedScreen"
+                  className="absolute bottom-0 left-0 h-[1px] w-full bg-white"
+                />
+              ) : null}
+            </div>
+          )
+        })}
+      </div>
+      <div className="red-scrollbar flex flex-col items-start justify-start overflow-y-scroll bg-backdrop/30">
+        {screen.id === 'configure' ? (
+          <ConfigureAnalysis
+            currentMaiaModel={currentMaiaModel}
+            setCurrentMaiaModel={setCurrentMaiaModel}
+            launchContinue={launchContinue}
+            MAIA_MODELS={MAIA_MODELS}
+          />
+        ) : screen.id === 'export' ? (
+          <div className="flex w-full flex-col p-4">
+            <AnalysisExportGame
+              game={game}
+              currentNode={currentNode}
+              whitePlayer={game.whitePlayer.name}
+              blackPlayer={game.blackPlayer.name}
+              event="Analysis"
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

src/components/Analysis/Highlight.tsx

@@ -27,8 +27,8 @@ export const Highlight: React.FC<Props> = ({
   currentMaiaModel,
 }: Props) => {
   return (
-    <div className="flex h-full w-full items-start overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1">
-      <div className="flex h-full min-w-[40%] flex-col border-r-[0.5px] border-white/40">
+    <div className="flex h-full w-full flex-col items-start overflow-hidden rounded border-[0.5px] border-white/40 bg-background-1 md:flex-row">
+      <div className="flex h-full w-full flex-col border-b-[0.5px] border-white/40 md:w-auto md:min-w-[40%] md:border-b-0 md:border-r-[0.5px]">
         <div className="grid grid-cols-2">
           <div className="flex flex-col items-center justify-center gap-1 bg-human-3/5 py-3">
             <p className="text-center text-sm text-human-2">

src/components/Analysis/MoveMap.tsx

@@ -38,7 +38,7 @@ export const MoveMap: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex h-full max-h-full flex-col overflow-hidden rounded bg-background-1/60">
+    <div className="flex h-64 max-h-full flex-col overflow-hidden rounded bg-background-1/60 md:h-full">
       <p className="p-3 text-lg text-primary">Move Map</p>
       <div className="flex h-full w-full flex-col">
         <ResponsiveContainer width="100%" height="100%">

src/components/Analysis/MovesByRating.tsx

@@ -33,7 +33,7 @@ export const MovesByRating: React.FC<Props> = ({
   const domain = [0, domainMax]
 
   return (
-    <div className="flex h-full w-full flex-col rounded bg-background-1/60">
+    <div className="flex h-64 w-full flex-col rounded bg-background-1/60 md:h-full">
       <p className="p-3 text-lg text-primary">Moves by Rating</p>
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart data={moves} margin={{ left: 0, right: 0, bottom: 0 }}>

src/components/Analysis/index.ts

@@ -10,6 +10,7 @@ export * from './LegacyAnalysisGameList'
 export * from './HorizontalEvaluationBar'
 export * from './PositionEvaluationContainer'
 export * from './VerticalEvaluationBar'
+export * from './ConfigurableScreens'
 export * from './MoveRecommendations'
 export * from './MovesByRating'
 export * from './Tournament'

src/components/Board/AnalysisMovesContainer.tsx

@@ -52,7 +52,7 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
   )
 
   return (
-    <div className="red-scrollbar grid h-64 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full">
+    <div className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full">
       <Tooltip id="check" />
       {moves.map(([whiteNode, blackNode], index) => {
         return (

src/components/Leaderboard/LeaderboardColumn.tsx

@@ -18,12 +18,12 @@ export const LeaderboardColumn: React.FC<Props> = ({
   ranking,
 }: Props) => {
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-row items-center justify-start gap-3 bg-background-2 px-6 py-4">
+    <div className="flex flex-col rounded border border-white/10 bg-background-1/60">
+      <div className="flex flex-row items-center justify-start gap-3 rounded-t bg-background-2 px-6 py-4">
         <i className="*:h-6 *:w-6">{icon}</i>
         <h2 className="text-2xl font-bold uppercase">{name}</h2>
       </div>
-      <div className="flex w-full flex-col">
+      <div className="flex w-full flex-col rounded-b">
         {ranking.map((player, index) => (
           <LeaderboardEntry
             key={index}

src/components/Leaderboard/LeaderboardEntry.tsx

@@ -93,7 +93,7 @@ export const LeaderboardEntry = ({
     if (hover) {
       timer = setTimeout(() => {
         fetchStats()
-      }, 300)
+      }, 500)
     } else {
       setPopup(false)
     }
@@ -113,7 +113,7 @@ export const LeaderboardEntry = ({
 
   return (
     <div
-      className={`relative flex w-full items-center justify-between px-6 py-2 ${index % 2 === 0 ? 'bg-background-1/90' : 'bg-background-1/50'}`}
+      className={`relative flex w-full items-center justify-between px-6 py-2 ${index % 2 === 0 ? 'bg-opacity-0' : 'bg-white bg-opacity-[0.015]'}`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >