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

Render the board with flexbox

Browse Source 
For realsies this time!
This commit is contained in:
Daniel Barber 2018-02-27 20:20:15 -05:00
parent 559bf394ef
commit f699c88444
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
2 changed files with 78 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
assets/css/_board.scss
View File

@ -11,19 +11,17 @@
.board { .board {
background: lighten($black-square-color, 7%); background: lighten($black-square-color, 7%);
border-collapse: unset; border-collapse: unset;
border-spacing: 1px;
color: $white-square-color;
border-radius: 2vmin; border-radius: 2vmin;
border-spacing: 1px;
box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4); box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4);
position: relative; color: $white-square-color;
display: flex;
flex-direction: column;
height: 90vmin; height: 90vmin;
position: relative;
table-layout: fixed;
width: 90vmin; width: 90vmin;
th {
font-size: 0.6rem;
color: darken($black-square-color, 10%);
}
&.white-to-move:before { &.white-to-move:before {
@include move-indicator; @include move-indicator;
background: #fff; background: #fff;
@ -45,24 +43,46 @@
} }
} }
@media (min-width: 480px) { .board-header,
.board { .board-footer {
border-spacing: 2px; display: flex;
flex-direction: row;
th {
font-size: 0.8rem;
} }
.board-border-bottom-middle {
flex: 1;
}
.board-body {
flex: 1;
display: flex;
flex-direction: row;
.board-border-left,
.board-border-right {
height: 100%;
} }
} }
@media (min-width: 768px) { .board-ranks {
.board { flex: 1;
border-spacing: 3px; display: flex;
flex-direction: column;
}
th { .board-rank {
font-size: 1rem; flex: 1;
display: flex;
} }
.board-border-left,
.board-border-right {
width: 5vmin;
} }
.board-border-top,
.board-border-bottom {
height: 5vmin;
} }
.board-square { .board-square {
@ -70,6 +90,8 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
border-radius: 0.25vmin; border-radius: 0.25vmin;
flex: 1;
margin: 0.5px;
@each $colour in $colours { @each $colour in $colours {
@each $piece in $pieces { @each $piece in $pieces {
@ -80,26 +102,6 @@
} }
} }
.board-border-top,
.board-border-bottom {
height: 5%;
th {
padding: 0;
vertical-align: middle;
text-align: center;
}
}
.board-border-left,
.board-border-right {
width: 5%;
padding: 0;
vertical-align: middle;
text-align: center;
}
@mixin black-square { @mixin black-square {
background-color: $black-square-color; background-color: $black-square-color;
@ -137,3 +139,23 @@
@include black-square; @include black-square;
} }
} }
@media (min-width: 480px) {
.board-square {
margin: 1px;
}
.board-label {
font-size: 0.8rem;
}
}
@media (min-width: 768px) {
.board-square {
margin: 1.5px;
}
.board-label {
font-size: 1rem;
}
}

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

@ -69,11 +69,9 @@ class ChessBoard extends React.Component {
return _.map(this.ranks(), (rankId) => { return _.map(this.ranks(), (rankId) => {
return ( return (
<tr className="board-rank" key={rankId}> <div className="board-rank" key={rankId}>
<th className="board-border-left">{rankId}</th>
{this.renderFiles(rankId)} {this.renderFiles(rankId)}
<td className="board-border-left"></td> </div>
</tr>
); );
}); });
} }
@ -114,30 +112,19 @@ class ChessBoard extends React.Component {
render() { render() {
return ( return (
<table className={this.boardClass()}> <div className={this.boardClass()}>
<thead> <div className="board-header">
<tr className="board-border-top"> <div className="board-border-top"></div>
<th className="board-border-left"></th> </div>
<th>a</th> <div className="board-body">
<th>b</th> <div className="board-border-left"></div>
<th>c</th> <div className="board-ranks">{this.renderRanks()}</div>
<th>d</th> <div className="board-border-right"></div>
<th>e</th> </div>
<th>f</th> <div className="board-footer">
<th>g</th> <div className="board-border-bottom"></div>
<th>h</th> </div>
<th className="board-border-left"></th> </div>
</tr>
</thead>
<tbody>{this.renderRanks()}</tbody>
<tfoot>
<tr className="board-border-bottom">
<th className="board-border-left"></th>
<th colSpan="8"></th>
<th className="board-border-left"></th>
</tr>
</tfoot>
</table>
); );
} }
} }