The Game board was developed with styling via CSS grid in mind. Render function renders 50 cells for 5 columns (1-5), 5 rows (a-e), representing a player's targeting board and their placement board (25 cells each). Every cell uses classNames to change its display based on the game state. This is done by pulling 3 (potentially 4) arrays out of the game state: taken(for players' ship positions), userShots(for tracking every shot by the user), and opponentShots(for tracking every shot by the user's opponent). The code has further comments on how this is done, long story short, classNames look like this:
cell (taken, hit, missed) row-(a-e) col-(1-5) //for the placing board cell (shot) row-(a-e) col-(1-5) //for the targeting board
On another note, there's a toggle switch above the grid structure. It does nothing.... right now.
The Game board was developed with styling via CSS grid in mind. Render function renders 50 cells for 5 columns (1-5), 5 rows (a-e), representing a player's targeting board and their placement board (25 cells each). Every cell uses classNames to change its display based on the game state. This is done by pulling 3 (potentially 4) arrays out of the game state: taken(for players' ship positions), userShots(for tracking every shot by the user), and opponentShots(for tracking every shot by the user's opponent). The code has further comments on how this is done, long story short, classNames look like this:
cell (taken, hit, missed) row-(a-e) col-(1-5) //for the placing board cell (shot) row-(a-e) col-(1-5) //for the targeting boardOn another note, there's a toggle switch above the grid structure. It does nothing.... right now.