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

104
assets/css/_board.scss
View File

@ -11,19 +11,17 @@
.board {
background: lighten($black-square-color, 7%);
border-collapse: unset;
border-spacing: 1px;
color: $white-square-color;
border-radius: 2vmin;
border-spacing: 1px;
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;
position: relative;
table-layout: fixed;
width: 90vmin;
th {
font-size: 0.6rem;
color: darken($black-square-color, 10%);
}
&.white-to-move:before {
@include move-indicator;
background: #fff;
@ -45,24 +43,46 @@
}
}
@media (min-width: 480px) {
.board {
border-spacing: 2px;
.board-header,
.board-footer {
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 {
border-spacing: 3px;
.board-ranks {
flex: 1;
display: flex;
flex-direction: column;
}
th {
font-size: 1rem;
}
}
.board-rank {
flex: 1;
display: flex;
}
.board-border-left,
.board-border-right {
width: 5vmin;
}
.board-border-top,
.board-border-bottom {
height: 5vmin;
}
.board-square {
@ -70,6 +90,8 @@
background-repeat: no-repeat;
background-size: 100%;
border-radius: 0.25vmin;
flex: 1;
margin: 0.5px;
@each $colour in $colours {
@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 {
background-color: $black-square-color;
@ -137,3 +139,23 @@
@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 (
<tr className="board-rank" key={rankId}>
<th className="board-border-left">{rankId}</th>
<div className="board-rank" key={rankId}>
{this.renderFiles(rankId)}
<td className="board-border-left"></td>
</tr>
</div>
);
});
}
@ -114,30 +112,19 @@ class ChessBoard extends React.Component {
render() {
return (
<table className={this.boardClass()}>
<thead>
<tr className="board-border-top">
<th className="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 className="board-border-left"></th>
</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>
<div className={this.boardClass()}>
<div className="board-header">
<div className="board-border-top"></div>
</div>
<div className="board-body">
<div className="board-border-left"></div>
<div className="board-ranks">{this.renderRanks()}</div>
<div className="board-border-right"></div>
</div>
<div className="board-footer">
<div className="board-border-bottom"></div>
</div>
</div>
);
}
}