Merge branch 'main' into feat/add_size_update

Author: alexeyKorelin

src/Board/Board.ts

@@ -0,0 +1,38 @@
+import { Cell } from "~/Cell"
+
+export class Board {
+    _board: Cell[][] = []
+    _rows: number = 100
+    _cols: number = 100
+    ctx: CanvasRenderingContext2D
+    
+    constructor(ctx: CanvasRenderingContext2D) {
+        this.ctx = ctx
+    }
+    init() {
+        this.fillBoard()
+        this.drawBoard()
+    }
+    
+    get board(): Cell[][] {
+        return this._board
+    }
+
+    fillBoard() {
+        for (let i = 0; i < this._rows; i++) {
+            this._board[i] = []
+            for (let j = 0; j < this._cols; j++) {
+                this._board[i][j] = new Cell(i, j)
+            }
+        }
+    }
+
+    drawBoard() {
+        this.ctx.beginPath()
+        for (let i = 0; i < this._board.length; i++) {
+            for(let j = 0; j < this._board[i].length; j++) {
+                this._board[i][j].draw(this.ctx)
+            }
+        }
+    } 
+}

src/Cell.ts

@@ -1,43 +1,51 @@
 type CellColor = 'red' | 'green' | 'blue' | 'yellow' | 'none';
 
-class CellAgent {
-    private _cell: Cell;
+export class Cell {
+    private _color: CellColor = 'blue';
+    private _x: number;
+    private _y: number;
+    private _size: number;
 
-    constructor(cell: Cell) {
-        this._cell = cell;
+    constructor( x: number, y: number, size: number = 20) {
+        this._x = x;
+        this._y = y;
+        this._size = size;
     }
 
-    public get cell(): Cell {
-        return this._cell;
+    public get color(): CellColor {
+        return this._color;
     }
 
-    public set cell(cell: Cell) {
-        this._cell = cell;
+    public set color(color: CellColor) {
+        this._color = color;
     }
-}
 
-export class Cell {
-    private _color: CellColor;
-    private _agent: CellAgent | null;
+    public get x(): number {
+        return this._x;
+    }
 
-    constructor(color: CellColor = 'none', agent: CellAgent | null = null) {
-        this._color = color;
-        this._agent = agent;
+    public set x(x: number) {
+        this._x = x;
     }
 
-    public get color(): CellColor {
-        return this._color;
+    public get y(): number {
+        return this._y;
     }
 
-    public set color(color: CellColor) {
-        this._color = color;
+    public set y(y: number) {
+        this._y = y;
+    }
+
+    public get size(): number {
+        return this._size;
     }
 
-    public get agent(): CellAgent | null {
-        return this._agent;
+    public set size(size: number) {
+        this._size = size;
     }
 
-    public set agent(agent: CellAgent | null) {
-        this._agent = agent;
+    public draw(ctx: CanvasRenderingContext2D): void {
+        ctx.fillStyle = this._color;
+        ctx.fillRect(this._x, this._y, this._size, this._size);
     }
 }

src/main.ts

@@ -1,4 +1,5 @@
 import { sizeUpdater } from './components/sizeUpdater'
+import { Board } from "./Board/Board"
 
 const container = document.getElementById('app')
 
@@ -7,7 +8,11 @@ if (container) {
     container.appendChild(sizeUpdaterElement)
 
     const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
     canvas.width = 500
     canvas.height = 500
     container.appendChild(canvas)
+
+    const board = new Board(ctx)
+    board.init()
 }