Merge pull request #2 from IcculusC/hex-engine

v1.0.0

README.md

@@ -13,3 +13,6 @@ Quote from the original readme
 > With inspiration from
 [http://www.redblobgames.com/grids/hexagons](http://www.redblobgames.com/grids/hexagons).
 
+# Documentation
+
+Documentation forthcoming alongside stable APIs.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hex-engine",
   "description": "Hexagon Map Editor and Game Engine",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "main": "lib/index.js",
   "author": "IcculusC",
   "repository": "IcculusC/react-hex-engine",

src/Context.js

@@ -1,48 +1,20 @@
 import React from "react";
-import Orientation from "./models/Orientation";
 
-export const LayoutContext = React.createContext({
-  layout: Orientation.Flat,
-  points: ""
+export const HexEngineContext = React.createContext({
+  layout: null,
+  points: null,
+  viewBox: null
 });
-export const {
-  Provider: LayoutProvider,
-  Consumer: LayoutConsumer
-} = LayoutContext;
-
-export function withLayout(Component) {
-  return props => (
-    <LayoutConsumer>
-      {layout => <Component layout={layout} {...props} />}
-    </LayoutConsumer>
-  );
-}
 
-export function withExpandedLayout(Component) {
-  return props => (
-    <LayoutConsumer>
-      {({ layout, points }) => (
-        <Component layout={layout} points={points} {...props} />
-      )}
-    </LayoutConsumer>
-  );
-}
-
-export const ViewBoxContext = React.createContext({
-  x: -50,
-  y: -50,
-  width: 100,
-  height: 100
-});
 export const {
-  Provider: ViewBoxProvider,
-  Consumer: ViewBoxConsumer
-} = ViewBoxContext;
+  Consumer: HexEngineConsumer,
+  Provider: HexEngineProvider
+} = HexEngineContext;
 
-export function withViewBox(Component) {
+export function withHexEngine(Component) {
   return props => (
-    <ViewBoxConsumer>
-      {viewBox => <Component viewBox={viewBox} {...props} />}
-    </ViewBoxConsumer>
+    <HexEngineConsumer>
+      {engine => <Component {...engine} {...props} />}
+    </HexEngineConsumer>
   );
 }

src/HexEngine.js

@@ -0,0 +1,103 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { HexEngineProvider } from "./Context";
+import Point from "./models/Point";
+import Orientation from "./models/Orientation";
+
+class HexEngine extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    classes: PropTypes.objectOf(PropTypes.string),
+    flat: PropTypes.bool,
+    height: PropTypes.oneOfType([
+      PropTypes.string.isRequired,
+      PropTypes.number.isRequired
+    ]),
+    origin: PropTypes.oneOfType([
+      PropTypes.instanceOf(Point),
+      PropTypes.shape({ x: PropTypes.number, y: PropTypes.number })
+    ]),
+    size: PropTypes.oneOfType([
+      PropTypes.instanceOf(Point),
+      PropTypes.shape({ x: PropTypes.number, y: PropTypes.number })
+    ]),
+    spacing: PropTypes.number,
+    width: PropTypes.oneOfType([
+      PropTypes.string.isRequired,
+      PropTypes.number.isRequired
+    ]),
+    viewBox: PropTypes.objectOf(PropTypes.number)
+  };
+
+  static defaultProps = {
+    classes: { grid: "", layout: "" },
+    flat: true,
+    height: 480,
+    origin: new Point(0, 0),
+    size: new Point(10, 10),
+    spacing: 1.0,
+    width: 640,
+    viewBox: {
+      height: 100,
+      width: 100,
+      x: -50,
+      y: -50
+    }
+  };
+
+  static getPointOffset(corner, orientation, size) {
+    let angle = (2.0 * Math.PI * (corner + orientation.startAngle)) / 6;
+    return new Point(size.x * Math.cos(angle), size.y * Math.sin(angle));
+  }
+
+  static calculateCoordinates(orientation, size) {
+    const center = new Point(0, 0);
+    return [...Array(6).keys()].map((_, i) => {
+      const offset = HexEngine.getPointOffset(i, orientation, size);
+      return new Point(center.x + offset.x, center.y + offset.y);
+    });
+  }
+
+  render() {
+    const {
+      children,
+      classes,
+      flat,
+      height,
+      size,
+      viewBox,
+      width,
+      ...rest
+    } = this.props;
+
+    const orientation = flat ? Orientation.Flat : Orientation.Pointy;
+    const points = HexEngine.calculateCoordinates(orientation, size)
+      .map(point => point.toString())
+      .join(" ");
+    const layout = { orientation, size, ...rest };
+
+    return (
+      <svg
+        className={classNames("grid", classes.grid)}
+        height={height}
+        version="1.1"
+        viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
+        width={width}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <HexEngineProvider
+          value={{
+            layout,
+            points,
+            viewBox
+          }}
+        >
+          <g className={classes.layout}>{children}</g>
+        </HexEngineProvider>
+      </svg>
+    );
+  }
+}
+
+export default HexEngine;

src/Hexagon.js

@@ -5,7 +5,7 @@ import Hex from "./models/Hex";
 import HexUtils from "./HexUtils";
 import Point from "./models/Point";
 import Text from "./Text";
-import { withExpandedLayout } from "./Context";
+import { withHexEngine } from "./Context";
 
 class Hexagon extends Component {
   static propTypes = {
@@ -250,4 +250,4 @@ class Hexagon extends Component {
   }
 }
 
-export default withExpandedLayout(Hexagon);
+export default withHexEngine(Hexagon);

src/Path.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import HexUtils from "./HexUtils";
-import { withExpandedLayout } from "./Context";
+import { withHexEngine } from "./Context";
 
 class Path extends Component {
   static propTypes = {
@@ -42,4 +42,4 @@ class Path extends Component {
   }
 }
 
-export default withExpandedLayout(Path);
+export default withHexEngine(Path);

src/index.js

@@ -1,20 +1,14 @@
 export {
-  LayoutConsumer,
-  LayoutContext,
-  LayoutProvider,
-  ViewBoxConsumer,
-  ViewBoxContext,
-  ViewBoxProvider,
-  withExpandedLayout,
-  withLayout,
-  withViewBox
+  HexEngineConsumer,
+  HexEngineContext,
+  HexEngineProvider,
+  withHexEngine
 } from "./Context";
 export { default as GridGenerator } from "./GridGenerator";
 export { default as Hex } from "./models/Hex";
 export { default as Hexagon } from "./Hexagon";
-export { default as HexGrid } from "./HexGrid";
+export { default as HexEngine } from "./HexEngine";
 export { default as HexUtils } from "./HexUtils";
-export { default as Layout } from "./Layout";
 export { default as Orientation } from "./models/Orientation";
 export { default as Path } from "./Path";
 export { default as Pattern } from "./Pattern";