diff --git a/apps/web/.claude/settings.local.json b/apps/web/.claude/settings.local.json index 6f145bb6..4712e7be 100644 --- a/apps/web/.claude/settings.local.json +++ b/apps/web/.claude/settings.local.json @@ -146,7 +146,5 @@ "ask": [] }, "enableAllProjectMcpServers": true, - "enabledMcpjsonServers": [ - "sqlite" - ] + "enabledMcpjsonServers": ["sqlite"] } diff --git a/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx b/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx index d0da1f2f..18812519 100644 --- a/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx +++ b/apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx @@ -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) diff --git a/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx b/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx index 05618fec..81c400e7 100644 --- a/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx +++ b/apps/web/src/arcade-games/rithmomachia/components/board/BoardDisplay.tsx @@ -311,6 +311,9 @@ export function BoardDisplay() { } const handleSvgMouseMove = (e: React.MouseEvent) => { + 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