+ setShowAudioInfo(false)}
+ />
+
+ )
+}
+
+export default App
\ No newline at end of file
diff --git a/src/ErrorBoundary.tsx b/src/ErrorBoundary.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..269eeaad823c964187ba2dcc817dd35c9fff7b96
--- /dev/null
+++ b/src/ErrorBoundary.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+
+export class ErrorBoundary extends React.Component<{
+ children: React.ReactNode
+},{
+ hasError: boolean
+ error?: Error
+} > {
+ constructor(props: {
+ children: React.ReactNode
+ }) {
+ super(props)
+ this.state = { hasError: false }
+ }
+
+ static getDerivedStateFromError(error: Error): {
+ hasError: boolean
+ error?: Error
+ } {
+ return { hasError: true, error }
+ }
+
+ componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+ console.error('Error caught by boundary:', error, errorInfo)
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return (
+
+
+
+
+
+
+ 🎵♟️ Musical Chess
+ +
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return this.props.children
+ }
+}
\ No newline at end of file
diff --git a/src/components/AudioInfoPopup.tsx b/src/components/AudioInfoPopup.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..21c88412ed541a2ebf021102a01cc6982d27e2ef
--- /dev/null
+++ b/src/components/AudioInfoPopup.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import '../styles/AudioInfoPopup.css'
+
+export const AudioInfoPopup: React.FC<{
+ isVisible: boolean
+ onClose: () => void
+}> = ({
+ isVisible,
+ onClose
+}) => {
+ if (!isVisible) return null
+
+ return (
+ 🎵♟️ Musical Chess Arena
+
+
+ Something went wrong!
+Error: {this.state.error?.message}
+
+ {this.state.error?.stack}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ChessBoard.tsx b/src/components/ChessBoard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e39a2f0d09be6a07e9cad815ffc8baa111a6327e
--- /dev/null
+++ b/src/components/ChessBoard.tsx
@@ -0,0 +1,169 @@
+import React, { useCallback, useState } from 'react'
+import { Square } from 'chess.js'
+import { ChessPiece } from './ChessPiece'
+import { GameState, DraggedPiece } from '../types/chess'
+import { isSquareLight } from '../utils/chessUtils'
+import { AudioEngine } from '../engines/AudioEngine'
+import '../styles/ChessBoard.css'
+import '../styles/ChessSquare.css'
+
+export const ChessBoard: React.FC<{
+ gameState: GameState
+ draggedPiece: DraggedPiece | null
+ audioEngine: AudioEngine | null
+ onSquareClick: (square: Square) => void
+ onPieceDragStart: (square: Square) => void
+ onPieceDrop: (targetSquare: Square | null) => void
+}> = ({
+ gameState,
+ draggedPiece,
+ audioEngine,
+ onSquareClick,
+ onPieceDragStart,
+ onPieceDrop
+}) => {
+ const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+ const [isDragging, setIsDragging] = useState(false)
+
+ const handleMouseMove = useCallback((event: React.MouseEvent) => {
+ setMousePosition({ x: event.clientX, y: event.clientY })
+ }, [])
+
+ const handleSquareClick = useCallback((square: Square) => {
+ if (!isDragging) {
+ onSquareClick(square)
+ }
+ }, [onSquareClick, isDragging])
+
+ const handleMouseDown = useCallback((square: Square) => {
+ const piece = gameState.board.get(square)
+ if (piece && piece.color === gameState.playerColor) {
+ setIsDragging(true)
+ onPieceDragStart(square)
+ }
+ }, [gameState, onPieceDragStart])
+
+ const handleMouseUp = useCallback((square: Square) => {
+ if (isDragging) {
+ onPieceDrop(square)
+ setIsDragging(false)
+ }
+ }, [isDragging, onPieceDrop])
+
+ const renderSquares = () => {
+ const renderedSquares = []
+
+ for (let rank = 8; rank >= 1; rank--) {
+ for (let file = 0; file < 8; file++) {
+ const square = (String.fromCharCode(97 + file) + rank) as Square
+
+ let displayFile = file
+ let displayRank = rank
+
+ if (gameState.playerColor === 'b') {
+ displayFile = 7 - file
+ displayRank = 9 - rank
+ }
+
+ const piece = gameState.board.get(square) || null
+ const isSelected = gameState.selectedSquare === square
+ const isLegalMove = gameState.legalMoves.some(move => move.to === square)
+ const isDraggedSquare = draggedPiece?.square === square
+ const isLight = isSquareLight(square)
+
+ renderedSquares.push(
+ e.stopPropagation()}>
+
+
+
+
+ 🎵 How muscial chess works
+ +
+
+
+
+
+
+
+
+
+
+ 🎯 Initiative Tempo
+A steady beat represents your position strength:
+-
+
- Frequency: A2 (110 Hz) +
- Tempo: Speed increases with your initiative (up to 120 BPM). No beat = no initiative. Faster beat = stronger position. +
🎼 Square-Based Move Notes
+Each square has a unique musical note based on its position:
+
+ Files (left to right): A, B, C♭, C, D, D♭, E, F
+ Ranks (bottom to top): 8 octaves (1st-8th)
+
+ Every move plays two quick beats:
+-
+
- First beat: Origin square note. +
- Second beat: Destination square note. +
⚡ Special Move Notes
+-
+
- Capture: Pop sound. +
- Danger: Sharp tone (1000 Hz) when piece threatens capture. +
handleSquareClick(square)}
+ onMouseDown={() => handleMouseDown(square)}
+ onMouseUp={() => handleMouseUp(square)}
+ >
+ {piece && !isDraggedSquare && (
+
+ )
+ }
+ }
+
+ return renderedSquares
+ }
+
+ const renderDraggedPiece = () => {
+ if (!draggedPiece) return null
+
+ return (
+
+
+ )}
+
+ {isLegalMove && (
+
+ )}
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ChessPiece.tsx b/src/components/ChessPiece.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aec1ce32218323780cc89f096d4c89882147c06b
--- /dev/null
+++ b/src/components/ChessPiece.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { ChessPiece as ChessPieceType } from '../types/chess'
+import '../styles/ChessPiece.css'
+
+export const ChessPiece: React.FC<{
+ piece: ChessPieceType
+ size: number
+}> = ({
+ piece,
+ size,
+}) => {
+
+ const getPieceImagePath = () => {
+ const color = piece.color === 'w' ? 'white' : 'dark'
+ const orientation = 'upright'
+
+ const pieceFileMap: { [key: string]: string } = {
+ 'k': piece.color === 'w' ? 'Chess_klt45.svg' : 'Chess_kdt45.svg',
+ 'q': piece.color === 'w' ? 'Chess_qlt45.svg' : 'Chess_qdt45.svg',
+ 'r': piece.color === 'w' ? 'Chess_rlt45.svg' : 'Chess_rdt45.svg',
+ 'b': piece.color === 'w' ? 'Chess_blt45.svg' : 'Chess_bdt45.svg',
+ 'n': piece.color === 'w' ? 'Chess_nlt45.svg' : 'Chess_ndt45.svg',
+ 'p': piece.color === 'w' ? 'Chess_plt45.svg' : 'Chess_pdt45.svg'
+ }
+
+ const fileName = pieceFileMap[piece.type]
+ return `/assets/pieces/${color}/${orientation}/${fileName}`
+ }
+
+ return (
+
+
+
+ {renderDraggedPiece()}
+
+ {renderSquares()}
+
+
+
+
+ {Array.from({ length: 8 }, (_, i) => {
+ const fileIndex = gameState.playerColor === 'w' ? i : 7 - i
+ const fileLabel = String.fromCharCode(97 + fileIndex)
+ const noteName = audioEngine?.getFileNoteName(fileIndex) || ''
+ return (
+
+
+ {fileLabel}
+ ({noteName})
+
+ )
+ })}
+
+ {Array.from({ length: 8 }, (_, i) => {
+ const rankIndex = gameState.playerColor === 'w' ? 8 - i : i + 1
+ const octave = gameState.playerColor === 'w' ? 8 - i : i + 1
+ return (
+
+
+ {rankIndex}
+ (♪{octave})
+
+ )
+ })}
+
+ })
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/GameControls.tsx b/src/components/GameControls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..607c831b12d5e9f40b7a334edabe7d65c11008c2
--- /dev/null
+++ b/src/components/GameControls.tsx
@@ -0,0 +1,152 @@
+import React from 'react'
+import { GameState, CHESS_MODELS } from '../types/chess'
+import { VolumeSlider } from './VolumeSlider'
+import '../styles/GameControls.css'
+
+export const GameControls: React.FC<{
+ gameState: GameState
+ audioEnabled: boolean
+ volumeSettings: {
+ ambient: number
+ game: number
+ }
+ selectedModel: string
+ onStartGame: () => void
+ onResignGame: () => void
+ onToggleColor: () => void
+ onToggleAudio: () => void
+ onVolumeChange: (type: "ambient" | "game", value: number) => void
+ onModelChange: (modelId: string) => void
+}> = ({
+ gameState,
+ audioEnabled,
+ volumeSettings,
+ selectedModel,
+ onStartGame,
+ onResignGame,
+ onToggleColor,
+ onToggleAudio,
+ onVolumeChange,
+ onModelChange
+}) => {
+ const getMainButtonText = () => {
+ if (gameState.gameActive) {
+ return '❌ Resign Game'
+ }
+ return '🎮 Start Game'
+ }
+
+ const getMainButtonAction = () => {
+ if (gameState.gameActive) {
+ return onResignGame
+ }
+ return onStartGame
+ }
+
+ const getColorButtonText = () => {
+ return `⚪ Play as ${gameState.playerColor === 'w' ? 'White' : 'Black'}`
+ }
+
+ const getAudioButtonText = () => {
+ return `🔊 Audio: ${audioEnabled ? 'ON' : 'OFF'}`
+ }
+
+ const getGameStatus = () => {
+ if (gameState.aiModelLoading) {
+ return (
+
+ Loading AI model
+
+ )
+ }
+
+ if (gameState.gameActive) {
+ if (gameState.aiThinking) {
+ return (
+
+ AI is thinking
+
+ )
+ } else if (gameState.board.turn() === gameState.playerColor) {
+ return `Your turn (${gameState.playerColor === 'w' ? 'White' : 'Black'})`
+ } else {
+ return `AI turn (${gameState.playerColor === 'w' ? 'Black' : 'White'})`
+ }
+ } else if (gameState.gameResult?.isGameOver) {
+ return gameState.gameResult.message
+ } else {
+ const aiStatusText = gameState.aiModelLoaded ? '' : ' (AI: Fallback mode)'
+ return `Click 'Start Game' to begin${aiStatusText}`
+ }
+ }
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/PromotionDialog.tsx b/src/components/PromotionDialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a711c152ca11fc7d78c08d1cfe2eb38b892a1f3
--- /dev/null
+++ b/src/components/PromotionDialog.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { Color, PieceSymbol } from 'chess.js'
+import { ChessPiece } from './ChessPiece'
+import '../styles/PromotionDialog.css'
+
+export const PromotionDialog: React.FC<{
+ isVisible: boolean
+ color: Color
+ onSelect: (piece: 'q' | 'r' | 'b' | 'n') => void
+}> = ({
+ isVisible,
+ color,
+ onSelect
+}) => {
+ if (!isVisible) return null
+
+ const promotionPieces: Array<{ type: 'q' | 'r' | 'b' | 'n'; symbol: string }> = [
+ { type: 'q', symbol: color === 'w' ? '♕' : '♛' },
+ { type: 'r', symbol: color === 'w' ? '♖' : '♜' },
+ { type: 'b', symbol: color === 'w' ? '♗' : '♝' },
+ { type: 'n', symbol: color === 'w' ? '♘' : '♞' }
+ ]
+
+ return (
+
+ {getGameStatus()}
+
+
+
+
+
+ {!gameState.gameActive && (
+ <>
+
+
+
+
+ {audioEnabled && (
+
+
+
+
+
+ )}
+
+
+
+ onVolumeChange('ambient', value)}
+ />
+
+ onVolumeChange('game', value)}
+ />
+
+ )}
+ Audio Volume
+ +
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/VolumeSlider.tsx b/src/components/VolumeSlider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..059d5c4d464bfc0b119d86566c20bf10487d01ce
--- /dev/null
+++ b/src/components/VolumeSlider.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import '../styles/VolumeSlider.css'
+
+export const VolumeSlider: React.FC<{
+ label: string
+ value: number
+ onChange: (value: number) => void
+ min?: number
+ max?: number
+ step?: number
+}> = ({
+ label,
+ value,
+ onChange,
+ min = 0,
+ max = 1,
+ step = 0.01
+}) => {
+ const handleChange = (event: React.ChangeEvent
+
+
+ Choose Promotion Piece
+
+
+ {promotionPieces.map(({ type, symbol }) => (
+
+ ))}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/engines/AudioEngine.ts b/src/engines/AudioEngine.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aae35a59af73f3b3b8ce50fc7706229d2b629fe5
--- /dev/null
+++ b/src/engines/AudioEngine.ts
@@ -0,0 +1,311 @@
+import { Chess, Square, Move, PieceSymbol, Color } from 'chess.js'
+import { PositionEvaluator } from './PositionEvaluator'
+
+export class AudioEngine {
+ private audioContext: AudioContext | null = null
+ private masterGain: GainNode | null = null
+ private isActive: boolean = false
+ private volume: number = 0.7
+ private ambientVolume: number = 0.8
+ private gameVolume: number = 0.048
+ private userInterval: NodeJS.Timeout | null = null
+ private boardFlipped: boolean = false
+
+ private noteFrequencies = {
+ 'A': 27.50, // A0
+ 'B': 30.87, // B0
+ 'Cb': 32.70, // C1♭
+ 'C': 32.70, // C1
+ 'D': 36.71, // D1
+ 'Db': 34.65, // D1♭
+ 'E': 41.20, // E1
+ 'F': 43.65 // F1
+ }
+ private fileNotes = ['A', 'B', 'Cb', 'C', 'D', 'Db', 'E', 'F']
+
+ private fileFrequencies = [
+ this.noteFrequencies.A,
+ this.noteFrequencies.B,
+ this.noteFrequencies.Cb,
+ this.noteFrequencies.C,
+ this.noteFrequencies.D,
+ this.noteFrequencies.Db,
+ this.noteFrequencies.E,
+ this.noteFrequencies.F
+ ]
+ private userInitiativeFreq = 110.0 // A2
+
+ constructor() {
+ this.initialize()
+ }
+
+ private async initialize() {
+ try {
+ this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+ this.masterGain = this.audioContext.createGain()
+ this.masterGain.connect(this.audioContext.destination)
+ this.masterGain.gain.value = this.volume
+ this.isActive = true
+ console.log('Audio engine initialized')
+ } catch (error) {
+ console.error('Failed to initialize audio engine:', error)
+ this.isActive = false
+ }
+ }
+
+ setBoardFlipped(flipped: boolean) {
+ this.boardFlipped = flipped
+ }
+
+ private getSquareFrequency(square: Square): number {
+ const file = square.charCodeAt(0) - 97
+ const rank = parseInt(square[1]) - 1
+ const actualFile = this.boardFlipped ? 7 - file : file
+ const actualRank = this.boardFlipped ? 7 - rank : rank
+ const baseFreq = this.fileFrequencies[actualFile]
+ const octaveMultiplier = Math.pow(2, actualRank)
+ return baseFreq * octaveMultiplier
+ }
+
+ getFileNoteName(fileIndex: number): string {
+ const actualFile = this.boardFlipped ? 7 - fileIndex : fileIndex
+ return this.fileNotes[actualFile]
+ }
+
+ setVolume(volume: number) {
+ this.volume = Math.max(0, Math.min(1, volume))
+ if (this.masterGain) {
+ this.masterGain.gain.value = this.volume
+ }
+ if (this.volume === 0) {
+ this.stopAllAudio()
+ }
+ }
+
+ setAmbientVolume(volume: number) {
+ this.ambientVolume = Math.max(0, Math.min(1, volume))
+ }
+
+ setGameVolume(volume: number) {
+ this.gameVolume = Math.max(0, Math.min(0.1, volume * 0.1))
+ }
+
+ getAmbientVolume(): number {
+ return this.ambientVolume
+ }
+
+ getGameVolume(): number {
+ return this.gameVolume / 0.1
+ }
+
+ async ensureAudioContext() {
+ if (!this.audioContext) {
+ await this.initialize()
+ }
+
+ if (this.audioContext?.state === 'suspended') {
+ await this.audioContext.resume()
+ }
+ }
+
+ private createTone(frequency: number, duration: number, fadeOut: boolean = true, volume: number = 0.4): Promise
+
+ {percentage}%
+
+
+