Board Game Arena

Hello,
I'm trying to develop a card game in which players can play sets of cards laying them on the table. This way, during the game, many sets of cards could be present on the table. I already develop the creation of the Stock components in my game (see Machiavelli game; select some card from your hand and click on the "Play cards" button, then a new Stock will be created), but the problem is that the table area does not change its dimension when the Stocks are too many.
I thought to replicate the real game using the Scrollmap component as a table with no space limit and inserting into the Scrollmap as many Stock component as the sets of cards are.

So, my questions are:

1) Can I have an example of use for the Scrollmap component? With little comments, please.

2) How can I organize the Stocks (sets of cards) inside the Scrollmap, in order to optimize space? I think that create an HTML table is not a good idea, because sets of cards can contain a number of cards from 3 to an unlimited number (in fact the maximun cards number should be 13, but simetimes I played in a quite different way and I have to check better the rules). Can you give me suggestions?

Bye!
Emanuele

Hello Emanueles,

Sorry for the late response.

I would like to suggest you the following:
_ don't give a fixed height to you "table" div. This way, it can grow when combinations are added to the table (I commented the line on your CSS).
_ place the hand of the player at the top of the screen. This way, if they are too many combination, player just have to scroll to see the others combinations (and this is way more simple that using scrollmap ).
_ To display more combination, you can give your "cardcomboontable" a fixed width (corresponding to 13 cards, which I think it's the maximum for a combo), and display them as "display: inline-block;". This way, on large screen, combinations are displayed side by side.

By the way, congrats for your job on the game until now

Hope this helps,