Need to create syllablast puzzle app in React with typescript, there should be boundary class, model class, controller

class and puzzle class. Description of game is as follows

A solitaire Syllablast puzzle is based on four words, each containing four syllables. These original four words are divided

into a total of $16$ syllables that are then placed in a $44$ grid. Each syllable has a location identified by its $($row$,$ column$).$

The player can swap the location of two syllables. The goal is to make a sequence of swaps to reveal the original four

words $($when read from left to right$)$ that were disassembled to create the board.

In the initial configuration, none of the syllables in the first column are the first syllable in one of the original four words.

Board State #$1$ below represents the initial configuration, formed from the words $"$af$,$fil,i$,$ate", $"$im$,$mac,u$,$late",

$"$in$,$vis,i$,$ble", and $"$un$,$der,wa$,$ter". As you can see, each word has four syllables, separated by commas.

Board State #$1($swaps: $0,$ score: $0)$

Board State #$2($swaps: $1,$ score: $2)$

Initial Configuration Swap $\text{'}$u$\text{'}$ and $\text{'}$in$\text{'}$ syllables

Board State #$3($swaps: $2,$ score: $4)$

Board State #$4($swaps: $3,$ score: $5)$

Swap $\text{'}$i$\text{'}$ and $\text{'}$af$\text{'}$ syllables Swap $\text{'}$im$\text{'}$ and 'ter' syllables

With each swap, the score increases, but note that a swap could decrease the score if a properly located syllable is

moved out of its location.

Counting Swap Moves

Until the puzzle is solved, Syllablast records the number of swaps $-$ and in addition computes and displays the player's

score.

Once the puzzle is solved, the player cannot make any more swaps.

Puzzle Reset

The player can reset the puzzle to its initial state: both the score and the number of swaps is reset to $0,$ and the board is

returned to its initial configuration.

Undo Swap

The player can choose to undo the most recent swap and can do so until the Initial Configuration appears once again.Need to create syllablast puzzle app in React with typescript, there should be boundary class, model class, controller

class and puzzle class. Description of game is as follows

A solitaire Syllablast puzzle is based on four words, each containing four syllables. These original four words are divided

into a total of $16$ syllables that are then placed in a $44$ grid. Each syllable has a location identified by its $($row$,$ column$).$

The player can swap the location of two syllables. The goal is to make a sequence of swaps to reveal the original four

words $($when read from left to right$)$ that were disassembled to create the board.

In the initial configuration, none of the syllables in the first column are the first syllable in one of the original four words.

Board State #$1$ below represents the initial configuration, formed from the words $"$af$,$fil,i$,$ate", $"$im$,$mac,u$,$late",

$"$in$,$vis,i$,$ble", and $"$un$,$der,wa$,$ter". As you can see, each word has four syllables, separated by commas.

Board State #$1($swaps: $0,$ score: $0)$

Initial Configuration Swap $\text{'}$u$\text{'}$ and $\text{'}$in$\text{'}$ syllables

Board State #$3($swaps: $2,$ score: $4)$

Swap $\text{'}$i$\text{'}$ and $\text{'}$af$\text{'}$ syllables Swap $\text{'}$im$\text{'}$ and 'ter' syllables

With each swap, the score increases, but note that a swap could decrease the score if a properly located syllable is

moved out of its location.

Counting Swap Moves

Until the puzzle is solved, Syllablast records the number of swaps $-$ and in addition computes and displays the player's

score.

Once the puzzle is solved, the player cannot make any more swaps.

Puzzle Reset

The player can reset the puzzle to its initial state: both the score and the number of swaps is reset to $0,$ and the board is

returned to its initial configuration.

Undo Swap

The player can choose to undo the most recent swap and can do so until the Initial Configuration appears once again.

Initial Configurations

These are the three configurations that you must allow the player to choose from.

Configuration #$1$: $"$in$,$vis,i$,$ble", $"$im$,$mac,u$,$late", $"$af$,$fil,i$,$ate", $"$un$,$der,wa$,$ter"

Configuration #$2$: $"$ex$,$am$,$in$,$ing", $"$re$,$in$,$force,ment", $"$in$,$for,ma$,$tive", $"$ma$,$te$,$ri$,$al$"$

Configuration #$3$: $"$me$,$chan,i$,$cal", "cal,cu$,$lat,ing", $"$im$,$me$,$di$,$ate", $"$di$,$ag$,$on$,$al$"$

Please have your interface change the backgrounds to green for the syllables that are part of the player's score

The final app should look like this:

Reset

Undo

$1$

O#$2$

$$