antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

debug: add console logging for hover error tooltip and guide dragging 

Added targeted console logging to help debug two issues:
1. Capture error tooltip on hover - logs mouse events, piece detection,
   path validation, and relation checking
2. Guide dragging from docked state - logs drag events, undocking logic,
   and position calculations

All logs use string concatenation and are prefixed with [HOVER_ERROR]
or [GUIDE_DRAG] for easy filtering. Removed unrelated debug logging.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-02 13:58:46 -06:00
parent d670d31973
commit 4ce561e785
3 changed files with 90 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/.claude/settings.local.json
View File

@ -146,7 +146,5 @@
"ask": []
},
"enableAllProjectMcpServers": true,
"enabledMcpjsonServers": [
"sqlite"
]
"enabledMcpjsonServers": ["sqlite"]
}

92
apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx
View File

@ -93,17 +93,6 @@ export function PlayingGuideModal({
}
}, [size, docked, standalone])
// Debug logging for props
useEffect(() => {
console.log('[PlayingGuideModal] Component rendered/props changed', {
isOpen,
standalone,
docked,
hasOnDock: !!onDock,
hasOnUndock: !!onUndock,
})
}, [isOpen, standalone, docked, onDock, onUndock])
// Track window width for responsive behavior
useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth)
@ -124,24 +113,35 @@ export function PlayingGuideModal({
// Handle dragging
const handleMouseDown = (e: React.MouseEvent) => {
console.log('[PlayingGuideModal] handleMouseDown called', {
windowWidth: window.innerWidth,
standalone,
docked,
hasOnDock: !!onDock,
hasOnUndock: !!onUndock,
})
if (window.innerWidth < 768 || standalone) return // No dragging on mobile or standalone
console.log('[PlayingGuideModal] Starting drag')
console.log(
'[GUIDE_DRAG] handleMouseDown - windowWidth: ' +
window.innerWidth +
', standalone: ' +
standalone +
', docked: ' +
docked
)
if (window.innerWidth < 768 || standalone) {
console.log('[GUIDE_DRAG] Skipping drag - mobile or standalone')
return // No dragging on mobile or standalone
}
console.log('[GUIDE_DRAG] Starting drag - docked: ' + docked)
setIsDragging(true)
// When docked, we need to track the initial mouse position for undocking
if (docked) {
console.log(
'[GUIDE_DRAG] Docked - setting dragStart to clientX: ' +
e.clientX +
', clientY: ' +
e.clientY
)
setDragStart({
x: e.clientX,
y: e.clientY,
})
} else {
console.log('[GUIDE_DRAG] Not docked - setting dragStart offset')
setDragStart({
x: e.clientX - position.x,
y: e.clientY - position.y,
@ -179,22 +179,36 @@ export function PlayingGuideModal({
(e.clientX - dragStart.x) ** 2 + (e.clientY - dragStart.y) ** 2
)
console.log(
'[GUIDE_DRAG] Dragging while docked - distance: ' +
dragDistance +
', threshold: ' +
UNDOCK_THRESHOLD
)
if (dragDistance > UNDOCK_THRESHOLD) {
console.log('[PlayingGuideModal] Undocking due to drag distance:', dragDistance)
console.log('[GUIDE_DRAG] Threshold exceeded - calling onUndock()')
onUndock()
// After undocking, keep modal at current visual position
// and set dragStart as offset from position to cursor for smooth continued dragging
if (modalRef.current) {
const rect = modalRef.current.getBoundingClientRect()
console.log('[GUIDE_DRAG] Modal rect - left: ' + rect.left + ', top: ' + rect.top)
// Keep modal at its current screen position (no jump)
setPosition({
x: rect.left,
y: rect.top,
})
console.log('[GUIDE_DRAG] New position set to: ' + rect.left + ', ' + rect.top)
// Set dragStart as offset from current position to cursor
const newDragStartX = e.clientX - rect.left
const newDragStartY = e.clientY - rect.top
console.log(
'[GUIDE_DRAG] New dragStart offset: ' + newDragStartX + ', ' + newDragStartY
)
setDragStart({
x: e.clientX - rect.left,
y: e.clientY - rect.top,
x: newDragStartX,
y: newDragStartY,
})
}
}
@ -266,47 +280,15 @@ export function PlayingGuideModal({
}
const handleMouseUp = (e: MouseEvent) => {
console.log('[PlayingGuideModal] handleMouseUp called', {
isDragging,
hasOnDock: !!onDock,
docked,
clientX: e.clientX,
windowWidth: window.innerWidth,
})
// Check for docking when releasing drag
if (isDragging && onDock && !docked) {
const DOCK_THRESHOLD = 100 // pixels from edge to trigger docking
const distanceFromLeft = e.clientX
const distanceFromRight = window.innerWidth - e.clientX
console.log('[PlayingGuideModal] Checking for dock', {
distanceFromLeft,
distanceFromRight,
DOCK_THRESHOLD,
shouldDockLeft: distanceFromLeft < DOCK_THRESHOLD,
shouldDockRight: distanceFromRight < DOCK_THRESHOLD,
})
if (e.clientX < DOCK_THRESHOLD) {
console.log('[PlayingGuideModal] Docking to LEFT')
onDock('left')
} else if (e.clientX > window.innerWidth - DOCK_THRESHOLD) {
console.log('[PlayingGuideModal] Docking to RIGHT')
onDock('right')
} else {
console.log('[PlayingGuideModal] No docking (not close enough to edges)')
}
} else {
console.log('[PlayingGuideModal] Not checking for dock', {
reason: !isDragging
? 'not dragging'
: !onDock
? 'no onDock handler'
: docked
? 'already docked'
: 'unknown',
})
}
setIsDragging(false)

75
apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx
View File

@ -311,6 +311,9 @@ export function BoardDisplay() {
}
const handleSvgMouseMove = (e: React.MouseEvent<SVGSVGElement>) => {
console.log(
'[HOVER_ERROR] Mouse move - isMyTurn: ' + isMyTurn + ', selectedSquare: ' + selectedSquare
)
if (!isMyTurn || !selectedSquare) {
setHoveredSquare(null)
return
@ -329,8 +332,20 @@ export function BoardDisplay() {
const square = `${String.fromCharCode(65 + col)}${8 - row}`
const piece = Object.values(state.pieces).find((p) => p.square === square && !p.captured)
console.log(
'[HOVER_ERROR] Square: ' +
square +
', hasPiece: ' +
!!piece +
', pieceColor: ' +
(piece ? piece.color : 'none') +
', playerColor: ' +
playerColor
)
// Only set hovered square if it's an enemy piece
if (piece && piece.color !== playerColor) {
console.log('[HOVER_ERROR] Setting hoveredSquare to: ' + square)
setHoveredSquare(square)
} else {
setHoveredSquare(null)
@ -341,6 +356,7 @@ export function BoardDisplay() {
}
const handleSvgMouseLeave = () => {
console.log('[HOVER_ERROR] Mouse leave - clearing hoveredSquare')
setHoveredSquare(null)
}
@ -350,22 +366,14 @@ export function BoardDisplay() {
// Add labelMargin offset to the position from utility function
const basePos = getSquarePosition(captureTarget.to, layout)
const pos = { x: basePos.x + labelMargin, y: basePos.y }
console.log('[getTargetSquarePosition] captureTarget.to:', captureTarget.to, 'position:', pos)
return pos
}, [captureTarget, layout, labelMargin])
const targetPos = getTargetSquarePosition()
if (targetPos) {
console.log('[BoardDisplay] targetPos calculated:', targetPos)
}
// Prepare helper data with board positions (if showing helpers)
const helpersWithPositions = (() => {
console.log('[helpersWithPositions] selectedRelation:', selectedRelation)
console.log('[helpersWithPositions] captureTarget:', captureTarget)
if (!selectedRelation || !captureTarget) {
console.log('[helpersWithPositions] No selectedRelation or captureTarget, returning empty')
return []
}
@ -376,32 +384,23 @@ export function BoardDisplay() {
(p) => p.square === captureTarget.to && !p.captured
)
console.log('[helpersWithPositions] moverPiece:', moverPiece)
console.log('[helpersWithPositions] targetPiece:', targetPiece)
if (!moverPiece || !targetPiece) {
console.log('[helpersWithPositions] Missing pieces, returning empty')
return []
}
const moverValue = getEffectiveValue(moverPiece)
const targetValue = getEffectiveValue(targetPiece)
console.log('[helpersWithPositions] moverValue:', moverValue)
console.log('[helpersWithPositions] targetValue:', targetValue)
if (
moverValue === undefined ||
moverValue === null ||
targetValue === undefined ||
targetValue === null
) {
console.log('[helpersWithPositions] Undefined/null values, returning empty')
return []
}
const validHelpers = findValidHelpers(moverValue, targetValue, selectedRelation)
console.log('[helpersWithPositions] validHelpers found:', validHelpers.length)
const helpersWithPos = validHelpers.map((piece) => {
const basePos = getSquarePosition(piece.square, layout)
@ -410,7 +409,6 @@ export function BoardDisplay() {
boardPos: { x: basePos.x + labelMargin, y: basePos.y },
}
})
console.log('[helpersWithPositions] helpersWithPos:', helpersWithPos)
return helpersWithPos
})()
@ -444,7 +442,19 @@ export function BoardDisplay() {
// Calculate if hovered square shows error (for hover preview)
const showHoverError = (() => {
if (!hoveredSquare || !selectedSquare || captureDialogOpen) return false
console.log(
'[HOVER_ERROR] Calculating showHoverError - hoveredSquare: ' +
hoveredSquare +
', selectedSquare: ' +
selectedSquare +
', captureDialogOpen: ' +
captureDialogOpen
)
if (!hoveredSquare || !selectedSquare || captureDialogOpen) {
console.log('[HOVER_ERROR] Early return - missing data or dialog open')
return false
}
const moverPiece = Object.values(state.pieces).find(
(p) => p.square === selectedSquare && !p.captured
@ -453,25 +463,44 @@ export function BoardDisplay() {
(p) => p.square === hoveredSquare && !p.captured
)
if (!moverPiece || !targetPiece) return false
console.log(
'[HOVER_ERROR] Found pieces - mover: ' + !!moverPiece + ', target: ' + !!targetPiece
)
if (!moverPiece || !targetPiece) {
console.log('[HOVER_ERROR] Missing mover or target piece')
return false
}
// First check if the move path is valid
const validation = validateMove(moverPiece, selectedSquare, hoveredSquare, state.pieces)
if (!validation.valid) return false
console.log('[HOVER_ERROR] Path validation - valid: ' + validation.valid)
if (!validation.valid) {
console.log('[HOVER_ERROR] Path not valid - skipping relation check')
return false
}
const moverValue = getEffectiveValue(moverPiece)
const targetValue = getEffectiveValue(targetPiece)
console.log('[HOVER_ERROR] Values - mover: ' + moverValue + ', target: ' + targetValue)
if (
moverValue === undefined ||
moverValue === null ||
targetValue === undefined ||
targetValue === null
)
) {
console.log('[HOVER_ERROR] Undefined or null values')
return false
}
const relations = findAvailableRelations(moverValue, targetValue)
return relations.length === 0
console.log('[HOVER_ERROR] Relations found: ' + relations.length)
const shouldShow = relations.length === 0
console.log('[HOVER_ERROR] Final result - showHoverError: ' + shouldShow)
return shouldShow
})()
// Get position for hover error tooltip