Array Observation - solved

Help Requests
1

So I am playing around with AU2 as noted in another thread and attempting to create a simple sudoku game.

Part of that is moving the selected cell around and updating values.
Of course my initial prototype has an issue with getting updates for array values that are changed when using something like:

<cell selected.bind="cells[1][1]"></cell>

In the code I create a 2d array as its easiest to conceptualize (at least for me) that has an entry for each cell in the matrix.

I created a simplified dumber gist for a 3x3 matrix of cells. You can use the arrow keys to move the selected cell around and see in the console the array is getting updated, but over course nothing is getting triggered.

I am looking for how to properly adjust the code to allow the array updates to trigger a value changed.
Any other suggestions are welcome as well, but my main focus is getting the selected cell to show up (green background) and move with the cursor keys. I can then extrapolate that out to updating cell values as well.

Thanks!
Here is the gist:
https://gist.dumber.app/?gist=8764a7f1b2224b4b7e383f8d2c76eea5

2

It always amazes me how I overthink and complicate things in Aurelia.
I found the solution in the docs.aurelia.io, but it just wasn’t clear till I saw it in action.

Basically all the code remains the same but for a small section in the moveCellSelection().

I added the following method to do the array update…so simple once you see it in your context…
The code resets the previously selected cell, and sets the new cell.

  markSelectedCell(prevX, prevY, newX, newY)
  {
    let arry = this.cells[prevX];
    arry.splice(prevY,1, false);
    
    arry = this.cells[newX];
    arry.splice(newY,1, true);
  }
2 Likes
3

You might want to take a look at this Stack Overflow question, it’s worth to read Jeremy Danyow’s answer on this (which is similar to your solution).

1 Like