ben.burlingham
/
number-munchers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Movement and munching updated to use redux.

Browse Source
master
Ben Burlingham 9 years ago
parent be7f760ccd
commit c34013313e
13 changed files with 224 additions and 98 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      js/app/Constants.js
  2. 29
      js/app/Creators.js
  3. 54
      js/app/Reducers.js
  4. 4
      js/app/Settings.js
  5. 17
      js/board/Board.js
  6. 49
      js/board/Grid.js
  7. 21
      js/board/Message.js
  8. 68
      js/board/Muncher.js
  9. 17
      js/board/Scorebar.js
  10. 2
      js/board/Values.js
  11. 5
      js/index.js
  12. 26
      js/welcome/NewGame.js
  13. 9
      js/welcome/Welcome.js

21
js/app/Constants.js
Unescape View File

@ -1,8 +1,23 @@
export const MODE = {
WELCOME: 'WELCOME',
BOARD: 'BOARD'
BOARD: 'BOARD',
NEXT: 'NEXT'
};
export const ACTIONS = {
NEXT: 'NEXT'
export const BLINK = {
TOGGLE: 'TOGGLE'
};
export const VALUES = {
FOO: 'FOO',
GENERATE: 'GENERATE',
UPDATE: 'UPDATE'
};
export const MUNCHER = {
MOVE: 'MOVE',
LEFT: 'LEFT',
RIGHT: 'RIGHT',
UP: 'UP',
DOWN: 'DOWN'
};

29
js/app/Creators.js
Unescape View File

@ -1,4 +1,29 @@
import { ACTIONS } from './Constants';
import { MODE, BLINK, VALUES, MUNCHER } from './Constants';
export const nextMode =
() => ({ type: ACTIONS.NEXT });
() => ({ type: MODE.NEXT });
export const toggleBlink =
() => ({ type: BLINK.TOGGLE });
export const generateValues =
(count, level) => ({
type: VALUES.FOO,
action: VALUES.GENERATE,
count: count,
level: level
});
export const updateValues =
(i, level) => ({
type: VALUES.FOO,
action: VALUES.UPDATE,
index: i,
level: level
});
export const moveMuncher =
(direction) => ({
type: MUNCHER.MOVE,
direction: direction
});

54
js/app/Reducers.js
Unescape View File

@ -1,7 +1,10 @@
import { MODE, ACTIONS } from './Constants.js';
import { MODE, VALUES, BLINK, MUNCHER } from './Constants.js';
import { Values } from '../board/Values';
import { GRID } from './Settings';
export const modeReducer = (state = MODE.WELCOME, action) => {
if (action.type === ACTIONS.NEXT) {
if (action.type === MODE.NEXT) {
switch (state) {
case MODE.BOARD:
return MODE.WELCOME;
@ -9,7 +12,50 @@ export const modeReducer = (state = MODE.WELCOME, action) => {
return MODE.BOARD;
};
}
else {
return MODE.WELCOME;
return MODE.BOARD;
};
export const blinkReducer = (state = false, action) => {
if (action.type === BLINK.TOGGLE) {
return (state ? false : true);
}
return state;
};
export const valuesReducer = (state = [], action) => {
if (action.type === VALUES.FOO) {
switch (action.action) {
case VALUES.GENERATE:
return Values.generate(action.count, action.level);
case VALUES.UPDATE:
const valid = Values.validate(state[action.index], action.level);
const results = state.slice(0);
if (valid) {
results[action.index] = "";
}
return results;
}
}
return state;
};
const muncherInitialState = { x: 0, y: 0 };
export const muncherReducer = (state = muncherInitialState, action) => {
if (action.type === MUNCHER.MOVE) {
switch (action.direction) {
case MUNCHER.LEFT:
return (state.x > 0 ? { x: state.x - 1, y: state.y } : state);
case MUNCHER.RIGHT:
return (state.x < GRID.W - 1 ? { x: state.x + 1, y: state.y } : state);
case MUNCHER.UP:
return (state.y > 0 ? { x: state.x, y: state.y - 1 } : state);
case MUNCHER.DOWN:
return (state.y < GRID.H - 1 ? { x: state.x, y: state.y + 1 } : state);
};
}
return state;
};

4
js/app/Settings.js
Unescape View File

@ -0,0 +1,4 @@
export const GRID = {
W: 3,
H: 3
}

17
js/board/Board.js
Unescape View File

@ -6,24 +6,15 @@ import Titlebar from './Titlebar';
import Grid from './Grid';
import Message from './Message';
import Muncher from './Muncher';
import Input from './Input';
module.exports = React.createClass({
componentDidMount() {
window.addEventListener('keydown', Input.keydown.bind(this));
},
componentWillUnmount() {
window.removeEventListener('keydown', Input.keydown.bind(this));
},
export default class Board extends Component {
render() {
return (<div className='board'>
<Scorebar />
<Titlebar />
<Message />
<Grid width='3' height='3' ref='grid' />
<Muncher ref='muncher' />
<Grid />
<Muncher />
</div>);
}
});
};

49
js/board/Grid.js
Unescape View File

@ -1,19 +1,14 @@
require('../../sass/board/grid.scss');
import { Component } from 'react';
import { connect } from 'react-redux';
import GridCell from './GridCell';
// var Values = require('./Values');
import * as creators from '../app/Creators';
import { GRID } from '../app/Settings';
export default class Grid extends Component {
generateValues() {
// return Values.generate(this.props.width * this.props.height, State.level);
};
// getInitialState() {
// return { values: this.generateValues() };
// },
componentDidMount() {
componentDidMount(n) {
this.props.dispatch(creators.generateValues(GRID.W * GRID.H, 1));
// State.subscribe('level/next', this.levelNext);
};
@ -27,34 +22,26 @@ export default class Grid extends Component {
// this.setState({ values: this.generateValues() });
};
munch(x, y) {
// var i = y * this.props.width + x;
//
// if (this.state.values[i] === "") {
// return;
// }
//
// if (Values.validate(this.state.values[i], State.level)) {
// this.state.values[i] = "";
// this.setState({ values: this.state.values }, this.checkComplete);
// State.publish('munch/successful');
// }
// else {
// State.publish('munch/failed', this.state.values[i]);
// }
};
render() {
const { values, dispatch } = this.props;
const cells = [];
let i;
for (let x = 0; x < this.props.width; x++) {
for (let y = 0; y < this.props.height; y++) {
i = y * this.props.width + x;
// cells.push(<GridCell value={this.state.values[i]} x={x} y={y} key={i} />);
for (let x = 0; x < GRID.W; x++) {
for (let y = 0; y < GRID.H; y++) {
i = y * GRID.W + x;
cells.push(<GridCell value={values[i]} x={x} y={y} key={i} />);
}
}
return (<div className='grid'>{cells}</div>);
};
};
const select = (state) => {
return {
values: state.values
}
};
export default connect(select)(Grid);

21
js/board/Message.js
Unescape View File

@ -62,21 +62,18 @@ export default class Message extends Component {
};
render() {
var classname = ['message'];
var classname = ['message', 'hidden'];
const state = { message1: 'foo', message2: 'bar' };
// if (this.state.hidden === true) {
// classname.push('hidden');
// }
return (<div>message</div>);
// return (
// <div className={classname.join(' ')}>
// {this.state.message1}
// <br />
// {this.state.message2}
// </div>
// );
return (
<div className={classname.join(' ')}>
{state.message1}
<br />
{state.message2}
</div>
);
};
};

68
js/board/Muncher.js
Unescape View File

@ -1,21 +1,69 @@
require('../../sass/board/muncher.scss');
import { Component } from 'react';
import { connect } from 'react-redux';
import { MUNCHER } from '../app/Constants';
import * as creators from '../app/Creators';
export default class Muncher extends Component{
// getInitialState() {
// return {
// x: 0,
// y: 0
// };
// },
let listener = null;
export class Muncher extends Component {
keydown(e) {
const x = this.props.x;
const y = this.props.y;
switch (e.keyCode) {
case 32:
console.warn('munch (leave this here until sure event listener has been removed');
this.props.dispatch(creators.updateValues(0, 0));
// var i = y * this.props.width + x;
//
// this.setState({ values: this.state.values }, this.checkComplete);
// State.publish('munch/successful');
// }
// else {
// State.publish('munch/failed', this.state.values[i]);
// }
break;
case 37:
this.props.dispatch(creators.moveMuncher(MUNCHER.LEFT));
break;
case 38:
this.props.dispatch(creators.moveMuncher(MUNCHER.UP));
break;
case 39:
this.props.dispatch(creators.moveMuncher(MUNCHER.RIGHT));
break;
case 40:
this.props.dispatch(creators.moveMuncher(MUNCHER.DOWN));
break;
}
};
componentDidMount() {
listener = this.keydown.bind(this);
window.addEventListener('keydown', listener);
};
componentWillUnmount() {
window.removeEventListener('keydown', listener);
};
render() {
// const classname = ['muncher', 'x' + this.state.x, 'y' + this.state.y];
const classname = ['muncher', 'x' + this.props.x, 'y' + this.props.y];
return (
<div className='muncher'></div>
// <div className={classname.join(' ')}></div>
<div className={classname.join(' ')}></div>
);
};
};
const select = (state) => {
return {
x: state.muncher.x,
y: state.muncher.y
}
};
export default connect(select)(Muncher);

17
js/board/Scorebar.js
Unescape View File

@ -28,15 +28,14 @@ export default class Scorebar extends Component {
render() {
var lives = [];
// for (var i = 0; i < this.state.lives; i++) {
// lives.push(<div className='life' key={i}></div>);
// }
for (var i = 0; i < 3; i++) {
lives.push(<div className='life' key={i}></div>);
}
// return (<div className='scorebar'>
// <div className='item current-score'>{this.state.currentScore}</div>
// <div className='item high-score'>{this.state.highScore}</div>
// <div className='item lives'>{lives}</div>
// </div>);
return <h1>Scorebar</h1>;
return (<div className='scorebar'>
<div className='item current-score'>0</div>
<div className='item high-score'>0</div>
<div className='item lives'>{lives}</div>
</div>);
};
};

2
js/board/Values.js
Unescape View File

@ -1,4 +1,4 @@
module.exports = {
export const Values = {
// Anagrams, multiples, equality
generate(n) {
var values = [];

5
js/index.js
Unescape View File

@ -8,7 +8,10 @@ import App from './app/App';
import * as reducers from './app/Reducers';
const combinedReducers = combineReducers({
mode: reducers.modeReducer
mode: reducers.modeReducer,
blink: reducers.blinkReducer,
values: reducers.valuesReducer,
muncher: reducers.muncherReducer
});
const store = createStore(combinedReducers);

26
js/welcome/NewGame.js
Unescape View File

@ -1,16 +1,18 @@
import { Component } from 'react';
import { connect } from 'react-redux';
import * as creators from '../app/Creators.js';
const blinkTimer = null;
let blinkTimer = null;
const toggleTimeout = function() {
//var hidden = this.state.hidden; which was false
//this.setState({ hidden: !hidden });
//blinkTimer = setTimeout(toggleTimeout.bind(this), 600);
var hidden = this.props.blink;
this.props.dispatch(creators.toggleBlink());
blinkTimer = setTimeout(toggleTimeout.bind(this), 600);
};
export default class NewGame extends Component {
componentDidMount() {
//toggleTimeout.call(this);
toggleTimeout.call(this);
};
componentWillUnmount() {
@ -20,12 +22,20 @@ export default class NewGame extends Component {
render() {
const classname = ['newgame'];
//if (this.state.hidden === true) {
// classname.push('hidden');
//}
if (this.props.blink === true) {
classname.push('hidden');
}
return (
<div className={classname.join(' ')}>Press Space Bar To Play</div>
);
};
};
const select = (state) => {
return {
blink: state.blink
}
};
export default connect(select)(NewGame);

9
js/welcome/Welcome.js
Unescape View File

@ -7,21 +7,22 @@ import * as creators from '../app/Creators.js';
import NewGame from './NewGame';
import HighScores from './HighScores';
let listener = null;
export class Welcome extends Component {
handleKeydown(e) {
if (e.keyCode === 32) {
this.props.dispatch(creators.nextMode());
//this.setState({ screen: 'board' });
}
};
componentDidMount() {
window.addEventListener('keydown', this.handleKeydown.bind(this));
listener = this.handleKeydown.bind(this);
window.addEventListener('keydown', listener);
};
componentWillUnmount() {
console.log('need to remove listener')
// remove keydown listener
window.removeEventListener('keydown', listener);
};
render() {

Write Preview
Loading…
Cancel
Save