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.
This commit is contained in:
Sage Vaillancourt 2021-01-02 00:46:08 -05:00
parent aed8003fdf
commit 5ffdf0a7a1
3 changed files with 161 additions and 18 deletions

77
public/gear.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

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

View File

@ -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,6 +636,28 @@ 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
@ -621,13 +665,25 @@ class Board extends React.Component {
closePopup={this.togglePopup.bind(this)}
body={<div>
<p>This is a simple implementation of the classic board game. It
supports all possible moves, including castling, and <em>en
passant</em>.</p>
<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>
{
getAllSettings().map(setting => {
return (
<div>
<button onClick={this.toggleSetting.bind(this, setting)}>
{
settingText(setting) +
(this.getSetting(setting) ? " On" : " Off")
}
</button>
</div>
);
})
}
<button onClick={
this.resetWithShuffledBackRow.bind(this)
}>Shuffled Back Row</button>
<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
onClick={this.togglePopup.bind(this)}>
Settings
</button>
<img
className="icon"
alt="Settings icon: a gear"
style={{height: "5vh", float: "right"}}
src="./gear.svg" onClick={this.togglePopup.bind(this)}>
</img>
</div>
{range(8).map(n => this.row(n))}
{this.renderPopup()}