Boggle game app - v0 by Vercel

Great. But now the edit mode is weird, every time I change a letter, the focus goes back to the first letter. It was acting properly before.

344d ago

You're right, there's an issue with the focus behavior. Let me fix that:

I've fixed the focus issue in the edit mode. Now when you edit letters, the focus will stay where you expect it to be, and you can navigate naturally through the board. Here's what I changed:

1. Added a Reference to Track Previous Edit State

const prevEditingRef = useRef(isEditing)

This allows us to compare the current editing state with the previous one, so we can detect when we're first entering edit mode.

2. Improved the Edit Mode Effect

I completely rewrote the effect that handles edit mode changes:

useEffect(() => {
  if (isEditing !== undefined && isEditing !== prevEditingRef.current) {
    setEditMode(isEditing)
    
    // Only set focus to first cell when first entering edit mode
    if (isEditing && !prevEditingRef.current) {
      setFocusPosition([0, 0])
    } 
    // Handle saving when exiting edit mode
    else if (!isEditing && prevEditingRef.current && onSaveEdit) {
      const validBoard = editBoard.map((row) => row.map((cell) => (cell.trim() === "" ? "e" : cell)))
      onSaveEdit(validBoard)
    }
    
    prevEditingRef.current = isEditing
  }
}, [isEditing, onSaveEdit])

Key changes:

Removed editBoard and editMode from the dependency array
Only set focus to [0, 0] when first entering edit mode (not on every render)
Added a check to only run the effect when the edit state actually changes
Used a ref to track the previous edit state

3. Simplified the Logic

The focus now only changes when:

You first enter edit mode (focuses on the first cell)
You explicitly navigate with arrow keys
You click on a different cell

Now the edit mode should work as expected:

When you enter edit mode, focus starts at the first cell
When you type a letter, focus stays on that cell
You can use arrow keys to navigate between cells
When you save, all your changes are preserved

The focus no longer resets to the first cell when you edit a letter, making the editing experience much more natural and intuitive.

344d ago

Can you actually make the focus automatically move to the next cell once I edit a letter?

344d ago

I'll implement auto-advance to the next cell after typing a letter:

I've implemented auto-advance functionality that automatically moves the focus to the next cell after typing a letter. Here's what I added:

1. Added a Function to Determine the Next Cell

// Get the next cell position (left-to-right, then top-to-bottom)
const getNextCellPosition = (rowIndex: number, colIndex: number): [number, number] => {
  const rows = board.length
  const cols = board[0]?.length || 0
  
  // Move to the next column
  let nextCol = colIndex + 1
  let nextRow = rowIndex
  
  // If we're at the end of a row, move to the next row
  if (nextCol >= cols) {
    nextCol = 0
    nextRow = (nextRow + 1) % rows
  }
  
  return [nextRow, nextCol]
}

This function calculates the next cell position in a left-to-right, top-to-bottom order. When it reaches the end of a row, it wraps to the beginning of the next row. When it reaches the end of the board, it wraps back to the beginning.

2. Updated the Letter Change Handler

const handleLetterChange = (rowIndex: number, colIndex: number, value: string) => {
  // Take the last character typed (or empty string if backspace/delete was used)
  const letter = value.length > 0 ? value.toLowerCase().slice(-1) : ""

  const newBoard = editBoard.map((row, r) => row.map((cell, c) => (r === rowIndex && c === colIndex ? letter : cell)))
  setEditBoard(newBoard)
  
  // If a letter was entered (not deleted), advance to the next cell
  if (letter) {
    const nextPosition = getNextCellPosition(rowIndex, colIndex)
    setFocusPosition(nextPosition)
  }
}

The key addition is the conditional check if (letter) that:

Only advances to the next cell if a letter was actually entered
Doesn't advance if the user deleted the letter (empty string)
Uses the getNextCellPosition function to determine where to go next

How It Works Now

When you enter edit mode, focus starts at the first cell
When you type a letter, it automatically advances to the next cell
If you delete a letter (backspace/delete), it stays on the current cell
You can still use arrow keys to navigate manually if needed
When you reach the end of a row, it wraps to the beginning of the next row
When you reach the end of the board, it wraps back to the beginning

This makes editing the board much faster and more efficient, especially when you want to replace multiple letters in sequence.

344d ago

Great. But now the edit mode is weird, every time I change a letter, the focus goes back to the first letter. It was acting properly before.

344d ago

You're right, there's an issue with the focus behavior. Let me fix that:

I've fixed the focus issue in the edit mode. Now when you edit letters, the focus will stay where you expect it to be, and you can navigate naturally through the board. Here's what I changed:

1. Added a Reference to Track Previous Edit State

const prevEditingRef = useRef(isEditing)

This allows us to compare the current editing state with the previous one, so we can detect when we're first entering edit mode.

2. Improved the Edit Mode Effect

I completely rewrote the effect that handles edit mode changes:

useEffect(() => {
  if (isEditing !== undefined && isEditing !== prevEditingRef.current) {
    setEditMode(isEditing)
    
    // Only set focus to first cell when first entering edit mode
    if (isEditing && !prevEditingRef.current) {
      setFocusPosition([0, 0])
    } 
    // Handle saving when exiting edit mode
    else if (!isEditing && prevEditingRef.current && onSaveEdit) {
      const validBoard = editBoard.map((row) => row.map((cell) => (cell.trim() === "" ? "e" : cell)))
      onSaveEdit(validBoard)
    }
    
    prevEditingRef.current = isEditing
  }
}, [isEditing, onSaveEdit])

Key changes:

Removed editBoard and editMode from the dependency array
Only set focus to [0, 0] when first entering edit mode (not on every render)
Added a check to only run the effect when the edit state actually changes
Used a ref to track the previous edit state

3. Simplified the Logic

The focus now only changes when:

You first enter edit mode (focuses on the first cell)
You explicitly navigate with arrow keys
You click on a different cell

Now the edit mode should work as expected:

When you enter edit mode, focus starts at the first cell
When you type a letter, focus stays on that cell
You can use arrow keys to navigate between cells
When you save, all your changes are preserved

The focus no longer resets to the first cell when you edit a letter, making the editing experience much more natural and intuitive.

344d ago

Can you actually make the focus automatically move to the next cell once I edit a letter?

344d ago

I'll implement auto-advance to the next cell after typing a letter:

I've implemented auto-advance functionality that automatically moves the focus to the next cell after typing a letter. Here's what I added:

1. Added a Function to Determine the Next Cell

// Get the next cell position (left-to-right, then top-to-bottom)
const getNextCellPosition = (rowIndex: number, colIndex: number): [number, number] => {
  const rows = board.length
  const cols = board[0]?.length || 0
  
  // Move to the next column
  let nextCol = colIndex + 1
  let nextRow = rowIndex
  
  // If we're at the end of a row, move to the next row
  if (nextCol >= cols) {
    nextCol = 0
    nextRow = (nextRow + 1) % rows
  }
  
  return [nextRow, nextCol]
}

2. Updated the Letter Change Handler

const handleLetterChange = (rowIndex: number, colIndex: number, value: string) => {
  // Take the last character typed (or empty string if backspace/delete was used)
  const letter = value.length > 0 ? value.toLowerCase().slice(-1) : ""

  const newBoard = editBoard.map((row, r) => row.map((cell, c) => (r === rowIndex && c === colIndex ? letter : cell)))
  setEditBoard(newBoard)
  
  // If a letter was entered (not deleted), advance to the next cell
  if (letter) {
    const nextPosition = getNextCellPosition(rowIndex, colIndex)
    setFocusPosition(nextPosition)
  }
}

The key addition is the conditional check if (letter) that:

Only advances to the next cell if a letter was actually entered
Doesn't advance if the user deleted the letter (empty string)
Uses the getNextCellPosition function to determine where to go next

How It Works Now

When you enter edit mode, focus starts at the first cell
When you type a letter, it automatically advances to the next cell
If you delete a letter (backspace/delete), it stays on the current cell
You can still use arrow keys to navigate manually if needed
When you reach the end of a row, it wraps to the beginning of the next row
When you reach the end of the board, it wraps back to the beginning

This makes editing the board much faster and more efficient, especially when you want to replace multiple letters in sequence.