Add mobile app support and opening training feature
This commit implements iOS/Android mobile app support using Capacitor and adds a comprehensive opening training feature with LLM-powered explanations. ## Mobile App Infrastructure - Add Capacitor configuration for iOS/Android builds - Create mobile build script that excludes API routes - Update Next.js config for conditional static export - Add layout components with generateStaticParams for static builds - Generate 500+ static pages for offline mobile use ## Chess Engine Abstraction - Create ChessEngine interface for pluggable implementations - Add LocalEngine (GPL - uses stockfish.js in browser) - Add RemoteEngine (proprietary - calls API server) - Factory pattern selects engine based on environment - Enables GPL compliance for web, proprietary for mobile ## Opening Training Feature - Interactive opening repertoire training - Move validation with engine-backed feedback - LLM explanations using Gemini API - Wikipedia integration for opening context - Opening family grouping (e4, d4, c4, etc.) - Session state management - Real-time move feedback with evaluation Components: - OpeningSelector: Browse and select openings by family - OpeningTrainer: Main training interface with chessboard - MoveFeedback: Display move quality and LLM explanations - WikipediaSummary: Show opening history and context - ErrorBoundary: Graceful error handling Services: - openingLoader: Load and filter opening database - engineService: Engine evaluation wrapper - moveValidator: Validate moves against repertoire - feedbackGenerator: Generate contextual feedback - wikipediaService: Fetch and cache Wikipedia data - sessionManager: Track training session state ## Wikipedia Integration - Automatic Wikipedia article fetching for openings - Client-side and server-side caching - Sanitized summaries with proper formatting - Link opening database to Wikipedia slugs - API endpoints for on-demand fetching ## Docker Improvements - Add entrypoint script for automatic data setup - Fetch Wikipedia data on first container startup - Generate opening move index automatically - Remove generated data from git (public/openings/*.json, public/wikipedia/*.json) - Add READMEs explaining data requirements - Update .gitignore for generated files ## Dual Licensing Strategy - Add LICENSING.md explaining dual licensing approach - GPL-3.0 for web builds (includes Stockfish) - Proprietary option for mobile builds (no GPL code) - Single codebase, multiple licensing models - Legal compliance documented ## API Endpoints - POST /api/v1/llm/opening-explanation - Get LLM move explanations - GET /api/v1/wikipedia/summary - Fetch Wikipedia summaries ## Type Updates - Add openingTraining types - Update Tutor component to use ChessEngine interface - Add Gemini error handling types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Stefan
@@ -0,0 +1,23 @@
|
||||
// Server component layout for static export
|
||||
// This allows generateStaticParams while the page remains a client component
|
||||
|
||||
export async function generateStaticParams() {
|
||||
// Generate params for root ECO codes (A00-E99)
|
||||
// This creates 500 static pages for the mobile build
|
||||
const ecoRoots = [];
|
||||
for (const letter of ['A', 'B', 'C', 'D', 'E']) {
|
||||
for (let num = 0; num <= 99; num++) {
|
||||
const eco = `${letter}${String(num).padStart(2, '0')}`;
|
||||
ecoRoots.push({ openingId: eco });
|
||||
}
|
||||
}
|
||||
return ecoRoots;
|
||||
}
|
||||
|
||||
export default function OpeningIdLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return children;
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import Header from '@/components/Header';
|
||||
import { useTranslation } from '@/lib/i18n/useTranslation';
|
||||
import { SupportedLanguage } from '@/lib/i18n/translations';
|
||||
import { OpeningMetadata } from '@/lib/openings';
|
||||
import { OpeningTrainingProvider } from '@/contexts/OpeningTrainingContext';
|
||||
import OpeningTrainer from '@/components/OpeningTrainer/OpeningTrainer';
|
||||
import { OpeningTrainerErrorBoundary } from '@/components/OpeningTrainer/ErrorBoundary';
|
||||
import { getOpeningByEco } from '@/lib/openingTrainer/openingLoader';
|
||||
import { Personality, PERSONALITIES } from '@/lib/personalities';
|
||||
|
||||
export default function OpeningTrainingPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const openingId = params.openingId as string;
|
||||
|
||||
const [language, setLanguage] = useState<SupportedLanguage>('en');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [opening, setOpening] = useState<OpeningMetadata | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [selectedPersonality, setSelectedPersonality] = useState<Personality>(PERSONALITIES[0]);
|
||||
const [apiKey, setApiKey] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
const storedLang = localStorage.getItem('chess_tutor_language');
|
||||
if (storedLang) setLanguage(storedLang as SupportedLanguage);
|
||||
|
||||
// Load API key
|
||||
const storedApiKey = localStorage.getItem('gemini_api_key');
|
||||
if (storedApiKey) setApiKey(storedApiKey);
|
||||
|
||||
// Load personality
|
||||
const storedPersonalityId = localStorage.getItem('chess_tutor_personality');
|
||||
if (storedPersonalityId) {
|
||||
const personality = PERSONALITIES.find(p => p.id === storedPersonalityId);
|
||||
if (personality) setSelectedPersonality(personality);
|
||||
}
|
||||
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const t = useTranslation(language);
|
||||
|
||||
useEffect(() => {
|
||||
if (mounted) {
|
||||
loadOpening();
|
||||
}
|
||||
}, [openingId, mounted]);
|
||||
|
||||
const loadOpening = () => {
|
||||
setIsLoading(true);
|
||||
|
||||
// Find opening by ECO code
|
||||
const foundOpening = getOpeningByEco(openingId);
|
||||
|
||||
if (!foundOpening) {
|
||||
// Opening not found - redirect back to selection
|
||||
router.push('/learning/openings');
|
||||
return;
|
||||
}
|
||||
|
||||
setOpening(foundOpening);
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<>
|
||||
<Header language={language} />
|
||||
<div className="flex-grow bg-gray-100 dark:bg-gray-900 p-4 flex flex-col">
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto"></div>
|
||||
<p className="text-gray-600 dark:text-gray-400">Loading opening training session...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (!opening) {
|
||||
return (
|
||||
<>
|
||||
<Header language={language} />
|
||||
<div className="flex-grow bg-gray-100 dark:bg-gray-900 p-4 flex flex-col">
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
<div className="text-center py-12">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
Opening Not Found
|
||||
</h2>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
The requested opening could not be found.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => router.push('/learning/openings')}
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Back to Opening Selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header language={language} />
|
||||
<div className="flex-grow bg-gray-100 dark:bg-gray-900 p-4 flex flex-col">
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => router.push('/learning/openings')}
|
||||
className="p-2 md:px-4 md: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 flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span className="hidden md:inline">Back to Opening Selection</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">{opening.name}</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">ECO: {opening.eco}</p>
|
||||
</div>
|
||||
|
||||
<OpeningTrainerErrorBoundary>
|
||||
<OpeningTrainingProvider>
|
||||
<OpeningTrainer
|
||||
opening={opening}
|
||||
personality={selectedPersonality}
|
||||
apiKey={apiKey}
|
||||
language={language}
|
||||
/>
|
||||
</OpeningTrainingProvider>
|
||||
</OpeningTrainerErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import Header from '@/components/Header';
|
||||
import OpeningSelector from '@/components/OpeningTrainer/OpeningSelector';
|
||||
import FamilySelector from '@/components/OpeningTrainer/FamilySelector';
|
||||
import { useTranslation } from '@/lib/i18n/useTranslation';
|
||||
import { SupportedLanguage } from '@/lib/i18n/translations';
|
||||
import { getEcoRootOpenings } from '@/lib/openingTrainer/openingLoader';
|
||||
import { groupOpeningsByFamily } from '@/lib/openingTrainer/openingFamilies';
|
||||
|
||||
export default function OpeningsPage() {
|
||||
const router = useRouter();
|
||||
const [language, setLanguage] = useState<SupportedLanguage>('en');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [selectedFamily, setSelectedFamily] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const storedLang = localStorage.getItem('chess_tutor_language');
|
||||
if (storedLang) setLanguage(storedLang as SupportedLanguage);
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const t = useTranslation(language);
|
||||
|
||||
// Get ECO root openings for display
|
||||
const allOpenings = useMemo(() => {
|
||||
return getEcoRootOpenings();
|
||||
}, []);
|
||||
|
||||
// Group openings by family
|
||||
const openingFamilies = useMemo(() => {
|
||||
return groupOpeningsByFamily(allOpenings);
|
||||
}, [allOpenings]);
|
||||
|
||||
const handleSelectFamily = (familyName: string) => {
|
||||
setSelectedFamily(familyName);
|
||||
};
|
||||
|
||||
const handleBackToFamilies = () => {
|
||||
setSelectedFamily(null);
|
||||
};
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header language={language} />
|
||||
<div className="flex-grow bg-gray-100 dark:bg-gray-900 p-4 flex flex-col">
|
||||
<div className="max-w-6xl mx-auto w-full">
|
||||
{/* Header */}
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => router.push('/learning')}
|
||||
className="p-2 md:px-4 md: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 flex items-center gap-2"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span className="hidden md:inline">{t.learning.backToMenu}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!selectedFamily ? (
|
||||
<>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
||||
Opening Training
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-8">
|
||||
Select an opening family to explore. Each family contains multiple variations
|
||||
with engine-backed feedback and AI-powered explanations.
|
||||
</p>
|
||||
|
||||
<FamilySelector
|
||||
families={openingFamilies}
|
||||
onSelectFamily={handleSelectFamily}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<OpeningSelector
|
||||
openings={allOpenings}
|
||||
selectedFamily={selectedFamily}
|
||||
onBackToFamilies={handleBackToFamilies}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user