High score mechanism complete.

master
Ben Burlingham 9 years ago
parent 7bfab9163b
commit 09868fc8d1
  1. 3
      App.js
  2. 15
      actions/high-score/high-score.actions.js
  3. 53
      components/high-score/high-score.component.js
  4. 13
      components/high-score/initials.component.js
  5. 7
      controllers/board/board.controller.js
  6. 74
      controllers/high-score/high-score.controller.js
  7. 8
      controllers/high-score/initials.controller.js
  8. 2
      controllers/mode.controller.js
  9. 8
      controllers/welcome/welcome.controller.js
  10. 3
      index.js
  11. 16
      reducers/high-score/high-score.reducer.js
  12. 90
      sass/high-score/high-score.scss

@ -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:

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

@ -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(<HofRow initials={v.initials} score={v.score} rank={v.rank} key={i} />);
// });
if (WelcomeCtrl.isHighScore() > 0) {
return (
<div className='welcome'>
<img src="res/title.png" />
<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>
);
}
return (
<div className='high-score'>
<img src="res/title.png" />
<div className='line'>&nbsp;</div>
<div className='line'>Congratulations!</div>
<div className='line'>{this.props.score} is a new high score!</div>
<div className='line'>Enter your initials:</div>
<Initials />
</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);

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

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

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

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

@ -7,6 +7,8 @@ const ModeCtrl = {
welcome: () => dispatch(ModeActions.welcome()),
highscore: () => dispatch(ModeActions.highscore()),
options: () => dispatch(ModeActions.options()),
board: () => dispatch(ModeActions.board())

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

@ -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,

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

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

Loading…
Cancel
Save