Add toggle-able setting for shuffling the back row

Add gear icon for settings. Add some framework for easier addition of
toggle-able settings. Might be good to make it more generic across other
(not purely toggle) types of settings.

public/gear.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2995"
+   sodipodi:docname="gearYellow.svg"
+   inkscape:export-filename="/home/aztlek/Documentos/IDU/TOGAF IDU/TOGAF IDU V2.0/aplicacionEnDesuso-16x16.png"
+   viewBox="0 0 48 48"
+   inkscape:export-xdpi="30.18"
+   version="1.1"
+   inkscape:export-ydpi="30.18"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <defs
+     id="defs60" />
+  <sodipodi:namedview
+     id="base"
+     bordercolor="#666666"
+     inkscape:pageshadow="2"
+     inkscape:window-y="0"
+     pagecolor="#ffffff"
+     inkscape:window-height="1016"
+     inkscape:grid-bbox="true"
+     inkscape:window-maximized="1"
+     inkscape:zoom="11.291667"
+     inkscape:window-x="0"
+     showgrid="true"
+     borderopacity="1.0"
+     inkscape:current-layer="layer1"
+     inkscape:cx="7.8376389"
+     inkscape:cy="24"
+     inkscape:window-width="1920"
+     inkscape:pageopacity="0.0"
+     inkscape:document-units="px"
+     inkscape:document-rotation="0" />
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       id="path2989"
+       style="fill:#7f7f7f;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       d="m24.04 0.14285c-1.376 0-2.7263 0.12375-4.0386 0.34741l-0.64 6.7853c-1.3572 0.37831-2.6417 0.90728-3.8432 1.585l-5.244-4.3317c-2.2152 1.5679-4.1541 3.4955-5.7217 5.7101l4.3426 5.2437c-0.67695 1.2001-1.2177 2.4878-1.5959 3.8432l-6.7745 0.64053c-0.22379 1.3127-0.34741 2.6622-0.34741 4.0386 0 1.3788 0.12285 2.7238 0.34741 4.0386l6.7745 0.64056c0.37825 1.3554 0.91896 2.6431 1.5959 3.8432l-4.3317 5.2437c1.5648 2.2089 3.4908 4.1457 5.6997 5.7105l5.2545-4.3426c1.2023 0.67835 2.485 1.2174 3.8432 1.5959l0.64053 6.7853c1.3123 0.22368 2.6626 0.33658 4.0386 0.33658s2.7155-0.11289 4.0278-0.33658l0.64053-6.7853c1.3582-0.37847 2.6409-0.91755 3.8432-1.5959l5.2545 4.3426c2.2088-1.5649 4.1348-3.5017 5.6997-5.7105l-4.3317-5.2437c0.67695-1.2001 1.2177-2.4878 1.5959-3.8432l6.7744-0.64056c0.22456-1.3148 0.34741-2.6598 0.34741-4.0386 0-1.3765-0.12361-2.726-0.34741-4.0386l-6.7744-0.64053c-0.37825-1.3554-0.91896-2.6431-1.5959-3.8432l4.3426-5.2437c-1.568-2.2146-3.507-4.1422-5.722-5.7101l-5.2437 4.3317c-1.2015-0.67776-2.486-1.2067-3.8432-1.585l-0.641-6.7853c-1.3123-0.22366-2.6518-0.34741-4.0278-0.34741zm0 14.776c5.0178 0 9.076 4.0691 9.076 9.0869s-4.0582 9.0869-9.076 9.0869-9.0869-4.0691-9.0869-9.0869 4.0691-9.0869 9.0869-9.0869z" />
+  </g>
+  <metadata
+     id="metadata57">
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
+        <dc:publisher>
+          <cc:Agent
+             rdf:about="http://openclipart.org/">
+            <dc:title>Openclipart</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/publicdomain/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>

src/index.css

@@ -77,3 +77,11 @@ ol, ul {
   justify-content: center;
   align-items: center;
 }
+
+.icon {
+  opacity: 0.4;
+}
+
+.icon:hover {
+  opacity: 0.6;
+}

src/index.js

@@ -32,6 +32,21 @@ const Images = [
     './black_king.svg',
 ];
 
+const SHUFFLING_ENABLED = 0;
+
+function getAllSettings() {
+  return [SHUFFLING_ENABLED];
+}
+
+function settingText(setting) {
+  switch(setting) {
+    case SHUFFLING_ENABLED:
+      return "Shuffle Back Row";
+    default:
+      return "";
+  }
+}
+
 function range(n) {
   return Array.from(Array(n).keys());
 }
@@ -123,6 +138,7 @@ class Board extends React.Component {
         hand: {
           heldPiece: null,
         },
+        settings: {},
       } : this.originalState();
   }
 
@@ -177,12 +193,12 @@ class Board extends React.Component {
     return "rnbqkbnr".split('').sort(() => Math.random() - 0.5).join('');
   }
 
-  resetWithShuffledBackRow() {
+  shuffledBackRowState() {
     const backRow = this.shuffledBackRow();
     const text = ["B", backRow, "pppppppp",
       "________", "________", "________", "________",
       "PPPPPPPP", backRow.toUpperCase()].join('');
-    this.setState(this.stateFromText(text));
+    return this.stateFromText(text);
   }
 
   textFromState() {
@@ -214,7 +230,12 @@ class Board extends React.Component {
   }
 
   doReset() {
-    this.setState(this.originalState());
+    this.setState(this.getSetting(SHUFFLING_ENABLED) ?
+      this.shuffledBackRowState() :
+      this.originalState());
+    this.setState({
+      showPopup: false,
+    });
   }
 
   originalState() {
@@ -243,6 +264,7 @@ class Board extends React.Component {
         heldPiece: null,
       },
       showPopup: false,
+      settings: {},
     });
   }
 
@@ -614,21 +636,55 @@ class Board extends React.Component {
     });
   }
 
+  setSetting(name, value) {
+    let settings = this.state.settings;
+    settings[name] = value;
+    this.setState({
+      settings
+    });
+  }
+
+  getSetting(name) {
+    return this.state.settings[name];
+  }
+
+  toggleSetting(name) {
+    console.log("toggle " + settingText(name));
+    let settings = this.state.settings;
+    settings[name] = !settings[name];
+    console.log(settings[name]);
+    this.setState({
+      settings: settings,
+    });
+  }
+
   renderPopup() {
     return (this.state.showPopup ?
-      <Popup
+     <Popup
-       header='QuickChess'
+      header='QuickChess'
-       closePopup={this.togglePopup.bind(this)}
+      closePopup={this.togglePopup.bind(this)}
-       body={<div>
+      body={<div>
 
-         <p>This is a simple implementation of the classic board game. It
+        <p>This is a simple implementation of the classic board game,
-         supports all possible moves, including castling, and <em>en
+        implemented in React. It supports all possible moves, including
-         passant</em>.</p>
+        castling, and <em>en passant</em>.</p>
 
-         <button onClick={
+        {
-           this.resetWithShuffledBackRow.bind(this)
+          getAllSettings().map(setting => {
-         }>Shuffled Back Row</button>
+            return (
-         <button onClick={this.doReset.bind(this)}>Reset Game</button>
+              <div>
+              <button onClick={this.toggleSetting.bind(this, setting)}>
+                {
+                  settingText(setting) +
+                  (this.getSetting(setting) ? " On" : " Off")
+                }
+              </button>
+              </div>
+            );
+          })
+        }
+
+        <button onClick={this.doReset.bind(this)}>Reset Game</button>
 
       </div>}
       />
@@ -651,10 +707,12 @@ class Board extends React.Component {
       <div style={{textAlign: `center`,}}>
         <div className="status">
           <h1 style={{display: "inline-block"}}>{status}</h1>
-          <button
+          <img
-            onClick={this.togglePopup.bind(this)}>
+            className="icon"
-            Settings
+            alt="Settings icon: a gear"
-          </button>
+            style={{height: "5vh", float: "right"}}
+            src="./gear.svg" onClick={this.togglePopup.bind(this)}>
+          </img>
         </div>
         {range(8).map(n => this.row(n))}
         {this.renderPopup()}