Minor debugs and production prep.

master
Ben Burlingham 9 years ago
parent 778c1678a9
commit 697ef18407
  1. 4
      App.js
  2. 7478
      bundle.js
  3. 79
      components/board/board.component.js
  4. 2
      components/board/muncher.component.js
  5. 68
      components/board/troggles.component.js
  6. 8
      index.html
  7. 6
      index.js
  8. 2
      logic/troggle.logic.js
  9. 2
      logic/values.logic.js
  10. 4
      package.json
  11. 18808
      react-0.14.7.js
  12. 42
      react-dom-0.14.7.js
  13. 6
      reducers/board/board.reducer.js
  14. 3
      reducers/board/scorebar.reducer.js
  15. 1
      sass/reset.scss
  16. 9
      server.js
  17. 1
      style.css
  18. 18
      webpack.config.js

@ -7,8 +7,8 @@ import Board from './components/board/board.component';
import Welcome from './components/welcome/welcome.component';
export const SETTINGS = {
GRID_WIDTH: 6,
GRID_HEIGHT: 5,
GRID_WIDTH: 3,
GRID_HEIGHT: 3,
LIVES: 3
};

File diff suppressed because one or more lines are too long

@ -8,10 +8,10 @@ import Titlebar from './titlebar.component';
import Grid from './grid.component';
import Message from './message.component';
import Muncher from './muncher.component';
import Troggle from './troggle.component';
import Troggles from './troggles.component';
import Values from '../../reducers/Values';
import TroggleAI from '../../reducers/TroggleAI';
import ValuesLogic from '../../logic/values.logic.js';
// import TroggleAI from '../../reducers/TroggleAI';
import { SETTINGS } from '../../App';
import * as BoardActions from '../../actions/board/board.actions';
@ -20,10 +20,8 @@ import * as MessageActions from '../../actions/board/message.actions';
import * as MuncherActions from '../../actions/board/muncher.actions';
import * as TroggleActions from '../../actions/board/troggle.actions';
const troggleMoveTimers = [];
const troggleCreateTimers = [];
let listener = null;
let nextLevelFlag = false;
export default class Board extends Component {
refocus() {
@ -39,7 +37,6 @@ export default class Board extends Component {
};
componentWillUnmount() {
// this.clearTroggleTimers();
window.removeEventListener('keydown', listener);
};
@ -50,49 +47,11 @@ export default class Board extends Component {
// this.createTroggles();
};
// clearTroggleTimers() {
// troggleMoveTimers.forEach((timer) => {
// clearTimeout(timer);
// });
//
// troggleCreateTimers.forEach((timer) => {
// clearTimeout(timer);
// });
// };
//
// createTroggle(index) {
// const newCoords = TroggleAI.create();
// this.props.dispatch(TroggleActions.create(newCoords.x, newCoords.y));
// troggleMoveTimers.push(setTimeout(this.moveTroggle.bind(this, index), 1000));
// };
//
// createTroggles() {
// const troggleCount = 3; //Math.min(Math.ceil(this.props.board.level / 2), 5);
// for (let i = 0; i < troggleCount; i++) {
// setTimeout(this.createTroggle.bind(this, i), (i + 1) * 5000);
// }
// };
//
// moveTroggle(index) {
// const newCoords = TroggleAI.move(
// this.props.troggles[index].x,
// this.props.troggles[index].y,
// this.props.muncher.x,
// this.props.muncher.y
// );
//
// if (newCoords.x === this.props.muncher.x && newCoords.y === this.props.muncher.y) {
// this.props.dispatch(MessageActions.show("You've been eaten by a troggle!"));
// this.props.dispatch(TroggleActions.clearAll());
// }
// else {
// this.props.dispatch(TroggleActions.move(index, newCoords.x, newCoords.y));
// clearTimeout(troggleMoveTimers[index]);
// troggleMoveTimers[index] = setTimeout(this.moveTroggle.bind(this, index), 1000);
// }
// };
messageNext() {
if (nextLevelFlag === true) {
this.nextLevel();
nextLevelFlag = false;
}
this.props.dispatch(MessageActions.hide());
ReactDOM.findDOMNode(this.refs.muncher).focus();
};
@ -103,32 +62,32 @@ export default class Board extends Component {
if (this.props.values[index].valid) {
this.props.dispatch(BoardActions.hideValue(index));
this.props.dispatch(ScorebarActions.munchSucceeded());
// State will not have been updated; temporary state created for checking.
const tmp = this.props.values.slice(0);
tmp[index].show = false;
if (ValuesLogic.checkComplete(tmp, this.props.level)) {
nextLevelFlag = true;
this.props.dispatch(MessageActions.exclaim());
ReactDOM.findDOMNode(this.refs.message).focus();
}
}
else {
const msg = Values.getError(this.props.values[index].value, this.props.level);
const msg = ValuesLogic.getError(this.props.values[index].value, this.props.level);
this.props.dispatch(MessageActions.show(msg));
this.props.dispatch(ScorebarActions.munchFailed());
ReactDOM.findDOMNode(this.refs.message).focus();
}
// if (Values.checkComplete(this.props.values, this.props.level)) {
// this.props.dispatch(MessageActions.exclaim());
// }
};
render() {
// const troggleElements = [];
// for (let i = 0; i < troggles.length; i++) {
// troggleElements[i] = <Troggle x={troggles[i].x} y={troggles[i].y} key={i} />;
// }
// {troggleElements}
return (<div className='board'>
<Scorebar />
<Titlebar title={this.props.title} />
<Message ref='message' next={this.messageNext.bind(this)} />
<Grid values={this.props.values} />
<Muncher ref='muncher' next={this.muncherNext.bind(this)} />
<Muncher ref='muncher' onMunch={this.muncherNext.bind(this)} />
</div>);
};
};

@ -12,7 +12,7 @@ export class Muncher extends Component {
switch (e.keyCode) {
case 32:
this.props.next(x, y);
this.props.onMunch(x, y);
break;
case 37:
if (x !== 0) {

@ -0,0 +1,68 @@
require('../../sass/board/troggle.scss');
import { Component } from 'react';
const troggleMoveTimers = [];
const troggleCreateTimers = [];
export default class Troggles extends Component {
componentWillUnmount() {
// this.clearTroggleTimers();
}
// clearTroggleTimers() {
// troggleMoveTimers.forEach((timer) => {
// clearTimeout(timer);
// });
//
// troggleCreateTimers.forEach((timer) => {
// clearTimeout(timer);
// });
// };
//
// createTroggle(index) {
// const newCoords = TroggleAI.create();
// this.props.dispatch(TroggleActions.create(newCoords.x, newCoords.y));
// troggleMoveTimers.push(setTimeout(this.moveTroggle.bind(this, index), 1000));
// };
//
// createTroggles() {
// const troggleCount = 3; //Math.min(Math.ceil(this.props.board.level / 2), 5);
// for (let i = 0; i < troggleCount; i++) {
// setTimeout(this.createTroggle.bind(this, i), (i + 1) * 5000);
// }
// };
//
// moveTroggle(index) {
// const newCoords = TroggleAI.move(
// this.props.troggles[index].x,
// this.props.troggles[index].y,
// this.props.muncher.x,
// this.props.muncher.y
// );
//
// if (newCoords.x === this.props.muncher.x && newCoords.y === this.props.muncher.y) {
// this.props.dispatch(MessageActions.show("You've been eaten by a troggle!"));
// this.props.dispatch(TroggleActions.clearAll());
// }
// else {
// this.props.dispatch(TroggleActions.move(index, newCoords.x, newCoords.y));
// clearTimeout(troggleMoveTimers[index]);
// troggleMoveTimers[index] = setTimeout(this.moveTroggle.bind(this, index), 1000);
// }
// };
render() {
const classname = ['troggle', 'x' + this.props.x, 'y' + this.props.y];
// const troggleElements = [];
// for (let i = 0; i < troggles.length; i++) {
// troggleElements[i] = <Troggle x={troggles[i].x} y={troggles[i].y} key={i} />;
// }
// {troggleElements}
return (
<div className={classname.join(' ')}></div>
);
};
};

@ -3,13 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Number Munchers</title>
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<link rel="stylesheet" href="style.css"></link>
<script src="react-0.14.7.js"></script>
<script src="react-dom-0.14.7.js"></script>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div id="app"></div>
<script src='http://localhost:8080/bundle.js'></script>
<script src='./bundle.js'></script>
</body>
</html>

@ -11,7 +11,7 @@ import boardReducer from './reducers/board/board.reducer';
import muncherReducer from './reducers/board/muncher.reducer';
import scorebarReducer from './reducers/board/scorebar.reducer';
import messageReducer from './reducers/board/message.reducer';
import troggleReducer from './reducers/board/troggle.reducer';
// import troggleReducer from './reducers/board/troggle.reducer';
const reducers = combineReducers({
mode: modeReducer,
@ -19,8 +19,8 @@ const reducers = combineReducers({
muncher: muncherReducer,
scorebar: scorebarReducer,
board: boardReducer,
message: messageReducer,
troggles: troggleReducer
message: messageReducer
// troggles: troggleReducer
});
const store = createStore(reducers);

@ -1,6 +1,6 @@
import { SETTINGS } from '../App';
const TroggleAI = {
const TroggleLogic = {
move: function(currX, currY, muncherX, muncherY) {
// Randomize movement with boolean flags.
const moveToAttack = Boolean(Math.round(Math.random()));

@ -1,3 +1,5 @@
import { dispatch } from 'redux';
const validate = function(value, level) {
return ((value || -1) % (level + 2) === 0);
};

@ -4,7 +4,8 @@
"description": "MECC's classic Number Munchers game rebuilt with React and Webpack.",
"main": "./js/main.js",
"scripts": {
"dev": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors"
"dev": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --inline --colors",
"prod": "NODE_ENV=production ./node_modules/webpack/bin/webpack.js -p"
},
"author": "Ben Burlingham",
"license": "ISC",
@ -21,7 +22,6 @@
"node-sass": "^3.4.2",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.4",
"redux": "^3.4.0",
"sass-loader": "^3.2.0",

File diff suppressed because it is too large Load Diff

@ -0,0 +1,42 @@
/**
* ReactDOM v0.14.7
*
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
// Based off https://github.com/ForbesLindesay/umd/blob/master/template.js
;(function(f) {
// CommonJS
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = f(require('react'));
// RequireJS
} else if (typeof define === "function" && define.amd) {
define(['react'], f);
// <script>
} else {
var g;
if (typeof window !== "undefined") {
g = window;
} else if (typeof global !== "undefined") {
g = global;
} else if (typeof self !== "undefined") {
g = self;
} else {
// works providing we're not in "use strict";
// needed for Java 8 Nashorn
// see https://github.com/facebook/react/issues/3037
g = this;
}
g.ReactDOM = f(g.React);
}
})(function(React) {
return React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
});

@ -1,7 +1,7 @@
const Immutable = require('immutable');
import * as BoardActions from '../../actions/board/board.actions';
import Values from '../Values';
import ValuesLogic from '../../logic/values.logic.js';
import { SETTINGS } from '../../App';
const initial = {
@ -31,8 +31,8 @@ const reducer = (state = initial, action) => {
const lvl = state.level + 1;
return Immutable.Map(state)
.set('level', lvl)
.set('title', Values.getDescription(lvl))
.set('values', Values.generate(count, lvl))
.set('title', ValuesLogic.getDescription(lvl))
.set('values', ValuesLogic.generate(count, lvl))
.toObject();
}

@ -1,7 +1,6 @@
const Immutable = require('immutable');
import * as ScorebarActions from '../../actions/board/scorebar.actions';
import Values from '../Values';
import { SETTINGS } from '../../App';
const initial = { current: 0, high: 999, lives: SETTINGS.LIVES };
@ -14,7 +13,7 @@ const reducer = (state = initial, action) => {
switch (action.action) {
case ScorebarActions.MUNCH_SUCCEEDED:
return Immutable.Map(state).set('current', state.current + 10).toObject();
case ScorebarActions.MUNCH_FAILED:
return Immutable.Map(state).set('lives', state.lives - 1).toObject();
}

@ -2,5 +2,6 @@
box-sizing:border-box;
font-family:Emulogic;
margin: 0;
outline:none;
padding: 0;
}

@ -0,0 +1,9 @@
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 3000))
app.use(express.static(__dirname));
app.listen(app.get('port'), function() {
console.log('Listening on localhost:' + app.get('port'));
});

@ -0,0 +1 @@
.scorebar{font-size:0;height:70px;line-height:50px;margin:0 auto;width:600px}.scorebar .item{display:inline-block;font-size:13px;height:70px;line-height:70px;vertical-align:top}.scorebar .current-score{width:30%}.scorebar .high-score{text-align:center;width:40%}.scorebar .lives{text-align:right;width:30%}.scorebar .life{background:lime;display:inline-block;height:36px;margin-left:10px;vertical-align:middle;width:36px}.titlebar{font-size:13px;height:40px;line-height:40px;text-align:center}.grid{height:500px;overflow:hidden;position:relative;width:600px;z-index:0}.grid .cell{border:1px solid purple;height:100px;line-height:100px;position:absolute;text-align:center;width:100px}.message{background:#fff;border:1px solid #000;font-size:14px;line-height:40px;margin:150px 5%;padding:30px;position:absolute;text-align:center;width:90%;z-index:1000}.message,.message *{cursor:default}.message.hidden{opacity:0}.muncher{background:aqua;height:100px;margin-top:110px;opacity:.5;position:absolute;width:100px}.muncher.active{border:10px solid purple}.troggle{background:crimson;height:100px;margin-top:110px;opacity:.5;position:absolute;width:100px}.board{margin:0 auto;position:relative;width:600px}.board .x-1{left:-100px}.board .y-1{top:-100px}.board .x0{left:0}.board .y0{top:0}.board .x1{left:100px}.board .y1{top:100px}.board .x2{left:200px}.board .y2{top:200px}.board .x3{left:300px}.board .y3{top:300px}.board .x4{left:400px}.board .y4{top:400px}.board .x5{left:500px}.board .y5{top:500px}.board .x6{left:600px}.board .y6{top:600px}.board .x7{left:700px}.board .y7{top:700px}.highscores{font-size:0}.highscores .entry{font-size:16px;line-height:40px}.highscores .rank{display:inline-block;text-align:left;width:50px}.highscores .initials{display:inline-block;width:100px}.highscores .score{display:inline-block;text-align:right;width:200px}.welcome{padding:20px;text-align:center}.welcome img{width:350px}.welcome .highscores{margin:0 auto;width:350px}.welcome .newgame{margin:20px 0;transition:opacity .1s ease}.welcome .newgame.hidden{opacity:.5}*{box-sizing:border-box;font-family:Emulogic;margin:0;outline:none;padding:0}

@ -1,21 +1,7 @@
// http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html
var ExtractTextPlugin = require('extract-text-webpack-plugin');
function getEntrySources() {
var sources = [
'./index.js'
];
if (process.env.NODE_ENV !== 'production') {
sources.push('webpack-dev-server/client?http://localhost:8080');
//sources.push('webpack/hot/only-dev-server');
}
return sources;
}
module.exports = {
entry: getEntrySources(),
entry: './index.js',
module: {
loaders: [
@ -24,7 +10,7 @@ module.exports = {
exclude: __dirname + '/node_modules',
loader: 'babel',
query: {
presets: ['react', 'es2015']
presets: ['es2015', 'react']
}
},
{

Loading…
Cancel
Save