Phaser Card Slot Alignment

I have a fixed background image that already shows every placeholder where a card should go. Working in Phaser 3, I now need a concise bit of code that automatically positions standard playing-card sprites so they sit perfectly centred on those placeholders. Layout details • Two players share the same board. • Each player owns ten slots arranged as two neat rows of five (top-row and bottom-row for one player, mirrored for the other), for a total of twenty visible slots. • Every card will always be shown face-up. What I expect from you 1. A Phaser 3 function, class, or small scene snippet that: – Calculates the exact x / y for each slot relative to the background image (hard-coded or derived from an anchor point you define). – Instantiates the card sprites, aligns them to those coordinates, and keeps them perfectly centred regardless of browser resize or device pixel ratio. 2. Clear inline comments so I can tweak slot offsets later if the artwork changes. 3. A quick demo call (e.g., createDemoBoard()) that I can drop into my existing scene to verify everything lines up. Acceptance check Loading the demo in a blank Phaser 3 project must render twenty face-up cards that match every placeholder on the supplied image without any visible misalignment, even after a window resize. If anything is unclear about the background dimensions, let me know and I’ll provide the exact file and anchor reference.

Project ID: 40368939