I need help with this assignment, I will leave the code Player and WorldModel bellow and also the instructions of the assignment, thank you for the help in advance.

$1.$Define a IWorldView interface. An IWorldView should implement a display method $($not the same as display function$)$ that takes a WorldModel as an input and returns nothing $($void$).$ As with the Player abstract base class, you will not be able to directly instantiate a IWorldView $($i$.$e$.,$ no direct instances allowed: no new IWorldView$()$ and $($b$)$ any class implementing a IWorldView must have a display method.$)$

$2.$Define a CanvasWorldView class that implements a IWorldView as follows:

First include appropriate import statements. You need to import your IWorldView. Separately, you will need to also import WorldModel because it's the type of the parameter variable for display.

For the class declaration, you're implementing an IWorldView.

Add private instance variables of scalingFactor of type number, worldCanvas of type HTMLCanvasElement, and context of type CanvasRenderingContext$2$D$.$

Next, add a constructor that takes scalingFactor as an argument representing the number of pixels squared that each model grid coordinate represents. For example, if a Snake has size $3$ in the model $($changing a Snake's size will come later$)$ and the scaling factor is $10,$ the Snake will appear as a $30$px X $30$px square $(30$ pixels in width and height$).$

Inside the constructor, initialize the private instance variables scalingFactor to the input scalingFactor $,$ worldCanvas to document.createElement$("$canvas$"),$ and context to a $2$d context for worldCanvas. $($How do you do this?$)$ Note, you will need to include an $!$ at the end of this assignment $($before the semicolon$)$ to indicate that it won't be null. $($This is for TypeScript and does NOT mean not in this instance$).$ Finally in the constructor, append the canvas to the body of the page by using document.body.appendChild$(\_\_\_\_\_\_\_\_\_\_)$ where $\_\_\_\_\_\_\_\_$ is the property storing the reference to the newly created canvas. This will make it appear!

Next define a display method that takes an input belonging to the WorldModel class as an argument.

In the display method, set the CanvasWorldView's worldCanvas to have a width of the product of the WorldModel's width and the scaling factor and do the same with the canvas's height.

Also, in the display method, fill a rectangle with a width and height of the scaling factor of the single Snake in the WorldModel.

$3.$Add a worldView property $($IWorldView$)$ to the WorldModel class. Initialize it to null.

$4.$Add a view setter to the WorldModel class that sets it to the IWorldView that's passed. $($Later$,$ we will have a list of IWorldViews.$)$

$5.$Add a line of code at the end of the update method of the WorldModel class to display its IWorldView $($IF it's not null$).$ This way, the WorldView will be set to update every time the Model does.

$6.$Inside the useEffect of App.tsx$,$ Create a new CanvasWorldView with a scaling factor of your choice and set the IWorldView of the WorldModel to be this new CanvasWorldView. Then call update on your WorldModel to see if it works!

$7.$DOCUMENT $($Using TypeDoc$),$ write TESTs $($Using JEST$),$ and ADD TO YOUR UML diagram.

WorldModel:

import Snake from $"./$Snake$"$;

class WorldModel $\{$

private snake: Snake;

private width$\_$: number;

private height$\_$: number;

constructor$($snake: Snake, width: number, height: number$)\{$

this.snake $=$ snake;

this.width$\_=$ width;

this.height$\_=$ height;

$\}$

update$($steps: number$)\{$

this.snake.move$($steps$)$;

$\}$

getSnake$()$: Snake $\{$

return this.snake;

$\}$

get width$()$: number $\{$

return this.width;

$\}$

get height$()$: number $\{$

return this.height;

$\}$

$\}$

export default WorldModel;

Player:

import SnakeController from $"./$SnakeController$"$;

abstract class Player $\{$

protected sc: SnakeController;

constructor$($sc: SnakeController$)\{$

this.sc $=$ sc;

$\}$

abstract makeTurn$()$: void;

$\}$

export default Player;