Expand and clean-up settings window

src/board.js

@@ -648,9 +648,39 @@ class Board extends React.Component {
 
         <p>This is a simple implementation of the classic board game,
         implemented in React. It supports all possible moves, including
-        castling, and <em>en passant</em>.</p>
+        castling, and <em>en passant</em> (both explained below).</p>
 
-        {
+        <p>At the moment there is no support for online play, or even a simple
+        AI opponent, but both options are currently being examined.</p>
+
+        <h2>Castling</h2>
+        <p>Castling is a special move that allows a king and a rook to move at
+        the same time, under certain circumstances:</p>
+        <ul>
+          <li>The king cannot be in check</li>
+          <li>The space the king skips over cannot be in check</li>
+          <li>The spaces between the king and the rook must be empty</li>
+          <li>Neither the king nor the rook have already moved this game</li>
+        </ul>
+        <p>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.</p>
+
+        <h2><em>En Passant</em></h2>
+
+        <p>Most people know that a pawn can jump two spaces the first time
+        it moves. <em>En passant</em> (French for "in passing") is a rare move
+        that can counter such a double-jump.</p>
+
+        <p>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!</p>
+
+        <p>It's not useful every game, but is very powerful in the right
+        situation!</p>
+
+        <h2>Settings</h2>
+        <div className="settings-buttons">{
           getAllSettings().map(setting => {
             return (
               <div>
@@ -663,9 +693,15 @@ class Board extends React.Component {
               </div>
             );
           })
-        }
+        }</div>
 
+        <p><em>Assets have been borrowed from Wikipedia.</em></p>
+
+        <div style={{float: "right", marginBottom: "0.5em"}}>
           <button onClick={this.doReset.bind(this)}>Reset Game</button>
+          <span> </span>
+          <button onClick={this.togglePopup.bind(this)}>Close</button>
+        </div>
 
       </div>}
       />
@@ -685,17 +721,19 @@ class Board extends React.Component {
       checkMsg + color + "'s Turn";
 
     return (
-      <div style={{textAlign: `center`,}}>
+      <div>
         <div className="status">
-          <h1 style={{display: "inline-block"}}>{status}</h1>
+          <h1 style={{display: "inline-block", margin: "0"}}>{status}</h1>
           <img
             className="icon"
             alt="Settings icon: a gear"
-            style={{height: "5vh", float: "right"}}
+            style={{height: "2em", float: "right", }}
             src="./gear.svg" onClick={this.togglePopup.bind(this)}>
           </img>
         </div>
+        <div>
           {range(8).map(n => this.row(n))}
+        </div>
         {this.renderPopup()}
       </div>
     );

src/components/Popup.js

@@ -11,12 +11,6 @@ class Popup extends React.Component {
         <div className='popup-inner'>
           <h1>{this.props.header}</h1>
           {this.props.body}
-          <div style={{textAlign: "right"}}>
-            <button 
-              onClick={this.props.closePopup}>
-              Close
-            </button>
-          </div>
         </div>
       </div>
     );

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%;
+    left: 30%;
-    right: 25%;
+    right: 30%;
-    top: 25%;
+    top: 15%;
-    bottom: 25%;
+    bottom: 15%;
     padding-left: 2%;
     padding-right: 2%;
     font-size: 1.5em;

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;
 }