diff --git a/public/gear.svg b/public/gear.svg new file mode 100644 index 0000000..a6a13d3 --- /dev/null +++ b/public/gear.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + image/svg+xml + + + + + Openclipart + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index e3e8ae9..70eba15 100644 --- a/src/index.css +++ b/src/index.css @@ -77,3 +77,11 @@ ol, ul { justify-content: center; align-items: center; } + +.icon { + opacity: 0.4; +} + +.icon:hover { + opacity: 0.6; +} diff --git a/src/index.js b/src/index.js index 1b50b9c..0e3c9a2 100644 --- a/src/index.js +++ b/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 ? - + -

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

+

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

- - + { + getAllSettings().map(setting => { + return ( +
+ +
+ ); + }) + } + + } /> @@ -651,10 +707,12 @@ class Board extends React.Component {

{status}

- + Settings icon: a gear +
{range(8).map(n => this.row(n))} {this.renderPopup()}