From 4b5621b0743644478ba667853ef8afad88a5742f Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Thu, 13 Sep 2018 21:55:04 -0400
Subject: [PATCH] put an outline around the pips

---
 src/drawShapes.js | 40 +++++++++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/drawShapes.js b/src/drawShapes.js
index 7db5311..dcc3ae6 100644
--- a/src/drawShapes.js
+++ b/src/drawShapes.js
@@ -10,6 +10,7 @@ const DEFAULTS = {
 				red: 255,
 				blue: 255,
 				green: 255,
+				alpha: 0.8,
 			},
 
 			horns: {
@@ -34,13 +35,24 @@ const DEFAULTS = {
 	},
 
 	pip: {
-		scale: 0.15,
-		distance: 0.4,
-		color: {
-			red: 0,
-			blue: 0,
-			green: 0,
+		border: {
+			scale: 0.17,
+			color: {
+				red: 255,
+				blue: 255,
+				green: 255,
+				alpha: 0.8,
+			},
 		},
+		body: {
+			scale: 0.15,
+			color: {
+				red: 0,
+				blue: 0,
+				green: 0,
+			},
+		},
+		distance: 0.4,
 	},
 
 	sides: 6,
@@ -168,16 +180,26 @@ export default class DrawShapes {
 		if (this.pipVertices[tileStyle]
 		&& this.pipVertices[tileStyle][orientation]
 		&& this.pipVertices[tileStyle][orientation][pips]) {
-			const pipRadius = scale * pip.scale;
+			const pipBodyRadius = scale * pip.body.scale;
+			const pipBorderRadius = scale * pip.border.scale;
 			const pipDistance = scale * pip.distance;
 
 			context.beginPath();
 
 			this.pipVertices[tileStyle][orientation][pips]
-			.forEach(([pipX, pipY]) => this.pip(context, scale, x,y, pipX, pipY, pipRadius, pipDistance));
+			.forEach(([pipX, pipY]) => this.pip(context, scale, x,y, pipX, pipY, pipBorderRadius, pipDistance));
 
 			context.closePath();
-			context.fillStyle = getColor(pip.color);
+			context.fillStyle = getColor(pip.border.color);
+			context.fill();
+
+			context.beginPath();
+
+			this.pipVertices[tileStyle][orientation][pips]
+			.forEach(([pipX, pipY]) => this.pip(context, scale, x,y, pipX, pipY, pipBodyRadius, pipDistance));
+
+			context.closePath();
+			context.fillStyle = getColor(pip.body.color);
 			context.fill();
 		}
 	}