diff --git a/App.js b/App.js index c0be2cb..15b712e 100644 --- a/App.js +++ b/App.js @@ -6,13 +6,7 @@ import * as ModeActions from './actions/mode.actions'; import Board from './components/board/board.component'; import Welcome from './components/welcome/welcome.component'; -export const SETTINGS = { - GRID_WIDTH: 6, - GRID_HEIGHT: 5, - LIVES: 3 -}; - -export default class App extends Component { +export class App extends Component { render() { const { mode } = this.props; diff --git a/AppSettings.js b/AppSettings.js new file mode 100644 index 0000000..c5d63de --- /dev/null +++ b/AppSettings.js @@ -0,0 +1,7 @@ +const SETTINGS = { + GRID_WIDTH: 6, + GRID_HEIGHT: 5, + LIVES: 3 +}; + +export default SETTINGS; diff --git a/actions/board/grid.actions.js b/actions/board/grid.actions.js index e7b5cc0..28f9d4f 100644 --- a/actions/board/grid.actions.js +++ b/actions/board/grid.actions.js @@ -1,7 +1,8 @@ export const GRID_ACTION = 'GRID_ACTION'; export const UPDATE = 'GRID_UPDATE'; -export const update = () => ({ +export const update = (values) => ({ type: GRID_ACTION, - action: UPDATE + action: UPDATE, + values: values }); diff --git a/actions/board/muncher.actions.js b/actions/board/muncher.actions.js index a5b4836..5783b68 100644 --- a/actions/board/muncher.actions.js +++ b/actions/board/muncher.actions.js @@ -1,7 +1,9 @@ export const MUNCHER_ACTION = 'MUNCHER_ACTION'; export const UPDATE = 'MUNCHER_UPDATE'; -export const update = () => ({ +export const update = (x, y) => ({ type: MUNCHER_ACTION, - action: UPDATE + action: UPDATE, + x: x, + y: y }); diff --git a/actions/board/scorebar.actions.js b/actions/board/scorebar.actions.js index c78d4b0..b57304b 100644 --- a/actions/board/scorebar.actions.js +++ b/actions/board/scorebar.actions.js @@ -1,7 +1,10 @@ export const SCOREBAR_ACTION = 'SCOREBAR_ACTION'; export const UPDATE = 'SCOREBAR_UPDATE'; -export const update = () => ({ +export const update = (lives, currentScore, highScore) => ({ type: SCOREBAR_ACTION, - action: UPDATE + action: UPDATE, + lives: lives, + currentScore: currentScore, + highScore: highScore }); diff --git a/components/board/grid.component.js b/components/board/grid.component.js index 21dba36..051ea2f 100644 --- a/components/board/grid.component.js +++ b/components/board/grid.component.js @@ -4,7 +4,7 @@ import { Component } from 'react'; import { connect } from 'react-redux'; import GridCell from './grid-cell.component'; -import { SETTINGS } from '../../App'; +import SETTINGS from '../../AppSettings'; export class Grid extends Component { render() { diff --git a/components/board/message.component.js b/components/board/message.component.js index 0fa210e..bb3c95b 100644 --- a/components/board/message.component.js +++ b/components/board/message.component.js @@ -2,30 +2,8 @@ require('../../sass/board/message.scss'); import { Component } from 'react'; import { connect } from 'react-redux'; -import * as MessageActions from '../../actions/board/message.actions'; - -let refocusListener = null; export class Message extends Component { - componentDidMount() { - // refocusListener = this.refocus.bind(this); - // window.addEventListener('click', refocusListener); - }; - - componentWillUnmount() { - // window.removeEventListener('click', refocusListener); - }; - - refocus() { - this.props.dispatch(MessageActions.hide()); - }; - - keydown(e) { - if (e.keyCode === 32) { - this.props.next(); - } - }; - render() { var classname = ['message']; @@ -33,8 +11,6 @@ export class Message extends Component { classname.push('hidden'); } - //
- return (
{this.props.message} diff --git a/controllers/board.controller.js b/controllers/board.controller.js index 8f1de8d..223fbe6 100644 --- a/controllers/board.controller.js +++ b/controllers/board.controller.js @@ -1,4 +1,4 @@ -import { SETTINGS } from '../App.js'; +import SETTINGS from '../AppSettings'; import TroggleCtrl from './troggle.controller'; import MessageCtrl from './message.controller'; @@ -46,46 +46,46 @@ const BoardCtrl = { }, keyListener(e) { - if (e.keyCode === 32 && ScorebarCtrl.isGameOver()) { + if (e.keyCode !== 32 && MessageCtrl.isShowing() === false) { + MuncherCtrl.move(e); + } + else if (ScorebarCtrl.isGameOver()) { level = -1; ScorebarCtrl.reset(); MessageCtrl.hide(); TroggleCtrl.unfreeze(); ModeCtrl.welcome(); } - else if (e.keyCode === 32 && ScorebarCtrl.getLives() === 0) { + else if (ScorebarCtrl.getLives() === 0) { ScorebarCtrl.flagGameOver(); MessageCtrl.show("Game over!"); } - else if (e.keyCode === 32 && GridCtrl.isCompleted() === true) { + else if (GridCtrl.isCompleted() === true) { this.nextLevel(); TroggleCtrl.unfreeze(); ScorebarCtrl.levelUp(level); MessageCtrl.hide(); } - else if (e.keyCode === 32 && BoardCtrl.isCollision() === true) { - console.log("Creating troggles") + else if (BoardCtrl.isCollision() === true) { collision = false; TroggleCtrl.clearTroggles(); TroggleCtrl.createTroggles(level); TroggleCtrl.unfreeze(); MessageCtrl.hide(); } - else if (e.keyCode === 32 && MessageCtrl.isShowing() === true) { + else if (MessageCtrl.isShowing() === true) { TroggleCtrl.unfreeze(); MessageCtrl.hide(); } - else if (e.keyCode === 32 && MessageCtrl.isShowing() === false) { - this.munch(); - } else if (MessageCtrl.isShowing() === false) { - MuncherCtrl.move(e); + this.munch(); } }, nextLevel() { level++; collision = false; + ScorebarCtrl.update(); GridCtrl.generateValues(level); TitlebarCtrl.setTitle(level); TroggleCtrl.clearTroggles(); diff --git a/controllers/grid.controller.js b/controllers/grid.controller.js index 3327fde..6921d82 100644 --- a/controllers/grid.controller.js +++ b/controllers/grid.controller.js @@ -1,6 +1,6 @@ import * as GridActions from '../actions/board/grid.actions'; import ValuesCtrl from './values.controller'; -import { SETTINGS } from '../App'; +import SETTINGS from '../AppSettings'; let values; let dispatch; @@ -11,7 +11,7 @@ const GridCtrl = { generateValues: (level) => { values = ValuesCtrl.generate(SETTINGS.GRID_WIDTH * SETTINGS.GRID_HEIGHT, level); - dispatch(GridActions.update()); + dispatch(GridActions.update(values)); }, isCompleted: (level) => { @@ -20,7 +20,7 @@ const GridCtrl = { hideValue: (index) => { values[index].show = false; - dispatch(GridActions.update()); + dispatch(GridActions.update(values)); } }; diff --git a/controllers/muncher.controller.js b/controllers/muncher.controller.js index e73e838..d02f277 100644 --- a/controllers/muncher.controller.js +++ b/controllers/muncher.controller.js @@ -1,6 +1,6 @@ import * as MuncherActions from '../actions/board/muncher.actions'; import BoardCtrl from './board.controller'; -import { SETTINGS } from '../App'; +import SETTINGS from '../AppSettings'; let x = 0; let y = 0; @@ -39,7 +39,7 @@ const MuncherCtrl = { } if (e.keyCode >= 37 || e.keyCode <= 40) { - dispatch(MuncherActions.update()); + dispatch(MuncherActions.update(x, y)); BoardCtrl.checkCollision(); } } diff --git a/controllers/scorebar.controller.js b/controllers/scorebar.controller.js index 037bfe0..5b4d673 100644 --- a/controllers/scorebar.controller.js +++ b/controllers/scorebar.controller.js @@ -1,8 +1,8 @@ import * as ScorebarActions from '../actions/board/scorebar.actions'; -import { SETTINGS } from '../App'; +import SETTINGS from '../AppSettings'; let dispatch; -let lives = 1; +let lives = SETTINGS.LIVES; let currentScore = 0; let highScore = 7; let gameOver = false; @@ -10,39 +10,41 @@ let gameOver = false; const ScorebarCtrl = { setDispatch: d => dispatch = d, - getCurrentScore: () => currentScore, - getHighScore: () => highScore, getLives: () => lives, flagGameOver: () => gameOver = true, isGameOver: () => gameOver, + update: () => { + dispatch(ScorebarActions.update(lives, currentScore, highScore)); + }, + munchSucceeded: () => { currentScore += 10; - dispatch(ScorebarActions.update()); + ScorebarCtrl.update(); }, munchFailed: () => { lives--; currentScore -= 5; - dispatch(ScorebarActions.update()); + ScorebarCtrl.update(); }, eatenByTroggle: () => { lives--; - dispatch(ScorebarActions.update()); + ScorebarCtrl.update(); }, levelUp: (level) => { currentScore += 25; - dispatch(ScorebarActions.update()); + ScorebarCtrl.update(); }, reset: () => { lives = SETTINGS.LIVES; currentScore = 0; gameOver = false; - dispatch(ScorebarActions.update()); + ScorebarCtrl.update(); } }; diff --git a/controllers/troggle.controller.js b/controllers/troggle.controller.js index 3643798..7383f49 100644 --- a/controllers/troggle.controller.js +++ b/controllers/troggle.controller.js @@ -1,4 +1,4 @@ -import { SETTINGS } from '../App'; +import SETTINGS from '../AppSettings'; import * as TroggleActions from '../actions/board/troggle.actions'; import MuncherCtrl from './muncher.controller'; @@ -44,13 +44,12 @@ const TroggleCtrl = { }, createTroggles(level) { - // const count = Math.min(Math.ceil((level + 1) / 2), 5); - const count = 3; + const count = Math.min(Math.ceil((level + 1) / 2), 5); for (let index = 0; index < count; index++) { const ref = this.createTroggle.bind(this, index); - troggleCreateTimers[index] = setTimeout(ref, (index) * 1000); - // troggleCreateTimers[index] = setTimeout(ref, (index + 1) * 5000); + // troggleCreateTimers[index] = setTimeout(ref, 1000); + troggleCreateTimers[index] = setTimeout(ref, (index + 1) * Math.random() * 10000); } }, diff --git a/reducers/board/grid.reducer.js b/reducers/board/grid.reducer.js index c32dd10..ab77c92 100644 --- a/reducers/board/grid.reducer.js +++ b/reducers/board/grid.reducer.js @@ -1,7 +1,6 @@ const Immutable = require('immutable'); import * as GridActions from '../../actions/board/grid.actions'; -import GridCtrl from '../../controllers/grid.controller.js'; const initial = []; @@ -11,7 +10,7 @@ const reducer = (state = initial, action) => { } if (action.action === GridActions.UPDATE) { - return Immutable.List(GridCtrl.getValues()).toArray(); + return Immutable.List(action.values).toArray(); } return state; diff --git a/reducers/board/muncher.reducer.js b/reducers/board/muncher.reducer.js index e55a1c6..1835ff8 100644 --- a/reducers/board/muncher.reducer.js +++ b/reducers/board/muncher.reducer.js @@ -1,7 +1,5 @@ const Immutable = require('immutable'); import * as MuncherActions from '../../actions/board/muncher.actions'; -import MuncherCtrl from '../../controllers/muncher.controller'; -import { SETTINGS } from '../../App'; const initial = { x: 0, y: 0, frozen: false }; @@ -12,9 +10,8 @@ const reducer = (state = initial, action) => { if (action.action === MuncherActions.UPDATE) { return Immutable.Map(state) - .set('x', MuncherCtrl.getX()) - .set('y', MuncherCtrl.getY()) - .set('frozen', false) + .set('x', action.x) + .set('y', action.y) .toObject(); } diff --git a/reducers/board/scorebar.reducer.js b/reducers/board/scorebar.reducer.js index 9f4108b..0fb64aa 100644 --- a/reducers/board/scorebar.reducer.js +++ b/reducers/board/scorebar.reducer.js @@ -1,13 +1,8 @@ const Immutable = require('immutable'); import * as ScorebarActions from '../../actions/board/scorebar.actions'; -import ScorebarCtrl from '../../controllers/scorebar.controller.js'; -const initial = { - current: ScorebarCtrl.getCurrentScore(), - high: ScorebarCtrl.getHighScore(), - lives: ScorebarCtrl.getLives() -}; +const initial = { current: 0, high: 0, lives: 0 }; const reducer = (state = initial, action) => { if (action.type !== ScorebarActions.SCOREBAR_ACTION) { @@ -15,9 +10,9 @@ const reducer = (state = initial, action) => { } return Immutable.Map(state) - .set('current', ScorebarCtrl.getCurrentScore()) - .set('high', ScorebarCtrl.getHighScore()) - .set('lives', ScorebarCtrl.getLives()) + .set('current', action.currentScore) + .set('high', action.highScore) + .set('lives', action.lives) .toObject(); }; diff --git a/reducers/mode.reducer.js b/reducers/mode.reducer.js index e502908..d1e9045 100644 --- a/reducers/mode.reducer.js +++ b/reducers/mode.reducer.js @@ -1,6 +1,8 @@ import * as ModeActions from '../actions/mode.actions'; -const reducer = (state = ModeActions.BOARD, action) => { +const initial = ModeActions.WELCOME; + +const reducer = (state = initial, action) => { if (action.type !== ModeActions.MODE_ACTION) { return state; } diff --git a/sass/board/troggle.scss b/sass/board/troggle.scss index fd5454e..6c7dd9c 100644 --- a/sass/board/troggle.scss +++ b/sass/board/troggle.scss @@ -1,10 +1,21 @@ +.troggles { + height:500px; + left:50%; + margin-left:-300px; + overflow:hidden; + position:absolute; + top:110px; + width:600px; + z-index:0; +} + .troggle { $bg: crimson; background: $bg; height:100px; - margin-top:110px; opacity: 0.5; position:absolute; + transition:left 0.3s, top 0.3s; width:100px; }