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

Chess board is now a table

Browse Source
This commit is contained in:
Daniel Barber 2018-02-23 16:00:44 -05:00
parent 9681d80183
commit 65caee7e6e
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
3 changed files with 10 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/css/_board.scss
View File

@ -1,8 +1,4 @@
.board { .board {
display: flex;
flex-direction: column;
font-size: 0;
border: 0.3vmin solid black; border: 0.3vmin solid black;
margin: 0 auto; margin: 0 auto;
width: 80vmin; width: 80vmin;
@ -10,16 +6,10 @@
} }
.board-rank { .board-rank {
height: 12.5%;
} }
.board-square { .board-square {
position: relative;
border: 0.2vmin solid $square-outline-color; border: 0.2vmin solid $square-outline-color;
display: inline-block;
font-size: $base-font-size;
width: 12.5%;
height: 100%;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -39,7 +29,7 @@
&.selected { &.selected {
background-color: mix($black-square-color, $selected-square-color, 60%); background-color: mix($black-square-color, $selected-square-color, 60%);
border: 0.2vmin solid $selected-outline-color; outline: 0.2vmin solid $selected-outline-color;
} }
} }
@ -48,7 +38,7 @@
&.selected { &.selected {
background-color: mix($white-square-color, $selected-square-color, 60%); background-color: mix($white-square-color, $selected-square-color, 60%);
border: 0.2vmin solid $selected-outline-color; outline: 0.2vmin solid $selected-outline-color;
} }
} }

2
assets/js/components/chess-board-square.js
View File

@ -60,7 +60,7 @@ class ChessBoardSquare extends React.Component {
} }
render() { render() {
return <div return <td
id={this.squareId()} id={this.squareId()}
className={this.squareClass()} className={this.squareClass()}
onClick={this.selectSquare.bind(this)} onClick={this.selectSquare.bind(this)}

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

@ -43,15 +43,19 @@ class ChessBoard extends React.Component {
return _.map(Object.keys(board).reverse(), (rankId) => { return _.map(Object.keys(board).reverse(), (rankId) => {
return ( return (
<div className="board-rank" key={rankId}> <tr className="board-rank" key={rankId}>
{this.renderFiles(rankId)} {this.renderFiles(rankId)}
</div> </tr>
); );
}); });
} }
render() { render() {
return <div className="board">{this.renderRanks()}</div>; return (
<table className="board">
<tbody>{this.renderRanks()}</tbody>
</table>
);
} }
} }