Skip to content

Commit 4b7c566

Browse files
kevinjosethomaskevinjosethomas
committed
style: improve colours + layout for analysis
1 parent 5c7b5d8 commit 4b7c566

8 files changed

Lines changed: 83 additions & 39 deletions

File tree

‎src/components/Analysis/AnalysisGameList.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ interface AnalysisGameListProps {
4848
onCustomAnalysis?: () => void
4949
onGameSelected?: () => void // Called when a game is selected (for mobile popup closing)
5050
refreshTrigger?: number // Used to trigger refresh when custom analysis is added
51+
embedded?: boolean // Render without outer card container
5152
}
5253

5354
export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
@@ -56,6 +57,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
5657
onGameSelected,
5758
refreshTrigger,
5859
loadNewWorldChampionshipGame,
60+
embedded = false,
5961
}) => {
6062
const router = useRouter()
6163
const { analysisLichessList, analysisTournamentList } =
@@ -584,7 +586,11 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
584586
return analysisTournamentList ? (
585587
<div
586588
id="analysis-game-list"
587-
className="flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md"
589+
className={
590+
embedded
591+
? 'flex h-full flex-col items-start justify-start overflow-hidden border-t border-b border-glassBorder bg-transparent'
592+
: 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
593+
}
588594
>
589595
<div className="flex h-full w-full flex-col">
590596
<div className="flex select-none items-center border-b border-white/10">

‎src/components/Analysis/ConfigurableScreens.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
120120

121121
// Normal state with configure/export tabs
122122
return (
123-
<div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
123+
<div className="bg-glass flex w-full flex-1 flex-col overflow-hidden md:w-auto md:rounded">
124124
<div className="flex flex-row border-b border-white/10">
125125
{screens.map((s) => {
126126
const selected = s.id === screen.id

‎src/components/Analysis/ConfigureAnalysis.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
3535
autoSave,
3636
}: Props) => {
3737
return (
38-
<div className="border-glassBorder bg-glass flex w-full flex-col items-start justify-start gap-2 rounded-md border p-3 text-white/90 backdrop-blur-md">
38+
<div className="flex w-full flex-col items-start justify-start gap-2 rounded-md p-3 text-white/90">
3939
<div className="flex w-full flex-col gap-0.5">
4040
<p className="text-xs text-white/70">Analyze using:</p>
4141
<div className="relative inline-flex w-full items-center">

‎src/components/Board/BoardController.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface Props {
2020
disableNavigation?: boolean
2121
}
2222

23-
export const BoardController: React.FC<Props> = ({
23+
export const BoardController: React.FC<Props & { embedded?: boolean }> = ({
2424
orientation,
2525
setOrientation,
2626
currentNode,
@@ -35,6 +35,7 @@ export const BoardController: React.FC<Props> = ({
3535
disablePrevious = false,
3636
disableKeyboardNavigation = false,
3737
disableNavigation = false,
38+
embedded = false,
3839
}: Props) => {
3940
const { width } = useWindowSize()
4041

@@ -123,7 +124,13 @@ export const BoardController: React.FC<Props> = ({
123124
])
124125

125126
return (
126-
<div className="flex w-full flex-row items-center gap-[1px] rounded-md border border-glassBorder bg-glass p-1 backdrop-blur-md">
127+
<div
128+
className={`flex w-full flex-row items-center gap-[1px] ${
129+
embedded
130+
? 'border-t border-glassBorder bg-transparent'
131+
: 'rounded-md border border-glassBorder bg-glass backdrop-blur-md'
132+
}`}
133+
>
127134
<button
128135
onClick={disableFlip ? undefined : toggleBoardOrientation}
129136
disabled={disableFlip}

‎src/components/Board/MovesContainer.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@ const getMoveClassification = (node: GameNode | null) => {
3535
}
3636
}
3737

38-
export const MovesContainer: React.FC<Props> = (props) => {
38+
export const MovesContainer: React.FC<
39+
Props & { embedded?: boolean; heightClass?: string }
40+
> = (props) => {
3941
const {
4042
game,
4143
termination,
@@ -46,7 +48,9 @@ export const MovesContainer: React.FC<Props> = (props) => {
4648
disableMoveClicking = false,
4749
startFromNode,
4850
restrictNavigationBefore,
49-
} = props
51+
embedded = false,
52+
heightClass = 'h-48',
53+
} = props as Props & { embedded?: boolean; heightClass?: string }
5054
const { isMobile } = useContext(WindowSizeContext)
5155
const containerRef = useRef<HTMLDivElement>(null)
5256
const currentMoveRef = useRef<HTMLDivElement>(null)
@@ -367,12 +371,16 @@ export const MovesContainer: React.FC<Props> = (props) => {
367371
return (
368372
<div
369373
ref={containerRef}
370-
className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-md border border-glassBorder bg-glass text-white/90 backdrop-blur-md md:h-full md:w-full"
374+
className={`red-scrollbar grid ${heightClass} auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap text-white/90 md:h-full md:w-full ${
375+
embedded
376+
? 'border-glassBorder border-b bg-transparent'
377+
: 'border-glassBorder bg-glass rounded-md border backdrop-blur-md'
378+
}`}
371379
>
372380
{moves.map(([whiteNode, blackNode], index) => {
373381
return (
374382
<>
375-
<span className="flex h-7 items-center justify-center bg-glass-strong text-sm text-white/70">
383+
<span className="bg-glass-strong flex h-7 items-center justify-center text-sm text-white/70">
376384
{(whiteNode || blackNode)?.moveNumber}
377385
</span>
378386
<div
@@ -383,7 +391,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
383391
}
384392
}}
385393
data-index={index * 2 + 1}
386-
className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
394+
className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === whiteNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 1) && 'bg-glass-strong'}`}
387395
>
388396
<span
389397
style={{
@@ -424,7 +432,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
424432
}
425433
}}
426434
data-index={index * 2 + 2}
427-
className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-glass-hover ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
435+
className={`hover:bg-glass-hover col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm ${controller.currentNode === blackNode && 'bg-glass-strong'} ${highlightSet.has(index * 2 + 2) && 'bg-glass-strong'}`}
428436
>
429437
<span
430438
style={{
@@ -462,7 +470,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
462470
})}
463471
{termination && !isMobile && (
464472
<div
465-
className="col-span-5 cursor-pointer rounded-md border border-glassBorder bg-glass p-5 text-center text-white/90 backdrop-blur-md"
473+
className="border-glassBorder bg-glass col-span-5 cursor-pointer rounded-md border p-5 text-center text-white/90 backdrop-blur-md"
466474
onClick={() => {
467475
if (!disableMoveClicking) {
468476
controller.goToNode(mainLineNodes[mainLineNodes.length - 1])

‎src/components/Common/ExportGame.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export const ExportGame: React.FC<Props> = (props) => {
117117
role="button"
118118
tabIndex={0}
119119
onClick={() => copy(fen)}
120-
className="border-1 group flex w-full cursor-pointer overflow-x-hidden rounded border border-white/5 bg-background-1/50 p-1"
120+
className="border-1 group flex w-full cursor-pointer overflow-x-hidden rounded border border-white/5 p-1"
121121
>
122122
<p className="whitespace-nowrap text-xxs text-secondary group-hover:text-secondary/80">
123123
{fen}
@@ -144,7 +144,7 @@ export const ExportGame: React.FC<Props> = (props) => {
144144
role="button"
145145
tabIndex={0}
146146
onClick={() => copy(pgn)}
147-
className="group flex w-full cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 bg-background-1/50 p-1"
147+
className="group flex w-full cursor-pointer overflow-x-hidden overflow-y-scroll rounded border border-white/5 p-1"
148148
>
149149
<p className="whitespace-pre-wrap text-xxs text-secondary group-hover:text-secondary/80">
150150
{pgn}

‎src/components/Common/GameInfo.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface Props {
1818
error: string | null
1919
gameEnded: boolean
2020
}
21+
embedded?: boolean
2122
}
2223

2324
export const GameInfo: React.FC<Props> = ({
@@ -31,13 +32,18 @@ export const GameInfo: React.FC<Props> = ({
3132
showGameListButton,
3233
onGameListClick,
3334
streamState,
35+
embedded = false,
3436
}: Props) => {
3537
const { startTour } = useTour()
3638

3739
return (
3840
<div
3941
id="analysis-game-list"
40-
className="flex w-full flex-col items-start justify-start gap-1 overflow-hidden rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md"
42+
className={
43+
embedded
44+
? 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden border-b border-glassBorder bg-transparent p-3'
45+
: 'flex w-full flex-col items-start justify-start gap-1 overflow-hidden rounded-md border border-glassBorder bg-glass p-3 backdrop-blur-md'
46+
}
4147
>
4248
<div className="flex w-full items-center justify-between">
4349
<div className="flex items-center justify-start gap-1.5">

‎src/pages/analysis/[...id].tsx‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -630,31 +630,44 @@ const Analysis: React.FC<Props> = ({
630630
<div className="flex h-full w-[90%] flex-row gap-2">
631631
<motion.div
632632
id="navigation"
633-
className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
633+
className="desktop-left-column-container flex flex-col overflow-hidden"
634634
variants={itemVariants}
635635
style={{ willChange: 'transform, opacity' }}
636636
>
637-
<GameInfo title="Analysis" icon="bar_chart" type="analysis">
638-
<NestedGameInfo />
639-
</GameInfo>
640-
<div className="flex max-h-[25vh] min-h-[25vh] flex-col bg-backdrop/30">
641-
<AnalysisGameList
642-
currentId={currentId}
643-
loadNewWorldChampionshipGame={(newId, setCurrentMove) =>
644-
getAndSetTournamentGame(newId, setCurrentMove)
645-
}
646-
loadNewLichessGame={(id, pgn, setCurrentMove) =>
647-
getAndSetLichessGame(id, pgn, setCurrentMove)
648-
}
649-
loadNewMaiaGame={(id, type, setCurrentMove) =>
650-
getAndSetUserGame(id, type, setCurrentMove)
651-
}
652-
onCustomAnalysis={() => setShowCustomModal(true)}
653-
refreshTrigger={refreshTrigger}
654-
/>
655-
</div>
656-
<div className="flex h-1/2 w-full flex-1 flex-col gap-2">
657-
<div className="flex h-full flex-col overflow-y-scroll">
637+
<div className="border-glassBorder bg-glass flex h-full w-full flex-col overflow-hidden rounded-md border backdrop-blur-md">
638+
{/* Game info header */}
639+
<GameInfo
640+
title="Analysis"
641+
icon="bar_chart"
642+
type="analysis"
643+
embedded
644+
>
645+
<NestedGameInfo />
646+
</GameInfo>
647+
{/* Game list */}
648+
<div className="flex flex-col overflow-hidden">
649+
<div className="h-4" />
650+
<div className="max-h-[32vh] min-h-[32vh]">
651+
<AnalysisGameList
652+
currentId={currentId}
653+
loadNewWorldChampionshipGame={(newId, setCurrentMove) =>
654+
getAndSetTournamentGame(newId, setCurrentMove)
655+
}
656+
loadNewLichessGame={(id, pgn, setCurrentMove) =>
657+
getAndSetLichessGame(id, pgn, setCurrentMove)
658+
}
659+
loadNewMaiaGame={(id, type, setCurrentMove) =>
660+
getAndSetUserGame(id, type, setCurrentMove)
661+
}
662+
onCustomAnalysis={() => setShowCustomModal(true)}
663+
refreshTrigger={refreshTrigger}
664+
embedded
665+
/>
666+
</div>
667+
</div>
668+
{/* Moves + controller */}
669+
<div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
670+
<div className="h-4" />
658671
<MovesContainer
659672
game={analyzedGame}
660673
termination={analyzedGame.termination}
@@ -666,7 +679,10 @@ const Analysis: React.FC<Props> = ({
666679
disableMoveClicking={
667680
controller.learnFromMistakes.state.isActive
668681
}
682+
embedded
683+
heightClass="h-40"
669684
/>
685+
{/* No spacer here to keep controller tight to moves */}
670686
<BoardController
671687
gameTree={controller.gameTree}
672688
orientation={controller.orientation}
@@ -682,6 +698,7 @@ const Analysis: React.FC<Props> = ({
682698
controller.learnFromMistakes.state.isActive
683699
}
684700
disableNavigation={controller.learnFromMistakes.state.isActive}
701+
embedded
685702
/>
686703
</div>
687704
</div>
@@ -1265,13 +1282,13 @@ const Analysis: React.FC<Props> = ({
12651282
/>
12661283
</Head>
12671284
{/* Radial gradient backdrop to match new design language */}
1268-
<div
1285+
{/* <div
12691286
className="pointer-events-none absolute inset-0"
12701287
style={{
12711288
background:
12721289
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
12731290
}}
1274-
/>
1291+
/> */}
12751292
<AnimatePresence>
12761293
{controller.maia.status === 'no-cache' ||
12771294
controller.maia.status === 'downloading' ? (

0 commit comments

Comments
 (0)