s449376/crosski
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

components: implement more blocks

Browse Source
This commit is contained in:
Artur Tamborski 2020-11-15 01:29:55 +01:00
parent f37d8e396c
commit c5dbc39cda
8 changed files with 135 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/App/App.css
View File

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

2
src/components/App/App.tsx
View File

@ -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>
);
}

24
src/components/Board/Board.css
View File

@ -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;
}

46
src/components/Board/Board.tsx
View File

@ -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;

8
src/components/Logo/Logo.css
View File

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

5
src/components/Logo/Logo.tsx
View File

@ -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>
);
}

11
src/components/Logo/crosski_square.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

40
src/components/Logo/crosski_wide.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB