Anvil Matchmaking App Design Advice

What I’m trying to do:
I’m trying to build a website to match players for a custom draft mode for a card game. This means they need to be able to share a session/state across their match with each other.

What I’ve tried and what’s not working:
Trying to gather some advice on approaches for some challenges I will encounter.
-Creating containers in the Match form to fit nicely with each other (mockup shown below)/ Some components such as the community section span multiple rows and columns. The best way i can describe this is it’s not a puzzle but more like tetris if that makes sense. I’m not sure how to nest containers in the right sequence to make this work.

-Keeping a session between two players and checking for state changes for drafted cards, bans, chat, etc. (Sockets, Anvil Uplink and message queuing, database + event handling, data-bindings)
-How to handle cards in various group sizes using flow and grid and change their image (probably best to create a custom component with functions that can change the image using javascript).

Code Sample:

# this is a formatted code snippet.
# paste your code between 
# card div role for fixed size selectable image

.anvil-role-card-div{
    width: 86px;
    height: 111.8px;
    background-image: url('_/theme/p1-ban.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    image-rendering: -webkit-optimize-contrast;
  
} 

**Clone link:**
*share a copy of your app*

If you do some forum searching for Firebase integrations, that’ll be your best bet for realtime interactions between the two players. Otherwise you’re looking at timers and database polling.

3 Likes