components: improve layout with css grid, rewrite line rendering

src/components/App/App.scss

@@ -1,9 +1,9 @@
 .App {
+  max-width: 100vw;
   max-height: 100vh;
-
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 1fr;
+  grid-template-rows: 1fr 1fr 1/2fr;
   grid-column-gap: 0;
   grid-row-gap: 0;
 }

src/components/App/App.tsx

@@ -8,9 +8,11 @@ import './App.scss';
 export default function App(): JSX.Element {
   return (
     <div className="App">
+      <div />
+      <Logo />
+      <div />
       <div />
       <div>
-        <Logo />
         <Board
           numRows={10}
           numCols={10}

src/components/Board/Board.scss

@@ -1,6 +1,3 @@
-$LetterBaseColor: ghostwhite;
-$LetterHoverColor: #d9d9ff;
-
 .Container {
   display: grid;
 }
@@ -32,20 +29,15 @@ $LetterHoverColor: #d9d9ff;
   font-size: x-large;
   font-family: monospace;
   padding: 15px;
-  background: $LetterBaseColor;
+  background: ghostwhite;
   text-align: center;
   border: 5px solid #e5e5ea;
   border-radius: 100%;
   color: brown;
   cursor: pointer;
 
-  &:hover {
+  &:focus, &:hover {
-    border-color: $LetterHoverColor;
-  }
-
-  &:focus {
     border-color: #8b8be5;
     outline: none;
   }
 }
-

src/components/Board/Board.tsx

@@ -46,17 +46,23 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
 
   handleMouseDown(startPos: Point) {
     const endPos = startPos;
-    this.setState({...this.state, startPos, endPos, isSelecting: true});
+    let lines = [...this.state.lines];
+    lines[0] = true;
+    this.setState({...this.state, startPos, endPos, lines, isSelecting: true});
   }
 
   handleMouseUp(endPos: Point) {
-    if (this.moveIsValid(endPos))
+    if (!this.moveIsValid(endPos))
-      this.setState({...this.state, endPos, isSelecting: false});
+      return;
+
+    this.setState({...this.state, endPos, isSelecting: false});
   }
 
   handleMouseOver(endPos: Point) {
-    if (this.moveIsValid(endPos))
+    if (!this.moveIsValid(endPos))
-      this.setState({...this.state, endPos});
+      return;
+
+    this.setState({...this.state, endPos});
   }
 
   renderCell(s: string, pos: Point): JSX.Element {
@@ -80,7 +86,6 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
         startPos={{...this.state.startPos}}
         endPos={{...this.state.endPos}}
         cellSize={60}
-        isVisible={this.state.lines[0]}
       />
     );
   }
@@ -91,8 +96,8 @@ export default class Board extends React.Component<IBoardProps, IBoardState> {
         oy.map((s, x) =>
           this.renderCell(s, {x, y})));
 
-    let lines = this.state.lines.map((ox, x) =>
+    let lines = this.state.lines.filter(x => x).map((ox, x) =>
-        this.renderLine(x));
+      this.renderLine(x));
 
     return (
       <div className="Container">

src/components/Line/Line.tsx

@@ -8,7 +8,6 @@ interface ILineProps {
   startPos: Point;
   endPos: Point;
   cellSize: number;
-  isVisible: boolean;
 }
 
 export default function Line(props: ILineProps): JSX.Element {
@@ -17,7 +16,6 @@ export default function Line(props: ILineProps): JSX.Element {
   return (
     <line
       className="Line"
-      // style={{display: props.isVisible ? 'shown' : 'hidden'}}
       x1={`${pos(props.endPos.x)}`}
       y1={`${pos(props.endPos.y)}`}
       x2={`${pos(props.startPos.x)}`}

src/components/Logo/Logo.scss

@@ -1,8 +1,5 @@
 .Logo {
-  padding: 40px 0;
+  display: flex;
-}
+  justify-content: center;
-
+  padding: 20px 0;
-.Logo-wide {
-  width: 50%;
-  margin-left: 25%;
 }

src/components/Logo/Logo.tsx

@@ -6,7 +6,7 @@ import './Logo.scss';
 export default function Logo(): JSX.Element {
   return (
     <div className="Logo">
-      <img alt="Logo" src={Wide} className="Logo-wide"/>
+      <img alt="Logo" src={Wide}/>
     </div>
   );
 }