diff --git a/App.js b/App.js index 357b4fc..231acb9 100644 --- a/App.js +++ b/App.js @@ -4,6 +4,7 @@ import { connect } from 'react-redux'; import * as ModeActions from './actions/mode.actions'; import Welcome from './components/welcome/welcome.component'; +import HighScore from './components/high-score/high-score.component'; import Options from './components/options/options.component'; import Board from './components/board/board.component'; @@ -14,6 +15,8 @@ export class App extends Component { switch (this.props.mode) { case ModeActions.WELCOME: return ; + case ModeActions.HIGHSCORE: + return ; case ModeActions.OPTIONS: return case ModeActions.BOARD: diff --git a/actions/high-score/high-score.actions.js b/actions/high-score/high-score.actions.js new file mode 100644 index 0000000..96ab29d --- /dev/null +++ b/actions/high-score/high-score.actions.js @@ -0,0 +1,15 @@ +export const HIGHSCORE_ACTION = 'HIGHSCORE_ACTION'; +export const UPDATE_INITIALS = 'HIGHSCORE_UPDATE_INITIALS'; +export const UPDATE_SCORE = 'HIGHSCORE_UPDATE_SCORE'; + +export const updateInitials = (initials) => ({ + type: HIGHSCORE_ACTION, + action: UPDATE_INITIALS, + initials: initials +}); + +export const updateScore = (score) => ({ + type: HIGHSCORE_ACTION, + action: UPDATE_SCORE, + score: score +}); diff --git a/components/high-score/high-score.component.js b/components/high-score/high-score.component.js index cacea5d..d7ab0ed 100644 --- a/components/high-score/high-score.component.js +++ b/components/high-score/high-score.component.js @@ -2,21 +2,18 @@ require('../../sass/high-score/high-score.scss'); import { Component } from 'react'; import { connect } from 'react-redux'; -import Initials from './initials.component'; -import * as ModeActions from '../../actions/mode.actions'; +import Initials from './initials.component'; import HighScoreCtrl from '../../controllers/high-score/high-score.controller'; let listener; -export class Welcome extends Component { +export class HighScore extends Component { componentDidMount() { + HighScoreCtrl.setDispatch(this.props.dispatch); + HighScoreCtrl.checkForHighScore(); listener = HighScoreCtrl.keydown.bind(HighScoreCtrl); window.addEventListener('keydown', listener); - - // HighScoreCtrl.setDispatch(this.props.dispatch); - // HighScoreCtrl.retrieveScores(); - // HighScoreCtrl.updateScores(ScorebarCtrl.currentScore); }; componentWillUnmount() { @@ -24,40 +21,24 @@ export class Welcome extends Component { }; render() { - // var entries = []; - // this.props.values.map(function(v, i) { - // entries.push(); - // }); - - if (WelcomeCtrl.isHighScore() > 0) { - return ( -
- -
-
New high score!
-
Enter your initials:
- -
- ); - } - else { - return ( -
- -
Press Spacebar for new game
- high scores here -
- ); - } - - + return ( +
+ +
 
+
Congratulations!
+
{this.props.score} is a new high score!
+
Enter your initials:
+ +
+ ); }; }; const select = (state) => { return { - values: state.welcome.scores + initials: state.highscore.initials, + score: state.highscore.score } }; -export default connect(select)(Welcome); +export default connect(select)(HighScore); diff --git a/components/high-score/initials.component.js b/components/high-score/initials.component.js index c9f28ba..7ba145c 100644 --- a/components/high-score/initials.component.js +++ b/components/high-score/initials.component.js @@ -1,12 +1,21 @@ import { Component } from 'react'; import { connect } from 'react-redux'; -import InitialsCtrl from '../../controllers/welcome/initials.controller'; +import InitialsCtrl from '../../controllers/high-score/initials.controller'; + +let listener; export class Initials extends Component { componentDidMount() { InitialsCtrl.setDispatch(this.props.dispatch); InitialsCtrl.update(); + + listener = InitialsCtrl.keydown.bind(InitialsCtrl); + window.addEventListener('keydown', listener); + }; + + componentWillUnmount() { + window.removeEventListener('keydown', listener); }; render() { @@ -40,7 +49,7 @@ export class Initials extends Component { const select = (state) => { return { - initials: state.welcome.initials + initials: state.highscore.initials } }; diff --git a/controllers/board/board.controller.js b/controllers/board/board.controller.js index a3b97e8..6629924 100644 --- a/controllers/board/board.controller.js +++ b/controllers/board/board.controller.js @@ -6,7 +6,7 @@ import MuncherCtrl from './muncher.controller'; import GridCtrl from './grid.controller'; import TitlebarCtrl from './titlebar.controller'; import ScorebarCtrl from './scorebar.controller'; -import WelcomeCtrl from '../welcome/welcome.controller'; +import HighScoreCtrl from '../high-score/high-score.controller'; import ModeCtrl from '../mode.controller'; let level = -1; @@ -22,6 +22,7 @@ const BoardCtrl = { ScorebarCtrl.setDispatch(d); MessageCtrl.setDispatch(d); TroggleCtrl.setDispatch(d); + HighScoreCtrl.setDispatch(d); ModeCtrl.setDispatch(d); }, @@ -52,11 +53,11 @@ const BoardCtrl = { } else if (ScorebarCtrl.isGameOver()) { level = -1; - WelcomeCtrl.gameOver(ScorebarCtrl.getCurrentScore()); + HighScoreCtrl.updateScore(ScorebarCtrl.getCurrentScore()); ScorebarCtrl.reset(); MessageCtrl.hide(); TroggleCtrl.unfreeze(); - ModeCtrl.welcome(); + ModeCtrl.highscore(); } else if (ScorebarCtrl.getLives() === 0) { ScorebarCtrl.gameOver(); diff --git a/controllers/high-score/high-score.controller.js b/controllers/high-score/high-score.controller.js index 9be48ab..70041b6 100644 --- a/controllers/high-score/high-score.controller.js +++ b/controllers/high-score/high-score.controller.js @@ -1,71 +1,53 @@ -import * as WelcomeActions from '../../actions/welcome/welcome.actions'; +import * as HighScoreActions from '../../actions/high-score/high-score.actions'; +import * as ModeActions from '../../actions/mode.actions'; + import InitialsCtrl from './initials.controller'; import SETTINGS from '../../AppSettings'; let dispatch; +let found = -1; +let score = 0; -let finalScore = 800; - -const scores = [ - { initials: "AAA", score: "0" }, - { initials: "AAA", score: "0" }, - { initials: "AAA", score: "0" }, - { initials: "AAA", score: "0" }, - { initials: "AAA", score: "0" }, -]; - -const WelcomeCtrl = { +const HighScoreCtrl = { setDispatch: (d) => dispatch = d, - isHighScore: () => finalScore > 0, + updateScore: (finalScore) => { + score = finalScore; + dispatch(HighScoreActions.updateScore(finalScore)); + }, - gameOver: (score) => { - let found = -1; - finalScore = -1; + checkForHighScore: () => { + const scores = JSON.parse(localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY)); for (let i = 0; i < scores.length; i++) { if (scores[i].score < score) { found = i; + break; } } - finalScore = -1; - if (found > -1) { - // scores.splice(found, { initials: 'ZZZ', score: score }); - // scores.pop(); - finalScore = score; - } - }, - - update: () => { - const scores = localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY); + console.log(found) - if (scores !== null) { - dispatch(WelcomeActions.updateScores(scores)); + if (found === -1) { + dispatch(ModeActions.welcome()); } }, keydown: (e) => { - if ((gameOverFlag === true && e.keyCode === 13) || (gameOverFlag === true && e.keyCode === 32)) { - } - else if (gameOverFlag === true) { - InitialsCtrl.keydown(e); - } - else if (e.keyCode === 32) { - this.props.dispatch(ModeActions.options()); - } - }, + if (e.keyCode === 13 || e.keyCode === 32) { + let scores = JSON.parse(localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY)); + const initials = InitialsCtrl.getInitials(); - doTheThing: () => { - const scores = localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY); + scores.splice(found, 0, { initials: initials, score: score }); + scores.pop(); + localStorage.setItem(SETTINGS.LOCAL_STORAGE_KEY, JSON.stringify(scores)); - if (scores !== null) { - return scores[0].score; - } + found = -1; + score = 0; - return 0; - // localStorage.setItem(SETTINGS.LOCAL_STORAGE_KEY, scores); - }, + dispatch(ModeActions.welcome()); + } + } }; -export default WelcomeCtrl; +export default HighScoreCtrl; diff --git a/controllers/high-score/initials.controller.js b/controllers/high-score/initials.controller.js index 12cc392..2de241d 100644 --- a/controllers/high-score/initials.controller.js +++ b/controllers/high-score/initials.controller.js @@ -1,4 +1,4 @@ -import * as WelcomeActions from '../../actions/welcome/welcome.actions'; +import * as HighScoreActions from '../../actions/high-score/high-score.actions'; let dispatch; @@ -14,6 +14,10 @@ let code; const InitialsCtrl = { setDispatch: (d) => dispatch = d, + getInitials: () => initials.reduce((acc, v) => { + return acc + v.initial; + }, ''), + keydown: function(e) { switch (e.keyCode) { case 37: @@ -68,7 +72,7 @@ const InitialsCtrl = { initials[active].active = true; - dispatch(WelcomeActions.updateInitials(initials)); + dispatch(HighScoreActions.updateInitials(initials)); } }; diff --git a/controllers/mode.controller.js b/controllers/mode.controller.js index 6bdad3e..e8d8cfd 100644 --- a/controllers/mode.controller.js +++ b/controllers/mode.controller.js @@ -7,6 +7,8 @@ const ModeCtrl = { welcome: () => dispatch(ModeActions.welcome()), + highscore: () => dispatch(ModeActions.highscore()), + options: () => dispatch(ModeActions.options()), board: () => dispatch(ModeActions.board()) diff --git a/controllers/welcome/welcome.controller.js b/controllers/welcome/welcome.controller.js index 808c6e1..15e5913 100644 --- a/controllers/welcome/welcome.controller.js +++ b/controllers/welcome/welcome.controller.js @@ -4,19 +4,21 @@ import SETTINGS from '../../AppSettings'; let dispatch; -const emptyScores = [ +const emptyScores = JSON.stringify([ { initials: "AAA", score: "0" }, { initials: "AAA", score: "0" }, { initials: "AAA", score: "0" }, { initials: "AAA", score: "0" }, { initials: "AAA", score: "0" }, -]; +]); const WelcomeCtrl = { setDispatch: (d) => dispatch = d, + // Note: If storage has not been set, it will be populated here with empty scores. updateFromLocalStorage: () => { - const scores = localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY) || emptyScores; + const scores = JSON.parse(localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY) || emptyScores); + localStorage.setItem(SETTINGS.LOCAL_STORAGE_KEY, JSON.stringify(scores)); dispatch(WelcomeActions.updateScores(scores)); }, diff --git a/index.js b/index.js index 6a2cf20..31ea685 100644 --- a/index.js +++ b/index.js @@ -8,6 +8,7 @@ import { Provider } from 'react-redux'; import App from './App'; import modeReducer from './reducers/mode.reducer'; import welcomeReducer from './reducers/welcome/welcome.reducer'; +import highscoreReducer from './reducers/high-score/high-score.reducer'; import optionsReducer from './reducers/options/options.reducer'; import gridReducer from './reducers/board/grid.reducer'; import muncherReducer from './reducers/board/muncher.reducer'; @@ -21,6 +22,8 @@ const reducers = combineReducers({ welcome: welcomeReducer, + highscore: highscoreReducer, + options: optionsReducer, muncher: muncherReducer, diff --git a/reducers/high-score/high-score.reducer.js b/reducers/high-score/high-score.reducer.js index 7a42328..d86d932 100644 --- a/reducers/high-score/high-score.reducer.js +++ b/reducers/high-score/high-score.reducer.js @@ -1,26 +1,26 @@ const Immutable = require('immutable'); -import * as WelcomeActions from '../../actions/welcome/welcome.actions'; +import * as HighScoreActions from '../../actions/high-score/high-score.actions'; const initial = { - scores: [], + score: 900, initials: [] }; const reducer = (state = initial, action) => { - if (action.type !== WelcomeActions.WELCOME_ACTION) { + if (action.type !== HighScoreActions.HIGHSCORE_ACTION) { return state; } - + switch (action.action) { - case WelcomeActions.UPDATE_SCORES: + case HighScoreActions.UPDATE_INITIALS: return Immutable.Map(state) - .set('scores', action.scores) + .set('initials', action.initials) .toObject(); - case WelcomeActions.UPDATE_INITIALS: + case HighScoreActions.UPDATE_SCORE: return Immutable.Map(state) - .set('initials', action.initials) + .set('score', action.score) .toObject(); } diff --git a/sass/high-score/high-score.scss b/sass/high-score/high-score.scss index 36ed6f2..fae0b7b 100644 --- a/sass/high-score/high-score.scss +++ b/sass/high-score/high-score.scss @@ -9,96 +9,12 @@ } .line { - line-height:30px; - } - - .spacer { - height:100px; - } - - @keyframes blink { - 50% { - opacity: 0.6; - } - } - - @-webkit-keyframes blink { - 50% { - opacity: 0.6; - } - } - - .blink { - animation: blink 1s step-start 0s infinite; - -webkit-animation: blink 1s step-start 0s infinite; + line-height:50px; + margin:0 auto; + width:$w; } .initial { display:inline-block; } - - // .highscores { - // margin:0 auto; - // width:350px; - // } - // - // .newgame { - // margin:20px 0; - // transition:opacity 0.1s ease; - // - // &.hidden { - // opacity: 0.5; - // } - // } } -// -// .highscores { -// $w: 350px; -// -// font-size: 0; -// -// hr { -// border:0; -// border-top:1px solid #ccc; -// margin:20px auto; -// width: $w; -// } -// -// .blink { -// animation: blinker 1s none infinite; -// } -// -// @keyframes blinker { -// 50% { opacity: 0.6; } -// } -// -// .line { -// font-size:16px; -// line-height:30px; -// margin: 10px auto; -// text-align:center; -// width:$w; -// }; -// -// .entry { -// font-size:16px; -// line-height:40px; -// } -// -// .rank { -// display:inline-block; -// text-align:left; -// width:50px; -// } -// -// .initials { -// display:inline-block; -// width:100px; -// } -// -// .score { -// display:inline-block; -// text-align:right; -// width:200px; -// } -// }