|
// console.clear(); |
|
|
|
/* |
|
* INTERFACES |
|
*/ |
|
interface GameState { |
|
whoClicked: string; |
|
yolo: boolean; |
|
hasTried: number; |
|
playerArray: number[]; |
|
simonArray: number[]; |
|
winArray: number[]; |
|
gameOver: boolean; |
|
gameSpeed: number; |
|
gameFlipped: boolean; |
|
gameText: string; |
|
} |
|
interface SimonState { |
|
game: GameState; |
|
buttons: AudioProps[]; |
|
buttonref0: string; |
|
buttonref1: string; |
|
buttonref2: string; |
|
buttonref3: string; |
|
insideDiv: string[]; |
|
outerDiv: string[]; |
|
cellClassName0: string[]; |
|
cellClassName1: string[]; |
|
cellClassName2: string[]; |
|
cellClassName3: string[]; |
|
} |
|
interface ScoreboardState { |
|
gameSpeed: number; // currentGameSpeed |
|
} |
|
|
|
interface ScoreboardProps { |
|
startIt: () => void; |
|
setGameSpeed: (newSpeed: number) => void; |
|
setSimonFlip: () => void; |
|
setSimonYolo: () => void; |
|
simonFlip: boolean; |
|
gameSpeed: number; |
|
gameText: string; |
|
simonYolo: boolean; |
|
playCount: number; |
|
winArraySum: number; |
|
} |
|
interface CheatProps { |
|
setSimonFlip: () => void; |
|
simonFlip: boolean; |
|
simonPlays: string[]; |
|
playerPlays: string[]; |
|
gamesPrevious: string; |
|
} |
|
interface CellsProps { |
|
disableCells: () => void; |
|
buzzCell: (cell: number) => void; |
|
cellClassName0: string[]; |
|
cellClassName1: string[]; |
|
cellClassName2: string[]; |
|
cellClassName3: string[]; |
|
} |
|
interface ZoomProps { |
|
setZoom: (level: string) => void; |
|
} |
|
interface AudioProps { |
|
key: number; |
|
idx: number; |
|
// thisCell: HTMLAudioElement; // HTMLDivElement / HTMLAudioElement / HTMLElement |
|
setCell: (cellId: number, cellRef?: HTMLAudioElement) => void; |
|
} |
|
|
|
// import { cellConvert, gameSpeeds, ui } from './config.js' |
|
const cellConvert = [ // Convert cell quadrants to array indexes. |
|
'ul', // 0 |
|
'ur', // 1 |
|
'll', // 2 |
|
'lr' // 3 |
|
], |
|
gameSpeeds = { |
|
1: {each: 900, wait: 700}, // Slow each; slow wait |
|
2: {each: 600, wait: 400}, // Default |
|
3: {each: 300, wait: 200}, // Quick each; quick wait |
|
// 1 2 3 |
|
// revealSimon - setInterval - every 600 buzzIt [400 / 600 / 800] |
|
// buzzIt - setTimeout - wait 400 then buzzOff [200 / 400 / 600] |
|
}, |
|
ui = {keyspecs: [ // Must stay in order |
|
{name: 'SPACE', code: ' ', cell: 'start'}, // Removed: To allow for toggle on checkboxes (default behavior) |
|
{name: 'ENTER', code: 'enter', cell: 'start'}, |
|
{name: 'ESC', code: 'escape', cell: 'start'}, |
|
{name: 's', code: 's', cell: 'simon-yolo'}, |
|
{name: 'r', code: 'r', cell: 'ul'}, {name: '1', code: '1', cell: 'ul'}, |
|
{name: 'b', code: 'b', cell: 'ur'}, {name: '2', code: '2', cell: 'ur'}, |
|
{name: 'g', code: 'g', cell: 'll'}, {name: '3', code: '3', cell: 'll'}, |
|
{name: 'y', code: 'y', cell: 'lr'}, {name: '4', code: '4', cell: 'lr'} |
|
]}; |
|
|
|
class Simon extends React.Component<{}, SimonState> { |
|
constructor(props: {}) { |
|
super(props); |
|
this.state = { |
|
game: { |
|
whoClicked: 's', // 's'|'p' (Simon or Player) - A controlled variable to be handled each click. |
|
yolo: false, // Strict Mode (no 2nd chance after a wrong click). |
|
hasTried: 0, // 0|1 - Allowed 1 retry (if yolo isn't true). |
|
playerArray: [], // Cells the player has clicked. |
|
simonArray: [], // Cells the game has chosen (added post-click). |
|
winArray: [], // [3,2,5,6,1,...] Number of successful clicks in previous games. |
|
gameOver: true, |
|
gameSpeed: 2, // [1-3] Slow, Medium*, Fast |
|
gameFlipped: false, // Used in both 'scoreboard' and 'cheat' panels (which side shows). |
|
gameText: 'Ready', // Main verbiage in middle of scoreboard. |
|
}, |
|
buttons: [], // interface SimonState { buttons: AudioProps[]; } |
|
// interface AudioProps { setCell: (cellId: number, cellRef?: HTMLAudioElement) => void; } |
|
buttonref0: '', |
|
buttonref1: '', |
|
buttonref2: '', |
|
buttonref3: '', |
|
insideDiv: ['inside'], |
|
outerDiv: ['outer'], |
|
cellClassName0: ['cell'], |
|
cellClassName1: ['cell'], |
|
cellClassName2: ['cell'], |
|
cellClassName3: ['cell'], |
|
}; |
|
this.handleKeyPress = this.handleKeyPress.bind(this); |
|
this.disableCells = this.disableCells.bind(this); |
|
this.setGameSpeed = this.setGameSpeed.bind(this); |
|
this.setGameText = this.setGameText.bind(this); |
|
this.setSimonFlip = this.setSimonFlip.bind(this); |
|
this.setSimonYolo = this.setSimonYolo.bind(this); |
|
this.setZoom = this.setZoom.bind(this); |
|
this.setCell = this.setCell.bind(this); |
|
|
|
this.generateNextCell = this.generateNextCell.bind(this); |
|
this.enableCells = this.enableCells.bind(this); |
|
this.revealSimon = this.revealSimon.bind(this); |
|
this.buzzCell = this.buzzCell.bind(this); |
|
this.startIt = this.startIt.bind(this); |
|
|
|
this.buzzIt = this.buzzIt.bind(this); |
|
this.buzzOn = this.buzzOn.bind(this); |
|
this.buzzOff = this.buzzOff.bind(this); |
|
} |
|
componentWillMount() { |
|
document.addEventListener('keydown', this.handleKeyPress); |
|
|
|
var buttons = Array.from(Array(4)); // Element |
|
for (var idx = 0; idx < 4; idx++) { |
|
buttons.push(<Audio key={idx} idx={idx} setCell={this.setCell} />); |
|
} |
|
this.setState({ buttons }); |
|
} |
|
componentDidMount() { |
|
document.addEventListener('keydown', this.handleKeyPress); |
|
} |
|
componentWillUnmount() { |
|
document.removeEventListener('keydown', this.handleKeyPress); |
|
} |
|
handleKeyPress(evt: KeyboardEvent) { |
|
// KeyboardEvent<HTMLElement> |
|
// React handleKeyPress -- Thanks to: https://codepen.io/anon/pen/ZOzaPW/ |
|
|
|
// [event.keyCode] is deprecated. |
|
// [event.key] is its replacement. |
|
// [event.code] is not supported well (2017-11-07). |
|
|
|
let eKey = evt.key.toLowerCase(); // / * - + Enter . Space |
|
|
|
if (//eKey === ui.keyspecs[0].code || // SPACE |
|
eKey === ui.keyspecs[1].code || // ENTER |
|
eKey === ui.keyspecs[2].code) { // ESCAPE |
|
evt.preventDefault(); |
|
|
|
this.startIt(); |
|
} |
|
if (eKey === ui.keyspecs[3].code) { // S (strict mode toggle) |
|
evt.preventDefault(); |
|
this.setState({ game: {...this.state.game, 'yolo': (this.state.game.yolo ? false : true) } }, () => { |
|
this.startIt(); |
|
}); |
|
} |
|
if (eKey === ui.keyspecs[4].code || eKey === ui.keyspecs[5].code) { // Red or 1 |
|
evt.preventDefault(); |
|
this.disableCells(); |
|
this.buzzCell(cellConvert.indexOf('ul')); |
|
} |
|
if (eKey === ui.keyspecs[6].code || eKey === ui.keyspecs[7].code) { // Blue or 2 |
|
evt.preventDefault(); |
|
this.disableCells(); |
|
this.buzzCell(cellConvert.indexOf('ur')); |
|
} |
|
if (eKey === ui.keyspecs[8].code || eKey === ui.keyspecs[9].code) { // Green or 3 |
|
evt.preventDefault(); |
|
this.disableCells(); |
|
this.buzzCell(cellConvert.indexOf('ll')); |
|
} |
|
if (eKey === ui.keyspecs[10].code || eKey === ui.keyspecs[11].code) { // Yellow or 4 |
|
evt.preventDefault(); |
|
this.disableCells(); |
|
this.buzzCell(cellConvert.indexOf('lr')); |
|
} |
|
} |
|
|
|
// 3 Aesthetic Functions to Highlight Cells |
|
|
|
buzzIt(cellId: number) { // cellId = [0-3] |
|
this.buzzOn(cellId); |
|
setTimeout( |
|
() => { |
|
this.buzzOff(cellId); |
|
}, |
|
gameSpeeds[this.state.game.gameSpeed].wait |
|
); // Show cell for partial second |
|
// gameSpeeds = { 1: { each: 400, wait: 200 }, |
|
} |
|
buzzOn(cellId: number) { |
|
|
|
let whichCell = 'cellClassName' + cellId.toString(), |
|
buttonref = 'buttonref' + cellId.toString(), |
|
newClassList = this.state[whichCell].slice(0), |
|
tmpObj = {}; |
|
|
|
newClassList.push('buzz', 'buzzed'); |
|
|
|
tmpObj[whichCell] = newClassList; |
|
this.setState( tmpObj ); |
|
// this.setState({ [whichCell]: newClassList }); // game |
|
|
|
// Sound /* id = simon-audio-[0-3] */ |
|
// Pausing and setting currentTime helps fix non-playing overlaps on fast mode. |
|
// Thanks to: https://stackoverflow.com/a/32041746/638153 |
|
|
|
this.state[buttonref].pause(); |
|
this.state[buttonref].currentTime = 0; |
|
this.state[buttonref].play(); |
|
} |
|
buzzOff(cellId: number) { |
|
|
|
let whichCell = 'cellClassName' + cellId, // cellClassName[0-3] |
|
newClassList = this.state[whichCell].slice(0), // Copy of specific cell's array of class names. |
|
indexBuzz = newClassList.indexOf('buzz'), // If class name 'buzz' exists, remove it. |
|
indexBuzzed = -1, |
|
tmpObj = {}; |
|
|
|
if (indexBuzz >= 0) { |
|
newClassList.splice(indexBuzz, 1); |
|
} |
|
indexBuzzed = newClassList.indexOf('buzzed'); // If class name 'buzzed' exists, remove it. |
|
if (indexBuzzed >= 0) { |
|
newClassList.splice(indexBuzzed, 1); |
|
} |
|
|
|
tmpObj[whichCell] = newClassList; |
|
this.setState( tmpObj ); |
|
} |
|
|
|
// Other Upper-Level Functions |
|
|
|
disableCells() { |
|
const outerDivClass = this.state.outerDiv.slice(0); |
|
outerDivClass.push('buzz'); |
|
this.setState({ outerDiv: outerDivClass }); |
|
} |
|
setGameSpeed(newSpeed: number) { |
|
this.setState({ game: {...this.state.game, gameSpeed: newSpeed } }); |
|
} |
|
setSimonFlip() { |
|
this.setState({ game: {...this.state.game, gameFlipped: !this.state.game.gameFlipped } }); |
|
} |
|
setSimonYolo() { |
|
this.setState({ game: {...this.state.game, yolo: (this.state.game.yolo ? false : true) } }, () => { |
|
this.startIt(); |
|
}); |
|
} |
|
setGameText(newVal: string) { |
|
this.setState({ game: {...this.state.game, 'gameText': newVal } }); |
|
} |
|
startIt() { |
|
// document.getElementById('start').addEventListener('click', function(e) { }); |
|
|
|
this.disableCells(); |
|
this.setState( |
|
{ game: { |
|
...this.state.game, |
|
whoClicked: 's', // this.setWhoClick('s') |
|
gameOver: false, // this.setGameOver(false) |
|
hasTried: 0, // this.setHasTried(0) |
|
gameText: 'In Play', // this.setGameText('In Play') |
|
playerArray: [], // this.resetCells() |
|
simonArray: [] // this.resetCells() |
|
} |
|
}, |
|
() => { |
|
// Issue with [space/enter] startIt() resetting and starting a new game, |
|
// but neither 'S' nor either click ('Strict' or 'Start') would start a new game. |
|
// Issue was with multiple (async) setStates being done in separate function calls called from startIt(). |
|
// Pulled each setState from their respective function calls and put directly into the startIt() function, |
|
// and put them all in the same setState action; as they should be (including resetCells). |
|
this.generateNextCell(); |
|
}); |
|
} |
|
generateNextCell() { |
|
// Wait 3/4 of a sec, then buzz the cell with [0-3]. |
|
setTimeout( () => { this.buzzCell(this.getRandomCell()); }, 750); |
|
} |
|
enableCells() { |
|
const outerDivClass = this.state.outerDiv.slice(0); |
|
outerDivClass.splice(outerDivClass.indexOf('buzz'), 1); |
|
this.setState({ outerDiv: outerDivClass }); |
|
// Array.from(document.getElementsByClassName('outer'))[0].classList.remove('buzz'); |
|
} |
|
getRandomCell() { |
|
return Math.floor(Math.random() * 4); |
|
} |
|
revealSimon() { |
|
var i = 0; |
|
var showThem = setInterval( |
|
() => { |
|
if (i < this.state.game.simonArray.length) { |
|
// Grab each index from the 'simonArray', and convert it to a cell ID. |
|
this.buzzIt(this.state.game.simonArray[i]); |
|
} else { |
|
clearInterval(showThem); |
|
// document.getElementById('game-over').innerText = 'Waiting...\r\n(it\'s your turn)'; |
|
// this.state.game.playerArray = []; |
|
this.setState( |
|
{ game: { |
|
...this.state.game, |
|
gameOver: false, |
|
gameText: 'Waiting...\r\n(it\'s your turn)', |
|
playerArray: [] |
|
} |
|
}, |
|
() => { |
|
this.enableCells(); |
|
}); |
|
} |
|
i++; |
|
// console.log('revealSimon: ', this.state.game.gameSpeed); |
|
// console.log('setInterval: ', gameSpeeds[this.state.game.gameSpeed].each); |
|
}, |
|
gameSpeeds[this.state.game.gameSpeed].each |
|
); |
|
// gameSpeeds = { |
|
// 1: { each: 400, wait: 200 }, |
|
} |
|
buzzCell(cell: number) { |
|
|
|
// This is the 'brains' of the app (i.e., the Controller). |
|
|
|
// cell = number [0-3] |
|
|
|
var // cellId = cellConvert[cell], // cellId = 'ul'|'ur'|'ll'|'lr' |
|
turnSimon = this.state.game.whoClicked === 's', |
|
gameOver = this.state.game.gameOver; // && this.state.game.gameText.toLowerCase() !== 'ready' |
|
|
|
// console.log('buzzCell: ', cell, cellId, turnSimon, gameOver); // 3, lr, true, false |
|
|
|
if (gameOver) { |
|
|
|
this.buzzIt(cell); // Just for fun... game is over. |
|
setTimeout( () => this.enableCells(), 100); |
|
|
|
} else if (turnSimon) { |
|
|
|
let // { simonArray, whoClicked } = this.state.game, |
|
simonArrayNew = this.state.game.simonArray.slice(0); |
|
|
|
simonArrayNew.push(cell); |
|
|
|
this.setState({ game: {...this.state.game, simonArray: simonArrayNew } }, () => { |
|
|
|
// game.simonArray.push(cell); // [0,1,2,3,0,1,2,3] |
|
// updatePlayCountDisplay(); // Should be run whenever simonArray is changed. |
|
|
|
// Show all of Simon's moves. |
|
this.revealSimon(); |
|
|
|
// Swap side back to player. |
|
// game.whoClicked = 'p'; // Control the var! |
|
this.setState({ game: {...this.state.game, whoClicked: 'p' } }); |
|
}); |
|
|
|
} else { |
|
// Player's Turn |
|
|
|
let // { playerArray, gameOver, gameText, hasTried, whoClicked, winArray } = this.state.game, |
|
playerArrayNew = this.state.game.playerArray.slice(0), |
|
winArrayNew = this.state.game.winArray.slice(0); |
|
|
|
// Store it. |
|
// game.playerArray.push(cell); // [] ... [3] |
|
playerArrayNew.push(cell); |
|
|
|
// console.log('buzzCell ELSE: ', cell, cellId, turnSimon, gameOver); |
|
|
|
this.setState({ game: {...this.state.game, playerArray: playerArrayNew } }, () => { |
|
|
|
// Buzz it. |
|
this.buzzIt(cell); |
|
|
|
let tempCheck = false; |
|
// Then test them all. |
|
for (var i = 0; i < this.state.game.playerArray.length; i++) { |
|
if (this.state.game.playerArray[i] !== this.state.game.simonArray[i]) { |
|
// Incorrect - Reset |
|
this.setState({ game: {...this.state.game, playerArray: [] } }); |
|
tempCheck = true; |
|
// game.playerArray = []; |
|
break; |
|
} |
|
} |
|
|
|
if (tempCheck) { // this.state.game.playerArray.length === 0 // State isn't set yet (async)... |
|
// An incorrect cell was clicked (and playerArray was zeroed out). |
|
if (this.state.game.hasTried === 0 && !this.state.game.yolo) { |
|
// document.getElementById('game-over').innerText = '...whoops!!!'; |
|
// game.hasTried = 1; |
|
this.setState( |
|
{ game: { |
|
...this.state.game, |
|
gameText: '...whoops!!!', |
|
hasTried: 1 |
|
} |
|
}, |
|
() => { |
|
this.revealSimon(); |
|
}); |
|
} else { |
|
winArrayNew.push(this.state.game.simonArray.length); |
|
this.setState( |
|
{ game: { |
|
...this.state.game, |
|
gameOver: true, |
|
gameText: 'Lost', |
|
hasTried: 0, |
|
whoClicked: 's', |
|
winArray: winArrayNew, |
|
playerArray: [], |
|
simonArray: [] |
|
} |
|
}, |
|
() => { |
|
this.enableCells(); |
|
// this.resetCells(); |
|
}); |
|
// game.gameOver = true; |
|
// document.getElementById('game-over').innerText = 'Lost'; |
|
// game.hasTried = 0; |
|
// game.whoClicked = 's'; // Control the var! |
|
// game.winArray.push(game.simonArray.length); |
|
} |
|
|
|
} else if (this.state.game.playerArray.length === 20) { |
|
|
|
// You Won!!! |
|
winArrayNew.push(20); |
|
this.setState( |
|
{ game: { |
|
...this.state.game, |
|
gameOver: true, |
|
gameText: 'Won!!!', |
|
hasTried: 0, |
|
winArray: winArrayNew |
|
} |
|
}, |
|
() => { |
|
this.enableCells(); |
|
}); |
|
// game.gameOver = true; |
|
// document.getElementById('game-over').innerText = 'Won!!!'; |
|
// game.hasTried = 0; |
|
// game.winArray.push(20); |
|
|
|
} else if (this.state.game.playerArray.length === this.state.game.simonArray.length) { |
|
|
|
// You survived another round!!! |
|
this.setState( |
|
{ game: { |
|
...this.state.game, |
|
gameText: 'In Play', |
|
hasTried: 0, |
|
whoClicked: 's', |
|
playerArray: [] |
|
} |
|
}, |
|
(): void => { |
|
this.generateNextCell(); |
|
}); |
|
// document.getElementById('game-over').innerText = 'In Play'; |
|
// game.hasTried = 0; |
|
// game.whoClicked = 's'; // Control the var! |
|
// game.playerArray = []; |
|
|
|
} else { |
|
this.enableCells(); |
|
} |
|
}); |
|
} |
|
} |
|
setCell(cellId: number, cellRef?: HTMLAudioElement) { |
|
// Per: https://stackoverflow.com/a/29281499/638153 |
|
let tmpRef = {}; |
|
tmpRef['buttonref' + cellId.toString()] = cellRef; |
|
this.setState(tmpRef); |
|
|
|
// Untested fallback |
|
// let newButtonRef = 'buttonref' + cellId.toString(); |
|
// this.setState({ ...this.state, [newButtonRef]: cellRef }); |
|
} |
|
setZoom(level: string) { |
|
let insideDivNew = this.state.insideDiv.slice(0), |
|
outerDivNew = this.state.outerDiv.slice(0); |
|
|
|
// if (0-50) Remove 0-75, Add 0-50 | if (0-75) Remove 0-50, Add 0-75 | else; Remove both |
|
if (level === '0-50') { |
|
// console.log('here 0-50'); |
|
let insideDivHas75 = insideDivNew.indexOf('zoom-0-75'), |
|
outerDivHas75 = outerDivNew.indexOf('outer-h-0-75'); |
|
|
|
if (insideDivHas75 >= 0) { insideDivNew.splice(insideDivHas75, 1); } |
|
if (outerDivHas75 >= 0) { outerDivNew.splice(outerDivHas75, 1); } |
|
insideDivNew.push('zoom-0-50'); |
|
outerDivNew.push('outer-h-0-50'); |
|
|
|
this.setState({insideDiv: insideDivNew}); |
|
this.setState({outerDiv: outerDivNew}); |
|
} else if (level === '0-75') { |
|
// console.log('here 0-75'); |
|
let insideDivHas50 = insideDivNew.indexOf('zoom-0-50'), |
|
outerDivHas50 = outerDivNew.indexOf('outer-h-0-50'); |
|
|
|
if (insideDivHas50 >= 0) {insideDivNew.splice(insideDivHas50, 1); } |
|
if (outerDivHas50 >= 0) {outerDivNew.splice(outerDivHas50, 1); } |
|
insideDivNew.push('zoom-0-75'); |
|
outerDivNew.push('outer-h-0-75'); |
|
|
|
this.setState({insideDiv: insideDivNew}); |
|
this.setState({outerDiv: outerDivNew}); |
|
} else { // '1-00' |
|
// console.log('here 1-00'); |
|
let insideDivHas50 = insideDivNew.indexOf('zoom-0-50'), |
|
outerDivHas50 = outerDivNew.indexOf('outer-h-0-50'), |
|
insideDivHas75 = -1, |
|
outerDivHas75 = -1; |
|
|
|
if (insideDivHas50 >= 0) { insideDivNew.splice(insideDivHas50, 1); } |
|
insideDivHas75 = insideDivNew.indexOf('zoom-0-75'); |
|
if (insideDivHas75 >= 0) { insideDivNew.splice(insideDivHas75, 1); } |
|
|
|
if (outerDivHas50 >= 0) { outerDivNew.splice(outerDivHas50, 1); } |
|
outerDivHas75 = outerDivNew.indexOf('outer-h-0-75'); |
|
if (outerDivHas75 >= 0) { outerDivNew.splice(outerDivHas75, 1); } |
|
|
|
this.setState({insideDiv: insideDivNew}); |
|
this.setState({outerDiv: outerDivNew}); |
|
} |
|
} |
|
render() { |
|
return ( |
|
<main> |
|
<div className="hidden"> |
|
<div>whoClicked: {this.state.game.whoClicked}</div> |
|
<div>yolo: {this.state.game.yolo ? 'true' : 'false'}</div> |
|
<div>hasTried: {this.state.game.hasTried}</div> |
|
<div>playerArray: {this.state.game.playerArray}</div> |
|
<div>simonArray: {this.state.game.simonArray}</div> |
|
<div>winArray: {this.state.game.winArray}</div> |
|
<div>gameOver: {this.state.game.gameOver ? 'true' : 'false'}</div> |
|
<div>gameSpeed: {this.state.game.gameSpeed}</div> |
|
<div>gameFlipped: {this.state.game.gameFlipped ? 'true' : 'false'}</div> |
|
<div>gameText: {this.state.game.gameText}</div> |
|
</div> |
|
<div className="container"> |
|
<div className={this.state.outerDiv.toString().replace(/\,/g, ' ')}>{/* outer */} |
|
<img src="https://dummyimage.com/50x50/000/fff.gif&text=50x50" className="sq-setter-w" /> |
|
{/* @TODO: Bring <img> down local */} |
|
<div className={this.state.insideDiv.toString().replace(/\,/g, ' ')}>{/* inside */} |
|
<div className="inside2"> |
|
<Scoreboard |
|
startIt={this.startIt} |
|
setGameSpeed={this.setGameSpeed} |
|
setSimonFlip={this.setSimonFlip} |
|
setSimonYolo={this.setSimonYolo} |
|
simonFlip={this.state.game.gameFlipped} |
|
gameSpeed={this.state.game.gameSpeed} |
|
gameText={this.state.game.gameText} |
|
simonYolo={this.state.game.yolo} |
|
playCount={this.state.game.simonArray.length} |
|
winArraySum={this.state.game.winArray.reduce( |
|
(sum, score) => { return (score === 20) ? sum + 1 : sum; }, 0)} |
|
/> |
|
<Cheat |
|
setSimonFlip={this.setSimonFlip} |
|
simonFlip={this.state.game.gameFlipped} |
|
simonPlays={this.state.game.simonArray.map( |
|
cell => { return cell === 0 ? ' R' : cell === 1 ? ' B' : cell === 2 ? ' G' : ' Y'; } )} |
|
playerPlays={this.state.game.playerArray.map( |
|
cell => { return cell === 0 ? ' R' : cell === 1 ? ' B' : cell === 2 ? ' G' : ' Y'; } )} |
|
gamesPrevious={JSON.stringify(this.state.game.winArray)} |
|
/> |
|
<Cells |
|
disableCells={this.disableCells} |
|
buzzCell={this.buzzCell} |
|
cellClassName0={this.state.cellClassName0} |
|
cellClassName1={this.state.cellClassName1} |
|
cellClassName2={this.state.cellClassName2} |
|
cellClassName3={this.state.cellClassName3} |
|
/> |
|
</div> |
|
</div> |
|
<Zoom setZoom={this.setZoom} /> |
|
</div> |
|
<Rules /> |
|
<div> |
|
{/* Add the HTML Audio Tags that were added to buttons[] in `componentWillMount` */} |
|
{this.state.buttons.map( tag => tag )} |
|
</div> |
|
|
|
</div> |
|
</main> |
|
); |
|
} |
|
} |
|
|
|
// END OF MAIN SIMON COMPONENT CLASS |
|
|
|
class Scoreboard extends React.Component<ScoreboardProps, ScoreboardState> { |
|
constructor(props: ScoreboardProps) { |
|
super(props); |
|
|
|
let currentGameSpeed = this.props.gameSpeed; |
|
|
|
this.state = { |
|
gameSpeed: currentGameSpeed, |
|
}; |
|
|
|
this.simonSpeed = this.simonSpeed.bind(this); |
|
this.propStartIt = this.propStartIt.bind(this); |
|
} |
|
componentDidMount() { |
|
// this.refs.divFocus.focus(); |
|
} |
|
propStartIt(e: React.SyntheticEvent<HTMLButtonElement>) { |
|
e.preventDefault(); |
|
this.props.startIt(); |
|
} |
|
simonSpeed(e: React.SyntheticEvent<HTMLInputElement>) { |
|
let newSpeed = (e.currentTarget.value === '1') ? 1 : (e.currentTarget.value === '3') ? 3 : 2; |
|
this.setState({gameSpeed: newSpeed}, () => { |
|
this.props.setGameSpeed(this.state.gameSpeed); |
|
}); |
|
} |
|
render() { |
|
return ( |
|
<div className={'scoreboard' + (this.props.simonFlip ? ' flip' : '')}> |
|
<div className="scoreboard-top"> |
|
<div className="div-start">Start: |
|
<button type="button" id="start" onClick={this.propStartIt} autoFocus={true} /> |
|
</div> |
|
<div className="clearb" /> |
|
<div> |
|
<span title="In Strict mode, no 2nd chances if you mess up.">Strict: |
|
<input |
|
type="checkbox" |
|
id="simon-yolo" |
|
onChange={this.props.setSimonYolo} |
|
checked={this.props.simonYolo} |
|
/> |
|
</span> |
|
<span title="Turn on cheat mode">Insights: |
|
<input |
|
type="checkbox" |
|
id="simon-cheat" |
|
onChange={this.props.setSimonFlip} |
|
checked={this.props.simonFlip} |
|
/> |
|
</span> |
|
</div> |
|
<div className="clearb" /> |
|
<div>Speed <small>(1-3)</small>: |
|
<input |
|
type="number" |
|
id="simon-speed" |
|
min="1" |
|
max="3" |
|
onChange={this.simonSpeed} |
|
value={this.state.gameSpeed} |
|
/> |
|
</div> |
|
</div> |
|
<div className="scoreboard-middle"> |
|
<div><div className="game-is"><span>Game is: |
|
<span id="game-over">{this.props.gameText}</span></span></div> |
|
</div> |
|
</div> |
|
<div className="scoreboard-bottom"> |
|
<div>Play Count: <span id="play-count">{this.props.playCount}</span></div> |
|
<div className="clearb" /> |
|
<div>Wins: <span id="game-wins">{this.props.winArraySum}</span></div> |
|
</div> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
class Cheat extends React.Component<CheatProps, {}> { |
|
constructor(props: CheatProps) { |
|
super(props); |
|
} |
|
render() { |
|
return ( |
|
<div className={'cheat' + (this.props.simonFlip ? ' flip' : '')}> |
|
<div className="cheat-first" title="Turn off cheat mode">Insights: |
|
<input |
|
type="checkbox" |
|
id="simon-cheat-reverse" |
|
onChange={this.props.setSimonFlip} |
|
checked={this.props.simonFlip} |
|
/> |
|
</div> |
|
<div>Simon's Plays: <span id="simon-plays">{this.props.simonPlays}</span></div> |
|
<div>Player's Steps: <span id="player-plays">{this.props.playerPlays}</span></div> |
|
<div>Previous Scores: <span id="games-previous">{this.props.gamesPrevious}</span></div> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
class Cells extends React.Component<CellsProps, {}> { |
|
constructor(props: CellsProps) { |
|
super(props); |
|
this.registerClick = this.registerClick.bind(this); |
|
} |
|
registerClick(e: React.SyntheticEvent<HTMLDivElement>) { |
|
this.props.disableCells(); |
|
|
|
// [cellConvert] Maps the cell ID ('ul') to its index [0-3]. |
|
this.props.buzzCell(cellConvert.indexOf(e.currentTarget.id)); |
|
} |
|
render() { |
|
return ( |
|
<div className="cells"> |
|
<div |
|
id="ul" |
|
className={this.props.cellClassName0.toString().replace(/\,/g, ' ')} |
|
tabIndex={0} |
|
onClick={this.registerClick} |
|
/> |
|
<div |
|
id="ur" |
|
className={this.props.cellClassName1.toString().replace(/\,/g, ' ')} |
|
tabIndex={0} |
|
onClick={this.registerClick} |
|
/> |
|
<div |
|
id="ll" |
|
className={this.props.cellClassName2.toString().replace(/\,/g, ' ')} |
|
tabIndex={0} |
|
onClick={this.registerClick} |
|
/> |
|
<div |
|
id="lr" |
|
className={this.props.cellClassName3.toString().replace(/\,/g, ' ')} |
|
tabIndex={0} |
|
onClick={this.registerClick} |
|
/> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
class Zoom extends React.Component<ZoomProps, {}> { |
|
constructor(props: ZoomProps) { |
|
super(props); |
|
this.setTheZoom = this.setTheZoom.bind(this); |
|
} |
|
setTheZoom(e: React.SyntheticEvent<HTMLButtonElement>) { |
|
this.props.setZoom(e.currentTarget.className.substring(11)); |
|
} |
|
render() { |
|
return ( |
|
<div className="zoom"> |
|
<button className="click-zoom-1-00" onClick={this.setTheZoom}>Zoom Full</button> |
|
<button className="click-zoom-0-75" onClick={this.setTheZoom}>Zoom 3/4</button> |
|
<button className="click-zoom-0-50" onClick={this.setTheZoom}>Zoom 1/2</button> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
class Rules extends React.Component { |
|
render() { |
|
return( |
|
<div> |
|
<div className="rules"> |
|
<b>Rules:</b> |
|
Successfully remember (or guess) up to 20 in a row to win. |
|
With 'Strict' mode turned off, you get 1 second chance if you mess up |
|
(Simon will automatically show you the way... <i>yet again</i>). |
|
Now go play and have fun! |
|
</div> |
|
<div className="rules keynav" tabIndex={0}> |
|
<b><u>Keyboard Navigation:</u></b><br/> |
|
<b>Enter</b>: Begin a new game.<br/> |
|
<b>Escape</b>: Begin a new game.<br/> |
|
<b>S</b>: Toggle Strict Mode and begin a new game.<br/> |
|
<b>R</b> | <b>1</b>: Red cell.<br/> |
|
<b>B</b> | <b>2</b>: Blue cell.<br/> |
|
<b>G</b> | <b>3</b>: Green cell.<br/> |
|
<b>Y</b> | <b>4</b>: Yellow cell.<br/> |
|
</div> |
|
<div className="rules"> |
|
<b>Attribution:</b> |
|
<ul> |
|
<li>Learn More about |
|
<a href="https://en.wikipedia.org/wiki/Simon_(game)" target="kdcNewWin">Simon the Game</a>. |
|
</li> |
|
<li> |
|
<a |
|
href="https://www.hasbro.com/en-us/product/simon-game:6B0A06E3-5056-9047-F532-6A891FAEBA15" |
|
target="kdcNewWin" |
|
>Buy Simon |
|
</a> from Hasbro. |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
class Audio extends React.Component<AudioProps, {}> { |
|
refs: { |
|
[key: string]: (HTMLAudioElement) |
|
'child0': (HTMLAudioElement) // !important <Audio |
|
'child1': (HTMLAudioElement) |
|
'child2': (HTMLAudioElement) |
|
'child3': (HTMLAudioElement) |
|
}; |
|
constructor(props: AudioProps) { |
|
super(props); |
|
} |
|
componentDidMount() { |
|
// AUDIO HANDLING |
|
var t1 = 'child' + this.props.idx.toString(); |
|
|
|
// each 'thisCell' (buttons[] array entry) begins empty |
|
if (this.refs['child' + this.props.idx]) { |
|
this.props.setCell(this.props.idx, this.refs[t1]); |
|
} |
|
} |
|
render() { |
|
let tmpAudio = {id: '', src: ''}, |
|
{idx} = this.props; // idx = [0-3] |
|
|
|
tmpAudio.id = 'simon-audio-' + idx; |
|
tmpAudio.src = 'https://s3.amazonaws.com/freecodecamp/simonSound' + (idx + 1) + '.mp3'; |
|
|
|
return ( |
|
<audio |
|
id={tmpAudio.id} |
|
src={tmpAudio.src} |
|
preload="auto" |
|
autoPlay={false} |
|
itemType="audio/mpeg" |
|
ref={'child' + idx.toString()} |
|
/> |
|
); |
|
} |
|
} |
|
|
|
ReactDOM.render( |
|
<Simon />, |
|
root |
|
) |
