In a previous discussion I described how to create a new control which was a simple aggregate of existing canvasGUI controls.
In this discussion I describe how to extend one of the existing classes to create a control that represents a playing card from a standard 52 card deck. I will call the new class CvsCard and it will extend the library class CvsControl to get the basic functionality.
The sketch below shows the final control in action and the code is available in the p5js web editor here. You might try it out before continuing with the discussion.
The constructor parameters provide all the information needed to identify the card suit, rank and includes images for the card face and back. It then calls the super class constructor which does the rest of the initialization.
The _doEvent was copied from the CvsPanel class since we wanted to be able to drag the card and then modified to suit the needs of this control. Also the a _draw method was added to to display either the face or back image without the need for an off-screen buffer.
Finally additional methods were added to flip the card over.