Skip to content

Commit

Permalink
Refactor to use redux
Browse files Browse the repository at this point in the history
  • Loading branch information
Ian-MacLeod committed Nov 16, 2017
1 parent 559d5c9 commit 92ab9c3
Show file tree
Hide file tree
Showing 19 changed files with 450 additions and 259 deletions.
4 changes: 4 additions & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,16 @@
"proxy": "http://localhost:5000/",
"dependencies": {
"bootstrap": "^3.3.7",
"prop-types": "^15.6.0",
"react": "^15.5.4",
"react-bootstrap": "^0.31.3",
"react-dom": "^15.5.4",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"socket.io-client": "^1.7.3"
},
"devDependencies": {
"react-devtools": "^3.0.0",
"react-scripts": "0.9.5"
},
"scripts": {
Expand Down
44 changes: 0 additions & 44 deletions client/src/App.js

This file was deleted.

69 changes: 69 additions & 0 deletions client/src/actions/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
* Action types
*/

// Lobby
export const JOIN_TABLE = 'JOIN_TABLE';
export const LEAVE_TABLE = 'LEAVE_TABLE';
export const SELECT_TABLE = 'SELECT_TABLE';
export const UPDATE_TABLE_LIST = 'UPDATE_TABLE_LIST';

// Table
export const TAKE_SEAT = 'TAKE_SEAT';
export const STAND_UP = 'STAND_UP';
export const DEAL_CARDS = 'DEAL_CARDS';
export const SHOW_CARDS = 'SHOW_CARDS';
export const CLEAR_CARDS = 'CLEAR_CARDS';
export const UPDATE_GAME_STATE = 'UPDATE_GAME_STATE';

// Chat
export const ADD_CHAT_MESSAGE = 'ADD_CHAT_MESSAGE';


/*
* Action creators
*/

export const joinTable = (name) => {
return {type: JOIN_TABLE, name};
};

export const leaveTable = () => {
return {type: LEAVE_TABLE};
};

export const selectTable = (name) => {
return {type: SELECT_TABLE, name};
}

export const updateTableList = (tableList) => {
return {type: UPDATE_TABLE_LIST, tableList};
};

export const takeSeat = (seatNum) => {
return {type: TAKE_SEAT, seatNum};
}

export const standUp = () => {
return {type: STAND_UP};
};

export const dealCards = () => {
return {type: DEAL_CARDS};
}

export const showCards = (handList) => {
return {type: SHOW_CARDS, handList};
}

export const clearCards = () => {
return {type: CLEAR_CARDS}
}

export const updateGameState = (newState) => {
return {type: UPDATE_GAME_STATE, newState};
}

export const addChatMessage = (message) => {
return {type: ADD_CHAT_MESSAGE, message};
}
13 changes: 13 additions & 0 deletions client/src/components/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import Table from './Table'
import Lobby from './Lobby'

const App = () => (
<div className="content">
<h1>HU4Rolls</h1>
<Lobby />
<Table />
</div>
);

export default App;
File renamed without changes.
72 changes: 32 additions & 40 deletions client/src/components/Lobby/index.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,19 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { selectTable } from 'actions';
import './styles.css';


class Lobby extends Component {
constructor() {
super();
this.state = {tableList: [],
selectedTable: null};
this.selectTable = this.selectTable.bind(this);
this.joinTable = this.joinTable.bind(this);
}

componentDidMount() {
this.props.socket.on('table list', tableList => {
let new_state = {tableList: tableList || []};
if(tableList.length && tableList.indexOf(this.state.selectedTable) === -1){
new_state.selectedTable = tableList[0].name;
}
this.setState(new_state);
});
console.log('getting list');
this.props.socket.emit('get table list');
setTimeout(function(){
console.log('getting list');
this.props.socket.emit('get table list');
}.bind(this), 1000);
}

selectTable(tableName) {
return () => {
this.setState({selectedTable: tableName});
}
}

joinTable() {
if (this.state.selectedTable !== null){
this.props.socket.emit('join table', this.state.selectedTable);
}
onJoinTable() {
this.context.socket.emit('join table', this.props.selectedTable);
}

render() {
const tableItems = this.state.tableList.map(tableInfo =>
const tableItems = this.props.tableList.map(tableInfo =>
<tr key={tableInfo.name}
className={tableInfo.name === this.state.selectedTable ? 'selected' : ''}
onClick={this.selectTable(tableInfo.name)}>
className={tableInfo.name === this.props.selectedTable ? 'selected' : ''}
onClick={this.props.onSelectTable(tableInfo.name)}>
<td>{tableInfo.name}</td>
<td>{tableInfo.seatsTaken}/{tableInfo.numSeats}</td>
</tr>
Expand All @@ -65,10 +35,32 @@ class Lobby extends Component {
</tbody>
</table>
<button className="btn btn-default"
onClick={this.joinTable}>Join Table</button>
onClick={this.onJoinTable.bind(this)}>Join Table</button>
</div>
)
}
}

export default Lobby;
Lobby.contextTypes = {
socket: PropTypes.object
}

const mapStateToProps = (state) => {
const { tableList, selectedTable } = state.lobby;
return {
tableList,
selectedTable,
hidden: state.table.name !== null
};
}

const mapDispatchToProps = dispatch => {
return {
onSelectTable: tableName => () => dispatch(selectTable(tableName))
};
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(Lobby);
20 changes: 20 additions & 0 deletions client/src/components/SocketProvider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Component } from 'react';
import PropTypes from 'prop-types';

class SocketProvider extends Component {
getChildContext() {
return {
socket: this.props.socket
};
}

render() {
return this.props.children;
}
}

SocketProvider.childContextTypes = {
socket: PropTypes.object
}

export default SocketProvider;
27 changes: 16 additions & 11 deletions client/src/components/Table/ActionWindow/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import PropTypes from 'prop-types';
import ActionButton from './ActionButton';

class ActionWindow extends Component {
Expand All @@ -13,48 +14,48 @@ class ActionWindow extends Component {
}

submitAction(action) {
return (function() {
return () => {
console.log(this.getConstrainedBetSize(), this.props.totalBetSize, this.props.betSize);
this.props.socket.emit('do action',
this.context.socket.emit('do action',
{table_name: this.props.tableName,
'name': action,
'size': this.getConstrainedBetSize() - this.props.totalBetSize + this.props.betSize});
this.setState({inputBetSize: 0});
}).bind(this);
};
}

handleInputChange(event) {
this.setState({inputBetSize: event.target.value});
}

handleKeyDown(action) {
return (function(event) {
return (event) => {
if (event.key === 'Enter'){
this.submitAction(action)();
}
}).bind(this);
};
}

getConstrainedBetSize(){
let betSize = parseInt(this.state.inputBetSize, 10) || 0;
const betSize = parseInt(this.state.inputBetSize, 10) || 0;
return this.constrainBetSize(betSize);
}

constrainBetSize(betSize){
betSize = parseInt(betSize, 10);
let minBetSize = this.props.totalBetSize + Math.max(this.props.betSize, this.props.BBSize);
let maxBetSize = this.props.heroStackSize + this.props.totalBetSize - this.props.betSize;
const minBetSize = this.props.totalBetSize + Math.max(this.props.betSize, this.props.BBSize);
const maxBetSize = this.props.heroStackSize + this.props.totalBetSize - this.props.betSize;
betSize = Math.max(minBetSize, betSize);
betSize = Math.min(maxBetSize, betSize);
return betSize;
}

setBetToPotRatio(ratio){
return function(){
let potSizeBet = (this.props.amountInvested + this.props.betSize
return () => {
const potSizeBet = (this.props.amountInvested + this.props.betSize
+ ratio * (this.props.potSize + this.props.betSize));
this.setState({inputBetSize: this.constrainBetSize(potSizeBet)});
}.bind(this)
};
}

render() {
Expand Down Expand Up @@ -110,4 +111,8 @@ class ActionWindow extends Component {
}
}

ActionWindow.contextTypes = {
socket: PropTypes.object
}

export default ActionWindow;
Loading

0 comments on commit 92ab9c3

Please sign in to comment.