Add rows' and columns' names using CSS grid layout

seanluong · Feb 11, 2023 · f4bc3b5 · f4bc3b5
1 parent e0c3372
commit f4bc3b5
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 44 deletions.
diff --git a/src/Board.scss b/src/Board.scss
diff --git a/src/ChessBoard.js b/src/ChessBoard.js
@@ -1,4 +1,4 @@
-import './Board.scss';
+import './ChessBoard.scss';
 
 const rowKey = (rowIdx) => `${rowIdx + 1}`;
 
@@ -53,6 +53,50 @@ const Row = ({row, rowIdx}) => {
     );
 }
 
+const Board = ({board}) => {
+    return (
+        <div className="board">
+            {
+                board.map((row, rowIdx) => {
+                    return  (
+                        <Row key={rowKey(rowIdx)} row={row} rowIdx={rowIdx} />
+                    );
+                })
+            }
+        </div>
+    )
+}
+
+const RowNames = ({gridArea, direction}) => {
+    const names = [1, 2, 3, 4, 5, 6, 7, 8];
+    return (
+        <div className="row-names" style={{ gridArea }}>
+            {
+                names.map((name) => 
+                    <div key={`${direction} ${name}`} className={`row-name ${direction}`}>
+                        <strong>{name}</strong>
+                    </div>
+                )
+            }
+        </div>
+    );
+}
+
+const ColNames = ({ gridArea, direction }) => {
+    const names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+    return (
+        <div className="col-names" style={{ gridArea }}>
+            {
+                names.map((name) => 
+                    <div key={`${direction} ${name}`} className={`col-name ${direction}`}>
+                        <strong>{name}</strong>
+                    </div>
+                )
+            }
+        </div>
+    );
+}
+
 export const ChessBoard = () => {
     const board = [
         ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
@@ -65,14 +109,14 @@ export const ChessBoard = () => {
         ['♜', '♞', '♝', '♛','♚', '♝', '♞', '♜'],
     ]
     return (
-        <div className="board">
-            {
-                board.map((row, rowIdx) => {
-                    return  (
-                        <Row key={rowKey(rowIdx)} row={row} rowIdx={rowIdx} />
-                    );
-                })
-            }
+        <div className="chess-board">
+            <ColNames gridArea="1 / 2 / span 1 / span 8" direction="top" />
+
+            <RowNames gridArea="2 / 1 / span 8 / span 1" direction="left" />
+            <Board board={board} />
+            <RowNames gridArea="2 / 10 / span 8 / span 1" direction="right" />
+
+            <ColNames gridArea="10 / 2 / span 1 / span 8" direction="bottom" />
         </div>
     );
 }
diff --git a/src/ChessBoard.scss b/src/ChessBoard.scss
@@ -0,0 +1,91 @@
+$board-size: min(80vw, 80vh);
+$cell-size: min(10vw, 10vh);
+$name-size: min(2.5vw, 2.5vh);
+
+.chess-board {
+    display: grid;
+    grid-template: 
+        repeat(10, $cell-size) / repeat(10, $cell-size)
+    ;
+
+    .col-names {
+        display: flex;
+        justify-content: space-between;
+
+        div.col-name {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            text-transform: uppercase;
+            font-size: $name-size;
+
+            &.top {
+                align-items: flex-end;
+                padding-bottom: 1em;
+            }
+
+            &.bottom {
+                align-items: flex-start;
+                padding-top: 1em;
+            }
+        }
+    }
+
+    .row-names {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: space-between;
+
+        div.row-name {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            font-size: $name-size;
+
+            &.left {
+                justify-content: flex-end;
+                margin-right: 1em;
+            }
+
+            &.right {
+                justify-content: flex-start;
+                margin-left: 1em;
+            }
+        }
+    }
+}
+
+.board {
+    box-sizing: border-box;
+    border: 5px solid rgb(117, 56, 14);
+    box-shadow: 15px 15px 2px rgba(117, 55, 14, 0.5);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: stretch;
+    justify-content: space-between;
+    flex-basis: $board-size;
+
+    grid-area: 2 / 2 / span 8 / span 8;
+}
+
+.row {
+    display: flex;
+    flex: 1 1 $cell-size;
+}
+
+.cell {
+    flex: 1 1 $cell-size;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: min(7vw, 7vh);
+
+    &.dark {
+        background-color: rgba(82, 103, 8, 0.9);
+    }
+
+    &.light {
+        background-color: rgba(230, 233, 220, 0.9);
+    }
+}