tetromino | A little game of Tetris | Game Engine library

I am learning HTML canvas and choose to make Tetris game as the first project I have completed the game by watching a few tutorials. But want to make it better by adding a live preview where the Tetromino land on the page can anyone help how can I do that? By preview I mean How can I show the player where the piece land on gameArea.

Something like this

The Html File:

Ciao,

I'm creating a Tetris Algorithm, I'm stuck with this logic.

I have a 2d ArrayList of the board that looks like this,

I read this article about 'why using index as a key is an anti pattern' and got curious why my project works so well with index based key matrix.

I worked on tetris project, and every second, matrix with 20 * 24 cells re-render and move tetromino. Each cell of the array includes the alphabet and it becomes division's className and decide the color of the cell and every second when tetromino moves, it works very well.

From his article's example and this question, if key doesn't get changed, react doesn't change that DOM element and add new DOM for a new item in the array. So my tetris stage should not update view because key doesn't get changed. I got so confused how react key works.

I searched a lot of articles, but what I could find only was that they are using for optimization and compare DOM, but not how. So I want to know, how does key works and what kind of procedure they do to compare before change Virtual Dom and after change Virtual DOM

For some fun purposes, I'm writing a Tetris game. I created two classes: "GameBackground" and "Tetromino". Since the "Tetromino" class has a dependency on the "GameBackground" class, I injected this dependency in the constructor using an interface such that I can test the "Tetromino" class independent of the GameBackground class by mocking it. When I use gmock to create the "GameBackgroundMock", the test fails. When I use my own mock like

I'm attempting to create a class in Pascal, I am a bit confused about the declaration and syntax. the main thing is an error I'm getting "Forward declaration not solved Tetromino.Rotate(LongInt)", I read that I need to declare my procedure in the implementation section but I'm not sure where I'm meant to be putting that. also if you notice anything else wrong with my class declaration please tell me.

I have a .cpp file which is a Tetris game code:

I have followed a tutorial from freeCodeCamp (link here:https://www.youtube.com/watch?v=rAUn1Lom6dw). At the time 1:26:00 they use a .splice on a variable squares array. I am new to JavaScript. The splice method is used in the addScore function which is called in the freeze function. I have read that this error usually occurs if used on string but that shouldn't be the case.

Is there any way to fix this error? Code below.
app.js

I am creating a simple Tetris game using React JS. My main Component besides App.js is a Tetris.js functional component. In useEffect() I am storing components like the stage or current player tetromino using Local Storage. While playing, retrieving data in the console is possible and the data is not null.

Learning JavaScript by making a tetris game.

Problem: When I try to move (left, right or down from the starting position) a piece and then rotate it, then the rotated piece stretches appart. When I go back with it t the starting position, everything works fine. Also when I do not rotate the piece but only move it to the left/right/down then everything is also fine. Am thinking that I have the center of rotation ankered to the grid but not to the piece.

Here you can play the game: Here

Here is my github: Here

Temporary controlls:

Enter and after up arrow: start the game

left arrow: move left

right arrow: move right

up arrow: rotate

down arrow: move one row down

Description:

My tetrominoes and my grid are made of arrays (class based). The grid comes from SimpleBlock{} and GridBlock{}. My tetrominoes are made by Simple Block{} and