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
parent
aed8003fdf
commit
5ffdf0a7a1
|
|
@ -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 |
|
|
@ -77,3 +77,11 @@ ol, ul {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
|
|
|||
94
src/index.js
94
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
|
||||
header='QuickChess'
|
||||
closePopup={this.togglePopup.bind(this)}
|
||||
body={<div>
|
||||
<Popup
|
||||
header='QuickChess'
|
||||
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>
|
||||
|
||||
<button onClick={
|
||||
this.resetWithShuffledBackRow.bind(this)
|
||||
}>Shuffled Back Row</button>
|
||||
<button onClick={this.doReset.bind(this)}>Reset Game</button>
|
||||
{
|
||||
getAllSettings().map(setting => {
|
||||
return (
|
||||
<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
|
||||
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()}
|
||||
|
|
|
|||
Loading…
Reference in New Issue