refactor(rithmomachia): simplify capture error dialog to one-liner

Replace verbose error dialog with patronizing list of all failed relations
with a simple, concise message: "No valid mathematical relation" + Close button.

Changes:
- Remove moverPiece and targetPiece props from CaptureErrorDialog
- Remove all explanation generation logic
- Reduce dialog size from 5x4 cells to 3x1.6 cells
- Show single line of text instead of bulleted list
- Keep red styling and smooth animation

Result: Clean, non-patronizing feedback that simply states the fact.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-10-29 14:17:22 -05:00
parent 75d2a98b96
commit 82a5eb2e4b
1 changed files with 14 additions and 68 deletions

View File

@ -25,43 +25,19 @@ import {
import { PieceRenderer } from './PieceRenderer'
/**
* Error dialog when no capture is possible
* Error dialog when no capture is possible - simple one-liner
*/
function CaptureErrorDialog({
targetPos,
cellSize,
moverPiece,
targetPiece,
onClose,
closing,
}: {
targetPos: { x: number; y: number }
cellSize: number
moverPiece: Piece
targetPiece: Piece
onClose: () => void
closing: boolean
}) {
const moverValue = getEffectiveValue(moverPiece)
const targetValue = getEffectiveValue(targetPiece)
// Get explanations for why each relation failed
const explanations: string[] = []
if (
moverValue !== undefined &&
moverValue !== null &&
targetValue !== undefined &&
targetValue !== null
) {
explanations.push(checkEqual(moverValue, targetValue).explanation || '')
explanations.push(checkMultiple(moverValue, targetValue).explanation || '')
explanations.push(checkDivisor(moverValue, targetValue).explanation || '')
explanations.push('SUM: No friendly piece can serve as helper')
explanations.push('DIFF: No friendly piece can serve as helper')
explanations.push('PRODUCT: No friendly piece can serve as helper')
explanations.push('RATIO: No friendly piece can serve as helper')
}
const entranceSpring = useSpring({
from: { scale: 0, opacity: 0 },
scale: closing ? 0 : 1,
@ -80,66 +56,38 @@ function CaptureErrorDialog({
)}
>
<foreignObject
x={-cellSize * 2.5}
y={-cellSize * 2}
width={cellSize * 5}
height={cellSize * 4}
x={-cellSize * 1.5}
y={-cellSize * 0.8}
width={cellSize * 3}
height={cellSize * 1.6}
>
<div
style={{
background: 'rgba(239, 68, 68, 0.95)',
color: 'white',
padding: `${cellSize * 0.3}px`,
padding: `${cellSize * 0.25}px`,
borderRadius: `${cellSize * 0.2}px`,
fontSize: `${cellSize * 0.25}px`,
fontSize: `${cellSize * 0.28}px`,
fontWeight: 600,
textAlign: 'center',
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.5)',
border: '3px solid rgba(255, 255, 255, 0.9)',
maxHeight: `${cellSize * 3.5}px`,
overflow: 'auto',
display: 'flex',
flexDirection: 'column',
gap: `${cellSize * 0.15}px`,
alignItems: 'center',
}}
onClick={(e) => e.stopPropagation()}
>
<div
style={{
fontSize: `${cellSize * 0.35}px`,
marginBottom: `${cellSize * 0.2}px`,
fontWeight: 'bold',
}}
>
Capture Not Possible
</div>
<div
style={{
fontSize: `${cellSize * 0.22}px`,
marginBottom: `${cellSize * 0.15}px`,
}}
>
No mathematical relation works:
</div>
<div
style={{
fontSize: `${cellSize * 0.18}px`,
textAlign: 'left',
lineHeight: 1.4,
}}
>
{explanations.filter(Boolean).map((exp, i) => (
<div key={i} style={{ marginBottom: `${cellSize * 0.1}px` }}>
{exp}
</div>
))}
</div>
<div>No valid mathematical relation</div>
<button
onClick={(e) => {
e.stopPropagation()
onClose()
}}
style={{
marginTop: `${cellSize * 0.2}px`,
padding: `${cellSize * 0.15}px ${cellSize * 0.3}px`,
borderRadius: `${cellSize * 0.15}px`,
padding: `${cellSize * 0.12}px ${cellSize * 0.25}px`,
borderRadius: `${cellSize * 0.12}px`,
border: '2px solid white',
background: 'rgba(255, 255, 255, 0.2)',
color: 'white',
@ -2183,8 +2131,6 @@ function BoardDisplay() {
<CaptureErrorDialog
targetPos={targetPos}
cellSize={cellSize}
moverPiece={moverPiece}
targetPiece={targetPiece}
onClose={dismissDialog}
closing={closingDialog}
/>