danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

Restyle chessboard

Browse Source
This commit is contained in:
Daniel Barber 2018-02-26 10:14:41 -05:00
parent a39943559e
commit 90e330e3a0
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
2 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/_board.scss
View File

@ -1,15 +1,23 @@
.board { .board {
border: 0.3vmin solid $board-border-color; background: lighten($black-square-color, 7%);
border-collapse: unset;
color: $white-square-color;
border-radius: 2vmin;
box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4);
height: 80vmin; height: 80vmin;
margin: 0 auto; margin: 0 auto;
width: 80vmin; width: 80vmin;
th {
color: darken($black-square-color, 10%);
}
} }
.board-square { .board-square {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
border: 0.2vmin solid $square-outline-color; border-radius: 0.25vmin;
@each $colour in $colours { @each $colour in $colours {
@each $piece in $pieces { @each $piece in $pieces {
@ -20,6 +28,26 @@
} }
} }
.board-border-top,
.board-border-bottom {
height: 4vmin;
th {
padding: 0;
vertical-align: middle;
text-align: center;
}
}
.board-border-left,
.board-border-right {
width: 4vmin;
padding: 0;
vertical-align: middle;
text-align: center;
}
@mixin black-square { @mixin black-square {
background-color: $black-square-color; background-color: $black-square-color;

25
assets/js/components/chess-board.js
View File

@ -61,7 +61,9 @@ class ChessBoard extends React.Component {
return _.map(this.ranks(), (rankId) => { return _.map(this.ranks(), (rankId) => {
return ( return (
<tr className="board-rank" key={rankId}> <tr className="board-rank" key={rankId}>
<th class="board-border-left">{rankId}</th>
{this.renderFiles(rankId)} {this.renderFiles(rankId)}
<td class="board-border-left"></td>
</tr> </tr>
); );
}); });
@ -92,8 +94,29 @@ class ChessBoard extends React.Component {
render() { render() {
return ( return (
<table className="board"> <table class="board">
<thead>
<tr class="board-border-top">
<th class="board-border-left"></th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
<th>f</th>
<th>g</th>
<th>h</th>
<th class="board-border-left"></th>
</tr>
</thead>
<tbody>{this.renderRanks()}</tbody> <tbody>{this.renderRanks()}</tbody>
<tfoot>
<tr class="board-border-bottom">
<th class="board-border-left"></th>
<th colspan="8"></th>
<th class="board-border-left"></th>
</tr>
</tfoot>
</table> </table>
); );
} }