Merge branch 'master' into remove-date-now

Author: kenwheeler

.gitignore

@@ -2,4 +2,6 @@ node_modules
 npm-debug.log
 lib
 umd
-dist
+dist
+
+.idea

README.md

@@ -93,7 +93,7 @@ Once this general structure is established, what follows usually depends on what
 Using this library with React Native is a simple as importing from the native directory:
 
 ```js
-import { Loop, Stage, ...etc } from 'react-game-kit/native'; 
+import { Loop, Stage, ...etc } from 'react-game-kit/native';
 ```
 
 > Note: AudioPlayer and KeyListener are not implemented on the React Native version.
@@ -111,15 +111,15 @@ class ChildComponent extends React.Component {
   static contextTypes = {
     loop: PropTypes.object,
   };
-	
+
   update = () => {
     // tick logic
   };
-	
+
   componentDidMount() {
     this.context.loop.subscribe(this.update);
   }
-	
+
   componentWillUnmount() {
     this.context.loop.unsubscribe(this.update);
   }
@@ -135,7 +135,7 @@ class ChildComponent extends React.Component {
 
 **width** (_number_) : Base game width. Defaults to `1024`.
 
-The `Stage` component also leverages `context` much like `Loop`, except it passes game scale as `this.context.scale`. You can use this value to appropriately scale positioning and dimension values within your game. Again, you would have to specify `scale: PropTypes.number` in your component's `contextTypes` to receive this value. 
+The `Stage` component also leverages `context` much like `Loop`, except it passes game scale as `this.context.scale`. You can use this value to appropriately scale positioning and dimension values within your game. Again, you would have to specify `scale: PropTypes.number` in your component's `contextTypes` to receive this value.
 
 --
 
@@ -218,6 +218,10 @@ The `Sprite` component lets you define sprite animations using sprite sheets. Wh
 
 **tileSize** (number) : Tilemap tile size.
 
+**width** (number) : Tilemap width.
+
+**height** (number) : Tilemap height.
+
 The `TileMap` component lets you define tile maps from a tile atlas. Your tilemap is made of up rows and columns. Each layer is then drawn using those numbers as reference. So for example, if you had 4 rows and 4 columns, with 1 layer, your `layers` prop would look like:
 
 ```js

package.json

@@ -46,6 +46,7 @@
     "mobx": "^2.5.0",
     "mobx-react": "^3.5.5",
     "postcss-loader": "^0.10.1",
+    "prop-types": "^15.5.10",
     "raw-loader": "^0.5.1",
     "react": "^15.2.1",
     "react-dom": "^15.2.1",

src/components/body.js

@@ -1,4 +1,5 @@
-import { Component, PropTypes } from 'react';
+import { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import Matter, { World, Bodies } from 'matter-js';
 

src/components/loop.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import GameLoop from '../utils/game-loop';
 

src/components/sprite.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export default class Sprite extends Component {
 

src/components/stage.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 export default class Stage extends Component {
 

src/components/tile-map.js

@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 
 export default class TileMap extends Component {
@@ -12,6 +13,8 @@ export default class TileMap extends Component {
     src: PropTypes.string,
     style: PropTypes.object,
     tileSize: PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number
   };
 
   static defaultProps = {
@@ -85,17 +88,26 @@ export default class TileMap extends Component {
 
   getImageStyles(imageIndex) {
     const { scale } = this.context;
-    const { tileSize } = this.props;
+    const { tileSize, width, height } = this.props;
 
     const size = Math.round(scale * tileSize);
-    const left = (imageIndex - 1) * size;
+
+    var left, top;
+    if (!width || !height) {
+      left = (imageIndex - 1) * size;
+      top = 0;
+    } else {
+      const cols = width / tileSize;
+      const rows = height / tileSize;
+      left = ((imageIndex - 1) % cols) * Math.round((scale * width) / cols);
+      top = Math.floor((imageIndex - 1) / cols) * Math.round((scale * height) / rows);
+    }
 
     return {
       position: 'absolute',
       imageRendering: 'pixelated',
       display: 'block',
-      height: '100%',
-      transform: `translate(-${left}px, 0px)`,
+      transform: `translate(-${left}px, -${top}px)`,
     };
   }
 

src/components/world.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import Matter, {Engine, Events} from 'matter-js';
 

src/native/components/body.js

@@ -1,4 +1,5 @@
-import { Component, PropTypes } from 'react';
+import { Component } from 'react';
+import PropTypes from 'prop-types';
 
 import Matter, { World, Bodies } from 'matter-js';