Part 9: Finishing the Deck Builder prototype

Once I’d cracked the repeater system for the card grid for my Marvel Snap game on the deck builder page, it unlocked the final parts of that page for me.  

Having been able to define the grid for selecting cards to ADD to the deck, I could use a smaller-scale version of the same mechanism to build the Current Deck section of the deck builder page.   In the last update I created a flow that would automatically create placeholders for the 12 cards in my deck.  Now that I know a deck will always contain 12 card slots and they may or may not have a card defined, then I can create my repeater to show the 12 cards.

Marvel Snap shows the “in deck” cards as smaller than the card selection cards so I followed that style decision:

I have a data resource for the Deck record already, so I added some elements to the header that will retrieve the name of the Deck and I’m also adding an element that shows me the current number of cards (based on the deck record) so that I can debug my refresh feature:

Note that for some of the UI Builder stuff I mildly broke my “no code” rule for some of the design stuff – I’m using some CSS code for text design and colouring backgrounds etc.  I’m going to consider CSS to be “not code” for the purposes of this project.  So far, apart from the CSS work, this has been 100% no code baby!

Below the header I built a repater following the pattern from part 7.   Because these cards are derived from my Deck files, I had to do some dotwalking to find the references to the card definition fields like image and ability, but all very doable.  It involved a different data resource for the Player Card instances, but otherwise very similar to the previous pattern.  Here’s the repeater:

And here’s the Image component:

Like the Card Selection section, I also added an event to udpate the Deck Modification Event table – this time I’m adding a “remove” event to the queue on my card container (I used card containers because they support click events).  I set the “Remove” operation, set the status of the event to “Pending”, then I set the card instance that I’m removing to the item unique value:

The Deck Modification Event data resource has proven quite flexible – I can pass add and remove actions to it, and have different flows perform different activities based on the operation.  I can also use the flows to update the status so I have an audit trail for troubleshooting.  Very useful!

The subflows I built to act on the Deck Mod events are pretty simple – they will either remove the relationship from the instance or they will find the next empty slot (player card instance with no card definition) and add the card to that slot.  In both cases the flows will update the total card count on the parent deck record.  This becomes important later when I want to refresh the istance:

I had to change my approach slightly – I no longer want to try to track a number that is incremented by 100 – I’m happy to just drop the card into the next available slot,  it’s going to be a bit janky in the UI, but we’re not here to be completely polished, just to prove that we can do this.

Ok, so at this point I can click a card an trigger either an Add or Remove event.  The flow engine will then pick these actions up from the queue based on the “record is created” trigger and perform the relevant record updates.   This is great, but we’re not seeing it appear in the instance… this is where we need a record watcher data resource.

So basically the last action that the subflows for Add or Remove will do is scan all the current cards assigned to the deck and then tell the Deck record how many cards there are.  This means that the last meaningful database update for each flow is an update to the Player Deck record’s “number of cards” field.  I want my UI to update every time this field is updated… so I can use a Record watcher, and then use the Record Watcher to trigger a refresh of the Player Deck data resource:

The refresh event will immediately tell the repeater that there’s new data, and it will redraw:

There’s still a few debug messages active, and it could use some polish, but the Deck Builder page is functionally complete at this stage – it can add and remove cards through a click on the card components in each area, and the whole thing was achieved with no code (excluding CSS).  It looks ok too!: