Skip to content

Commit c2164a9

Browse files
kevinjosethomaskevinjosethomas
committed
feat: clean up chessboards + improve responsiveness + improve landing page
1 parent 9f3dd51 commit c2164a9

File tree

7 files changed

+331
-245
lines changed

7 files changed

+331
-245
lines changed

‎src/components/Core/Footer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const Footer: React.FC = () => {
8989
]
9090

9191
return (
92-
<div className="mt-20 flex flex-col items-start justify-center gap-8 bg-background-1/60 px-6 py-8 md:items-center md:px-4">
92+
<div className="flex flex-col items-start justify-center gap-8 bg-background-1/60 px-6 py-8 md:items-center md:px-4">
9393
<div className="flex w-full max-w-4xl flex-col items-start justify-start gap-4 md:flex-row md:items-center md:justify-center md:gap-8">
9494
<div className="mb-2 flex flex-col items-start gap-1 md:mb-0 md:items-center md:gap-0.5">
9595
<div className="flex items-center gap-2">

‎src/components/Home/AboutMaia.tsx

Lines changed: 44 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -97,26 +97,25 @@ export const AboutMaia = () => {
9797
<div className="font-helvetica [&_a]:text-human-3">
9898
<section
9999
id="main_info"
100-
className="relative flex items-center justify-center bg-background-1 py-20 text-center"
100+
className="relative flex flex-col items-center justify-center bg-background-1 py-20 text-center"
101101
ref={projectRef}
102102
>
103-
<div className="z-10 mx-auto my-0 max-w-[1170px]">
104-
<div className="m-auto box-border w-auto px-4 md:w-2/3">
105-
<h3 className="text-xl font-bold uppercase">
106-
Human-AI Collaboration for Chess
107-
</h3>
108-
<h2 className="mx-auto my-8 text-center text-4xl font-bold">
109-
What is Maia Chess?
110-
</h2>
103+
<div className="flex max-w-3xl flex-col items-center justify-center">
104+
<h3 className="text-xs font-bold uppercase tracking-wide">
105+
Human-AI Collaboration for Chess
106+
</h3>
107+
<h2 className="mb-6 mt-2 text-center text-4xl font-bold">
108+
What is Maia Chess?
109+
</h2>
110+
<div className="flex flex-col gap-4">
111111
<p className="text-primary/90">
112112
Maia is a human-like chess engine, designed to play like a human
113113
instead of playing the strongest moves. Maia uses the same deep
114114
learning techniques that power superhuman chess engines, but with
115115
a novel approach: Maia is trained to play like a human rather than
116116
to win.
117117
</p>
118-
<br />
119-
<br />
118+
120119
<p className="text-primary/90">
121120
Maia is trained to predict human moves rather than to find the
122121
optimal move in a position. As a result, Maia exhibits common
@@ -125,38 +124,30 @@ export const AboutMaia = () => {
125124
targeting a specific rating level on the Lichess.org rating scale,
126125
from 1100 to 1900.
127126
</p>
128-
<br />
129-
<br />
127+
130128
<p className="text-primary/90">
131-
We introduced Maia in our paper that appeared at NeurIPS 2020.
129+
We introduced Maia in our paper that appeared at KDD 2020, and
130+
Maia 2 in our paper that appeared at NeurIPS 2024.
132131
</p>
133-
<br />
134-
<div className="mx-auto flex items-center justify-center gap-4">
135-
<motion.div
136-
whileHover={{ scale: 1.05 }}
137-
whileTap={{ scale: 0.95 }}
138-
>
139-
<Link
140-
href="/"
141-
className="rounded bg-human-3 p-4 !text-white transition-opacity hover:opacity-90"
142-
>
143-
Play Maia Chess
144-
</Link>
145-
</motion.div>
146-
<motion.div
147-
whileHover={{ scale: 1.05 }}
148-
whileTap={{ scale: 0.95 }}
149-
>
150-
<a
151-
target="_blank"
152-
rel="noreferrer"
153-
href="https://maiachess.com/maia-paper.pdf"
154-
className="rounded bg-engine-3 p-4 !text-white transition-opacity hover:opacity-90"
155-
>
156-
Read Paper
157-
</a>
158-
</motion.div>
159-
</div>
132+
</div>
133+
<br />
134+
<div className="flex items-center justify-center gap-2">
135+
<a
136+
target="_blank"
137+
rel="noreferrer"
138+
href="https://arxiv.org/pdf/2006.01855"
139+
className="rounded bg-human-3 px-6 py-2 !text-primary transition duration-200 hover:bg-human-4"
140+
>
141+
Read Maia-1 Paper
142+
</a>
143+
<a
144+
target="_blank"
145+
rel="noreferrer"
146+
href="https://www.cs.toronto.edu/~ashton/pubs/maia2-neurips2024.pdf"
147+
className="rounded bg-human-3 px-6 py-2 !text-primary transition duration-200 hover:bg-human-4"
148+
>
149+
Read Maia-2 Paper
150+
</a>
160151
</div>
161152
</div>
162153
</section>
@@ -179,25 +170,20 @@ export const AboutMaia = () => {
179170
</section>
180171

181172
<section
182-
className="relative flex flex-col justify-evenly overflow-hidden bg-background-1 py-20"
173+
className="relative flex flex-col items-center justify-center gap-2 overflow-hidden bg-background-1 py-20"
183174
ref={acknowledgementsRef}
184175
>
185-
<div className="z-10 mx-auto my-0 max-w-[1170px]">
186-
<div className="m-auto box-border w-auto px-4 md:w-2/3">
187-
<h3 className="text-center text-xl font-bold uppercase">
188-
Acknowledgments
189-
</h3>
190-
<p className="text-center text-primary/90">
191-
Many thanks to Lichess.org for providing the human games that we
192-
trained on and hosting our Maia models that you can play against.
193-
Ashton Anderson was supported in part by an NSERC grant, a
194-
Microsoft Research gift, and a CFI grant. Jon Kleinberg was
195-
supported in part by a Simons Investigator Award, a Vannevar Bush
196-
Faculty Fellowship, a MURI grant, and a MacArthur Foundation
197-
grant.
198-
</p>
199-
</div>
200-
</div>
176+
<h3 className="text-center text-xl font-bold uppercase">
177+
Acknowledgments
178+
</h3>
179+
<p className="max-w-4xl text-center text-primary/90">
180+
Many thanks to Lichess.org for providing the human games that we
181+
trained on and hosting our Maia models that you can play against.
182+
Ashton Anderson was supported in part by an NSERC grant, a Microsoft
183+
Research gift, and a CFI grant. Jon Kleinberg was supported in part by
184+
a Simons Investigator Award, a Vannevar Bush Faculty Fellowship, a
185+
MURI grant, and a MacArthur Foundation grant.
186+
</p>
201187
</section>
202188
</div>
203189
)

‎src/components/Home/PageNavigation.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { motion } from 'framer-motion'
33
export const PageNavigation = () => {
44
return (
55
<motion.div
6-
className="sticky top-0 z-20 flex flex-row items-center justify-center gap-6 border-y border-background-3/20 bg-background-2 py-4 text-sm uppercase tracking-wider backdrop-blur-md"
7-
initial={{ opacity: 0, y: -10 }}
8-
animate={{ opacity: 1, y: 0 }}
6+
className="sticky top-0 z-20 flex flex-row flex-wrap items-center justify-center gap-3 border-y border-background-3/20 bg-background-2 px-3 py-4 text-sm uppercase tracking-wider backdrop-blur-md md:gap-6"
7+
initial={{ opacity: 0 }}
8+
animate={{ opacity: 1 }}
99
transition={{ duration: 0.3 }}
1010
>
1111
<NavLink href="#play-section" label="Play" />
@@ -33,19 +33,13 @@ const NavLink = ({ href, label }: { href: string; label: string }) => {
3333
}
3434

3535
return (
36-
<motion.a
36+
<a
3737
href={href}
3838
onClick={handleClick}
39-
className="relative px-2 !text-primary"
40-
whileHover={{ scale: 1.05 }}
41-
whileTap={{ scale: 0.95 }}
39+
className="relative px-2 !text-primary/80 transition-opacity duration-200 hover:!text-primary"
4240
>
4341
{label}
44-
<motion.div
45-
className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3"
46-
whileHover={{ width: '100%' }}
47-
transition={{ duration: 0.2 }}
48-
/>
49-
</motion.a>
42+
<div className="absolute -bottom-1 left-0 h-0.5 w-0 bg-human-3 transition-all duration-200 hover:w-full" />
43+
</a>
5044
)
5145
}

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

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,22 +20,18 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
2020
threshold: 0.1,
2121
})
2222

23-
// Force re-render for chessboard components
2423
const [renderKey, setRenderKey] = useState(0)
2524
const [windowSize, setWindowSize] = useState({ width: 0, height: 0 })
2625

27-
// Handle window resize
2826
useEffect(() => {
2927
const handleResize = () => {
3028
setWindowSize({
3129
width: window.innerWidth,
3230
height: window.innerHeight,
3331
})
34-
// Force a redraw when window size changes
3532
setRenderKey((prev) => prev + 1)
3633
}
3734

38-
// Set initial size
3935
handleResize()
4036

4137
window.addEventListener('resize', handleResize)
@@ -44,12 +40,10 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
4440

4541
useEffect(() => {
4642
if (inView) {
47-
// Force a redraw after component becomes visible
4843
const timeoutId = setTimeout(() => {
4944
setRenderKey((prev) => prev + 1)
5045
}, 100)
5146

52-
// Force additional redraws with timing variations
5347
const secondTimeoutId = setTimeout(() => {
5448
setRenderKey((prev) => prev + 1)
5549
}, 300)
@@ -73,7 +67,6 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
7367
ref={ref}
7468
>
7569
<div className="mx-auto flex w-full max-w-[90%] flex-col-reverse items-center px-4 md:flex-row md:gap-8 lg:gap-12">
76-
{/* Analysis Interface Visual */}
7770
<motion.div
7871
className="relative mt-6 w-full md:mt-0 md:w-1/2"
7972
initial={{ opacity: 0, y: 20 }}
@@ -88,23 +81,23 @@ export const AnalysisSection = ({ id }: AnalysisSectionProps) => {
8881
<div className="w-full rounded-t-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
8982
Magnus Carlsen (2850)
9083
</div>
91-
<motion.div
92-
className="aspect-square w-full"
93-
initial={{ opacity: 0, scale: 0.95 }}
94-
animate={
95-
inView
96-
? { opacity: 1, scale: 1 }
97-
: { opacity: 0, scale: 0.95 }
98-
}
99-
transition={{ duration: 0.3, delay: 0.3 }}
84+
<div
85+
className="relative w-full"
86+
style={{
87+
aspectRatio: '1/1',
88+
transform: 'translateZ(0)',
89+
}}
10090
>
10191
<div
10292
className="h-full w-full"
103-
style={{ transform: 'translateZ(0)' }}
93+
style={{
94+
position: 'relative',
95+
transform: 'translateZ(0)',
96+
}}
10497
>
10598
<SimplifiedChessboard forceKey={renderKey} />
10699
</div>
107-
</motion.div>
100+
</div>
108101
<div className="rounded-b-sm bg-background-1/60 p-2 text-left text-sm font-medium text-primary/80">
109102
Hikaru Nakamura (2836)
110103
</div>

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

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
import { useContext, useState, useEffect } from 'react'
2-
import { motion, AnimatePresence } from 'framer-motion'
3-
import { useInView } from 'react-intersection-observer'
4-
import Chessground from '@react-chess/chessground'
1+
import { Chess } from 'chess.ts'
2+
import { PlayType } from 'src/types'
3+
import { motion } from 'framer-motion'
54
import type { Key } from 'chessground/types'
65
import type { DrawShape } from 'chessground/draw'
7-
import { Chess } from 'chess.ts'
8-
6+
import Chessground from '@react-chess/chessground'
7+
import { useInView } from 'react-intersection-observer'
8+
import { useContext, useState, useEffect } from 'react'
99
import { ModalContext, AuthContext } from 'src/contexts'
10-
import { PlayType } from 'src/types'
1110

12-
// A key position with multiple human moves and their probabilities
1311
const DEMO_POSITION = {
1412
fen: 'r1bqkb1r/pppp1ppp/2n2n2/4p3/2B1P3/3P1N2/PPP2PPP/RNBQK2R b KQkq - 0 1',
1513
moves: [
16-
{ from: 'f8', to: 'c5', probability: 0.45 }, // Most common human move - develop bishop
17-
{ from: 'f6', to: 'e4', probability: 0.25 }, // Second most common - tactical capture
18-
{ from: 'd7', to: 'd6', probability: 0.15 }, // Third most common - solid defense
19-
{ from: 'f6', to: 'd7', probability: 0.1 }, // Fourth most common - reposition knight
20-
{ from: 'c6', to: 'a5', probability: 0.05 }, // Fifth most common - attack bishop
14+
{ from: 'f8', to: 'c5', probability: 0.45 },
15+
{ from: 'f6', to: 'e4', probability: 0.25 },
16+
{ from: 'd7', to: 'd6', probability: 0.15 },
17+
{ from: 'f6', to: 'd7', probability: 0.1 },
18+
{ from: 'c6', to: 'a5', probability: 0.05 },
2119
],
2220
}
2321

24-
// Training positions that flow into the main board
2522
const TRAINING_POSITIONS = [
2623
'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq - 0 1',
2724
'rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2',
@@ -133,7 +130,6 @@ const AnimatedTrainingBoards = ({ inView }: { inView: boolean }) => {
133130
setCurrentBatch((prev) => (prev + 1) % 3)
134131
}, 3000)
135132

136-
// Force a redraw to ensure proper piece positioning
137133
const timeoutId = setTimeout(() => {
138134
setRenderKey((prev) => prev + 1)
139135
}, 100)
@@ -170,7 +166,7 @@ const AnimatedTrainingBoards = ({ inView }: { inView: boolean }) => {
170166
coordinates: false,
171167
drawable: { enabled: false },
172168
animation: {
173-
duration: 0, // Disable animations to prevent positioning issues
169+
duration: 0,
174170
},
175171
}}
176172
/>
@@ -183,11 +179,9 @@ const AnimatedTrainingBoards = ({ inView }: { inView: boolean }) => {
183179

184180
const PredictionBoard = () => {
185181
const [chess] = useState(new Chess(DEMO_POSITION.fen))
186-
// This will force a re-render when needed
187182
const [renderKey, setRenderKey] = useState(0)
188183

189184
useEffect(() => {
190-
// Force a redraw to ensure proper piece positioning
191185
const timeoutId = setTimeout(() => {
192186
setRenderKey((prev) => prev + 1)
193187
}, 100)
@@ -223,7 +217,7 @@ const PredictionBoard = () => {
223217
},
224218
},
225219
animation: {
226-
duration: 0, // Disable animations to prevent positioning issues
220+
duration: 0,
227221
},
228222
}}
229223
/>

0 commit comments

Comments
 (0)