From 0a02eb5b2a89614a01f889d7354fc82ad7a4003f Mon Sep 17 00:00:00 2001 From: Ben Burlingham Date: Sun, 27 Mar 2016 16:59:09 -1000 Subject: [PATCH] Initial commit: basic movement, values, config. --- .babelrc | 5 + .gitignore | 2 + bundle.js | 7455 +++++++++++++++++++++++++++++++++++++++++++ index.html | 72 + js/Cell.js | 13 + js/Character.js | 35 + js/Grid.js | 41 + js/Input.js | 35 + js/Values.js | 15 + js/main.js | 5 + package.json | 28 + readme.md | 13 + sass/character.scss | 5 + webpack.config.js | 32 + 14 files changed, 7756 insertions(+) create mode 100644 .babelrc create mode 100644 .gitignore create mode 100644 bundle.js create mode 100644 index.html create mode 100644 js/Cell.js create mode 100644 js/Character.js create mode 100644 js/Grid.js create mode 100644 js/Input.js create mode 100644 js/Values.js create mode 100644 js/main.js create mode 100644 package.json create mode 100644 readme.md create mode 100644 sass/character.scss create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..811d140 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "react" + ] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ecfdfb2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +TODO.txt +node_modules diff --git a/bundle.js b/bundle.js new file mode 100644 index 0000000..c42d1b6 --- /dev/null +++ b/bundle.js @@ -0,0 +1,7455 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + __webpack_require__(1); + module.exports = __webpack_require__(74); + + +/***/ }, +/* 1 */ +/***/ function(module, exports, __webpack_require__) { + + /* WEBPACK VAR INJECTION */(function(__resourceQuery) {var url = __webpack_require__(2); + var SockJS = __webpack_require__(8); + var stripAnsi = __webpack_require__(72); + var scriptElements = document.getElementsByTagName("script"); + var scriptHost = scriptElements[scriptElements.length-1].getAttribute("src").replace(/\/[^\/]+$/, ""); + + // If this bundle is inlined, use the resource query to get the correct url. + // Else, get the url from the + + + + + + + +
+ + + diff --git a/js/Cell.js b/js/Cell.js new file mode 100644 index 0000000..38526fc --- /dev/null +++ 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 (
{this.props.value}
); + } +}); + +module.exports = Cell; diff --git a/js/Character.js b/js/Character.js new file mode 100644 index 0000000..a7eea71 --- /dev/null +++ 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 ( +
+
our
hero
+
+ ); + } +}); + +module.exports = character; diff --git a/js/Grid.js b/js/Grid.js new file mode 100644 index 0000000..0210057 --- /dev/null +++ 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(); + } + } + + return (
+ {cells} + +
); + } +}); diff --git a/js/Input.js b/js/Input.js new file mode 100644 index 0000000..60dddca --- /dev/null +++ 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 }); + } + } + } +}; diff --git a/js/Values.js b/js/Values.js new file mode 100644 index 0000000..7ca87d7 --- /dev/null +++ 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; + } +}; diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..820d440 --- /dev/null +++ b/js/main.js @@ -0,0 +1,5 @@ +var React = require('react'); +var ReactDOM = require('react-dom'); +var Grid = require('./Grid.js'); + +ReactDOM.render(, document.getElementById('grid')); diff --git a/package.json b/package.json new file mode 100644 index 0000000..75df529 --- /dev/null +++ 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" + } +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..c4863db --- /dev/null +++ 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/. diff --git a/sass/character.scss b/sass/character.scss new file mode 100644 index 0000000..cc0aa96 --- /dev/null +++ b/sass/character.scss @@ -0,0 +1,5 @@ +.character { + $bg: crimson; + + background: $bg; +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..e32eff9 --- /dev/null +++ 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' + } +};