Merge pull request #1 from szokeasaurusrex/development

First fully working version of game

README.md

@@ -1,2 +1,11 @@
-# resistance
-Online multiplayer implementation of resistance game
+# Resistance
+Browser-based implementation of *The Resistance*, a great game for
+playing in groups of five to ten people. One round lasts about 15 to 30 minutes.
+More information about game-play can be found at
+[this link](https://en.wikipedia.org/wiki/The_Resistance_(game)#Gameplay).
+
+## Disclaimer
+*The Resistance* is designed by Don Eskridge (the Designer) and published by
+Indie Boards & Cards (the Publisher). This software is an unofficial fan
+project. The developers of this software are in no way affiliated with, and this
+software is in no way endorsed by, the Designer or the Publisher.

components/Create.js

@@ -0,0 +1,66 @@
+'use strict'
+
+import React from 'react'
+import Overlay from './Overlay.js'
+import Spinner from './Spinner.js'
+import { Form, FormGroup, Button, Input, Label, Row, Col } from 'reactstrap'
+import FontAwesomerIcon from './FontAwesomerIcon.js'
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
+
+export default class Create extends React.Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ loading: false
+ }
+ this.submit = this.submit.bind(this)
+ }
+ async submit (event) {
+ this.setState({
+ loading: true
+ })
+ if (!(await this.props.onSubmit(event))) {
+ this.setState({
+ loading: false
+ })
+ }
+ }
+ render () {
+ const { children, onSubmit, onClickBack, ...rest } = this.props
+ return (
+ <div {...rest}>
+ <Form {...rest} onSubmit={this.submit}>
+ <FormGroup>
+ <Label for='name'>Name:</Label>
+ <Input type='text' name='name' id='name-input'
+ placeholder='Enter your name' required />
+ </FormGroup>
+ <Row>
+ <Col md='4'>
+ <Button type='button' color='secondary' size='lg' block
+ onClick={onClickBack}>
+ <FontAwesomerIcon icon={faArrowLeft} /> Back
+ </Button>
+ <br />
+ </Col>
+ <Col md='4' />
+ <Col md='4'>
+ <Button color='primary' size='lg' block>
+ Create game <FontAwesomerIcon icon={faArrowRight} />
+ </Button>
+ <br />
+ </Col>
+ </Row>
+ </Form>
+
+ { this.state.loading &&
+ <Overlay>
+ <h6>Creating game...</h6>
+ <br />
+ <Spinner />
+ </Overlay>
+ }
+ </div>
+ )
+ }
+}

components/FontAwesomerIcon.js

@@ -0,0 +1,25 @@
+'use strict'
+
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export default class FontAwesomerIcon extends React.Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ icon: null
+ }
+ }
+ componentDidMount () {
+ this.setState({
+ icon: <FontAwesomeIcon {...this.props} />
+ })
+ }
+ render () {
+ return (
+ <span>
+ { this.state.icon }
+ </span>
+ )
+ }
+}

components/GameInProgress.js

@@ -0,0 +1,97 @@
+'use strict'
+
+/* global confirm */
+
+import React from 'react'
+import TeamInfo from './TeamInfo.js'
+import Mission from './Mission.js'
+import Vote from './Vote.js'
+import Scores from './Scores.js'
+import MissionReference from './MissionReference.js'
+import VoteResults from './VoteResults.js'
+import FontAwesomerIcon from './FontAwesomerIcon.js'
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
+import { Row, Col, Button } from 'reactstrap'
+
+export default class GameInProgress extends React.Component {
+ constructor (props) {
+ super(props)
+ this.endRound = this.endRound.bind(this)
+ }
+ endRound () {
+ if (this.props.gameStatus.winner ||
+ confirm('Are you sure you want to end the round?')) {
+ this.props.socketEmmitter('endRound', null, 'Ending round')
+ }
+ }
+ render () {
+ const {
+ gameStatus,
+ canHideTeam,
+ myPlayer,
+ socketEmmitter,
+ draftProposal,
+ ...rest
+ } = this.props
+ const voting = gameStatus.voting
+
+ return (
+ <div {...rest}>
+ { process.env.NODE_ENV !== 'production' &&
+ <p>Player name: {myPlayer.name}</p>
+ }
+ <Scores
+ gameStatus={gameStatus}
+ />
+ <hr />
+ <TeamInfo
+ canHideTeam={canHideTeam}
+ myPlayer={myPlayer}
+ gameStatus={gameStatus}
+ />
+ <br />
+ <VoteResults
+ voteResults={gameStatus.voteResults || {}}
+ myPlayer={myPlayer}
+ />
+ { voting && !gameStatus.winner &&
+ <div>
+ <Vote
+ voting={voting}
+ socketEmmitter={socketEmmitter}
+ myPlayer={myPlayer}
+ />
+ <br />
+ </div>
+ }
+ { canHideTeam && !gameStatus.winner &&
+ <div>
+ <Mission
+ myPlayer={myPlayer}
+ gameStatus={gameStatus}
+ draftProposal={draftProposal}
+ socketEmmitter={socketEmmitter}
+ voting={voting}
+ />
+ <br />
+ <MissionReference
+ numPlayers={gameStatus.numPlayers}
+ numSpies={gameStatus.numSpies}
+ missions={gameStatus.missions}
+ />
+ </div>
+ }
+ <hr />
+ <br />
+ <Row>
+ <Col md='3'>
+ <Button color='dark' size='lg' block onClick={this.endRound}>
+ <FontAwesomerIcon icon={faTrashAlt} /> End round
+ </Button>
+ </Col>
+ </Row>
+ <br />
+ </div>
+ )
+ }
+}

components/Home.js

@@ -0,0 +1,30 @@
+'use strict'
+
+import React from 'react'
+import { Row, Col, Button } from 'reactstrap'
+import FontAwesomerIcon from './FontAwesomerIcon.js'
+import { faPlus, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
+
+export default class Home extends React.Component {
+ render () {
+ const { children, onClickCreate, onClickJoin, ...rest } = this.props
+ return (
+ <Row {...rest}>
+ <Col md='1' />
+ <Col md='4'>
+ <Button color='primary' size='lg' block onClick={onClickCreate}>
+ <FontAwesomerIcon icon={faPlus} /> Create game
+ </Button>
+ <br />
+ </Col>
+ <Col md='2' />
+ <Col md='4'>
+ <Button color='secondary' size='lg' block onClick={onClickJoin}>
+ <FontAwesomerIcon icon={faSignInAlt} /> Join game
+ </Button>
+ <br />
+ </Col>
+ </Row>
+ )
+ }
+}

components/Join.js

@@ -0,0 +1,71 @@
+'use strict'
+
+import React from 'react'
+import Overlay from './Overlay.js'
+import Spinner from './Spinner.js'
+import { Form, FormGroup, Button, Input, Label, Row, Col } from 'reactstrap'
+import FontAwesomerIcon from './FontAwesomerIcon.js'
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
+
+export default class Create extends React.Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ loading: false
+ }
+ this.submit = this.submit.bind(this)
+ }
+ async submit (event) {
+ this.setState({
+ loading: true
+ })
+ if (!(await this.props.onSubmit(event))) {
+ this.setState({
+ loading: false
+ })
+ }
+ }
+ render () {
+ const { children, onSubmit, onClickBack, ...rest } = this.props
+ return (
+ <div {...rest}>
+ <Form onSubmit={this.submit}>
+ <FormGroup>
+ <Label for='code'>Game code:</Label>
+ <Input type='number' name='code' id='game-code-input'
+ placeholder='Enter the game code' required />
+ </FormGroup>
+ <FormGroup>
+ <Label for='name'>Name:</Label>
+ <Input type='text' name='name' id='name-input'
+ placeholder='Enter your name' required />
+ </FormGroup>
+ <Row>
+ <Col md='4'>
+ <Button type='button' color='secondary' size='lg' block
+ onClick={onClickBack}>
+ <FontAwesomerIcon icon={faArrowLeft} /> Back
+ </Button>
+ <br />
+ </Col>
+ <Col md='4' />
+ <Col md='4'>
+ <Button color='primary' size='lg' block>
+ Join game <FontAwesomerIcon icon={faArrowRight} />
+ </Button>
+ <br />
+ </Col>
+ </Row>
+ </Form>
+
+ { this.state.loading &&
+ <Overlay>
+ <h6>Joining game...</h6>
+ <br />
+ <Spinner />
+ </Overlay>
+ }
+ </div>
+ )
+ }
+}