From 0b5e26e5c9ae359f79c9af7ee9dd5f9cf6931519 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Thu, 5 Apr 2018 22:55:47 -0400 Subject: [PATCH] Use CSS grid to layout the board --- assets/css/_board.scss | 131 +++++------ assets/css/app.scss | 1 + assets/css/vendor/_family.scss | 322 ++++++++++++++++++++++++++++ assets/js/components/chess-board.js | 40 ++-- 4 files changed, 397 insertions(+), 97 deletions(-) create mode 100644 assets/css/vendor/_family.scss diff --git a/assets/css/_board.scss b/assets/css/_board.scss index 4d0aa44..fec7227 100644 --- a/assets/css/_board.scss +++ b/assets/css/_board.scss @@ -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; + height: 100%; + 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 { diff --git a/assets/css/app.scss b/assets/css/app.scss index 88f336f..9b6e84e 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,5 +1,6 @@ @import "bourbon/bourbon"; @import "base/base"; +@import "vendor/family"; @import "variables"; diff --git a/assets/css/vendor/_family.scss b/assets/css/vendor/_family.scss new file mode 100644 index 0000000..f5f65d6 --- /dev/null +++ b/assets/css/vendor/_family.scss @@ -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); +} diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js index dedc03b..8659f23 100644 --- a/assets/js/components/chess-board.js +++ b/assets/js/components/chess-board.js @@ -25,21 +25,25 @@ class ChessBoard extends React.Component { return store.getState().player; } - renderFiles(rankId) { + renderSquares() { + const board = this.getBoard(); const { store, channel } = this.props; - const rank = this.getBoard()[rankId]; - return _.map(this.files(rank), fileId => { - return ( - - ); + return _.map(this.ranks(), (rankId) => { + const rank = this.getBoard()[rankId]; + + return _.map(this.files(rank), (fileId) => { + return ( + + ); + }); }); } @@ -90,16 +94,8 @@ class ChessBoard extends React.Component { render() { return (
-
-
-
-
-
{this.renderRanks()}
-
-
-
-
+ {this.renderSquares()}
);