Skip to content

Commit 45e670c

Browse files
kevinjosethomaskevinjosethomas
committed
feat: clean up front page
1 parent 7b73991 commit 45e670c

4 files changed

Lines changed: 74 additions & 46 deletions

File tree

‎src/components/Home/Sections/AnalysisSection.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
6868
>
6969
<div className="mx-auto flex w-full max-w-[95%] flex-col-reverse items-center px-2 md:max-w-[90%] md:flex-row md:gap-8 md:px-4 lg:gap-12">
7070
<motion.div
71-
className="relative mt-4 w-full md:mt-0 md:mt-6 md:w-1/2"
71+
className="relative mt-4 w-full md:mt-6 md:w-1/2"
7272
initial={{ opacity: 0, y: 20 }}
7373
animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
7474
transition={{ duration: 0.4, ease: 'easeOut' }}
@@ -103,7 +103,7 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
103103
</div>
104104
</div>
105105
</div>
106-
<div className="flex w-1/2 flex-col justify-between">
106+
<div className="flex w-1/2 flex-col justify-between gap-3">
107107
<motion.div
108108
className="flex-1"
109109
initial={{ opacity: 0, y: 20 }}
@@ -115,7 +115,6 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
115115
<SimplifiedHighlight />
116116
</motion.div>
117117
<motion.div
118-
className="mt-4"
119118
initial={{ opacity: 0, y: 20 }}
120119
animate={
121120
inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }

‎src/components/Home/Sections/PlaySection.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ export const PlaySection = ({ id }: PlaySectionProps) => {
5151
ref={ref}
5252
>
5353
<div className="mx-auto flex w-full max-w-[95%] flex-col items-center px-2 md:max-w-[90%] md:flex-row md:gap-12 md:px-4 lg:gap-16">
54-
<div className="mb-6 w-full md:mb-0 md:mb-10 md:w-1/2">
54+
<div className="mb-6 w-full md:mb-10 md:w-1/2">
5555
<div className="mb-3 inline-block rounded-full bg-human-3/10 px-4 py-1 text-sm font-medium text-human-3 md:mb-4">
5656
Play Against Maia
5757
</div>
58-
<h2 className="mb-4 max-w-2xl text-2xl font-bold md:mb-6 md:text-3xl md:text-4xl lg:text-5xl">
58+
<h2 className="mb-4 max-w-2xl text-2xl font-bold md:mb-6 md:text-4xl lg:text-5xl">
5959
Experience human-like chess AI
6060
</h2>
6161
<p className="mb-3 max-w-2xl text-base text-primary/80 md:mb-4 md:text-lg">
@@ -143,19 +143,7 @@ const AnimatedTrainingBoards = ({ inView }: { inView: boolean }) => {
143143
return (
144144
<>
145145
{[...Array(36)].map((_, i) => (
146-
<motion.div
147-
key={i}
148-
className="relative"
149-
initial={{ opacity: 0.3 }}
150-
animate={{
151-
opacity: [0.3, 1, 0.3],
152-
}}
153-
transition={{
154-
duration: 3,
155-
delay: (i % 12) * 0.1 + currentBatch,
156-
repeat: Infinity,
157-
}}
158-
>
146+
<motion.div key={i} className="relative">
159147
<div className="h-full w-full">
160148
<Chessground
161149
key={`board-${i}-${renderKey}`}

‎src/components/Home/Sections/SimplifiedAnalysisComponents.tsx‎

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ const getSanForMove = (move: string | number | undefined) => {
125125
return move?.toString() ?? ''
126126
}
127127

128-
// Simplified MovesByRating component
129128
export const SimplifiedMovesByRating = () => {
130129
return (
131130
<div className="flex h-64 w-full flex-col rounded bg-background-1/60 md:h-full">
@@ -415,8 +414,8 @@ export const SimplifiedMoveMap = () => {
415414

416415
export const SimplifiedBlunderMeter = () => {
417416
return (
418-
<div className="flex w-full flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3">
419-
<div className="flex h-8 w-full flex-col overflow-hidden">
417+
<div className="flex w-full flex-col gap-1 overflow-hidden rounded bg-background-1/60 p-3">
418+
<div className="flex h-6 w-full flex-col overflow-hidden">
420419
<div className="flex h-full w-full select-none flex-row overflow-hidden rounded">
421420
<motion.div
422421
className="flex h-full flex-col items-start justify-start overflow-hidden"
@@ -432,7 +431,6 @@ export const SimplifiedBlunderMeter = () => {
432431
</motion.p>
433432
</motion.div>
434433
</motion.div>
435-
436434
<motion.div
437435
className="flex h-full flex-col items-start justify-start overflow-hidden"
438436
animate={{
@@ -536,6 +534,15 @@ export const SimplifiedChessboard = ({ forceKey }: { forceKey?: number }) => {
536534
}
537535

538536
export const SimplifiedHighlight = () => {
537+
const moveData = [
538+
{ move: 'Rb7+', maiaPct: '67.3%', sfEval: '+2.1', color: '#238b45' },
539+
{ move: 'Rb6+', maiaPct: '24.8%', sfEval: '+1.8', color: '#41ab5d' },
540+
{ move: 'Re7', maiaPct: '5.2%', sfEval: '+1.4', color: '#74c476' },
541+
{ move: 'Rc5', maiaPct: '2.1%', sfEval: '+0.9', color: '#a1d99b' },
542+
{ move: 'Ra5', maiaPct: '0.4%', sfEval: '+0.3', color: '#c7e9c0' },
543+
{ move: 'Rd5', maiaPct: '0.2%', sfEval: '-0.1', color: '#feb24c' },
544+
]
545+
539546
return (
540547
<div className="flex w-full flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3">
541548
<p className="text-lg text-primary">Position Analysis</p>
@@ -563,32 +570,62 @@ export const SimplifiedHighlight = () => {
563570
</div>
564571
<div className="col-span-2 grid grid-cols-2 gap-2 border-t border-white/10 pt-2">
565572
<div className="grid grid-rows-2 items-center justify-center">
566-
<div className="grid cursor-pointer grid-cols-2 gap-3">
567-
<p className="text-right font-mono text-xs text-[#238b45]">
568-
67.3%
569-
</p>
570-
<p className="text-left font-mono text-xs text-[#238b45]">Rb7+</p>
571-
</div>
572-
<div className="grid cursor-pointer grid-cols-2 gap-3">
573-
<p className="text-right font-mono text-xs text-[#41ab5d]">
574-
24.8%
575-
</p>
576-
<p className="text-left font-mono text-xs text-[#41ab5d]">Rb6+</p>
577-
</div>
573+
{moveData.map((data, index) => {
574+
let visibilityClass = ''
575+
if (index === 2) visibilityClass = 'hidden xl:grid'
576+
else if (index === 3) visibilityClass = 'hidden 2xl:grid'
577+
else if (index === 4) visibilityClass = 'hidden 3xl:grid'
578+
else if (index === 5) visibilityClass = 'hidden 4xl:grid'
579+
580+
return (
581+
<div
582+
key={`maia-${index}`}
583+
className={`grid cursor-pointer grid-cols-2 gap-3 ${visibilityClass}`}
584+
>
585+
<p
586+
className="text-right font-mono text-xs"
587+
style={{ color: data.color }}
588+
>
589+
{data.maiaPct}
590+
</p>
591+
<p
592+
className="text-left font-mono text-xs"
593+
style={{ color: data.color }}
594+
>
595+
{data.move}
596+
</p>
597+
</div>
598+
)
599+
})}
578600
</div>
579601
<div className="grid grid-rows-2 items-center justify-center">
580-
<div className="grid cursor-pointer grid-cols-2 gap-3">
581-
<p className="text-right font-mono text-xs text-[#238b45]">
582-
+2.1
583-
</p>
584-
<p className="text-left font-mono text-xs text-[#238b45]">Rb7+</p>
585-
</div>
586-
<div className="grid cursor-pointer grid-cols-2 gap-3">
587-
<p className="text-right font-mono text-xs text-[#41ab5d]">
588-
+1.8
589-
</p>
590-
<p className="text-left font-mono text-xs text-[#41ab5d]">Rb6+</p>
591-
</div>
602+
{moveData.map((data, index) => {
603+
let visibilityClass = ''
604+
if (index === 2) visibilityClass = 'hidden xl:grid'
605+
else if (index === 3) visibilityClass = 'hidden 2xl:grid'
606+
else if (index === 4) visibilityClass = 'hidden 3xl:grid'
607+
else if (index === 5) visibilityClass = 'hidden 4xl:grid'
608+
609+
return (
610+
<div
611+
key={`sf-${index}`}
612+
className={`grid cursor-pointer grid-cols-2 gap-3 ${visibilityClass}`}
613+
>
614+
<p
615+
className="text-right font-mono text-xs"
616+
style={{ color: data.color }}
617+
>
618+
{data.sfEval}
619+
</p>
620+
<p
621+
className="text-left font-mono text-xs"
622+
style={{ color: data.color }}
623+
>
624+
{data.move}
625+
</p>
626+
</div>
627+
)
628+
})}
592629
</div>
593630
</div>
594631
</div>

‎tailwind.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ module.exports = {
44
darkMode: 'class',
55
theme: {
66
extend: {
7+
screens: {
8+
'3xl': '1920px',
9+
'4xl': '2560px',
10+
},
711
colors: {
812
backdrop: 'rgb(var(--color-backdrop))',
913
primary: 'rgb(var(--color-text-primary))',

0 commit comments

Comments
 (0)