Initial commit: basic movement, values, config.

10 years ago · 0a02eb5b2a
commit 0a02eb5b2a
14 changed files with 7756 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,5 @@
+{
+    "presets": [
+        "react"
+    ]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+TODO.txt
+node_modules
--- a/bundle.js
+++ b/bundle.js
--- a/index.html
+++ b/index.html
@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="https://fb.me/react-0.14.7.js"></script>
+    <script src="https://fb.me/react-dom-0.14.7.js"></script>
+
+    <style>
+        * {
+            box-sizing:border-box;
+            font-family:Emulogic;
+        }
+
+        .ourhero {
+            background: aqua;
+            height:100px;
+            opacity:0.5;
+            position:absolute;
+            width:100px;
+        }
+
+        .active {
+            border:10px solid purple;
+        }
+
+        .x-1 { left: -100px; }
+        .x0 { left: 0; }
+        .x1 { left: 100px; }
+        .x2 { left: 200px; }
+        .x3 { left: 300px; }
+        .x4 { left: 400px; }
+        .x5 { left: 500px; }
+        .x6 { left: 600px; }
+
+        .y-1 { top: -100px; }
+        .y0 { top: 0; }
+        .y1 { top:100px; }
+        .y2 { top: 200px; }
+        .y3 { top: 300px; }
+        .y4 { top: 400px; }
+        .y5 { top: 500px; }
+        .y6 { top: 600px; }
+
+        .cell {
+            border:1px solid purple;
+            height:100px;
+            line-height:100px;
+            position:absolute;
+            text-align:center;
+            width:100px;
+        }
+
+        #grid {
+            height:500px;
+            overflow:hidden;
+            position:relative;
+            width:600px;
+        }
+    </style>
+</head>
+<body>
+    <!-- AAA 8973<br>
+    ASS 2389<br>
+    BOB 1100<br>
+
+    Press Spacebar -->
+
+    <div id="grid"></div>
+    <script src='http://localhost:8080/bundle.js'></script>
+</body>
+</html>
--- a/js/Cell.js
+++ b/js/Cell.js
@ -0,0 +1,13 @@
+var React = require('react');
+
+var Cell = React.createClass({
+    render: function() {
+        var classname = 'cell';
+        classname += ' x' + this.props.x;
+        classname += ' y' + this.props.y;
+
+        return (<div className={classname}>{this.props.value}</div>);
+    }
+});
+
+module.exports = Cell;
--- a/js/Character.js
+++ b/js/Character.js
@ -0,0 +1,35 @@
+var React = require('react');
+var Input = require('./Input');
+
+var character = React.createClass({
+    getInitialState: function() {
+        return {
+            active: true,
+            x: 0,
+            y: 0
+        };
+    },
+
+    move: function(x, y) {
+
+    },
+
+    //componentWillUpdate(object nextProps, object nextState)
+//componentDidUpdate(object prevProps, object prevState)
+
+    render: function() {
+        var classname = ['ourhero', 'x' + this.state.x, 'y' + this.state.y];
+
+        if (this.state.active === true) {
+            classname.push('active');
+        }
+
+        return (
+            <div>
+                <div className={classname.join(' ')}>our<br />hero</div>
+            </div>
+        );
+    }
+});
+
+module.exports = character;
--- a/js/Grid.js
+++ b/js/Grid.js
@ -0,0 +1,41 @@
+var React = require('react');
+var Cell = require('./Cell');
+var Character = require('./Character');
+var UserInput = require('./Input');
+var Values = require('./Values');
+
+module.exports = React.createClass({
+    getInitialState() {
+        return {
+            values: Values.generate(this.props.width, this.props.height)
+        };
+    },
+
+    componentDidMount() {
+        window.addEventListener('keydown', UserInput.keydown.bind(this));
+    },
+
+    munch(x, y) {
+        if (this.state.values[x + '-' + y][1] === true) {
+            console.log('yum');
+        }
+        else {
+            console.log('blech');
+        }
+    },
+
+    render() {
+        var cells = [];
+
+        for (var x = 0; x < this.props.width; x++) {
+            for (var y = 0; y < this.props.height; y++) {
+                cells.push(<Cell value={this.state.values[x + '-' + y][0]} x={x} y={y} key={x + '-' + y} />);
+            }
+        }
+
+        return (<div>
+            {cells}
+            <Character ref='ourhero1' />
+        </div>);
+    }
+});
--- a/js/Input.js
+++ b/js/Input.js
@ -0,0 +1,35 @@
+var Grid = require('./Grid');
+
+module.exports = {
+
+    keydown: function(e) {
+        var x = this.refs.ourhero1.state.x;
+        var y = this.refs.ourhero1.state.y;
+
+        switch (e.keyCode) {
+            case 32:
+                this.munch(x, y);
+                break;
+
+            case 37: // Left arrow
+                if (x > 0) {
+                    this.refs.ourhero1.setState({ x: x - 1 });
+                }
+                break;
+            case 38: // Up arrow
+                if (y > 0) {
+                    this.refs.ourhero1.setState({ y: y - 1 });
+                }
+                break;
+            case 39: // Right arrow
+                x < 2 ?
+                    this.refs.ourhero1.setState({ x: x + 1 }) :
+                    this.refs.ourhero1.setState({ x: 0 })
+                break;
+            case 40: // Down arrow
+                if (y < 2) {
+                    this.refs.ourhero1.setState({ y: y + 1 });
+                }
+        }
+    }
+};
--- a/js/Values.js
+++ b/js/Values.js
@ -0,0 +1,15 @@
+module.exports = {
+    generate: function(w, h) {
+        var values = {};
+        var rand;
+
+        for (var i = 0; i < w; i++) {
+            for (var j = 0; j < h; j++) {
+                rand = Math.ceil(Math.random() * 10);
+                values[i + '-' + j] = [rand, (rand % 2 === 0)];
+            }
+        }
+
+        return values;
+    }
+};
--- a/js/main.js
+++ b/js/main.js
@ -0,0 +1,5 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Grid = require('./Grid.js');
+
+ReactDOM.render(<Grid width="6" height="5" />, document.getElementById('grid'));
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "number-munchers",
+  "version": "1.0.0",
+  "description": "MECC's classic Number Munchers game rebuilt with React and Webpack.",
+  "main": "./js/main.js",
+  "scripts": {
+    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors --hot"
+  },
+  "author": "Ben Burlingham",
+  "license": "ISC",
+  "dependencies": {
+    "babel-loader": "^6.2.4",
+    "babel-preset-react": "^6.5.0"
+  },
+  "devDependencies": {
+    "express": "^4.13.4",
+    "jsx-loader": "^0.13.2",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-hot-loader": "^1.3.0",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://gogs.benburlingham.com/ben.burlingham/number-munchers"
+  }
+}
--- a/readme.md
+++ b/readme.md
@ -0,0 +1,13 @@
+## Number Munchers
+
+A rebuild of the [classic MECC math game](https://en.wikipedia.org/wiki/Munchers) using client-side React.
+
+### Development
+
+Number Munchers uses Webpack for live reloading and ES6 transpilation.
+
+Run `npm install` to install the required Node packages.
+
+Run `npm run start` in the project root to start the [webpack dev server](https://webpack.github.io/docs/webpack-dev-server.html).
+
+Navigate to http://localhost:8080/.
--- a/sass/character.scss
+++ b/sass/character.scss
@ -0,0 +1,5 @@
+.character {
+    $bg: crimson;
+
+    background: $bg;
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,32 @@
+// http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html
+function getEntrySources() {
+    var sources = [
+        './js/main.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(),
+
+    module: {
+        loaders: [
+            {
+                test: /\.js$/,
+                include: __dirname + '/js',
+                loaders: ['react-hot', 'babel']
+            }
+        ]
+    },
+
+    output: {
+        path: __dirname,
+        filename: 'bundle.js'
+    }
+};