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

Use CSS grid to layout the board

Browse Source
This commit is contained in:
Daniel Barber 2018-04-05 22:55:47 -04:00
parent eb72a4cde6
commit 0b5e26e5c9
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
4 changed files with 397 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
assets/css/_board.scss
View File

@ -17,11 +17,9 @@ $board-size: 90vmin;
border-spacing: 1px;
box-shadow: 0 ($board-size / 200) ($board-size / 40) $board-shadow-color;
color: $white-square-color;
display: flex;
flex-direction: column;
height: $board-size;
padding: $board-size / 20;
position: relative;
table-layout: fixed;
width: $board-size;
&.white-to-move::before {
@ -45,41 +43,13 @@ $board-size: 90vmin;
}
}
.board-header,
.board-footer {
display: flex;
flex-direction: row;
}
.board-border-bottom-middle {
flex: 1;
}
.board-body {
display: flex;
flex: 1;
flex-direction: row;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
.board-border-left,
.board-border-right {
height: 100%;
}
}
.board-ranks {
display: flex;
flex: 1;
flex-direction: column;
}
.board-rank {
display: flex;
flex: 1;
}
.board-border-left,
.board-border-right {
width: $board-size / 20;
width: 100%;
}
.board-border-top,
@ -87,30 +57,7 @@ $board-size: 90vmin;
height: $board-size / 20;
}
.board-square {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
border-radius: 2%;
flex: 1;
margin: 0.5px;
// This is to ensure the squares can be clicked on in PhantomJS
// TODO: Figure out why we need this
min-height: 20px;
min-width: 20px;
@each $colour in $colours {
@each $piece in $pieces {
&.#{$colour}.#{$piece} {
background-image: url(/images/#{$piece}_#{$colour}.svg);
}
}
}
}
@mixin black-square {
%black-square {
background-color: $black-square-color;
&.selected {
@ -124,7 +71,7 @@ $board-size: 90vmin;
}
}
@mixin white-square {
%white-square {
background-color: $white-square-color;
&.selected {
@ -138,25 +85,59 @@ $board-size: 90vmin;
}
}
.board-rank:nth-child(odd) {
.board-square:nth-child(even) {
@include black-square;
}
.board-square {
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
border-radius: 2%;
margin: 0.5px;
.board-square:nth-child(odd) {
@include white-square;
// This is to ensure the squares can be clicked on in PhantomJS
// TODO: Figure out why we need this
min-height: 20px;
min-width: 20px;
@include odd-between(1, 8) { @extend %white-square; }
@include even-between(1, 8) { @extend %black-square; }
@include odd-between(9, 16) { @extend %black-square; }
@include even-between(9, 16) { @extend %white-square; }
@include odd-between(17, 24) { @extend %white-square; }
@include even-between(17, 24) { @extend %black-square; }
@include odd-between(25, 32) { @extend %black-square; }
@include even-between(25, 32) { @extend %white-square; }
@include odd-between(33, 40) { @extend %white-square; }
@include even-between(33, 40) { @extend %black-square; }
@include odd-between(41, 48) { @extend %black-square; }
@include even-between(41, 48) { @extend %white-square; }
@include odd-between(49, 56) { @extend %white-square; }
@include even-between(49, 56) { @extend %black-square; }
@include odd-between(57, 64) { @extend %black-square; }
@include even-between(57, 64) { @extend %white-square; }
@each $colour in $colours {
@each $piece in $pieces {
&.#{$colour}.#{$piece} {
background-image: url(/images/#{$piece}_#{$colour}.svg);
}
}
}
}
.board-rank:nth-child(even) {
.board-square:nth-child(even) {
@include white-square;
}
// .board-square:nth-child(even) {
// @include black-square;
// }
.board-square:nth-child(odd) {
@include black-square;
}
}
// .board-square:nth-child(odd) {
// @include white-square;
// }
@media (min-width: 480px) {
.board-square {

1
assets/css/app.scss
View File

@ -1,5 +1,6 @@
@import "bourbon/bourbon";
@import "base/base";
@import "vendor/family";
@import "variables";

322
assets/css/vendor/_family.scss vendored Normal file
View File

@ -0,0 +1,322 @@
/// Select all children from the first to `$num`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin first($num) {
@if $num == 1 {
&:first-child {
@content;
}
} @else {
&:nth-child(-n + #{$num}) {
@content;
}
}
}
/// Select all children from the last to `$num`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin last($num) {
&:nth-last-child(-n + #{$num}) {
@content;
}
}
/// Select all children after the first to `$num`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin after-first($num) {
&:nth-child(n + #{$num + 1}) {
@content;
}
}
/// Select all children before `$num` from the last.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin from-end($num) {
&:nth-last-child(#{$num}) {
@content;
}
}
/// Select all children between `$first` and `$last`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin between($first, $last) {
&:nth-child(n + #{$first}):nth-child(-n + #{$last}) {
@content;
}
}
/// Select all even children between `$first` and `$last`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin even-between($first, $last) {
&:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
@content;
}
}
/// Select all odd children between `$first` and `$last`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin odd-between($first, $last) {
&:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
@content;
}
}
/// Select all `$num` children between `$first` and `$last`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin n-between($num, $first, $last) {
&:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
@content;
}
}
/// Select all children but `$num`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin all-but($num) {
&:not(:nth-child(#{$num})) {
@content;
}
}
/// Select children each `$num`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
/// @alias every
@mixin each($num) {
&:nth-child(#{$num}n) {
@content;
}
}
/// Select children each `$num`.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin every($num) {
&:nth-child(#{$num}n) {
@content;
}
}
/// Select the `$num` child from the start and the `$num` child from the last.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin from-first-last($num) {
&:nth-child(#{$num}),
&:nth-last-child(#{$num}) {
@content;
}
}
/// Select the item in the middle of `$num` child. Only works with odd number
/// chain.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin middle($num) {
&:nth-child(#{round($num / 2)}) {
@content;
}
}
/// Select all children between the `$num` first and the `$num` last.
/// @group with-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - id of the child
@mixin all-but-first-last($num) {
&:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {
@content;
}
}
/// This quantity-query mixin will only select the first of `$limit` items. It will not
/// work if there is not as much as item as you set in `$limit`.
/// @group Quantity queries
/// @param {number} $limit
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin first-of($limit) {
&:nth-last-child(#{$limit}):first-child {
@content;
}
}
/// This quantity-query mixin will only select the last of `$limit` items. It will not
/// if there is not as much as item as you set in `$limit`.
/// @group Quantity queries
/// @param {number} $limit
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin last-of($limit) {
&:nth-of-type(#{$limit}):nth-last-of-type(1) {
@content;
}
}
/// This quantity-query mixin will select every items if there is at least `$num` items. It will not
/// if there is not as much as item as you set in `$num`.
/// @group Quantity queries
/// @param {number} $limit
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin at-least($num) {
$selector: &;
$child: nth(nth($selector, -1), -1);
&:nth-last-child(n + #{$num}),
&:nth-last-child(n + #{$num}) ~ #{$child} {
@content;
}
}
/// This quantity-query mixin will select every items if there is at most `$num` items. It will not
/// if there is not as much as item as you set in `$num`.
/// @group Quantity queries
/// @param {number} $limit
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin at-most($num) {
$selector: &;
$child: nth(nth($selector, -1), -1);
&:nth-last-child(-n + #{$num}):first-child,
&:nth-last-child(-n + #{$num}):first-child ~ #{$child} {
@content;
}
}
/// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.
/// @group Quantity queries
/// @param {number} $limit
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin in-between($min, $max) {
$selector: &;
$child: nth(nth($selector, -1), -1);
&:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child,
&:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child} {
@content;
}
}
/// Select the first exact child
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin first-child() {
&:first-of-type {
@content
}
}
/// Select the last exact child
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin last-child() {
&:last-of-type {
@content
}
}
/// Select all even children.
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin even() {
&:nth-child(even) {
@content;
}
}
/// Select all odd children.
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin odd() {
&:nth-child(odd) {
@content;
}
}
/// Select only the first and last child.
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin first-last() {
&:first-child,
&:last-child {
@content;
}
}
/// Will only select the child if it’s unique.
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @alias only
@mixin unique() {
&:only-child {
@content;
}
}
/// Will only select the child if it’s unique.
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin only() {
&:only-child {
@content;
}
}
/// Will only select children if they are not unique. Meaning if there is at
/// least 2 children, the style is applied.
/// @group no-arguments
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
@mixin not-unique() {
&:not(:only-child) {
@content;
}
}
/// This mixin is used to automatically sort z-index in numerical order. But it
/// can also sort them in anti-numerical order, depending the parameters you use.
/// @group using functions
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
/// @param {number} $num - Number of children
/// @param {string} $direction [forward] - Direction of the sort
/// @param {number} $index [0] - Index of the sorting
@mixin child-index($num, $direction: 'forward', $index: 0) {
@for $i from 1 through $num {
@if ($direction == 'forward') {
&:nth-child(#{$i}) {
z-index: order-index($i, $index);
@content;
}
} @else if ($direction == 'backward') {
&:nth-last-child(#{$i}) {
z-index: order-index($i, $index);
@content;
}
}
}
}
/// Used by the child-index mixin. It will returned the proper sorted numbers
/// depending on the `$index` value.
/// @access private
/// @param {number} $num - Number of children
/// @param {number} $index - Index of the sorting
@function order-index($i, $index) {
@return ($index + $i);
}

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

@ -25,22 +25,26 @@ class ChessBoard extends React.Component {
return store.getState().player;
}
renderFiles(rankId) {
renderSquares() {
const board = this.getBoard();
const { store, channel } = this.props;
return _.map(this.ranks(), (rankId) => {
const rank = this.getBoard()[rankId];
return _.map(this.files(rank), fileId => {
return _.map(this.files(rank), (fileId) => {
return (
<ChessBoardSquare
file={fileId}
key={fileId}
rank={rankId}
piece={rank[fileId]}
piece={board[rankId][fileId]}
store={store}
channel={channel}
/>
);
});
});
}
renderRanks() {
@ -90,16 +94,8 @@ class ChessBoard extends React.Component {
render() {
return (
<div className={this.boardClass}>
<div className="board-header">
<div className="board-border-top" />
</div>
<div className="board-body">
<div className="board-border-left" />
<div className="board-ranks">{this.renderRanks()}</div>
<div className="board-border-right" />
</div>
<div className="board-footer">
<div className="board-border-bottom" />
{this.renderSquares()}
</div>
</div>
);