From 319c0d57d585ac9f86b1c0dea1c92d9b22a53777 Mon Sep 17 00:00:00 2001
From: Davidgl1987 <davidgl1987@gmail.com>
Date: Wed, 4 Oct 2023 09:32:59 +0200
Subject: [PATCH] Add colors to pieces

---
 consts.js | 39 +++++++++++++++++++++++++--------------
 main.js   | 21 ++++++++++++---------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/consts.js b/consts.js
index 7f09454..e55dcb9 100644
--- a/consts.js
+++ b/consts.js
@@ -8,34 +8,45 @@ export const EVENT_MOVEMENTS = {
   RIGHT: 'ArrowRight'
 }
 
+export const COLORS = [
+  'black',
+  'yellow',
+  'cyan',
+  'darkviolet',
+  'red',
+  'lightgreen',
+  'orange',
+  'blue'
+]
+
 export const PIECES = [
   [ // la pieza amarilla
     [1, 1],
     [1, 1]
   ],
   [
-    [1, 1, 1, 1]
+    [2, 2, 2, 2]
   ],
   [ // es la pieza lila
-    [0, 1, 0],
-    [1, 1, 1]
+    [0, 3, 0],
+    [3, 3, 3]
   ],
-  [ // la pieza verde
-    [1, 1, 0],
-    [0, 1, 1]
+  [ // la pieza roja
+    [4, 4, 0],
+    [0, 4, 4]
   ],
   [
-    [0, 1, 1],
-    [1, 1, 0]
+    [0, 5, 5],
+    [5, 5, 0]
   ],
   [
-    [1, 0],
-    [1, 0],
-    [1, 1]
+    [6, 0],
+    [6, 0],
+    [6, 6]
   ],
   [
-    [0, 1],
-    [0, 1],
-    [1, 1]
+    [0, 7],
+    [0, 7],
+    [7, 7]
   ]
 ]
diff --git a/main.js b/main.js
index 46221d4..112821a 100644
--- a/main.js
+++ b/main.js
@@ -1,5 +1,5 @@
 import './style.css'
-import { BLOCK_SIZE, PIECES, BOARD_WIDTH, BOARD_HEIGHT, EVENT_MOVEMENTS } from './consts'
+import { BLOCK_SIZE, PIECES, BOARD_WIDTH, BOARD_HEIGHT, EVENT_MOVEMENTS, COLORS } from './consts'
 
 // 1. inicializar el canvas
 const canvas = document.querySelector('canvas')
@@ -222,8 +222,8 @@ function draw () {
 
   board.forEach((row, y) => {
     row.forEach((value, x) => {
-      if (value === 1) {
-        context.fillStyle = 'yellow'
+      if (value > 0) {
+        context.fillStyle = COLORS[value]
         context.fillRect(x, y, 1, 1)
       }
     })
@@ -232,8 +232,11 @@ function draw () {
   piece.shape.forEach((row, y) => {
     row.forEach((value, x) => {
       if (value) {
-        context.fillStyle = 'red'
-        context.fillRect(x + piece.position.x, y + piece.position.y, 1, 1)
+        context.beginPath()
+        context.lineWidth = 0.1
+        context.strokeStyle = COLORS[value]
+        context.rect(x + piece.position.x, y + piece.position.y, 1, 1)
+        context.stroke()
       }
     })
   })
@@ -291,7 +294,7 @@ function checkCollision () {
   return piece.shape.find((row, y) => {
     return row.find((value, x) => {
       return (
-        value === 1 &&
+        value > 0 &&
         board[y + piece.position.y]?.[x + piece.position.x] !== 0
       )
     })
@@ -301,8 +304,8 @@ function checkCollision () {
 function solidifyPiece () {
   piece.shape.forEach((row, y) => {
     row.forEach((value, x) => {
-      if (value === 1) {
-        board[y + piece.position.y][x + piece.position.x] = 1
+      if (value > 0) {
+        board[y + piece.position.y][x + piece.position.x] = value
       }
     })
   })
@@ -328,7 +331,7 @@ function removeRows () {
   const rowsToRemove = []
 
   board.forEach((row, y) => {
-    if (row.every(value => value === 1)) {
+    if (row.every(value => value > 0)) {
       rowsToRemove.push(y)
     }
   })