Create method to automatically create a hitbox around the buttons text and image. Keep in mind that there are cases where there is text but no image, image but no text, and both image and text. There can only be one image and one text and maximum though.

The point of this is to allow users to click on either the image or text to press the button instead of one or the other. The final implementation should work for both clicks, hovers, and any other interaction event. This should be accomplished by overwritting phaser's automatic hitbox generation inside setInteractive()

Before pieces are removed, an animation should be played to show that a chain was detected.

In Puyo Puyo, this is typically done by flashing the pieces.

A scoring system should be implemented to keep track of how the player is doing. This will additionally be useful when determining how to send "garbage" over the other players in multiplayer.

Scoring should be similar to Puyo Puyo, where continuous layers of chains are given higher rewards than a single layer.

Additional details will need to be researched.

Phaser w/ Typescript Project Setup

Tutorial here

Create board representation within Phaser. This is the board where the pieces will go, so the data structure behind it is important to get right. In PuyoJS, this is handled with a 2D matrix. Other solutions will be investigated before implementation.

Implement a smooth transition between preview pieces.

This means that the PiecePreview should be modified to transition from the futurePiece to the nextPiece. When the nextPiece is used, it should go up and fade out before being removed.

Allow for images to be clicked with the mouse pointer. This should use a technique similar to that of ButtonText. This is the "InteractiveImage" version of the InteractiveText.

This will be used in the UI and not be used in the gameplay.

As of now, the piece preview uses a simple red box. This should be changed to match the style (and just look better). No specific guidelines at the moment, position of the preview pieces can also be changed to accommodate a new design.

Allow for the Phaser scene to be switched in game.

The test case would be going from the main menu to the offline game.

Ideally, this implementation allows for load screens and transitions, but those will be added later on to allow for more focus to be put on the function of the game.

Every created piece is a 2x1 with two random colors. Each piece, other than when falling down, acts independently and should not be considered "attached".

To distinguish between the two separate "containers", we have the FallingPiece and Piece
A falling piece is a 2x1 construction of two pieces.

• A falling piece can be rotated in 90 degree increments
• After touching a solid piece (one that has already fallen) or the bottom of the board, the falling piece should lock in place, separate, and activate gravity on the individual pieces

A piece is of a random color (of 5 possibilities)

• Can have gravity enabled or disabled
• Should contain an update function to check if the piece is in a chain and has ground underneath them