made css grid auto-adjust for board width and height

lGrom · Jul 31, 2024 · cb574e0 · cb574e0
1 parent 648aa78
commit cb574e0
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 4 deletions.
diff --git a/src/Board/Board.css b/src/Board/Board.css
@@ -1,6 +1,5 @@
 .Board {
     display: grid;
-    grid-template: repeat(15, 50px) / repeat(15, 50px);
 }
 
 .Square {

diff --git a/src/Board/Board.js b/src/Board/Board.js
@@ -59,8 +59,6 @@ export default class Board extends React.Component {
             return <object type="image/svg+xml" data="./ships/vertical-horizontal.svg">Vertical/Horizontal</object>;
         case GRAPHICAL_TYPES.VERTICAL:
             return <object type="image/svg+xml" data="./ships/vertical-horizontal.svg">Vertical/Horizontal</object>;
-        case GRAPHICAL_TYPES.ORTHOGONAL:
-            return <object type="image/svg+xml" data="./ships/vertical-horizontal.svg">Vertical/Horizontal</object>;
         case GRAPHICAL_TYPES.WATER:
             return <object type="image/svg+xml" data="./ships/water.svg">Water</object>;
         default:
@@ -84,7 +82,7 @@ export default class Board extends React.Component {
     render () {
         return (
             <>
-                <div className="Board">
+                <div className="Board" style={{ gridTemplate: `repeat(${this.props.width}, 50px) / repeat(${this.props.height}, 50px)` }}>
                     {this.displayBoard()}
                 </div>
                 <button onClick={() => { this.solveBoard(); }}>