put an outline around the pips

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,
+		border: {
-		distance: 0.4,
+			scale: 0.17,
-		color: {
+			color: {
-			red: 0,
+				red: 255,
-			blue: 0,
+				blue: 255,
-			green: 0,
+				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();
 		}
 	}