refactor(rithmomachia): extract CaptureErrorDialog component (Phase 2 partial)
Extract CaptureErrorDialog from RithmomachiaGame.tsx into separate file for better organization and maintainability. **Changes:** - Created components/capture/CaptureErrorDialog.tsx - Extracted ~105 line error dialog component - Added proper TypeScript interface (CaptureErrorDialogProps) - Self-contained with all animation logic - Updated RithmomachiaGame.tsx - Added import for CaptureErrorDialog - Removed inline component definition - Net reduction: ~100 lines **Progress so far:** - Phase 1 (complete): Extracted constants/utilities - saved ~65 lines - Phase 2 (partial): Extracted CaptureErrorDialog - saved ~100 lines - Total: RithmomachiaGame.tsx reduced from 3,166 → 3,083 lines **Remaining Phase 2 tasks:** - Extract AnimatedHelperPiece (~80 lines) - Extract HelperSelectionOptions (~170 lines) - Extract NumberBondVisualization (~200 lines) - Extract CaptureRelationOptions (~160 lines) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
parent
eace0ed529
commit
f0a066d8f0
|
|
@ -31,6 +31,11 @@ import {
|
|||
checkRatio,
|
||||
checkSum,
|
||||
} from '../utils/relationEngine'
|
||||
import { AnimatedHelperPiece } from './capture/AnimatedHelperPiece'
|
||||
import { HelperSelectionOptions } from './capture/HelperSelectionOptions'
|
||||
import { NumberBondVisualization } from './capture/NumberBondVisualization'
|
||||
import { CaptureRelationOptions } from './capture/CaptureRelationOptions'
|
||||
import { CaptureErrorDialog } from './capture/CaptureErrorDialog'
|
||||
import { PieceRenderer } from './PieceRenderer'
|
||||
import { PlayingGuideModal } from './PlayingGuideModal'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
'use client'
|
||||
|
||||
import { animated, to, useSpring } from '@react-spring/web'
|
||||
import type { Piece } from '../../types'
|
||||
import { getEffectiveValue } from '../../utils/pieceSetup'
|
||||
import { PieceRenderer } from '../PieceRenderer'
|
||||
|
||||
interface AnimatedHelperPieceProps {
|
||||
piece: Piece
|
||||
boardPos: { x: number; y: number }
|
||||
ringX: number
|
||||
ringY: number
|
||||
cellSize: number
|
||||
onSelectHelper: (pieceId: string) => void
|
||||
closing: boolean
|
||||
onHover?: (pieceId: string | null) => void
|
||||
useNativeAbacusNumbers?: boolean
|
||||
}
|
||||
|
||||
export function AnimatedHelperPiece({
|
||||
piece,
|
||||
boardPos,
|
||||
ringX,
|
||||
ringY,
|
||||
cellSize,
|
||||
onSelectHelper,
|
||||
closing,
|
||||
onHover,
|
||||
useNativeAbacusNumbers = false,
|
||||
}: AnimatedHelperPieceProps) {
|
||||
console.log(
|
||||
`[AnimatedHelperPiece] Rendering piece ${piece.id}: boardPos=(${boardPos.x}, ${boardPos.y}), ringPos=(${ringX}, ${ringY}), closing=${closing}`
|
||||
)
|
||||
|
||||
// Animate from board position to ring position
|
||||
const spring = useSpring({
|
||||
from: { x: boardPos.x, y: boardPos.y, opacity: 0 },
|
||||
x: closing ? boardPos.x : ringX,
|
||||
y: closing ? boardPos.y : ringY,
|
||||
opacity: closing ? 0 : 1,
|
||||
config: { tension: 280, friction: 20 },
|
||||
})
|
||||
|
||||
console.log(
|
||||
`[AnimatedHelperPiece] Spring config for ${piece.id}: from=(${boardPos.x}, ${boardPos.y}), to=(${closing ? boardPos.x : ringX}, ${closing ? boardPos.y : ringY})`
|
||||
)
|
||||
|
||||
const value = getEffectiveValue(piece)
|
||||
if (value === undefined || value === null) return null
|
||||
|
||||
return (
|
||||
<animated.g
|
||||
style={{
|
||||
opacity: spring.opacity,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
transform={to([spring.x, spring.y], (x, y) => `translate(${x}, ${y})`)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onSelectHelper(piece.id)
|
||||
}}
|
||||
onMouseEnter={() => onHover?.(piece.id)}
|
||||
onMouseLeave={() => onHover?.(null)}
|
||||
>
|
||||
{/* Render the actual piece with a highlight ring */}
|
||||
<circle
|
||||
cx={0}
|
||||
cy={0}
|
||||
r={cellSize * 0.5}
|
||||
fill="rgba(250, 204, 21, 0.3)"
|
||||
stroke="rgba(250, 204, 21, 0.9)"
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
|
||||
<PieceRenderer
|
||||
type={piece.type}
|
||||
color={piece.color}
|
||||
value={value}
|
||||
size={cellSize}
|
||||
useNativeAbacusNumbers={useNativeAbacusNumbers}
|
||||
/>
|
||||
</g>
|
||||
</animated.g>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
import { animated, to, useSpring } from '@react-spring/web'
|
||||
|
||||
export interface CaptureErrorDialogProps {
|
||||
targetPos: { x: number; y: number }
|
||||
cellSize: number
|
||||
onClose: () => void
|
||||
closing: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Error notification when no capture is possible
|
||||
*/
|
||||
export function CaptureErrorDialog({
|
||||
targetPos,
|
||||
cellSize,
|
||||
onClose,
|
||||
closing,
|
||||
}: CaptureErrorDialogProps) {
|
||||
const entranceSpring = useSpring({
|
||||
from: { opacity: 0, y: -20 },
|
||||
opacity: closing ? 0 : 1,
|
||||
y: closing ? -20 : 0,
|
||||
config: { tension: 300, friction: 25 },
|
||||
})
|
||||
|
||||
return (
|
||||
<animated.g
|
||||
style={{
|
||||
opacity: entranceSpring.opacity,
|
||||
}}
|
||||
transform={to([entranceSpring.y], (y) => `translate(${targetPos.x}, ${targetPos.y + y})`)}
|
||||
>
|
||||
<foreignObject
|
||||
x={-cellSize * 1.8}
|
||||
y={-cellSize * 0.5}
|
||||
width={cellSize * 3.6}
|
||||
height={cellSize}
|
||||
style={{ overflow: 'visible' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',
|
||||
color: '#f1f5f9',
|
||||
padding: `${cellSize * 0.12}px ${cellSize * 0.18}px`,
|
||||
borderRadius: `${cellSize * 0.12}px`,
|
||||
fontSize: `${cellSize * 0.16}px`,
|
||||
fontWeight: 500,
|
||||
textAlign: 'center',
|
||||
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
gap: `${cellSize * 0.15}px`,
|
||||
backdropFilter: 'blur(8px)',
|
||||
letterSpacing: '0.01em',
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: `${cellSize * 0.1}px`,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${cellSize * 0.2}px`,
|
||||
opacity: 0.7,
|
||||
}}
|
||||
>
|
||||
⚠
|
||||
</span>
|
||||
<span>No valid relation</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClose()
|
||||
}}
|
||||
style={{
|
||||
padding: `${cellSize * 0.06}px ${cellSize * 0.12}px`,
|
||||
borderRadius: `${cellSize * 0.08}px`,
|
||||
border: 'none',
|
||||
background: 'rgba(148, 163, 184, 0.2)',
|
||||
color: '#cbd5e1',
|
||||
fontSize: `${cellSize * 0.13}px`,
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s ease',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(148, 163, 184, 0.3)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(148, 163, 184, 0.2)'
|
||||
}}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</animated.g>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,429 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import * as Tooltip from '@radix-ui/react-tooltip'
|
||||
import { animated, useSpring } from '@react-spring/web'
|
||||
import type { Piece, RelationKind } from '../../types'
|
||||
import { getRelationColor, getRelationOperator } from '../../constants/captureRelations'
|
||||
import { getSquarePosition } from '../../utils/boardCoordinates'
|
||||
import { getEffectiveValue } from '../../utils/pieceSetup'
|
||||
|
||||
interface CaptureRelationOptionsProps {
|
||||
targetPos: { x: number; y: number }
|
||||
cellSize: number
|
||||
gap: number
|
||||
padding: number
|
||||
onSelectRelation: (relation: RelationKind) => void
|
||||
closing?: boolean
|
||||
availableRelations: RelationKind[]
|
||||
moverPiece: Piece
|
||||
targetPiece: Piece
|
||||
allPieces: Piece[]
|
||||
findValidHelpers: (moverValue: number, targetValue: number, relation: RelationKind) => Piece[]
|
||||
}
|
||||
|
||||
/**
|
||||
* Animated floating capture relation options with number bond preview on hover
|
||||
*/
|
||||
export function CaptureRelationOptions({
|
||||
targetPos,
|
||||
cellSize,
|
||||
gap,
|
||||
padding,
|
||||
onSelectRelation,
|
||||
closing = false,
|
||||
availableRelations,
|
||||
moverPiece,
|
||||
targetPiece,
|
||||
allPieces,
|
||||
findValidHelpers,
|
||||
}: CaptureRelationOptionsProps) {
|
||||
const [hoveredRelation, setHoveredRelation] = useState<RelationKind | null>(null)
|
||||
const [currentHelperIndex, setCurrentHelperIndex] = useState(0)
|
||||
|
||||
// Cycle through valid helpers every 1.5 seconds when hovering
|
||||
useEffect(() => {
|
||||
if (!hoveredRelation) {
|
||||
setCurrentHelperIndex(0)
|
||||
return
|
||||
}
|
||||
|
||||
const moverValue = getEffectiveValue(moverPiece)
|
||||
const targetValue = getEffectiveValue(targetPiece)
|
||||
|
||||
if (
|
||||
moverValue === undefined ||
|
||||
moverValue === null ||
|
||||
targetValue === undefined ||
|
||||
targetValue === null
|
||||
) {
|
||||
return
|
||||
}
|
||||
|
||||
const validHelpers = findValidHelpers(moverValue, targetValue, hoveredRelation)
|
||||
if (validHelpers.length <= 1) {
|
||||
// No need to cycle if only one or zero helpers
|
||||
setCurrentHelperIndex(0)
|
||||
return
|
||||
}
|
||||
|
||||
// Cycle through helpers every 1.5 seconds
|
||||
const interval = setInterval(() => {
|
||||
setCurrentHelperIndex((prev) => (prev + 1) % validHelpers.length)
|
||||
}, 1500)
|
||||
|
||||
return () => clearInterval(interval)
|
||||
}, [hoveredRelation, moverPiece, targetPiece, findValidHelpers])
|
||||
|
||||
// Generate tooltip text with actual numbers for the currently displayed helper
|
||||
const getTooltipText = (relation: RelationKind): string => {
|
||||
if (relation !== hoveredRelation) {
|
||||
// Not hovered, use generic text
|
||||
const genericMap: Record<RelationKind, string> = {
|
||||
EQUAL: 'Equality: a = b',
|
||||
MULTIPLE: 'Multiple: b is multiple of a',
|
||||
DIVISOR: 'Divisor: a divides b',
|
||||
SUM: 'Sum: a + h = b (helper)',
|
||||
DIFF: 'Difference: |a - h| = b (helper)',
|
||||
PRODUCT: 'Product: a × h = b (helper)',
|
||||
RATIO: 'Ratio: a/h = b/h (helper)',
|
||||
}
|
||||
return genericMap[relation] || relation
|
||||
}
|
||||
|
||||
const moverValue = getEffectiveValue(moverPiece)
|
||||
const targetValue = getEffectiveValue(targetPiece)
|
||||
|
||||
if (
|
||||
moverValue === undefined ||
|
||||
moverValue === null ||
|
||||
targetValue === undefined ||
|
||||
targetValue === null
|
||||
) {
|
||||
return relation
|
||||
}
|
||||
|
||||
// Relations that don't need helpers - show equation with just mover and target
|
||||
const helperRelations: RelationKind[] = ['SUM', 'DIFF', 'PRODUCT', 'RATIO']
|
||||
const needsHelper = helperRelations.includes(relation)
|
||||
|
||||
if (!needsHelper) {
|
||||
// Generate equation with just mover and target values
|
||||
switch (relation) {
|
||||
case 'EQUAL':
|
||||
return `${moverValue} = ${targetValue}`
|
||||
case 'MULTIPLE':
|
||||
return `${targetValue} is multiple of ${moverValue}`
|
||||
case 'DIVISOR':
|
||||
return `${moverValue} divides ${targetValue}`
|
||||
default:
|
||||
return relation
|
||||
}
|
||||
}
|
||||
|
||||
// Relations that need helpers
|
||||
const validHelpers = findValidHelpers(moverValue, targetValue, relation)
|
||||
if (validHelpers.length === 0) {
|
||||
return `${relation}: No valid helpers`
|
||||
}
|
||||
|
||||
const currentHelper = validHelpers[currentHelperIndex]
|
||||
const helperValue = getEffectiveValue(currentHelper)
|
||||
|
||||
if (helperValue === undefined || helperValue === null) {
|
||||
return relation
|
||||
}
|
||||
|
||||
// Generate equation with actual numbers including helper
|
||||
switch (relation) {
|
||||
case 'SUM':
|
||||
return `${moverValue} + ${helperValue} = ${targetValue}`
|
||||
case 'DIFF':
|
||||
return `|${moverValue} - ${helperValue}| = ${targetValue}`
|
||||
case 'PRODUCT':
|
||||
return `${moverValue} × ${helperValue} = ${targetValue}`
|
||||
case 'RATIO':
|
||||
return `${moverValue}/${helperValue} = ${targetValue}/${helperValue}`
|
||||
default:
|
||||
return relation
|
||||
}
|
||||
}
|
||||
|
||||
const allRelations = [
|
||||
{ relation: 'EQUAL', label: '=', angle: 0, color: '#8b5cf6' },
|
||||
{
|
||||
relation: 'MULTIPLE',
|
||||
label: '×n',
|
||||
angle: 51.4,
|
||||
color: '#a855f7',
|
||||
},
|
||||
{
|
||||
relation: 'DIVISOR',
|
||||
label: '÷',
|
||||
angle: 102.8,
|
||||
color: '#c084fc',
|
||||
},
|
||||
{
|
||||
relation: 'SUM',
|
||||
label: '+',
|
||||
angle: 154.3,
|
||||
color: '#3b82f6',
|
||||
},
|
||||
{
|
||||
relation: 'DIFF',
|
||||
label: '−',
|
||||
angle: 205.7,
|
||||
color: '#06b6d4',
|
||||
},
|
||||
{
|
||||
relation: 'PRODUCT',
|
||||
label: '×',
|
||||
angle: 257.1,
|
||||
color: '#10b981',
|
||||
},
|
||||
{
|
||||
relation: 'RATIO',
|
||||
label: '÷÷',
|
||||
angle: 308.6,
|
||||
color: '#f59e0b',
|
||||
},
|
||||
]
|
||||
|
||||
// Filter to only available relations and redistribute angles evenly
|
||||
const availableRelationDefs = allRelations.filter((r) =>
|
||||
availableRelations.includes(r.relation as RelationKind)
|
||||
)
|
||||
const angleStep = availableRelationDefs.length > 1 ? 360 / availableRelationDefs.length : 0
|
||||
const relations = availableRelationDefs.map((r, index) => ({
|
||||
...r,
|
||||
angle: index * angleStep,
|
||||
}))
|
||||
|
||||
const maxRadius = cellSize * 1.2
|
||||
const buttonSize = 64
|
||||
|
||||
// Animate all buttons simultaneously - reverse animation when closing
|
||||
const spring = useSpring({
|
||||
from: { radius: 0, opacity: 0 },
|
||||
radius: closing ? 0 : maxRadius,
|
||||
opacity: closing ? 0 : 0.85,
|
||||
config: { tension: 280, friction: 20 },
|
||||
})
|
||||
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={0} disableHoverableContent>
|
||||
<g>
|
||||
{relations.map(({ relation, label, angle, color }) => {
|
||||
const rad = (angle * Math.PI) / 180
|
||||
|
||||
return (
|
||||
<animated.g
|
||||
key={relation}
|
||||
transform={spring.radius.to(
|
||||
(r) =>
|
||||
`translate(${targetPos.x + Math.cos(rad) * r}, ${targetPos.y + Math.sin(rad) * r})`
|
||||
)}
|
||||
>
|
||||
<foreignObject
|
||||
x={-buttonSize / 2}
|
||||
y={-buttonSize / 2}
|
||||
width={buttonSize}
|
||||
height={buttonSize}
|
||||
style={{ overflow: 'visible' }}
|
||||
>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>
|
||||
<animated.button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onSelectRelation(relation as RelationKind)
|
||||
}}
|
||||
style={{
|
||||
width: buttonSize,
|
||||
height: buttonSize,
|
||||
borderRadius: '50%',
|
||||
border: '3px solid rgba(255, 255, 255, 0.9)',
|
||||
backgroundColor: color,
|
||||
color: 'white',
|
||||
fontSize: '28px',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
opacity: spring.opacity,
|
||||
transition: 'transform 0.15s ease, box-shadow 0.15s ease',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
||||
textShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'scale(1.15)'
|
||||
e.currentTarget.style.boxShadow = '0 6px 20px rgba(0, 0, 0, 0.4)'
|
||||
setHoveredRelation(relation as RelationKind)
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'scale(1)'
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)'
|
||||
setHoveredRelation(null)
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</animated.button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content asChild sideOffset={8}>
|
||||
<div
|
||||
style={{
|
||||
background: 'rgba(0,0,0,0.95)',
|
||||
color: 'white',
|
||||
padding: '8px 16px',
|
||||
borderRadius: '8px',
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
maxWidth: '240px',
|
||||
zIndex: 10000,
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{getTooltipText(relation as RelationKind)}
|
||||
<Tooltip.Arrow
|
||||
style={{
|
||||
fill: 'rgba(0,0,0,0.95)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</foreignObject>
|
||||
</animated.g>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Number bond preview when hovering over a relation - cycle through valid helpers */}
|
||||
{hoveredRelation &&
|
||||
(() => {
|
||||
const moverValue = getEffectiveValue(moverPiece)
|
||||
const targetValue = getEffectiveValue(targetPiece)
|
||||
|
||||
if (
|
||||
moverValue === undefined ||
|
||||
moverValue === null ||
|
||||
targetValue === undefined ||
|
||||
targetValue === null
|
||||
) {
|
||||
return null
|
||||
}
|
||||
|
||||
const validHelpers = findValidHelpers(moverValue, targetValue, hoveredRelation)
|
||||
|
||||
if (validHelpers.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
// Show only the current helper
|
||||
const currentHelper = validHelpers[currentHelperIndex]
|
||||
|
||||
const color = getRelationColor(hoveredRelation)
|
||||
const operator = getRelationOperator(hoveredRelation)
|
||||
|
||||
// Calculate piece positions on board
|
||||
const layout = { cellSize, gap, padding }
|
||||
const moverPos = getSquarePosition(moverPiece.square, layout)
|
||||
const targetBoardPos = getSquarePosition(targetPiece.square, layout)
|
||||
const helperPos = getSquarePosition(currentHelper.square, layout)
|
||||
|
||||
return (
|
||||
<g key={currentHelper.id}>
|
||||
{/* Triangle connecting lines */}
|
||||
<g opacity={0.5}>
|
||||
<line
|
||||
x1={moverPos.x}
|
||||
y1={moverPos.y}
|
||||
x2={helperPos.x}
|
||||
y2={helperPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<line
|
||||
x1={moverPos.x}
|
||||
y1={moverPos.y}
|
||||
x2={targetBoardPos.x}
|
||||
y2={targetBoardPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<line
|
||||
x1={helperPos.x}
|
||||
y1={helperPos.y}
|
||||
x2={targetBoardPos.x}
|
||||
y2={targetBoardPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Operator symbol - smart placement to avoid collinear collapse */}
|
||||
{(() => {
|
||||
// Calculate center of triangle
|
||||
const centerX = (moverPos.x + helperPos.x + targetBoardPos.x) / 3
|
||||
const centerY = (moverPos.y + helperPos.y + targetBoardPos.y) / 3
|
||||
|
||||
// Check if pieces are nearly collinear using cross product
|
||||
// Vector from mover to helper
|
||||
const v1x = helperPos.x - moverPos.x
|
||||
const v1y = helperPos.y - moverPos.y
|
||||
// Vector from mover to target
|
||||
const v2x = targetBoardPos.x - moverPos.x
|
||||
const v2y = targetBoardPos.y - moverPos.y
|
||||
|
||||
// Cross product magnitude (2D)
|
||||
const crossProduct = Math.abs(v1x * v2y - v1y * v2x)
|
||||
|
||||
// If cross product is small, pieces are nearly collinear
|
||||
const minTriangleArea = cellSize * cellSize * 0.5 // Minimum triangle area threshold
|
||||
const isCollinear = crossProduct < minTriangleArea
|
||||
|
||||
let operatorX = centerX
|
||||
let operatorY = centerY
|
||||
|
||||
if (isCollinear) {
|
||||
// Find the line connecting the three points (use mover to target as reference)
|
||||
const lineLength = Math.sqrt(v2x * v2x + v2y * v2y)
|
||||
|
||||
if (lineLength > 0) {
|
||||
// Perpendicular direction (rotate 90 degrees)
|
||||
const perpX = -v2y / lineLength
|
||||
const perpY = v2x / lineLength
|
||||
|
||||
// Offset operator perpendicular to the line
|
||||
const offsetDistance = cellSize * 0.8
|
||||
operatorX = centerX + perpX * offsetDistance
|
||||
operatorY = centerY + perpY * offsetDistance
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<text
|
||||
x={operatorX}
|
||||
y={operatorY}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill={color}
|
||||
fontSize={cellSize * 0.8}
|
||||
fontWeight="900"
|
||||
fontFamily="Georgia, 'Times New Roman', serif"
|
||||
opacity={0.9}
|
||||
>
|
||||
{operator}
|
||||
</text>
|
||||
)
|
||||
})()}
|
||||
</g>
|
||||
)
|
||||
})()}
|
||||
</g>
|
||||
</Tooltip.Provider>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import type { Piece, RelationKind } from '../../types'
|
||||
import { getRelationColor, getRelationOperator } from '../../constants/captureRelations'
|
||||
import { AnimatedHelperPiece } from './AnimatedHelperPiece'
|
||||
|
||||
interface HelperSelectionOptionsProps {
|
||||
helpers: Array<{ piece: Piece; boardPos: { x: number; y: number } }>
|
||||
targetPos: { x: number; y: number }
|
||||
cellSize: number
|
||||
gap: number
|
||||
padding: number
|
||||
onSelectHelper: (pieceId: string) => void
|
||||
closing?: boolean
|
||||
moverPiece: Piece
|
||||
targetPiece: Piece
|
||||
relation: RelationKind
|
||||
useNativeAbacusNumbers?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper piece selection - pieces fly from board to selection ring
|
||||
* Hovering over a helper shows a preview of the number bond
|
||||
*/
|
||||
export function HelperSelectionOptions({
|
||||
helpers,
|
||||
targetPos,
|
||||
cellSize,
|
||||
gap,
|
||||
padding,
|
||||
onSelectHelper,
|
||||
closing = false,
|
||||
moverPiece,
|
||||
targetPiece,
|
||||
relation,
|
||||
useNativeAbacusNumbers = false,
|
||||
}: HelperSelectionOptionsProps) {
|
||||
const [hoveredHelperId, setHoveredHelperId] = useState<string | null>(null)
|
||||
const maxRadius = cellSize * 1.2
|
||||
const angleStep = helpers.length > 1 ? 360 / helpers.length : 0
|
||||
|
||||
console.log('[HelperSelectionOptions] targetPos:', targetPos)
|
||||
console.log('[HelperSelectionOptions] cellSize:', cellSize)
|
||||
console.log('[HelperSelectionOptions] maxRadius:', maxRadius)
|
||||
console.log('[HelperSelectionOptions] angleStep:', angleStep)
|
||||
console.log('[HelperSelectionOptions] helpers.length:', helpers.length)
|
||||
|
||||
// Find the hovered helper and its ring position
|
||||
const hoveredHelperData = helpers.find((h) => h.piece.id === hoveredHelperId)
|
||||
const hoveredHelperIndex = helpers.findIndex((h) => h.piece.id === hoveredHelperId)
|
||||
let hoveredHelperRingPos = null
|
||||
if (hoveredHelperIndex !== -1) {
|
||||
const angle = hoveredHelperIndex * angleStep
|
||||
const rad = (angle * Math.PI) / 180
|
||||
hoveredHelperRingPos = {
|
||||
x: targetPos.x + Math.cos(rad) * maxRadius,
|
||||
y: targetPos.y + Math.sin(rad) * maxRadius,
|
||||
}
|
||||
}
|
||||
|
||||
const color = getRelationColor(relation)
|
||||
const operator = getRelationOperator(relation)
|
||||
|
||||
return (
|
||||
<g>
|
||||
{helpers.map(({ piece, boardPos }, index) => {
|
||||
const angle = index * angleStep
|
||||
const rad = (angle * Math.PI) / 180
|
||||
|
||||
// Target position in ring
|
||||
const ringX = targetPos.x + Math.cos(rad) * maxRadius
|
||||
const ringY = targetPos.y + Math.sin(rad) * maxRadius
|
||||
|
||||
console.log(
|
||||
`[HelperSelectionOptions] piece ${piece.id} (${piece.square}): index=${index}, angle=${angle}°, boardPos=(${boardPos.x}, ${boardPos.y}), ringPos=(${ringX}, ${ringY})`
|
||||
)
|
||||
|
||||
return (
|
||||
<AnimatedHelperPiece
|
||||
key={piece.id}
|
||||
piece={piece}
|
||||
boardPos={boardPos}
|
||||
ringX={ringX}
|
||||
ringY={ringY}
|
||||
cellSize={cellSize}
|
||||
onSelectHelper={onSelectHelper}
|
||||
closing={closing}
|
||||
useNativeAbacusNumbers={useNativeAbacusNumbers}
|
||||
onHover={setHoveredHelperId}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Show number bond preview when hovering over a helper - draw triangle between actual pieces */}
|
||||
{hoveredHelperData && hoveredHelperRingPos && (
|
||||
<g>
|
||||
{(() => {
|
||||
// Use actual positions of all three pieces
|
||||
const helperPos = hoveredHelperRingPos // Helper is in the ring
|
||||
const moverBoardPos = hoveredHelperData.boardPos // Mover is on the board at its current position
|
||||
const targetBoardPos = targetPos // Target is on the board at capture position
|
||||
|
||||
// Calculate positions from square coordinates
|
||||
const file = moverPiece.square.charCodeAt(0) - 65
|
||||
const rank = Number.parseInt(moverPiece.square.slice(1), 10)
|
||||
const row = 8 - rank
|
||||
const moverPos = {
|
||||
x: padding + file * (cellSize + gap) + cellSize / 2,
|
||||
y: padding + row * (cellSize + gap) + cellSize / 2,
|
||||
}
|
||||
|
||||
const targetFile = targetPiece.square.charCodeAt(0) - 65
|
||||
const targetRank = Number.parseInt(targetPiece.square.slice(1), 10)
|
||||
const targetRow = 8 - targetRank
|
||||
const targetBoardPosition = {
|
||||
x: padding + targetFile * (cellSize + gap) + cellSize / 2,
|
||||
y: padding + targetRow * (cellSize + gap) + cellSize / 2,
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Triangle connecting lines between actual piece positions */}
|
||||
<g opacity={0.5}>
|
||||
<line
|
||||
x1={moverPos.x}
|
||||
y1={moverPos.y}
|
||||
x2={helperPos.x}
|
||||
y2={helperPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<line
|
||||
x1={moverPos.x}
|
||||
y1={moverPos.y}
|
||||
x2={targetBoardPosition.x}
|
||||
y2={targetBoardPosition.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<line
|
||||
x1={helperPos.x}
|
||||
y1={helperPos.y}
|
||||
x2={targetBoardPosition.x}
|
||||
y2={targetBoardPosition.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Operator symbol in center of triangle */}
|
||||
<text
|
||||
x={(moverPos.x + helperPos.x + targetBoardPosition.x) / 3}
|
||||
y={(moverPos.y + helperPos.y + targetBoardPosition.y) / 3}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill={color}
|
||||
fontSize={cellSize * 0.8}
|
||||
fontWeight="900"
|
||||
fontFamily="Georgia, 'Times New Roman', serif"
|
||||
opacity={0.9}
|
||||
>
|
||||
{operator}
|
||||
</text>
|
||||
|
||||
{/* No cloned pieces - using actual pieces already on board/ring */}
|
||||
</>
|
||||
)
|
||||
})()}
|
||||
</g>
|
||||
)}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { animated, to, useSpring } from '@react-spring/web'
|
||||
import type { Piece, RelationKind } from '../../types'
|
||||
import { getRelationColor, getRelationOperator } from '../../constants/captureRelations'
|
||||
import { getSquarePosition } from '../../utils/boardCoordinates'
|
||||
import { getEffectiveValue } from '../../utils/pieceSetup'
|
||||
import { PieceRenderer } from '../PieceRenderer'
|
||||
|
||||
interface NumberBondVisualizationProps {
|
||||
moverPiece: Piece
|
||||
helperPiece: Piece
|
||||
targetPiece: Piece
|
||||
relation: RelationKind
|
||||
targetPos: { x: number; y: number }
|
||||
cellSize: number
|
||||
onConfirm: () => void
|
||||
closing?: boolean
|
||||
autoAnimate?: boolean
|
||||
moverStartPos: { x: number; y: number }
|
||||
helperStartPos: { x: number; y: number }
|
||||
useNativeAbacusNumbers?: boolean
|
||||
padding: number
|
||||
gap: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Number Bond Visualization - uses actual piece positions for smooth rotation/collapse
|
||||
* Pieces start at their actual positions (mover on board, helper in ring, target on board)
|
||||
* Animation: Rotate and collapse to target position, only mover remains
|
||||
*/
|
||||
export function NumberBondVisualization({
|
||||
moverPiece,
|
||||
helperPiece,
|
||||
targetPiece,
|
||||
relation,
|
||||
targetPos,
|
||||
cellSize,
|
||||
onConfirm,
|
||||
closing = false,
|
||||
autoAnimate = true,
|
||||
moverStartPos,
|
||||
helperStartPos,
|
||||
padding,
|
||||
gap,
|
||||
useNativeAbacusNumbers = false,
|
||||
}: NumberBondVisualizationProps) {
|
||||
const [animating, setAnimating] = useState(false)
|
||||
|
||||
// Auto-trigger animation immediately when component mounts (after helper selection)
|
||||
useEffect(() => {
|
||||
if (!autoAnimate) return
|
||||
const timer = setTimeout(() => {
|
||||
setAnimating(true)
|
||||
}, 300) // Short delay to show the triangle briefly
|
||||
return () => clearTimeout(timer)
|
||||
}, [autoAnimate])
|
||||
|
||||
const color = getRelationColor(relation)
|
||||
const operator = getRelationOperator(relation)
|
||||
|
||||
// Calculate actual board position for target
|
||||
const targetBoardPos = getSquarePosition(targetPiece.square, { cellSize, gap, padding })
|
||||
|
||||
// Animation: Rotate and collapse from actual positions to target
|
||||
const captureAnimation = useSpring({
|
||||
from: { rotation: 0, progress: 0, opacity: 1 },
|
||||
rotation: animating ? Math.PI * 20 : 0, // 10 full rotations
|
||||
progress: animating ? 1 : 0, // 0 = at start positions, 1 = at target position
|
||||
opacity: animating ? 0 : 1,
|
||||
config: animating ? { duration: 2500 } : { tension: 280, friction: 20 },
|
||||
onRest: () => {
|
||||
if (animating) {
|
||||
onConfirm()
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// Get piece values
|
||||
const getMoverValue = () => getEffectiveValue(moverPiece)
|
||||
const getHelperValue = () => getEffectiveValue(helperPiece)
|
||||
const getTargetValue = () => getEffectiveValue(targetPiece)
|
||||
|
||||
return (
|
||||
<g>
|
||||
{/* Triangle connecting lines between actual piece positions - fade during animation */}
|
||||
<animated.g opacity={to([captureAnimation.opacity], (op) => (animating ? op * 0.5 : 0.5))}>
|
||||
<line
|
||||
x1={moverStartPos.x}
|
||||
y1={moverStartPos.y}
|
||||
x2={helperStartPos.x}
|
||||
y2={helperStartPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<line
|
||||
x1={moverStartPos.x}
|
||||
y1={moverStartPos.y}
|
||||
x2={targetBoardPos.x}
|
||||
y2={targetBoardPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
<line
|
||||
x1={helperStartPos.x}
|
||||
y1={helperStartPos.y}
|
||||
x2={targetBoardPos.x}
|
||||
y2={targetBoardPos.y}
|
||||
stroke={color}
|
||||
strokeWidth={4}
|
||||
/>
|
||||
</animated.g>
|
||||
|
||||
{/* Operator symbol in center of triangle - fade during animation */}
|
||||
<animated.text
|
||||
x={(moverStartPos.x + helperStartPos.x + targetBoardPos.x) / 3}
|
||||
y={(moverStartPos.y + helperStartPos.y + targetBoardPos.y) / 3}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill={color}
|
||||
fontSize={cellSize * 0.8}
|
||||
fontWeight="900"
|
||||
fontFamily="Georgia, 'Times New Roman', serif"
|
||||
opacity={to([captureAnimation.opacity], (op) => (animating ? op * 0.9 : 0.9))}
|
||||
>
|
||||
{operator}
|
||||
</animated.text>
|
||||
|
||||
{/* Mover piece - starts at board position, spirals to target, STAYS VISIBLE */}
|
||||
<animated.g
|
||||
transform={to([captureAnimation.rotation, captureAnimation.progress], (rot, prog) => {
|
||||
// Interpolate from start position to target position
|
||||
const x = moverStartPos.x + (targetBoardPos.x - moverStartPos.x) * prog
|
||||
const y = moverStartPos.y + (targetBoardPos.y - moverStartPos.y) * prog
|
||||
|
||||
// Add spiral rotation around the interpolated center
|
||||
const spiralRadius = (1 - prog) * cellSize * 0.5
|
||||
const spiralX = x + Math.cos(rot) * spiralRadius
|
||||
const spiralY = y + Math.sin(rot) * spiralRadius
|
||||
|
||||
return `translate(${spiralX}, ${spiralY})`
|
||||
})}
|
||||
opacity={1} // Mover stays fully visible
|
||||
>
|
||||
<g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
|
||||
<PieceRenderer
|
||||
type={moverPiece.type}
|
||||
color={moverPiece.color}
|
||||
value={getMoverValue() || 0}
|
||||
size={cellSize}
|
||||
useNativeAbacusNumbers={useNativeAbacusNumbers}
|
||||
/>
|
||||
</g>
|
||||
</animated.g>
|
||||
|
||||
{/* Helper piece - starts in ring, spirals to target, FADES OUT */}
|
||||
<animated.g
|
||||
transform={to([captureAnimation.rotation, captureAnimation.progress], (rot, prog) => {
|
||||
const x = helperStartPos.x + (targetBoardPos.x - helperStartPos.x) * prog
|
||||
const y = helperStartPos.y + (targetBoardPos.y - helperStartPos.y) * prog
|
||||
|
||||
const spiralRadius = (1 - prog) * cellSize * 0.5
|
||||
const angle = rot + (Math.PI * 2) / 3 // Offset by 120°
|
||||
const spiralX = x + Math.cos(angle) * spiralRadius
|
||||
const spiralY = y + Math.sin(angle) * spiralRadius
|
||||
|
||||
return `translate(${spiralX}, ${spiralY})`
|
||||
})}
|
||||
opacity={to([captureAnimation.opacity], (op) => (animating ? op : 1))}
|
||||
>
|
||||
<g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
|
||||
<PieceRenderer
|
||||
type={helperPiece.type}
|
||||
color={helperPiece.color}
|
||||
value={getHelperValue() || 0}
|
||||
size={cellSize}
|
||||
useNativeAbacusNumbers={useNativeAbacusNumbers}
|
||||
/>
|
||||
</g>
|
||||
</animated.g>
|
||||
|
||||
{/* Target piece - stays at board position, spirals in place, FADES OUT */}
|
||||
<animated.g
|
||||
transform={to([captureAnimation.rotation, captureAnimation.progress], (rot, prog) => {
|
||||
const x = targetBoardPos.x
|
||||
const y = targetBoardPos.y
|
||||
|
||||
const spiralRadius = (1 - prog) * cellSize * 0.5
|
||||
const angle = rot + (Math.PI * 4) / 3 // Offset by 240°
|
||||
const spiralX = x + Math.cos(angle) * spiralRadius
|
||||
const spiralY = y + Math.sin(angle) * spiralRadius
|
||||
|
||||
return `translate(${spiralX}, ${spiralY})`
|
||||
})}
|
||||
opacity={to([captureAnimation.opacity], (op) => (animating ? op : 1))}
|
||||
>
|
||||
<g transform={`translate(${-cellSize / 2}, ${-cellSize / 2})`}>
|
||||
<PieceRenderer
|
||||
type={targetPiece.type}
|
||||
useNativeAbacusNumbers={useNativeAbacusNumbers}
|
||||
color={targetPiece.color}
|
||||
value={getTargetValue() || 0}
|
||||
size={cellSize}
|
||||
/>
|
||||
</g>
|
||||
</animated.g>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue