Skip to content

Commit 0c8c1f2

Browse files
IcculusCIcculusC
authored
v1.1.0 (#8)
1 parent d5304bd commit 0c8c1f2

10 files changed

Lines changed: 229 additions & 285 deletions

File tree

‎.storybook/config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import * as storybook from "@storybook/react";
22
import { setOptions } from "@storybook/addon-options";
33

44
setOptions({
5-
name: "react-hex-engine",
6-
addonPanelInRight: true
5+
name: "react-hex-engine"
76
});
87

98
function loadStories() {

‎README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://icculusc.github.io/react-hex-engine)
2-
[![CircleCI](https://circleci.com/gh/IcculusC/react-hex-engine/tree/master.svg?style=shield)](https://circleci.com/gh/IcculusC/react-hex-engine/tree/master)
3-
1+
[![GitHub release](https://img.shields.io/github/release/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/releases/latest)
2+
[![CircleCI branch](https://img.shields.io/circleci/project/github/IcculusC/react-hex-engine/master.svg)](https://github.com/IcculusC/react-hex-engine/tree/master)
3+
[![GitHub pull requests](https://img.shields.io/github/issues-pr/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/pulls)
4+
[![GitHub issues](https://img.shields.io/github/issues/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/issues)
5+
[![GitHub last commit](https://img.shields.io/github/last-commit/icculusc/react-hex-engine.svg)](https://github.com/IcculusC/react-hex-engine/commits)
6+
[![Docs status](https://img.shields.io/badge/docs-in_progress-orange.svg)](https://icculusc.github.io/react-hex-engine/)
47

58
# react-hex-engine
69

10+
Check out the [storybook](https://icculusc.github.io/react-hex-engine) for the existing documentation. Improvements to the docs are in the pipeline!
11+
712
Originally forked from [https://github.com/Hellenic/react-hexgrid](https://github.com/Hellenic/react-hexgrid)
813

914
Quote from the original readme

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "react-hex-engine",
33
"description": "Hexagon Map Editor and Game Engine",
4-
"version": "1.0.0",
4+
"version": "1.1.0",
55
"main": "lib/index.js",
66
"author": "IcculusC",
77
"repository": "IcculusC/react-hex-engine",

‎src/HexEngine.js‎

Lines changed: 108 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,122 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22
import PropTypes from "prop-types";
33
import classNames from "classnames";
44
import { HexEngineProvider } from "./Context";
55
import Point from "./models/Point";
66
import Orientation from "./models/Orientation";
77

8-
class HexEngine extends Component {
9-
static propTypes = {
10-
children: PropTypes.node.isRequired,
11-
classes: PropTypes.objectOf(PropTypes.string),
12-
/** Determines if the hexagons are oriented with a point or an edge facing up */
13-
flat: PropTypes.bool,
14-
/** CSS string or number */
15-
height: PropTypes.oneOfType([
16-
PropTypes.string.isRequired,
17-
PropTypes.number.isRequired
18-
]),
19-
/** Origin of the grid */
20-
origin: PropTypes.oneOfType([
21-
PropTypes.instanceOf(Point),
22-
PropTypes.shape({
23-
x: PropTypes.number.isRequired,
24-
y: PropTypes.number.isRequired
25-
})
26-
]),
27-
/** Size of the hexagons in each dimension */
28-
size: PropTypes.oneOfType([
29-
PropTypes.instanceOf(Point),
30-
PropTypes.shape({
31-
x: PropTypes.number.isRequired,
32-
y: PropTypes.number.isRequired
33-
})
34-
]),
35-
/** Space between hexagons */
36-
spacing: PropTypes.number,
37-
/** CSS string or number */
38-
width: PropTypes.oneOfType([
39-
PropTypes.string.isRequired,
40-
PropTypes.number.isRequired
41-
]),
42-
/** The viewBox {x,y,width,height} of the svg view area */
43-
viewBox: PropTypes.shape({
44-
height: PropTypes.number.isRequired,
45-
width: PropTypes.number.isRequired,
46-
x: PropTypes.number.isRequired,
47-
y: PropTypes.number.isRequired
48-
})
49-
};
8+
function getPointOffset(corner, orientation, size) {
9+
let angle = (2.0 * Math.PI * (corner + orientation.startAngle)) / 6;
10+
return new Point(size.x * Math.cos(angle), size.y * Math.sin(angle));
11+
}
5012

51-
static defaultProps = {
52-
classes: { grid: "", layout: "" },
53-
flat: true,
54-
height: 480,
55-
origin: new Point(0, 0),
56-
size: new Point(10, 10),
57-
spacing: 1.0,
58-
width: 640,
59-
viewBox: {
60-
height: 100,
61-
width: 100,
62-
x: -50,
63-
y: -50
64-
}
65-
};
13+
function calculateCoordinates(orientation, size) {
14+
const center = new Point(0, 0);
15+
return [...Array(6).keys()].map((_, i) => {
16+
const offset = getPointOffset(i, orientation, size);
17+
return new Point(center.x + offset.x, center.y + offset.y);
18+
});
19+
}
6620

67-
static getPointOffset(corner, orientation, size) {
68-
let angle = (2.0 * Math.PI * (corner + orientation.startAngle)) / 6;
69-
return new Point(size.x * Math.cos(angle), size.y * Math.sin(angle));
70-
}
21+
const HexEngine = props => {
22+
const {
23+
children,
24+
classes,
25+
flat,
26+
height,
27+
origin,
28+
size,
29+
spacing,
30+
viewBox,
31+
width
32+
} = props;
7133

72-
static calculateCoordinates(orientation, size) {
73-
const center = new Point(0, 0);
74-
return [...Array(6).keys()].map((_, i) => {
75-
const offset = HexEngine.getPointOffset(i, orientation, size);
76-
return new Point(center.x + offset.x, center.y + offset.y);
77-
});
78-
}
34+
const orientation = flat ? Orientation.Flat : Orientation.Pointy;
35+
const points = calculateCoordinates(orientation, size)
36+
.map(point => point.toString())
37+
.join(" ");
38+
const layout = { orientation, origin, size, spacing };
7939

80-
render() {
81-
const {
82-
children,
83-
classes,
84-
flat,
85-
height,
86-
origin,
87-
size,
88-
spacing,
89-
viewBox,
90-
width
91-
} = this.props;
40+
return (
41+
<svg
42+
key={JSON.stringify(layout)}
43+
className={classNames("grid", classes.grid)}
44+
height={height}
45+
version="1.1"
46+
viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
47+
width={width}
48+
xmlns="http://www.w3.org/2000/svg"
49+
>
50+
<HexEngineProvider
51+
value={{
52+
layout,
53+
points,
54+
viewBox
55+
}}
56+
>
57+
<g className={classes.layout}>{children}</g>
58+
</HexEngineProvider>
59+
</svg>
60+
);
61+
};
9262

93-
const orientation = flat ? Orientation.Flat : Orientation.Pointy;
94-
const points = HexEngine.calculateCoordinates(orientation, size)
95-
.map(point => point.toString())
96-
.join(" ");
97-
const layout = { orientation, origin, size, spacing };
63+
HexEngine.propTypes = {
64+
children: PropTypes.node.isRequired,
65+
classes: PropTypes.objectOf(PropTypes.string),
66+
/** Determines if the hexagons are oriented with a point or an edge facing up */
67+
flat: PropTypes.bool,
68+
/** CSS string or number */
69+
height: PropTypes.oneOfType([
70+
PropTypes.string.isRequired,
71+
PropTypes.number.isRequired
72+
]),
73+
/** Origin of the grid */
74+
origin: PropTypes.oneOfType([
75+
PropTypes.instanceOf(Point),
76+
PropTypes.shape({
77+
x: PropTypes.number.isRequired,
78+
y: PropTypes.number.isRequired
79+
})
80+
]),
81+
/** Size of the hexagons in each dimension */
82+
size: PropTypes.oneOfType([
83+
PropTypes.instanceOf(Point),
84+
PropTypes.shape({
85+
x: PropTypes.number.isRequired,
86+
y: PropTypes.number.isRequired
87+
})
88+
]),
89+
/** Space between hexagons */
90+
spacing: PropTypes.number,
91+
/** CSS string or number */
92+
width: PropTypes.oneOfType([
93+
PropTypes.string.isRequired,
94+
PropTypes.number.isRequired
95+
]),
96+
/** The viewBox {x,y,width,height} of the svg view area */
97+
viewBox: PropTypes.shape({
98+
height: PropTypes.number.isRequired,
99+
width: PropTypes.number.isRequired,
100+
x: PropTypes.number.isRequired,
101+
y: PropTypes.number.isRequired
102+
})
103+
};
98104

99-
return (
100-
<svg
101-
key={JSON.stringify(layout)}
102-
className={classNames("grid", classes.grid)}
103-
height={height}
104-
version="1.1"
105-
viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
106-
width={width}
107-
xmlns="http://www.w3.org/2000/svg"
108-
>
109-
<HexEngineProvider
110-
value={{
111-
layout,
112-
points,
113-
viewBox
114-
}}
115-
>
116-
<g className={classes.layout}>{children}</g>
117-
</HexEngineProvider>
118-
</svg>
119-
);
105+
HexEngine.defaultProps = {
106+
classes: { grid: "", layout: "" },
107+
flat: true,
108+
height: 480,
109+
origin: new Point(0, 0),
110+
size: new Point(10, 10),
111+
spacing: 1.0,
112+
width: 640,
113+
viewBox: {
114+
height: 100,
115+
width: 100,
116+
x: -50,
117+
y: -50
120118
}
121-
}
119+
};
122120

123-
export default HexEngine;
121+
export const HexEngine_ = HexEngine;
122+
export default HexEngine_;

‎src/Path.js‎

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,35 @@
1-
import React, { Component } from "react";
1+
import React from "react";
22
import PropTypes from "prop-types";
33
import HexUtils from "./HexUtils";
44
import { withHexEngine } from "./Context";
55

6-
class Path extends Component {
7-
static propTypes = {
8-
end: PropTypes.object,
9-
layout: PropTypes.object,
10-
start: PropTypes.object
11-
};
12-
13-
// TODO Refactor
14-
getPoints() {
15-
const { end, layout, start } = this.props;
16-
if (!end || !start) {
17-
return "";
18-
}
6+
function getPoints(start, end, layout) {
7+
if (!end || !start) {
8+
return "";
9+
}
1910

20-
// Get all the intersecting hexes between start and end points
21-
const distance = HexUtils.distance(start, end);
22-
const intersects = [];
23-
const step = 1.0 / Math.max(distance, 1);
24-
for (let i = 0; i <= distance; i++) {
25-
intersects.push(HexUtils.round(HexUtils.hexLerp(start, end, step * i)));
26-
}
11+
const distance = HexUtils.distance(start, end);
12+
const step = 1.0 / Math.max(distance, 1);
13+
const points = [...Array(distance + 1).keys()]
14+
.map(i => {
15+
const hex = HexUtils.round(HexUtils.hexLerp(start, end, step * i));
16+
const pixel = HexUtils.hexToPixel(hex, layout);
17+
return ` ${pixel.x},${pixel.y} `;
18+
})
19+
.join("L");
2720

28-
// Construct Path points out of all the intersecting hexes (e.g. M 0,0 L 10,20, L 30,20)
29-
let points = "M";
30-
points += intersects
31-
.map(hex => {
32-
let p = HexUtils.hexToPixel(hex, layout);
33-
return ` ${p.x},${p.y} `;
34-
})
35-
.join("L");
21+
return `M${points}`;
22+
}
3623

37-
return points;
38-
}
24+
export const Path = ({ start, end, layout }) => (
25+
<path d={getPoints(start, end, layout)} />
26+
);
3927

40-
render() {
41-
return <path d={this.getPoints()} />;
42-
}
43-
}
28+
Path.propTypes = {
29+
end: PropTypes.object,
30+
layout: PropTypes.object,
31+
start: PropTypes.object
32+
};
4433

45-
export default withHexEngine(Path);
34+
export const Path_ = Path;
35+
export default withHexEngine(Path_);

0 commit comments

Comments
 (0)