its a start

Author: kenwheeler

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": ["transform-flow-strip-types"]
+}

.eslintignore

@@ -0,0 +1,7 @@
+/demo/**
+/dist/**
+/interfaces/**
+/lib/**
+/node_modules/**
+/public/**
+/umd/**

.eslintrc

@@ -0,0 +1,11 @@
+"extends": "formidable/configurations/es6-react"
+"parser": "babel-eslint"
+"env":
+  "browser": true
+"rules":
+  "no-magic-numbers": 0
+  "no-invalid-this": 0
+  "react/sort-comp": 0
+  "comma-dangle": [2, "always-multiline"]
+  "jsx-quotes": [2, "prefer-double"]
+  "quotes": [2, "single",{"allowTemplateLiterals": true}]

.flowconfig

@@ -0,0 +1,16 @@
+[libs]
+interfaces
+
+[ignore]
+.*/dist/.*
+.*/lib/.*
+.*/umd/.*
+.*/demo/.*
+.*/node_modules/flow-bin/.*
+
+[include]
+src
+
+[options]
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+lib
+umd

.npmignore

@@ -0,0 +1,2 @@
+src
+dist

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2013
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

demo/character.js

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+
+import {
+  Sprite,
+} from '../src';
+
+export default class Character extends Component {
+  static propTypes = {
+    state: PropTypes.number,
+  };
+  render() {
+    return (
+      <Sprite
+        animating
+        src="assets/character-sprite.png"
+        scale={4}
+        state={this.props.state}
+        states={[9, 9, 0]}
+      />
+    );
+  }
+}

demo/demo.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+import {
+  Game,
+  Keys,
+} from '../src';
+
+import Character from './character';
+
+import './index.css';
+
+export default class Demo extends Component {
+
+  handleInput = (e) => {
+    switch (e.keyCode) {
+    case '37':
+      // left
+      break;
+    case '39':
+      // right
+      break;
+    default:
+      break;
+    }
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      character: 0,
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const state = this.state.character === 2 ? 0 : this.state.character + 1;
+    this.setState({
+      character: state,
+    });
+  }
+
+  render() {
+    return (
+      <Game>
+        <Keys onInput={this.handleInput} />
+        <Character state={this.state.character}/>
+        {this.state.character}
+        <button style={{ marginTop: 200 }}onClick={this.handleClick} type="button">Toggle</button>
+      </Game>
+    );
+  }
+
+}

demo/index.css

@@ -0,0 +1,6 @@
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}

demo/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './demo';
+
+ReactDOM.render(
+  <Demo />,
+  document.getElementById('root')
+);

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "react-game-kit",
+  "version": "0.0.1",
+  "description": "Make games with react",
+  "main": "lib",
+  "files": [
+    "lib",
+    "umd"
+  ],
+  "scripts": {
+    "start": "webpack-dev-server --inline --port 3000 --config webpack.config.dev.js --content-base public/",
+    "build": "babel src -d lib --copy-files",
+    "clean": "rimraf dist",
+    "clean-umd": "rimraf umd",
+    "dist": "npm run clean && webpack && cp -a public/. dist/",
+    "lint": "eslint src demo --fix",
+    "flow-check": "flow check",
+    "flow": "flow",
+    "umd": "npm run clean-umd && webpack --config webpack.config.umd.js"
+  },
+  "author": "Ken Wheeler",
+  "license": "MIT",
+  "repository": "https://github.com/FormidableLabs/react-music",
+  "dependencies": {
+    "mobx": "^2.5.0",
+    "mobx-react": "^3.5.5"
+  },
+  "peerDependencies": {
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-flow-strip-types": "^6.14.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^3.3.1",
+    "eslint-config-formidable": "^1.0.1",
+    "eslint-plugin-filenames": "^1.1.0",
+    "eslint-plugin-import": "^1.14.0",
+    "eslint-plugin-jsx-a11y": "^2.1.0",
+    "eslint-plugin-react": "^6.1.2",
+    "flow-bin": "^0.31.1",
+    "json-loader": "^0.5.4",
+    "postcss-loader": "^0.10.1",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "rimraf": "^2.5.4",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.15.0"
+  }
+}

public/assets/character-sprite.png

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>React Game Kit</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>

public/index.css

@@ -0,0 +1,71 @@
+import React, { Component, PropTypes } from 'react';
+
+import GameLoop from '../utils/game-loop';
+
+export default class Game extends Component {
+
+  static propTypes = {
+    children: PropTypes.any,
+    stageHeight: PropTypes.number,
+    stageWidth: PropTypes.number,
+    style: PropTypes.object,
+  };
+
+  static defaultProps = {
+    stageWidth: 1024,
+    stageHeight: 768,
+  };
+
+  static childContextTypes = {
+    loop: PropTypes.object,
+    scale: PropTypes.number,
+  };
+
+  constructor(props) {
+    super(props);
+    this.container = null;
+    this.loop = new GameLoop();
+  }
+
+  componentDidMount() {
+    this.loop.start();
+  }
+
+  componentWillUnmount() {
+    this.loop.stop();
+  }
+
+  getChildContext() {
+    const { container } = this;
+    const { stageWidth, stageHeight } = this.props;
+
+    if (!container) {
+      return {
+        scale: 0,
+        loop: this.loop,
+      };
+    }
+
+    const xScale = container.offsetWidth / stageWidth;
+    const yScale = container.offsetHeight / stageHeight;
+
+    return {
+      scale: Math.max(xScale, yScale),
+      loop: this.loop,
+    };
+  }
+
+  render() {
+    const defaultStyles = {
+      height: '100%',
+      width: '100%',
+    };
+    const styles = { ...defaultStyles, ...this.props.style };
+    return (
+      <div style={styles} ref={(c) => { this.container = c; }}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+}

public/index.html

@@ -0,0 +1,33 @@
+import React, { Component, PropTypes } from 'react';
+
+export default class Keys extends Component {
+
+  static propTypes = {
+    onInput: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onInput: () => {},
+  };
+
+  handleKeyPress = (e) => {
+    this.props.onInput.call(null, e);
+  }
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    window.addEventListener('keydown', this.handleKeyPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.handleKeyPress);
+  }
+
+  render() {
+    return null;
+  }
+
+}