diff --git a/src/board.js b/src/board.js index 383b034..c08a1d1 100644 --- a/src/board.js +++ b/src/board.js @@ -648,9 +648,39 @@ class Board extends React.Component {

This is a simple implementation of the classic board game, implemented in React. It supports all possible moves, including - castling, and en passant.

+ castling, and en passant (both explained below).

- { +

At the moment there is no support for online play, or even a simple + AI opponent, but both options are currently being examined.

+ +

Castling

+

Castling is a special move that allows a king and a rook to move at + the same time, under certain circumstances:

+ +

If these conditions are met, the king can move 2 spaces toward the + rook, and the rook moves into the space the king skipped over.

+ +

En Passant

+ +

Most people know that a pawn can jump two spaces the first time + it moves. En passant (French for "in passing") is a rare move + that can counter such a double-jump.

+ +

For example, say a white pawn double-jumps, and lands side-by-side + with a black pawn. That black pawn can then move into the space that + was jumped over (right behind the white pawn), and capture its + enemy!

+ +

It's not useful every game, but is very powerful in the right + situation!

+ +

Settings

+
{ getAllSettings().map(setting => { return (
@@ -663,9 +693,15 @@ class Board extends React.Component {
); }) - } + }
- +

Assets have been borrowed from Wikipedia.

+ +
+ + + +
} /> @@ -685,17 +721,19 @@ class Board extends React.Component { checkMsg + color + "'s Turn"; return ( -
+
-

{status}

+

{status}

Settings icon: a gear
- {range(8).map(n => this.row(n))} +
+ {range(8).map(n => this.row(n))} +
{this.renderPopup()}
); diff --git a/src/components/Popup.js b/src/components/Popup.js index ef70bff..9911746 100644 --- a/src/components/Popup.js +++ b/src/components/Popup.js @@ -11,12 +11,6 @@ class Popup extends React.Component {

{this.props.header}

{this.props.body} -
- -
); diff --git a/src/components/style.css b/src/components/style.css index 26cbc71..77c70c9 100644 --- a/src/components/style.css +++ b/src/components/style.css @@ -10,6 +10,20 @@ background-color: rgba(0,0,0, 0.5); } +.popup-inner p, .popup-inner ul { + margin: 0; + margin-bottom: 0.5em; +} + +.popup-inner li { + margin: 0; +} + +.popup-inner h2 { + font-size: 1em; + margin-bottom: 0; +} + @media (orientation:portrait) { .popup-inner { left: 5%; @@ -26,10 +40,10 @@ @media (orientation:landscape) { .popup-inner { - left: 25%; - right: 25%; - top: 25%; - bottom: 25%; + left: 30%; + right: 30%; + top: 15%; + bottom: 15%; padding-left: 2%; padding-right: 2%; font-size: 1.5em; diff --git a/src/index.css b/src/index.css index 70eba15..08dc816 100644 --- a/src/index.css +++ b/src/index.css @@ -15,7 +15,8 @@ ol, ul { } .status { - margin-bottom: 10px; + margin: 1em; + margin-top: 0; } @media (orientation:landscape) { @@ -39,6 +40,9 @@ ol, ul { height: 10vw; width: 10vw; } + h1 { + font-size: 1.5em; + } } .square { @@ -82,6 +86,10 @@ ol, ul { opacity: 0.4; } +.settings-buttons { + margin-bottom: 1.5em; +} + .icon:hover { opacity: 0.6; }