From 0f7b488718d48e5a2bd45e9c542bcaf7234d3716 Mon Sep 17 00:00:00 2001
From: Nickolai <lindeman072@mail.ru>
Date: Sat, 10 Aug 2024 18:52:43 +0400
Subject: [PATCH] feat/cell finissh

---
 src/pages/Main/Main.module.scss |  3 +++
 src/pages/Main/Main.tsx         | 25 +++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/pages/Main/Main.module.scss b/src/pages/Main/Main.module.scss
index e8e941b..ea55fc4 100644
--- a/src/pages/Main/Main.module.scss
+++ b/src/pages/Main/Main.module.scss
@@ -7,11 +7,14 @@
 .cardContainer {
   display: grid;
   grid-template-columns: repeat(3, 300px);
+  grid-template-rows: repeat(auto-fill, 127px);
   gap: 24px;
   position: relative;
+  height: 100vh;
 }
 
 .cell {
   width: 100%;
   border-radius: $border-radius-s;
+  height: 127px
 }
\ No newline at end of file
diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
index 6cae6dc..110cb1e 100644
--- a/src/pages/Main/Main.tsx
+++ b/src/pages/Main/Main.tsx
@@ -15,7 +15,7 @@ export default function Main() {
   const [allCards, setAllCards] = useState<initialCardsProps[]>([]);
   const [arrows, setArrows] = useState<JSX.Element[]>([]);
   const numCols = 3;
-  const numRows = 100;
+  const numRows = 10;
 
   const [busyCells, setBusyCells] = useState<string[]>([]);
 
@@ -63,6 +63,27 @@ export default function Main() {
     return emptyCells.map((cellId) => {
       const [col, row] = cellId.split('-').map(Number);
 
+      let backgroundColor = 'transparent';
+      if (busyCellIds.has('1-0')) {
+        // Подсвечиваем ячейки 0-1, 1-1, 2-1
+        if (row === 1 && col >= 0 && col <= 2) {
+            backgroundColor = '#EBF7FF';
+        } else if (row > 1 && col >= 0 && col <= 2) {
+            // Подсвечиваем ячейку ниже занятых
+            const aboveCellId = `${col}-${row - 1}`;
+            if (busyCellIds.has(aboveCellId)) {
+                backgroundColor = '#EBF7FF';
+            }
+        }
+    } else {
+        // Проверяем, если текущая ячейка под занятыми
+        const belowCellId = `${col}-${row + 1}`;
+        if (busyCellIds.has(belowCellId)) {
+            backgroundColor = '#EBF7FF';
+        }
+    }
+
+
       return (
         <div
           key={cellId}
@@ -71,7 +92,7 @@ export default function Main() {
           style={{
             gridColumn: col + 1,
             gridRow: row + 1,
-            backgroundColor: '#EBF7FF',
+            backgroundColor: backgroundColor            
           }}
         />
       );