diff --git a/src/Board.scss b/src/Board.scss
deleted file mode 100644
index 8ae7e58..0000000
--- a/src/Board.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$board-size: min(80vw, 80vh);
-$cell-size: min(10vw, 10vh);
-
-.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;
-}
-
-.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);
- }
-}
diff --git a/src/ChessBoard.js b/src/ChessBoard.js
index 16499bf..93fc88a 100644
--- 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 (
+
+ {
+ board.map((row, rowIdx) => {
+ return (
+
+ );
+ })
+ }
+
+ )
+}
+
+const RowNames = ({gridArea, direction}) => {
+ const names = [1, 2, 3, 4, 5, 6, 7, 8];
+ return (
+
+ {
+ names.map((name) =>
+
+ {name}
+
+ )
+ }
+
+ );
+}
+
+const ColNames = ({ gridArea, direction }) => {
+ const names = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+ return (
+
+ {
+ names.map((name) =>
+
+ {name}
+
+ )
+ }
+
+ );
+}
+
export const ChessBoard = () => {
const board = [
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
@@ -65,14 +109,14 @@ export const ChessBoard = () => {
['♜', '♞', '♝', '♛','♚', '♝', '♞', '♜'],
]
return (
-
- {
- board.map((row, rowIdx) => {
- return (
-
|
- );
- })
- }
+
+
+
+
+
+
+
+
);
}
\ No newline at end of file
diff --git a/src/ChessBoard.scss b/src/ChessBoard.scss
new file mode 100644
index 0000000..a96fc87
--- /dev/null
+++ 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);
+ }
+}