Tony_tech/chess-project
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i18n

Browse Source
This commit is contained in:
Stefan
2025-11-23 13:36:10 +01:00
parent ad104f2c31
commit a4a42488bb
13 changed files with 743 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+64
View File
@@ -0,0 +1,64 @@
# Multi-stage build for optimal production image
# Stage 1: Dependencies
FROM node:20-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
# Copy package files
COPY package.json package-lock.json ./
# Install all dependencies (including dev dependencies needed for build)
RUN npm ci
# Stage 2: Builder
FROM node:20-alpine AS builder
WORKDIR /app
# Copy dependencies from deps stage
COPY --from=deps /app/node_modules ./node_modules
COPY . .
# Set environment variable for build (optional - can be overridden at runtime)
ARG NEXT_PUBLIC_GEMINI_API_KEY
ENV NEXT_PUBLIC_GEMINI_API_KEY=$NEXT_PUBLIC_GEMINI_API_KEY
# Build Next.js application with standalone output
ENV NEXT_TELEMETRY_DISABLED=1
RUN npm run build
# Stage 3: Runner
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
# Create non-root user for security
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
# Copy necessary files from builder
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
# Set ownership to non-root user
RUN chown -R nextjs:nodejs /app
# Switch to non-root user
USER nextjs
# Expose port 3050
EXPOSE 3050
# Set port environment variable
ENV PORT=3050
ENV HOSTNAME="0.0.0.0"
# Health check
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
CMD node -e "require('http').get('http://localhost:3050/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})" || exit 1
# Start the application
CMD ["node", "server.js"]
README.md
+79 -1
View File
@@ -99,6 +99,84 @@ You have two options for providing your Gemini API key:
> [!NOTE] > [!NOTE]
> You can update your API key anytime by clicking the key icon in the bottom-right corner of the application. > You can update your API key anytime by clicking the key icon in the bottom-right corner of the application.
## Docker Deployment
### Quick Start with Docker
The easiest way to deploy Chess Tutor is using Docker Compose:
```bash
# Clone the repository
git clone https://github.com/your-username/chess_tutor.git
cd chess_tutor
# (Optional) Create .env file with your API key
echo "NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here" > .env
# Build and start the container
docker-compose up -d
# View logs
docker-compose logs -f
```
The application will be available at `http://localhost:3050`
### Environment Variables
You have two options for providing the Gemini API key:
1. **Environment Variable** (recommended for server deployment):
- Create a `.env` file in the project root
- Add: `NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here`
- The application will automatically use this key
2. **Browser Storage** (fallback):
- If no environment variable is set, users will be prompted to enter their API key
- The key is stored in browser localStorage
> [!NOTE]
> The API key is never logged or exposed in application logs. It's only used for API calls to Google Gemini.
### Nginx Reverse Proxy
For production deployment behind nginx, use the provided `nginx.conf.example`:
```bash
# Copy the example configuration
sudo cp nginx.conf.example /etc/nginx/sites-available/chess-tutor
# Edit the configuration
sudo nano /etc/nginx/sites-available/chess-tutor
# Update: server_name, SSL certificates (if using HTTPS)
# Enable the site
sudo ln -s /etc/nginx/sites-available/chess-tutor /etc/nginx/sites-enabled/
# Test nginx configuration
sudo nginx -t
# Reload nginx
sudo systemctl reload nginx
```
### Manual Docker Build
If you prefer to build manually:
```bash
# Build the image
docker build -t chess-tutor:latest .
# Run the container
docker run -d \
--name chess-tutor \
-p 3050:3050 \
-e NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here \
--restart unless-stopped \
chess-tutor:latest
```
## Credits ## Credits
- Opening collection originally by [ragizaki/ChessOpeningsRecommender](https://github.com/ragizaki/ChessOpeningsRecommender) - Opening collection originally by [ragizaki/ChessOpeningsRecommender](https://github.com/ragizaki/ChessOpeningsRecommender)
- Chess engine: [Stockfish](https://stockfishchess.org/) - Chess engine: [Stockfish](https://stockfishchess.org/)
@@ -119,7 +197,7 @@ pnpm dev
bun dev bun dev
``` ```
Open [http://localhost:3000](http://localhost:3050) with your browser to see the result. Open [http://localhost:3050](http://localhost:3050) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
docker-compose.yml
+35
View File
@@ -0,0 +1,35 @@
version: '3.8'
services:
chess-tutor:
build:
context: .
dockerfile: Dockerfile
args:
# Optional: Set API key at build time (not recommended for security)
# NEXT_PUBLIC_GEMINI_API_KEY: ${NEXT_PUBLIC_GEMINI_API_KEY}
image: chess-tutor:latest
container_name: chess-tutor
restart: unless-stopped
ports:
- "3050:3050"
environment:
# Optional: Set API key at runtime (recommended approach)
# Users can still use browser-based API key if this is not set
- NEXT_PUBLIC_GEMINI_API_KEY=${NEXT_PUBLIC_GEMINI_API_KEY:-}
- NODE_ENV=production
healthcheck:
test: ["CMD", "node", "-e", "require('http').get('http://localhost:3050', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s
# Optional: Add volumes for persistent data if needed
# volumes:
# - ./data:/app/data
networks:
- chess-tutor-network
networks:
chess-tutor-network:
driver: bridge
jest.setup.ts
+4
View File
@@ -0,0 +1,4 @@
import '@testing-library/jest-dom'
// Mock scrollIntoView for JSDOM
window.HTMLElement.prototype.scrollIntoView = jest.fn();
next.config.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import type { NextConfig } from "next"; import type { NextConfig } from "next";
const nextConfig: NextConfig = { const nextConfig: NextConfig = {
/* config options here */ output: 'standalone',
}; };
export default nextConfig; export default nextConfig;
nginx.conf.example
+96
View File
@@ -0,0 +1,96 @@
# Example nginx configuration for reverse proxy
# Copy this file to your nginx sites-available directory and modify as needed
# Example: /etc/nginx/sites-available/chess-tutor
upstream chess_tutor {
server localhost:3050;
keepalive 64;
}
server {
listen 80;
listen [::]:80;
server_name your-domain.com www.your-domain.com;
# Redirect HTTP to HTTPS (uncomment when SSL is configured)
# return 301 https://$server_name$request_uri;
# If not using HTTPS, use this location block instead:
location / {
proxy_pass http://chess_tutor;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
# Timeouts
proxy_connect_timeout 60s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
}
# Gzip compression
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
gzip_disable "MSIE [1-6]\.";
}
# HTTPS configuration (uncomment and configure when you have SSL certificates)
# server {
# listen 443 ssl http2;
# listen [::]:443 ssl http2;
# server_name your-domain.com www.your-domain.com;
#
# # SSL certificate paths (use Let's Encrypt or your own certificates)
# ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
# ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
#
# # SSL configuration
# ssl_protocols TLSv1.2 TLSv1.3;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# ssl_session_cache shared:SSL:10m;
# ssl_session_timeout 10m;
#
# # Security headers
# add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
# add_header X-Frame-Options "SAMEORIGIN" always;
# add_header X-Content-Type-Options "nosniff" always;
# add_header X-XSS-Protection "1; mode=block" always;
#
# location / {
# proxy_pass http://chess_tutor;
# proxy_http_version 1.1;
# proxy_set_header Upgrade $http_upgrade;
# proxy_set_header Connection 'upgrade';
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-Proto $scheme;
# proxy_cache_bypass $http_upgrade;
#
# # Timeouts
# proxy_connect_timeout 60s;
# proxy_send_timeout 60s;
# proxy_read_timeout 60s;
# }
#
# # Gzip compression
# gzip on;
# gzip_vary on;
# gzip_min_length 1024;
# gzip_proxied any;
# gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json application/javascript;
# gzip_disable "MSIE [1-6]\.";
#
# # Rate limiting (optional but recommended)
# # limit_req_zone $binary_remote_addr zone=chess_tutor_limit:10m rate=10r/s;
# # limit_req zone=chess_tutor_limit burst=20 nodelay;
# }
src/app/api/health/route.ts
+12
View File
@@ -0,0 +1,12 @@
import { NextResponse } from 'next/server';
export async function GET() {
return NextResponse.json(
{
status: 'ok',
timestamp: new Date().toISOString(),
service: 'chess-tutor'
},
{ status: 200 }
);
}
src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

src/app/layout.tsx
+2 -2
View File
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Chess Tutor - Learn Chess with AI",
description: "Generated by create next app", description: "Learn chess with AI-powered tutoring from Gemini and Stockfish engine analysis",
}; };
export default function RootLayout({ export default function RootLayout({
src/app/page.tsx
+1 -17
View File
@@ -1,21 +1,5 @@
import ChessGame from "@/components/ChessGame"; import ChessGame from "@/components/ChessGame";
export default function Home() { export default function Home() {
return ( return <ChessGame />;
<main className="flex min-h-screen flex-col items-center justify-between p-8 bg-gray-50 dark:bg-gray-900">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Chess Tutor with Gemini & Stockfish
</p>
</div>
<div className="w-full max-w-6xl mt-8">
<ChessGame />
</div>
<div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
</div>
</main>
);
} }
src/components/ChessGame.tsx
+352 -267
View File
@@ -8,6 +8,9 @@ import { Tutor } from "./Tutor";
import { APIKeyInput } from "./APIKeyInput"; import { APIKeyInput } from "./APIKeyInput";
import { EvaluationBar } from "./EvaluationBar"; import { EvaluationBar } from "./EvaluationBar";
import { Personality, PERSONALITIES } from "@/lib/personalities"; import { Personality, PERSONALITIES } from "@/lib/personalities";
import Header from "./Header";
import { useTranslation } from "@/lib/i18n/useTranslation";
import { SupportedLanguage } from "@/lib/i18n/translations";
import { lookupOpening, OpeningMetadata } from "@/lib/openings"; import { lookupOpening, OpeningMetadata } from "@/lib/openings";
@@ -36,12 +39,16 @@ export default function ChessGame() {
const [stockfishDepth, setStockfishDepth] = useState(15); const [stockfishDepth, setStockfishDepth] = useState(15);
// New States // New States
const [language, setLanguage] = useState<'en' | 'de' | 'fr' | 'it'>('en'); const [language, setLanguage] = useState<SupportedLanguage>('en');
const [gameStarted, setGameStarted] = useState(false); const [gameStarted, setGameStarted] = useState(false);
const [showNewGameOptions, setShowNewGameOptions] = useState(false); const [showNewGameOptions, setShowNewGameOptions] = useState(false);
const [showAnalysisModal, setShowAnalysisModal] = useState(false); const [showAnalysisModal, setShowAnalysisModal] = useState(false);
const [customFen, setCustomFen] = useState(""); const [customFen, setCustomFen] = useState("");
// Color Selection State
const [colorSelection, setColorSelection] = useState<'white' | 'black' | 'random'>('white');
const [playerColor, setPlayerColor] = useState<'white' | 'black'>('white');
// Game Over & History State // Game Over & History State
const [gameOverState, setGameOverState] = useState<{ result: string, winner: "White" | "Black" | "Draw" } | null>(null); const [gameOverState, setGameOverState] = useState<{ result: string, winner: "White" | "Black" | "Draw" } | null>(null);
const [moveHistory, setMoveHistory] = useState<MoveHistoryItem[]>([]); const [moveHistory, setMoveHistory] = useState<MoveHistoryItem[]>([]);
@@ -49,6 +56,9 @@ export default function ChessGame() {
// Personality State // Personality State
const [selectedPersonality, setSelectedPersonality] = useState<Personality | null>(null); const [selectedPersonality, setSelectedPersonality] = useState<Personality | null>(null);
// Translation
const t = useTranslation(language);
useEffect(() => { useEffect(() => {
const sf = new Stockfish(); const sf = new Stockfish();
setStockfish(sf); setStockfish(sf);
@@ -251,6 +261,12 @@ export default function ChessGame() {
setFen(startFen); setFen(startFen);
setSelectedPersonality(personality); setSelectedPersonality(personality);
// Determine player color (resolve random)
let finalPlayerColor: 'white' | 'black' = colorSelection === 'random'
? (Math.random() < 0.5 ? 'white' : 'black')
: colorSelection;
setPlayerColor(finalPlayerColor);
// Reset Analysis State // Reset Analysis State
setUserMove(null); setUserMove(null);
setComputerMove(null); setComputerMove(null);
@@ -262,6 +278,31 @@ export default function ChessGame() {
setGameStarted(true); setGameStarted(true);
setCustomFen(""); // Clear input setCustomFen(""); // Clear input
// If player is Black, computer moves first
if (finalPlayerColor === 'black' && stockfish) {
setTimeout(() => {
stockfish.evaluate(startFen, stockfishDepth).then(evalResult => {
const computerMoveData = {
from: evalResult.bestMove.substring(0, 2),
to: evalResult.bestMove.substring(2, 4),
promotion: evalResult.bestMove.length > 4 ? evalResult.bestMove.substring(4, 5) : "q"
};
const compResult = makeAMove(computerMoveData);
if (compResult) {
setComputerMove(compResult.result);
const { newFen: fenAfterComp } = compResult;
setFen(fenAfterComp);
// Evaluate position after computer's first move
stockfish.evaluate(fenAfterComp, stockfishDepth).then(p0Eval => {
setEvalP0(p0Eval);
}).catch(err => console.error("Initial eval failed:", err));
}
}).catch(err => console.error("Computer first move failed:", err));
}, 500);
}
} catch (e) { } catch (e) {
alert("Invalid FEN string"); alert("Invalid FEN string");
} }
@@ -276,293 +317,337 @@ export default function ChessGame() {
const hasSavedGame = fen !== "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"; const hasSavedGame = fen !== "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
return ( return (
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4"> <>
<h1 className="text-4xl font-bold mb-8 text-gray-800 dark:text-white">Chess Tutor AI</h1> <Header language={language} />
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h1 className="text-4xl font-bold mb-8 text-gray-800 dark:text-white">{t.start.title}</h1>
<div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg max-w-2xl w-full space-y-8"> <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg max-w-2xl w-full space-y-8">
{/* Step 1: Language & API Key */} {/* Step 1: Language & API Key */}
<div className="space-y-4"> <div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">1. Settings</h2> <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t.start.settings}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Language</label> <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t.start.language}</label>
<div className="flex gap-2"> <div className="flex gap-2">
{['en', 'de', 'fr', 'it'].map((lang) => ( {(['en', 'de', 'fr', 'it'] as SupportedLanguage[]).map((lang) => (
<button <button
key={lang} key={lang}
onClick={() => setLanguage(lang as any)} onClick={() => setLanguage(lang)}
className={`px-3 py-2 rounded-lg border text-sm ${language === lang ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600'}`} className={`px-3 py-2 rounded-lg border text-sm ${language === lang ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600'}`}
> >
{lang.toUpperCase()} {lang.toUpperCase()}
</button> </button>
))} ))}
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t.start.apiKey}</label>
<input
type="password"
placeholder={t.start.apiKeyPlaceholder}
value={apiKey || ""}
onChange={(e) => setApiKey(e.target.value)}
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600"
/>
<p className="text-xs text-gray-500 mt-1">
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-blue-600 hover:underline">{t.start.getApiKey}</a>
</p>
</div> </div>
</div> </div>
</div>
<div> {/* Step 2: Game Actions */}
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Google Gemini API Key</label> <div className="space-y-4">
<input <h2 className="text-xl font-semibold text-gray-900 dark:text-white">{t.start.startGame}</h2>
type="password"
placeholder="AIzaSy..." {!apiKey ? (
value={apiKey || ""} <div className="p-4 bg-yellow-50 text-yellow-800 rounded-lg text-sm">
onChange={(e) => setApiKey(e.target.value)} {t.start.apiKeyRequired}
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600" </div>
/> ) : (
<p className="text-xs text-gray-500 mt-1"> <div className="space-y-4">
<a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noreferrer" className="text-blue-600 hover:underline">Get free key</a> {/* Resume Option */}
</p> {hasSavedGame && !showNewGameOptions && (
</div> <div className="space-y-3">
<button
onClick={handleResume}
className="w-full py-4 bg-green-600 text-white rounded-xl hover:bg-green-700 font-bold text-lg shadow-md transition-transform transform hover:scale-[1.02]"
>
{t.start.resumeGame}
</button>
<button
onClick={() => setShowNewGameOptions(true)}
className="w-full py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white text-sm"
>
{t.start.startNewGame}
</button>
</div>
)}
{/* New Game Options */}
{(!hasSavedGame || showNewGameOptions) && (
<div className="space-y-6 animate-in fade-in slide-in-from-top-4 duration-300">
{/* Color Selection */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
{t.start.colorSelection}
</label>
<div className="grid grid-cols-3 gap-3">
<button
onClick={() => setColorSelection('white')}
className={`py-3 px-4 rounded-lg border text-sm font-medium transition-all ${colorSelection === 'white'
? 'bg-blue-600 text-white border-blue-600 shadow-md'
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
}`}
>
<span className="text-2xl">♔</span> {t.start.playAsWhite}
</button>
<button
onClick={() => setColorSelection('black')}
className={`py-3 px-4 rounded-lg border text-sm font-medium transition-all ${colorSelection === 'black'
? 'bg-blue-600 text-white border-blue-600 shadow-md'
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
}`}
>
<span className="text-2xl">♚</span> {t.start.playAsBlack}
</button>
<button
onClick={() => setColorSelection('random')}
className={`py-3 px-4 rounded-lg border text-sm font-medium transition-all ${colorSelection === 'random'
? 'bg-blue-600 text-white border-blue-600 shadow-md'
: 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600'
}`}
>
<span className="text-2xl">🎲</span> {t.start.randomColor}
</button>
</div>
</div>
{/* FEN Import */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
{t.start.importPosition}
</label>
<input
type="text"
placeholder={t.start.importPositionPlaceholder}
value={customFen}
onChange={(e) => setCustomFen(e.target.value)}
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 font-mono text-sm"
/>
</div>
{/* Personality Grid */}
<div>
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t.start.chooseCoach}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{PERSONALITIES.map(p => (
<button
key={p.id}
onClick={() => handleNewGame(p)}
className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border border-gray-200 dark:border-gray-600 flex flex-col items-center text-center"
>
<div className="text-4xl mb-2">{p.image}</div>
<h3 className="font-bold text-gray-900 dark:text-white">{p.name}</h3>
<p className="text-xs text-gray-500 dark:text-gray-400">{p.description}</p>
</button>
))}
</div>
</div>
{hasSavedGame && (
<button
onClick={() => setShowNewGameOptions(false)}
className="text-sm text-gray-500 hover:text-gray-700"
>
{t.common.cancel}
</button>
)}
</div>
)}
</div>
)}
</div> </div>
</div> </div>
{/* Step 2: Game Actions */}
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">2. Start Game</h2>
{!apiKey ? (
<div className="p-4 bg-yellow-50 text-yellow-800 rounded-lg text-sm">
Please enter a valid API Key to continue.
</div>
) : (
<div className="space-y-4">
{/* Resume Option */}
{hasSavedGame && !showNewGameOptions && (
<div className="space-y-3">
<button
onClick={handleResume}
className="w-full py-4 bg-green-600 text-white rounded-xl hover:bg-green-700 font-bold text-lg shadow-md transition-transform transform hover:scale-[1.02]"
>
Resume Previous Game
</button>
<button
onClick={() => setShowNewGameOptions(true)}
className="w-full py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white text-sm"
>
Start New Game instead...
</button>
</div>
)}
{/* New Game Options */}
{(!hasSavedGame || showNewGameOptions) && (
<div className="space-y-6 animate-in fade-in slide-in-from-top-4 duration-300">
{/* FEN Import */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Import Position (Optional FEN)
</label>
<input
type="text"
placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
value={customFen}
onChange={(e) => setCustomFen(e.target.value)}
className="w-full p-2 border rounded dark:bg-gray-700 dark:border-gray-600 font-mono text-sm"
/>
</div>
{/* Personality Grid */}
<div>
<p className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Choose Your Coach:</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{PERSONALITIES.map(p => (
<button
key={p.id}
onClick={() => handleNewGame(p)}
className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors border border-gray-200 dark:border-gray-600 flex flex-col items-center text-center"
>
<div className="text-4xl mb-2">{p.image}</div>
<h3 className="font-bold text-gray-900 dark:text-white">{p.name}</h3>
<p className="text-xs text-gray-500 dark:text-gray-400">{p.description}</p>
</button>
))}
</div>
</div>
{hasSavedGame && (
<button
onClick={() => setShowNewGameOptions(false)}
className="text-sm text-gray-500 hover:text-gray-700"
>
Cancel
</button>
)}
</div>
)}
</div>
)}
</div>
</div> </div>
</div> </>
); );
} }
return ( return (
<div className="flex flex-col md:flex-row gap-8 w-full max-w-6xl mx-auto p-4"> <>
{/* API Key Input is now handled in start screen, but we keep the button for updates */} <Header language={language} />
{/* <APIKeyInput onKeySubmit={setApiKey} /> */} <div className="flex flex-col md:flex-row gap-8 w-full max-w-6xl mx-auto p-4">
{/* API Key Input is now handled in start screen, but we keep the button for updates */}
{/* <APIKeyInput onKeySubmit={setApiKey} /> */}
<div className="w-full md:w-2/3 flex flex-col gap-4"> <div className="w-full md:w-2/3 flex flex-col gap-4">
{/* Header with Back Button */} {/* Header with Back Button */}
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<button
onClick={handleBackToMenu}
className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
>
← Back to Menu
</button>
<div className="text-sm text-gray-500">
Playing as White vs {selectedPersonality?.name}
</div>
</div>
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex gap-4">
<div className="h-[560px]"> {/* Match board height roughly */}
<EvaluationBar
score={isAnalyzing ? null : evalP0?.score} // Show P0 score while waiting, or maybe P2 after move? Let's show current board eval.
mate={isAnalyzing ? null : evalP0?.mate}
/>
</div>
<div className="flex-1">
<Chessboard
options={{
position: fen,
onPieceDrop: ({ sourceSquare, targetSquare }) => onDrop({ sourceSquare, targetSquare }),
darkSquareStyle: { backgroundColor: '#779954' },
lightSquareStyle: { backgroundColor: '#e9edcc' },
animationDurationInMs: 200
}}
/>
</div>
</div>
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Stockfish Strength (Depth: {stockfishDepth})
</label>
<button <button
onClick={() => { onClick={handleBackToMenu}
const game = gameRef.current; className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-medium transition-colors"
// Undo twice: once for computer, once for user
game.undo();
game.undo();
setFen(game.fen());
// Reset moves to prevent re-analysis of old moves
setUserMove(null);
setComputerMove(null);
setEvalP0(null);
setEvalP2(null);
setOpeningData(null);
}}
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 dark:bg-red-900 dark:text-red-200 transition-colors"
> >
Undo Last Move {t.game.backToMenu}
</button> </button>
<div className="text-sm text-gray-500">
{t.game.playingAs} {playerColor === 'white' ? t.game.white : t.game.black} {t.game.vs} {selectedPersonality?.name}
</div>
</div> </div>
<input
type="range" <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex gap-4">
min="1" <div className="h-[560px]"> {/* Match board height roughly */}
max="20" <EvaluationBar
value={stockfishDepth} score={isAnalyzing ? null : evalP0?.score} // Show P0 score while waiting, or maybe P2 after move? Let's show current board eval.
onChange={(e) => setStockfishDepth(parseInt(e.target.value))} mate={isAnalyzing ? null : evalP0?.mate}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" />
</div>
<div className="flex-1">
<Chessboard
options={{
position: fen,
onPieceDrop: ({ sourceSquare, targetSquare }) => onDrop({ sourceSquare, targetSquare }),
darkSquareStyle: { backgroundColor: '#779954' },
lightSquareStyle: { backgroundColor: '#e9edcc' },
animationDurationInMs: 200,
boardOrientation: playerColor // Set board orientation based on player color
}}
/>
</div>
</div>
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
Stockfish Strength (Depth: {stockfishDepth})
</label>
<button
onClick={() => {
const game = gameRef.current;
// Undo twice: once for computer, once for user
game.undo();
game.undo();
setFen(game.fen());
// Reset moves to prevent re-analysis of old moves
setUserMove(null);
setComputerMove(null);
setEvalP0(null);
setEvalP2(null);
setOpeningData(null);
}}
className="px-3 py-1 text-sm bg-red-100 text-red-700 rounded hover:bg-red-200 dark:bg-red-900 dark:text-red-200 transition-colors"
>
Undo Last Move
</button>
</div>
<input
type="range"
min="1"
max="20"
value={stockfishDepth}
onChange={(e) => setStockfishDepth(parseInt(e.target.value))}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
/>
</div>
{/* PGN Display */}
{/* Game History (Scrollable List) */}
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex-1 min-h-0 flex flex-col">
<div className="flex items-center justify-between mb-2">
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Game History</h3>
<button
onClick={() => setShowAnalysisModal(true)}
className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-200 flex items-center gap-1"
>
<Brain size={12} /> Analyze
</button>
</div>
<div className="flex-1 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900 p-2">
<table className="w-full text-sm text-left">
<thead>
<tr className="text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
<th className="py-1 px-2 w-12">#</th>
<th className="py-1 px-2">White</th>
<th className="py-1 px-2">Black</th>
</tr>
</thead>
<tbody>
{(() => {
const history = gameRef.current.history();
const rows = [];
for (let i = 0; i < history.length; i += 2) {
rows.push(
<tr key={i} className="border-b border-gray-100 dark:border-gray-800 last:border-0">
<td className="py-1 px-2 text-gray-500 dark:text-gray-500">{Math.floor(i / 2) + 1}.</td>
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i]}</td>
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i + 1] || ""}</td>
</tr>
);
}
if (rows.length === 0) {
return (
<tr>
<td colSpan={3} className="py-4 text-center text-gray-500 italic">
No moves yet.
</td>
</tr>
);
}
return rows;
})()}
</tbody>
</table>
{/* Auto-scroll anchor */}
<div ref={(el) => el?.scrollIntoView({ behavior: "smooth" })} />
</div>
</div>
</div>
<div className="w-full md:w-1/3">
<Tutor
currentFen={fen}
userMove={userMove}
computerMove={computerMove}
stockfish={stockfish}
evalP0={evalP0}
evalP2={evalP2}
openingData={openingData}
onAnalysisComplete={() => { }}
apiKey={apiKey}
personality={selectedPersonality!}
language={language}
playerColor={playerColor}
/> />
</div> </div>
{/* PGN Display */} {/* Analysis Modal */}
{/* Game History (Scrollable List) */} {showAnalysisModal && (
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg flex-1 min-h-0 flex flex-col"> <GameAnalysisModal
<div className="flex items-center justify-between mb-2"> fen={fen}
<h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">Game History</h3> stockfish={stockfish}
<button apiKey={apiKey}
onClick={() => setShowAnalysisModal(true)} language={language}
className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-200 flex items-center gap-1" onClose={() => setShowAnalysisModal(false)}
> />
<Brain size={12} /> Analyze )}
</button>
</div> {/* Game Over Modal */}
<div className="flex-1 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900 p-2"> {gameOverState && (
<table className="w-full text-sm text-left"> <GameOverModal
<thead> result={gameOverState.result}
<tr className="text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700"> winner={gameOverState.winner}
<th className="py-1 px-2 w-12">#</th> history={moveHistory}
<th className="py-1 px-2">White</th> apiKey={apiKey}
<th className="py-1 px-2">Black</th> language={language}
</tr> onClose={() => setGameOverState(null)}
</thead> onNewGame={() => handleNewGame(selectedPersonality!)}
<tbody> />
{(() => { )}
const history = gameRef.current.history();
const rows = [];
for (let i = 0; i < history.length; i += 2) {
rows.push(
<tr key={i} className="border-b border-gray-100 dark:border-gray-800 last:border-0">
<td className="py-1 px-2 text-gray-500 dark:text-gray-500">{Math.floor(i / 2) + 1}.</td>
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i]}</td>
<td className="py-1 px-2 font-medium text-gray-900 dark:text-gray-200">{history[i + 1] || ""}</td>
</tr>
);
}
if (rows.length === 0) {
return (
<tr>
<td colSpan={3} className="py-4 text-center text-gray-500 italic">
No moves yet.
</td>
</tr>
);
}
return rows;
})()}
</tbody>
</table>
{/* Auto-scroll anchor */}
<div ref={(el) => el?.scrollIntoView({ behavior: "smooth" })} />
</div>
</div>
</div> </div>
</>
<div className="w-full md:w-1/3">
<Tutor
currentFen={fen}
userMove={userMove}
computerMove={computerMove}
stockfish={stockfish}
evalP0={evalP0}
evalP2={evalP2}
openingData={openingData}
onAnalysisComplete={() => { }}
apiKey={apiKey}
personality={selectedPersonality!}
language={language}
/>
</div>
{/* Analysis Modal */}
{showAnalysisModal && (
<GameAnalysisModal
fen={fen}
stockfish={stockfish}
apiKey={apiKey}
language={language}
onClose={() => setShowAnalysisModal(false)}
/>
)}
{/* Game Over Modal */}
{gameOverState && (
<GameOverModal
result={gameOverState.result}
winner={gameOverState.winner}
history={moveHistory}
apiKey={apiKey}
language={language}
onClose={() => setGameOverState(null)}
onNewGame={() => handleNewGame(selectedPersonality!)}
/>
)}
</div>
); );
} }
src/components/Header.tsx
+67
View File
@@ -0,0 +1,67 @@
import React from 'react';
import { useTranslation } from '@/lib/i18n/useTranslation';
import { SupportedLanguage } from '@/lib/i18n/translations';
interface HeaderProps {
language: SupportedLanguage;
}
export default function Header({ language }: HeaderProps) {
const t = useTranslation(language);
return (
<header className="w-full border-b border-gray-300 bg-white dark:border-neutral-800 dark:bg-zinc-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* App Title/Branding */}
<div className="flex items-center space-x-3">
<div className="text-2xl">♞</div>
<h1 className="text-xl font-semibold text-gray-900 dark:text-white">
Chess Tutor
</h1>
<span className="hidden sm:inline-block text-sm text-gray-500 dark:text-gray-400">
{t.header.tagline}
</span>
</div>
{/* Action Buttons */}
<div className="flex items-center space-x-3">
{/* Buy Me a Beer Button */}
<a
href="https://paypal.me/stefan1"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md"
>
<span className="mr-2">🍺</span>
<span className="hidden sm:inline">{t.header.buyMeABeer}</span>
</a>
{/* GitHub Button */}
<a
href="https://github.com/stefan-kp/chess_tutor"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-lg transition-all duration-200 shadow-sm hover:shadow-md"
aria-label="View on GitHub"
>
<svg
className="w-5 h-5"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
<span className="ml-2 hidden sm:inline">{t.header.github}</span>
</a>
</div>
</div>
</div>
</header>
);
}
src/components/Tutor.tsx
+30 -13
View File
@@ -10,6 +10,9 @@ import clsx from "clsx";
import { Personality } from "@/lib/personalities"; import { Personality } from "@/lib/personalities";
import { OpeningMetadata } from "@/lib/openings"; import { OpeningMetadata } from "@/lib/openings";
import { useTranslation } from '@/lib/i18n/useTranslation';
import { SupportedLanguage } from '@/lib/i18n/translations';
interface TutorProps { interface TutorProps {
currentFen: string; currentFen: string;
userMove: Move | null; userMove: Move | null;
@@ -21,7 +24,8 @@ interface TutorProps {
onAnalysisComplete: () => void; onAnalysisComplete: () => void;
apiKey: string | null; apiKey: string | null;
personality: Personality; personality: Personality;
language: 'en' | 'de' | 'fr' | 'it'; language: SupportedLanguage;
playerColor: 'white' | 'black';
} }
interface Message { interface Message {
@@ -30,15 +34,20 @@ interface Message {
timestamp: number; timestamp: number;
} }
export function Tutor({ currentFen, userMove, computerMove, stockfish, evalP0, evalP2, openingData, onAnalysisComplete, apiKey, personality, language }: TutorProps) { export function Tutor({ currentFen, userMove, computerMove, stockfish, evalP0, evalP2, openingData, onAnalysisComplete, apiKey, personality, language, playerColor }: TutorProps) {
const [messages, setMessages] = useState<Message[]>([ const [messages, setMessages] = useState<Message[]>([]);
{ role: "model", text: "Hello! I am " + personality.name + ". " + personality.description + " Let's play!", timestamp: Date.now() }
]);
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [chatSession, setChatSession] = useState<ChatSession | null>(null); const [chatSession, setChatSession] = useState<ChatSession | null>(null);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const t = useTranslation(language);
// Determine tutor color (opposite of player)
const tutorColor = playerColor === 'white' ? 'black' : 'white';
const playerColorName = playerColor === 'white' ? 'White' : 'Black';
const tutorColorName = tutorColor === 'white' ? 'White' : 'Black';
// Initialize chat session with Personality System Prompt // Initialize chat session with Personality System Prompt
useEffect(() => { useEffect(() => {
if (apiKey) { if (apiKey) {
@@ -57,7 +66,7 @@ PERSONALITY:
${personality.systemPrompt} ${personality.systemPrompt}
INSTRUCTIONS: INSTRUCTIONS:
- You are the opponent (Black). You are playing against the User (White). - You are the opponent (${tutorColorName}). You are playing against the User (${playerColorName}).
- You are NOT an AI assistant analyzing a game. You ARE the player. - You are NOT an AI assistant analyzing a game. You ARE the player.
- Refer to the moves as YOUR moves ("I played e5", "My response was..."). - Refer to the moves as YOUR moves ("I played e5", "My response was...").
- Refer to the evaluation as YOUR thoughts/assessment ("I think I'm winning", "I missed that"). - Refer to the evaluation as YOUR thoughts/assessment ("I think I'm winning", "I missed that").
@@ -73,15 +82,23 @@ INSTRUCTIONS:
}, },
{ {
role: "model", role: "model",
parts: [{ text: `Understood. I am the player (Black). I will speak in ${language} and never mention the engine.` }] parts: [{ text: `Understood. I am the player (${tutorColorName}). I will speak in ${language} and never mention the engine.` }]
} }
], ],
}); });
setChatSession(session); setChatSession(session);
// Reset messages on language/personality change
setMessages([{ role: "model", text: `Hello! I am ${personality.name}. Let's play!`, timestamp: Date.now() }]); // Get initial greeting in the selected language
session.sendMessage(`Introduce yourself briefly to start our game. Keep it short and in ${language}.`).then(result => {
const greetingText = result.response.text();
setMessages([{ role: "model", text: greetingText, timestamp: Date.now() }]);
}).catch(err => {
console.error("Failed to get greeting:", err);
// Fallback to English if greeting fails
setMessages([{ role: "model", text: `Hello! I am ${personality.name}. Let's play!`, timestamp: Date.now() }]);
});
} }
}, [apiKey, personality, language]); }, [apiKey, personality, language, playerColor]);
// Scroll to bottom // Scroll to bottom
useEffect(() => { useEffect(() => {
@@ -276,13 +293,13 @@ React to this exchange as the player.
onClick={() => sendMessageToChat("Give me a hint")} onClick={() => sendMessageToChat("Give me a hint")}
className="flex items-center gap-1 px-3 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full hover:bg-yellow-200 dark:bg-yellow-900 dark:text-yellow-200" className="flex items-center gap-1 px-3 py-1 text-xs bg-yellow-100 text-yellow-800 rounded-full hover:bg-yellow-200 dark:bg-yellow-900 dark:text-yellow-200"
> >
<Lightbulb size={12} /> Hint <Lightbulb size={12} /> {t.tutor.hint}
</button> </button>
<button <button
onClick={() => sendMessageToChat("What is the best move?")} onClick={() => sendMessageToChat("What is the best move?")}
className="flex items-center gap-1 px-3 py-1 text-xs bg-green-100 text-green-800 rounded-full hover:bg-green-200 dark:bg-green-900 dark:text-green-200" className="flex items-center gap-1 px-3 py-1 text-xs bg-green-100 text-green-800 rounded-full hover:bg-green-200 dark:bg-green-900 dark:text-green-200"
> >
<Trophy size={12} /> Best Move <Trophy size={12} /> {t.tutor.bestMove}
</button> </button>
</div> </div>
@@ -292,7 +309,7 @@ React to this exchange as the player.
type="text" type="text"
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
placeholder="Ask your coach..." placeholder={t.tutor.askCoach}
className="flex-1 p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500" className="flex-1 p-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
disabled={isLoading} disabled={isLoading}
/> />