drawing shapes on a canvas when the user clicks

src/hex.js

@@ -0,0 +1,123 @@
+
+import Point from './point.js';
+
+function computeY(x, z) {
+	return -x - z;
+}
+
+// convert real numbers to integers:
+//   round off coords
+//   throw out whichever one changed the most
+//   re-establish "x + y + z = 0"
+function roundOff(x, y, z) {
+	let rX = Math.round(x);
+	let rY = Math.round(y);
+	let rZ = Math.round(z);
+
+	let xDiff = Math.abs(rX - x);
+	let yDiff = Math.abs(rY - y);
+	let zDiff = Math.abs(rZ - z);
+
+	if ((xDiff > yDiff) && (xDiff > zDiff)) {
+		rX = -rY-rZ;
+	}
+	else if (yDiff > zDiff) {
+		rY = -rX-rZ;
+	}
+	else {
+		rZ = -rX-rY;
+	}
+
+	x = rX === -0 ? 0 : rX;
+	y = rY === -0 ? 0 : rY;
+	z = rZ === -0 ? 0 : rZ;
+
+	return {x, y, z};
+}
+
+export default class Hex extends Point {
+
+	constructor() {
+		super();
+
+		if (arguments.length === 2) { // hex = Hex(q, r);
+			this.x = arguments[0];
+			this.z = arguments[1];
+			this.y = computeY(this.x, this.z);
+		}
+		else if (arguments.length === 3) { // hex = Hex(x, y, z);
+			this.x = arguments[0];
+			this.y = arguments[1];
+			this.z = arguments[2];
+		}
+
+		roundOff(this.x, this.y, this.z);
+	}
+
+	return {
+		getX: function() {return this.x;},
+		getY: function() {return this.y;},
+		getZ: function() {return this.z;},
+
+		setX: function(newX) {this.x = newX; return this;},
+		setY: function(newY) {this.y = newY; return this;},
+		setZ: function(newZ) {this.z = newZ; return this;},
+
+		moveX: function(byX) {this.x += byX; return this;},
+		moveY: function(byY) {this.y += byY; return this;},
+		moveZ: function(byZ) {this.z += byZ; return this;},
+
+		getQ: function() {return this.x;},
+		getR: function() {return this.z;},
+
+		setQ: function(newQ) {
+			this.x = newQ;
+			this.y = computeY(this.x, this.z);
+			return this;
+		},
+		setR: function(newR) {
+			this.z = newR;
+			this.y = computeY(this.x, this.z);
+			return this;
+		},
+
+		moveQ: function(byQ) {
+			this.x += byQ;
+			this.y = computeY(this.x, this.z);
+			return this;
+		},
+		moveR: function(byR) {
+			this.z += byR;
+			this.y = computeY(this.x, this.z);
+			return this;
+		},
+
+		getHex: function() { return {x: this.x, y: this.y, z: this.z}; },
+		setHex: function(newHex) {
+			this.x = newHex.x;
+			this.y = newHex.y; 
+			this.z = newHex.z;
+			return this;
+		},
+		moveHex: function(byHex) {
+			this.x += byHex.x;
+			this.y += byHex.y;
+			this.z += byHex.z;
+			return this;
+		},
+
+		getAxial: function() {return {x: this.x, z: this.z};},
+		setAxial: function(newAxial) {
+			this.x = newAxial.q;
+			this.z = newAxial.r;
+			this.y = computeY(this.x, this.y);
+			return this;
+		},
+		moveAxial: function(byAxial) {
+			this.x += byAxial.q;
+			this.z += byAxial.r;
+			this.y = computeY(this.x, this.z);
+			return this;
+		}
+	};
+};