Skip to content

Instantly share code, notes, and snippets.

@drenther drenther/App.js
Last active Mar 5, 2019

Embed
What would you like to do?
/** App.js **/
import React from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import { HEROES, COMICS } from './custom/data';
import { shuffle, move, GAME_STATE } from './custom/utils';
import Modal from './components/Modal';
import Header from './components/Header';
import Dropzone from './components/Dropzone';
import Footer from './components/Footer';
const GAME_DURATION = 1000 * 30; // 30 seconds
const initialState = {
// we initialize the state by populating the bench with a shuffled collection of heroes
bench: shuffle(HEROES),
[COMICS.DC]: [],
[COMICS.MARVEL]: [],
gameState: GAME_STATE.READY,
timeLeft: 0,
};
class App extends React.Component {
state = initialState;
onDragEnd = ({ source, destination }) => {
if (!destination) {
return;
}
this.setState(state => {
return move(state, source, destination);
});
};
render() {
const { gameState, timeLeft, bench, ...groups } = this.state;
const isDropDisabled = gameState === GAME_STATE.DONE;
return (
<>
<Header gameState={gameState} timeLeft={timeLeft} endGame={this.endGame} />
{this.state.gameState !== GAME_STATE.PLAYING && (
<Modal
startGame={this.startGame}
resetGame={this.resetGame}
timeLeft={timeLeft}
gameState={gameState}
groups={groups}
/>
)}
{(this.state.gameState === GAME_STATE.PLAYING ||
this.state.gameState === GAME_STATE.DONE) && (
<DragDropContext onDragEnd={this.onDragEnd}>
<div className="container">
<div className="columns">
<Dropzone
id={COMICS.MARVEL}
heroes={this.state[COMICS.MARVEL]}
isDropDisabled={isDropDisabled}
/>
<Dropzone id="bench" heroes={bench} isDropDisabled={isDropDisabled} />
<Dropzone
id={COMICS.DC}
heroes={this.state[COMICS.DC]}
isDropDisabled={isDropDisabled}
/>
</div>
</div>
</DragDropContext>
)}
<Footer />
</>
);
}
}
export default App;
/** custom/utils.js **/
import { HEROES, COMICS } from './data';
// the Knuth shuffle algorithm
export function shuffle(array) {
let currentIndex = array.length;
let temporaryValue;
let randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// method to handle to the heroe cards movement
export const move = (state, source, destination) => {
const srcListClone = [...state[source.droppableId]];
const destListClone =
source.droppableId === destination.droppableId
? srcListClone
: [...state[destination.droppableId]];
const [movedElement] = srcListClone.splice(source.index, 1);
destListClone.splice(destination.index, 0, movedElement);
return {
[source.droppableId]: srcListClone,
...(source.droppableId === destination.droppableId
? {}
: {
[destination.droppableId]: destListClone,
}),
};
};
// enums for representing the game state
export const GAME_STATE = {
READY: 'ready',
PLAYING: 'playing',
DONE: 'done',
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.