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;
-// }
-// }