I'm trying to create a crossword game in react native. I'm having trouble starting off with the gameboard. I think I'm going to have the crosswords stored in an object like

{
    across: {
        1:  {
        question: "test",
        answer: "test",
        position:(0,0),
        length: 4,
        }
    }
    down:{}
}

Would it make sense to create a matrix of 0 for black squares 1 for white squares and 2 for word starting squares. Then use a flat list to build out the matrix visually?

Any help or advise on another way to do it would be appreciated.

Cheers,

I've. tried. using flat lists but the indexing becomes very complicated and I'm hoping there is a better way.

CodePudding user response：

I'd map the crossword data to an array of fields. There are three types of fields in crosswords: question block, fillable block and dead block.

Algorithmically, there are countless options. One would be to first convert every question to its blocks and then convert all of these to a flat array of blocks, combined.

Extra tip: consider using an array of questions instead of an object indexed by numbers. These indexes don't matter anyway.

CodePudding user response：

I made one of those React Pathfinding visualizers and basically just had an array I kept track of thru state for if it was filled or not. Map/ForEach that grid and plop down what you would have as another component shall we say Node passing whatever information is needed as props.

This example may not be the best, due to it being React and not React Native (small difference really)... and there is a lot to this that doesn't apply to your scenario but I think it shows what I mentioned in the beginning.

<div className="grid">
          {grid.map((row, rowId) => {
            return (
              <div key={rowId}>
                {row.map((node, nodeId) => {
                  const { row, col, isFinish, isStart, isWall } = node;
                  return (
                    <Node
                      key={nodeId}
                      row={row}
                      col={col}
                      isStart={isStart}
                      isFinish={isFinish}
                      isWall={isWall}
                      mouseIsPressed={this.state.mouseIsPressed}
                      onm ouseDown={(row, col) => this.handleMouseDown(row, col)}
                      onm ouseEnter={(row, col) =>
                        this.handleMouseEnter(row, col)
                      }
                      onm ouseUp={() => this.handleMouseUp()}
                    ></Node>
                  );
                })}
              </div>
            );
          })}
</div>