components: implement more blocks

src/components/App/App.css

@@ -1,3 +1,5 @@
 .App {
-  text-align: center;
+  max-width: 80vw;
+  max-height: 100vh;
+  margin: 0 auto;
 }

src/components/App/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import Logo from '../Logo/Logo';
+import Board from '../Board/Board';
 
 import './App.css';
 
@@ -8,6 +9,7 @@ function App() {
   return (
     <div className="App">
       <Logo />
+      <Board />
     </div>
   );
 }

src/components/Board/Board.css

@@ -0,0 +1,24 @@
+.Board {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: repeat(8, 8vw);
+  column-gap: 15px;
+  row-gap: 15px;
+  user-select: none;
+  text-align: center;
+}
+
+.Letter {
+  font-weight: bold;
+  font-size: larger;
+  padding: 20px;
+  background: ghostwhite;
+  border-radius: 25px;
+  border-color: #E5E5EA;
+  color: brown;
+  cursor: pointer;
+}
+
+.Letter:hover {
+  background: #e4e4ff;
+}

src/components/Board/Board.tsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+
+import './Board.css';
+
+class Board extends Component {
+
+  genSquares() {
+    let squares = [];
+    for (let i = 0; i < 64; i++) {
+      let x = String.fromCharCode(i % 8 + 65);
+      let y = String.fromCharCode(i / 8 + 49);
+      let letter = x + y;
+      squares.push(
+        <div
+          id={letter}
+          className="Letter"
+        >
+          {letter}
+        </div>
+      );
+    }
+    return squares;
+  }
+
+  onMouseDown() {
+    console.log("down")
+  }
+
+  onMouseMove() {
+    console.log("move")
+  }
+
+  render() {
+    return (
+      <div
+        className="Board"
+        onMouseDown={this.onMouseDown}
+        onMouseMove={this.onMouseMove}
+      >
+        {this.genSquares()}
+      </div>
+    );
+  }
+}
+
+export default Board;

src/components/Logo/Logo.css

@@ -1,4 +1,8 @@
 .Logo {
-  background: red;
+  padding: 40px 0;
-  width: 20vw;
+}
+
+.Logo-wide {
+  width: 50%;
+  margin-left: 25%;
 }

src/components/Logo/Logo.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import '../../styles/Logo.css';
+import Wide from './crosski_wide.svg'
+import './Logo.css';
 
 function Logo() {
   return (
     <div className="Logo">
-      asdsdasdadsads
+      <img alt="Logo" src={Wide} className="Logo-wide"/>
     </div>
   );
 }

src/components/Logo/crosski_square.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+    <defs>
+        <style>.cls-1{fill:#212121;}</style>
+    </defs>
+    <path class="cls-1"
+          d="M52,53.3a1.54,1.54,0,0,1-1.06,1.78,27,27,0,0,1-7.51,1c-12.56,0-18.18-7.23-18.18-15.55,0-10.77,8.47-16.57,18.64-16.57a25.85,25.85,0,0,1,7.53,1,1.53,1.53,0,0,1,1,1.87l-1,3.79a1.54,1.54,0,0,1-1.94,1.08,18.38,18.38,0,0,0-5.25-.75c-5.2,0-9.8,2.8-9.8,9,0,5.33,3.63,9.06,10,9.06a22.26,22.26,0,0,0,4.91-.57,1.55,1.55,0,0,1,1.91,1.19Z"/>
+    <path class="cls-1"
+          d="M68.45,35A1.54,1.54,0,0,0,70,33.45V11.55A1.54,1.54,0,0,0,68.45,10H11.55A1.54,1.54,0,0,0,10,11.55v21.9A1.54,1.54,0,0,0,11.55,35h6.9A1.54,1.54,0,0,0,20,33.45V21.55A1.54,1.54,0,0,1,21.55,20h36.9A1.54,1.54,0,0,1,60,21.55v11.9A1.54,1.54,0,0,0,61.55,35Z"/>
+    <path class="cls-1"
+          d="M70,60V46.55A1.54,1.54,0,0,0,68.45,45h-6.9A1.54,1.54,0,0,0,60,46.55v11.9A1.54,1.54,0,0,1,58.45,60H21.55A1.54,1.54,0,0,1,20,58.45V46.55A1.54,1.54,0,0,0,18.45,45h-6.9A1.54,1.54,0,0,0,10,46.55v21.9A1.54,1.54,0,0,0,11.55,70h56.9A1.54,1.54,0,0,0,70,68.45Z"/>
+</svg>

src/components/Logo/crosski_wide.svg

@@ -0,0 +1,40 @@
+<svg width="380" height="80" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <style>.cls-1 { fill: brown; }</style>
+    </defs>
+    <g>
+        <title>background</title>
+        <rect fill="none" id="canvas_background" height="602" width="802" y="-1"
+              x="-1"/>
+    </g>
+    <g>
+        <title>Layer 1</title>
+        <path id="svg_1"
+              d="m20,33.44l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-11.88a1.56,1.56 0 0 1 1.56,-1.56l36.88,0a1.56,1.56 0 0 1 1.56,1.56l0,11.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-21.88a1.56,1.56 0 0 0 -1.56,-1.56l-356.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,21.88a1.56,1.56 0 0 0 1.56,1.56l6.88,0a1.56,1.56 0 0 0 1.56,-1.56z"
+              class="cls-1"/>
+        <path id="svg_2"
+              d="m360,46.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,11.88a1.56,1.56 0 0 1 -1.56,1.56l-36.88,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-11.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56l0,21.88a1.56,1.56 0 0 0 1.56,1.56l356.88,0a1.56,1.56 0 0 0 1.56,-1.56l0,-21.88a1.56,1.56 0 0 0 -1.56,-1.56l-6.88,0a1.56,1.56 0 0 0 -1.56,1.56z"
+              class="cls-1"/>
+        <path id="svg_3"
+              d="m52,53.3a1.55,1.55 0 0 1 -1.07,1.79a27.34,27.34 0 0 1 -7.5,1c-12.56,0 -18.18,-7.23 -18.18,-15.55c0,-10.77 8.47,-16.57 18.64,-16.57a25.82,25.82 0 0 1 7.52,1a1.54,1.54 0 0 1 1,1.88l-1,3.77a1.55,1.55 0 0 1 -2,1.09a18.31,18.31 0 0 0 -5.24,-0.75c-5.2,0 -9.8,2.8 -9.8,9c0,5.33 3.63,9.06 10,9.06a22.17,22.17 0 0 0 4.9,-0.57a1.56,1.56 0 0 1 1.92,1.2l0.81,3.65z"
+              class="cls-1"/>
+        <path id="svg_4"
+              d="m77.75,26.41a1.57,1.57 0 0 1 1.38,-1.55a84.73,84.73 0 0 1 9.57,-0.5c5.2,0 8.65,0.73 11,2.44a7.94,7.94 0 0 1 3.3,6.81a8.18,8.18 0 0 1 -5.52,7.45l0,0.18c2.07,0.88 3.22,2.9 4.1,5.48c0.72,2.17 1.44,5 2,6.93a1.56,1.56 0 0 1 -1.5,2l-5.67,0a1.57,1.57 0 0 1 -1.45,-1a51.88,51.88 0 0 1 -1.96,-6.09c-1,-3.73 -2.2,-4.47 -5.1,-4.47l0,0a1.56,1.56 0 0 0 -1.56,1.56l0,8.43a1.56,1.56 0 0 1 -1.56,1.56l-5.47,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-27.67zm8.6,10a1.56,1.56 0 0 0 1.56,1.59l1,0c3.4,0 5.43,-1.38 5.43,-3.73s-1.75,-3.54 -4.69,-3.54c-0.76,0 -1.36,0 -1.84,0a1.55,1.55 0 0 0 -1.48,1.56l0.02,4.12z"
+              class="cls-1"/>
+        <path id="svg_5"
+              d="m156.84,39.82c0,9.38 -6.58,16.24 -17.25,16.24c-10.22,0 -16.43,-6.86 -16.43,-15.78c0,-9.48 6.81,-16.34 17,-16.34c10.47,0 16.68,6.77 16.68,15.88zm-24.43,0.23c0,5.33 2.94,9.29 7.64,9.29s7.54,-4 7.54,-9.29s-2.94,-9.39 -7.59,-9.39s-7.59,4.05 -7.59,9.39z"
+              class="cls-1"/>
+        <path id="svg_6"
+              d="m179.31,48.63a1.56,1.56 0 0 1 2.09,-1.06a20.62,20.62 0 0 0 7.29,1.43c2.9,0 4.37,-0.92 4.37,-2.49c0,-1.33 -1.43,-2.21 -5.2,-3.26c-5.29,-1.48 -9.66,-4.19 -9.66,-9.57c0,-5.62 5.06,-9.76 13.11,-9.76a23.93,23.93 0 0 1 8.11,1.23a1.55,1.55 0 0 1 1,1.9l-1.11,3.81a1.56,1.56 0 0 1 -2,1a18.86,18.86 0 0 0 -6.1,-1c-2.57,0 -4,0.83 -4,2.16c0,1.66 2,2.21 6,3.5c6,1.93 8.88,4.83 8.88,9.52c0,5.2 -4.09,10 -14,10a26.21,26.21 0 0 1 -8.79,-1.56a1.54,1.54 0 0 1 -0.95,-1.84l0.96,-4.01z"
+              class="cls-1"/>
+        <path id="svg_7"
+              d="m229.31,48.63a1.56,1.56 0 0 1 2.09,-1.06a20.62,20.62 0 0 0 7.29,1.43c2.9,0 4.37,-0.92 4.37,-2.49c0,-1.33 -1.43,-2.21 -5.2,-3.26c-5.29,-1.48 -9.66,-4.19 -9.66,-9.57c0,-5.62 5.06,-9.76 13.11,-9.76a23.93,23.93 0 0 1 8.11,1.23a1.55,1.55 0 0 1 1,1.9l-1.11,3.81a1.56,1.56 0 0 1 -2,1a18.86,18.86 0 0 0 -6.1,-1c-2.57,0 -4,0.83 -4,2.16c0,1.66 2,2.21 6,3.5c6,1.93 8.88,4.83 8.88,9.52c0,5.2 -4.09,10 -14,10a26.21,26.21 0 0 1 -8.79,-1.56a1.54,1.54 0 0 1 -0.95,-1.84l0.96,-4.01z"
+              class="cls-1"/>
+        <path id="svg_8"
+              d="m278,24.5l5.49,0a1.56,1.56 0 0 1 1.51,1.56l0,11.46l0.09,0c0.69,-1.11 1.47,-2.17 2.21,-3.18l6.34,-9.17a1.56,1.56 0 0 1 1.28,-0.67l6.85,0a1.56,1.56 0 0 1 1.23,2.56l-8,9.63a1.53,1.53 0 0 0 -0.12,1.83l9.27,14.59a1.55,1.55 0 0 1 -1.31,2.39l-6.53,0a1.55,1.55 0 0 1 -1.34,-0.77l-5.97,-10.1a1.56,1.56 0 0 0 -2.54,-0.22l-1.11,1.32a1.59,1.59 0 0 0 -0.36,1l0,7.21a1.56,1.56 0 0 1 -1.56,1.56l-5.43,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-27.88a1.56,1.56 0 0 1 1.56,-1.56z"
+              class="cls-1"/>
+        <path id="svg_17"
+              d="m344.53296,26.02815l0,27.88a1.55,1.55 0 0 1 -1.56,1.56l-5.57,0a1.56,1.56 0 0 1 -1.56,-1.56l0,-27.88a1.56,1.56 0 0 1 1.56,-1.56l5.57,0a1.55,1.55 0 0 1 1.56,1.56z"
+              class="cls-1"/>
+    </g>
+</svg>