Reactive Screen Component Demonstration

Now that we have the ability to have different components on the same flow screen be reactive to each other, I wanted to create a fun demonstration on how you can have the inputs for one component be reactive to the outputs from one or more other components. For this demonstration, I decided to recreate a matching game called Concentration.

I created one component that displays a card with either the front, back or a blank being shown. The other component is a game controller that fires whenever a card is turned over. The controller component compares the last two selected cards and provides an output that lets the card components know what to show on the screen.

You can install the package and try it out for yourself. It includes the two LWC components, a screen flow and some static resources containing the images.

Production or Dev org installation package.
Sandbox installation package.

Once installed, just run the Flow called “Concentration Game”.

To see how I put all of this together, you can review the source code here.

---