Grid size and navigation

[bgreenawald]

Implementing the Bananagrams grid has some difficulties over something like Scrabble, which has a fixed size grid. The Bananagrams grid is free-flowing and could be extended in any direction and the only size restriction is the number of tiles in the game. My inclination (though we won't know until we test) is that the entire grid for a given game may not fit on a standard user's laptop screen. Thus the grid would need to be fairly large and scrollable in both directions. The default view would be in the center of the grid and users can build their boards freely, using the bi-directional scrolling to navigate any board overflow.

MVP Grid: Desc: A hardcode grid of rxc, where r is the number of rows and c is number of columns, both hard coded to values we reasonably expect users to fill. The grid will be pretty large as a result, so the viewport will let the user scroll around the board. By default on load, the grid will be centered, to prevent the user from unintentionally putting all their tiles in the upper right hand corner and not be able to expand up or to the left.

• [x] Implement board scroll
• [x] Center board if overflow

[JocelynYH]

• [x] Center grid if overflow https://stackoverflow.com/questions/14731872/is-it-possible-to-center-the-scrollbar-of-a-div-with-overflowscroll

[JocelynYH]

@bgreenawald Where is the corresponding socket function for split? I don't see anything in app or game.py.

The reason why I ask, is because I'm trying to determine the maximum width of the board, which is dependent on the maximum tiles divvied out on "split"

[JocelynYH]

Yeah, so the client side does not enjoy rendering 72^2 cell divs.

A good approach may be to continually add new rows/columns if the user drops a tile in the edges of the grid

[bgreenawald]

Another potential option would be to made the grid as big as the client can reasonably handle, and then add in an option to shift the entire board. What usually happens is people will build out their board in a particular direction. So a user might extend the grid out and run out of space on the right, but still have a ton of space on the left. Once we get multi drag and drop, we can add an option to select all tiles to shift everything.

[JocelynYH]

What do you think of creating a lobby similar to this? https://skribbl.io/ (go to the lobby)

That could be overlayed on top of the board, which would give the client enough time to render a large grid. Right now, I think for mvp, it's reasonable to assume that a player would actually use about a 20x20, maybe 30x30 grid. But you have to render that grid with more spaces on the edges to give players expansion room, which kicks up the grid to 50x50 at minimum, which takes a little too long to load for comfort.