High score mechanism complete.

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 <Welcome />;
+            case ModeActions.HIGHSCORE:
+                return <HighScore />;
             case ModeActions.OPTIONS:
                 return <Options />
             case ModeActions.BOARD:

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
+});

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 = [];
+        return (
-        // this.props.values.map(function(v, i) {
+            <div className='high-score'>
-        //     entries.push(<HofRow initials={v.initials} score={v.score} rank={v.rank} key={i} />);
+                <img src="res/title.png" />
-        // });
+                <div className='line'>&nbsp;</div>
-
+                <div className='line'>Congratulations!</div>
-        if (WelcomeCtrl.isHighScore() > 0) {
+                <div className='line'>{this.props.score} is a new high score!</div>
-            return (
+                <div className='line'>Enter your initials:</div>
-                <div className='welcome'>
+                <Initials />
-                    <img src="res/title.png" />
+            </div>
-                    <div className='spacer'></div>
+        );
-                    <div className='line'>New high score!</div>
-                    <div className='line'>Enter your initials:</div>
-                    <Initials />
-                </div>
-            );
-        }
-        else {
-            return (
-                <div className='welcome'>
-                    <img src="res/title.png" />
-                    <div className='line'>Press Spacebar for new game</div>
-                    high scores here
-                </div>
-            );
-        }
-
-
     };
 };
 
 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);

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

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();

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 HighScoreCtrl = {
-
-const scores = [
-    { 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,
 
-    isHighScore: () => finalScore > 0,
+    updateScore: (finalScore) => {
+        score = finalScore;
+        dispatch(HighScoreActions.updateScore(finalScore));
+    },
 
-    gameOver: (score) => {
+    checkForHighScore: () => {
-        let found = -1;
+        const scores = JSON.parse(localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY));
-        finalScore = -1;
 
         for (let i = 0; i < scores.length; i++) {
             if (scores[i].score < score) {
                 found  = i;
+                break;
             }
         }
 
-        finalScore = -1;
+        console.log(found)
-        if (found > -1) {
-            // scores.splice(found, { initials: 'ZZZ', score: score });
-        //     scores.pop();
-            finalScore = score;
-        }
-    },
-
-    update: () => {
-        const scores = localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY);
 
-        if (scores !== null) {
+        if (found === -1) {
-            dispatch(WelcomeActions.updateScores(scores));
+            dispatch(ModeActions.welcome());
         }
     },
 
     keydown: (e) => {
-        if ((gameOverFlag === true && e.keyCode === 13) || (gameOverFlag === true && e.keyCode === 32)) {
+        if (e.keyCode === 13 || e.keyCode === 32) {
-        }
+            let scores = JSON.parse(localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY));
-        else if (gameOverFlag === true) {
+            const initials = InitialsCtrl.getInitials();
-            InitialsCtrl.keydown(e);
-        }
-        else if (e.keyCode === 32) {
-            this.props.dispatch(ModeActions.options());
-        }
-    },
 
-    doTheThing: () => {
+            scores.splice(found, 0, { initials: initials, score: score });
-        const scores = localStorage.getItem(SETTINGS.LOCAL_STORAGE_KEY);
+            scores.pop();
+            localStorage.setItem(SETTINGS.LOCAL_STORAGE_KEY, JSON.stringify(scores));
 
-        if (scores !== null) {
+            found = -1;
-            return scores[0].score;
+            score = 0;
-        }
 
-        return 0;
+            dispatch(ModeActions.welcome());
-        // localStorage.setItem(SETTINGS.LOCAL_STORAGE_KEY, scores);
+        }
-    },
+    }
 };
 
-export default WelcomeCtrl;
+export default HighScoreCtrl;

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

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())

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));
     },
 

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,

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();
     }
 

sass/high-score/high-score.scss

@@ -9,96 +9,12 @@
     }
 
     .line {
-        line-height:30px;
+        line-height:50px;
-    }
+        margin:0 auto;
-
+        width:$w;
-    .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;
     }
 
     .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;
-//     }
-// }