Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
import React from 'react';
import { GAME_STATE, getSeconds } from '../custom/utils';
const Header = ({ timeLeft, gameState, endGame }) => (
<header className="navbar">
{gameState === GAME_STATE.PLAYING && (
<>
<section className="navbar-center text-error">{getSeconds(timeLeft)} Seconds Left</section>
<section className="navbar-center">
<button className="btn btn-default" onClick={endGame}>
End Game
</button>
</section>
</>
)}
</header>
);
export default Header;
import React from 'react';
import { GAME_STATE, getTotalScore } from '../custom/utils';
const Modal = ({ gameState, groups, startGame, timeLeft, resetGame }) => (
<div className="modal modal-sm active">
<div className="modal-overlay" />
<div className="modal-container">
<div className="modal-header">
<div className="modal-title h4">Line up the Heroes</div>
</div>
<div className="modal-body">
<div className="content h6">
{' '}
{gameState === GAME_STATE.READY
? `Drag and Drop the heroes in the correct comics list, sort them alphabetically and quickly for better score...`
: `You scored - ${getTotalScore(groups, timeLeft)}`}
</div>
</div>
<div className="modal-footer">
<button
className="btn btn-primary"
onClick={gameState === GAME_STATE.READY ? startGame : resetGame}
>
{gameState === GAME_STATE.READY ? 'Start new game' : 'Restart game'}
</button>
</div>
</div>
</div>
);
export default Modal;
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.