Add visual indication for tiles with modifiers (#13)

This will prevent users from having to click around on tiles to see if
the tile has any modifiers applied to it. This can become especially
problematic on large puzzles.

src/components/items/beam.js

@@ -6,7 +6,7 @@ import {
   emitEvent,
   fuzzyEquals,
   getConvertedDirection,
-  getMidPoint,
+  getPointBetween,
   getDistance,
   getOppositeDirection,
   uniqueBy
@@ -406,7 +406,7 @@ export class Beam extends Item {
 
     // Use the midpoint between the previous and next step points to calculate which tile we are in.
     // This will ensure we consistently pick the same tile when the next step point is on the edge of two tiles.
-    const tile = puzzle.getTile(getMidPoint(currentStep.point, nextStepPoint))
+    const tile = puzzle.getTile(getPointBetween(currentStep.point, nextStepPoint))
 
     // The next step would be off the grid
     if (!tile) {

src/components/items/reflector.js

@@ -1,7 +1,7 @@
 import { Path, Point, Size } from 'paper'
 import { Item } from '../item'
 import { rotatable } from '../modifiers/rotate'
-import { getMidPoint, getOppositeDirection, getPosition, getReflectedDirection } from '../util'
+import { getPointBetween, getOppositeDirection, getPosition, getReflectedDirection } from '../util'
 import { Beam } from './beam'
 import { movable } from '../modifiers/move'
 import { StepState } from '../step'
@@ -22,8 +22,8 @@ export class Reflector extends movable(rotatable(Item)) {
   midLine () {
     // Two points which form a line through the mid-point of the reflector
     return [
-      getMidPoint(this.#item.segments[3].point, this.#item.segments[0].point),
-      getMidPoint(this.#item.segments[1].point, this.#item.segments[2].point)
+      getPointBetween(this.#item.segments[3].point, this.#item.segments[0].point),
+      getPointBetween(this.#item.segments[1].point, this.#item.segments[2].point)
     ]
   }
 

src/components/items/tile.js

@@ -1,7 +1,7 @@
 import { Color, Path, Point } from 'paper'
 import { Item } from '../item'
 import { itemFactory } from '../itemFactory'
-import { emitEvent } from '../util'
+import { emitEvent, getPointBetween } from '../util'
 import { modifierFactory } from '../modifierFactory'
 
 export class Tile extends Item {
@@ -20,7 +20,7 @@ export class Tile extends Item {
     this.parameters = parameters
     this.styles = this.#ui.styles
 
-    this.group.addChild(this.#ui.hexagon)
+    this.group.addChildren([this.#ui.hexagon, this.#ui.indicator])
 
     // These need to be last, since they reference this
     this.items = (state.items || [])
@@ -30,14 +30,18 @@ export class Tile extends Item {
     this.modifiers = (state.modifiers || [])
       .map((state) => modifierFactory(this, state))
       .filter((modifier) => modifier !== undefined)
+
+    this.update()
   }
 
   addItem (item) {
     this.items.unshift(item)
+    this.update()
   }
 
   addModifier (modifier) {
     this.modifiers.unshift(modifier)
+    this.update()
   }
 
   afterModify () {
@@ -92,13 +96,15 @@ export class Tile extends Item {
     const index = this.items.indexOf(item)
     if (index >= 0) {
       this.items.splice(index, 1)
+      this.update()
     }
   }
 
   removeModifier (modifier) {
     const index = this.modifiers.indexOf(modifier)
     if (index >= 0) {
       this.modifiers.splice(index, 1)
+      this.update()
     }
   }
 
@@ -114,6 +120,11 @@ export class Tile extends Item {
     return this.coordinates.offset.toString()
   }
 
+  update () {
+    super.update()
+    this.#ui.indicator.opacity = this.modifiers.length ? 1 : 0
+  }
+
   static parameters (height) {
     const circumradius = height / 2
     const width = Math.sqrt(3) * circumradius
@@ -155,7 +166,16 @@ export class Tile extends Item {
       style: styles.default
     })
 
-    return { center, hexagon, styles }
+    const indicator = new Path.RegularPolygon({
+      center: getPointBetween(hexagon.segments[1].point, center, (length) => length / 3),
+      data: { collidable: false },
+      opacity: 0,
+      radius: parameters.circumradius / 16,
+      sides: 6,
+      style: { fillColor: '#ccc' }
+    })
+
+    return { center, hexagon, indicator, styles }
   }
 
   static Events = Object.freeze({

src/components/util.js

@@ -154,9 +154,9 @@ export function getIconElement (name, title) {
   return span
 }
 
-export function getMidPoint (pointA, pointB) {
+export function getPointBetween (pointA, pointB, length = (length) => length / 2) {
   const vector = pointA.subtract(pointB)
-  vector.length = vector.length / 2
+  vector.length = typeof length === 'function' ? length(vector.length) : length
   return pointA.subtract(vector)
 }
 

test/fixtures.js

@@ -33,7 +33,10 @@ class PuzzleFixture {
       '--window-size=768,1024'
     )
 
+    console.log('Building driver...')
     this.driver = await new Builder().forBrowser('chrome').setChromeOptions(options).build()
+
+    console.log(`Getting URL: ${this.url}`)
     await this.driver.get(this.url)
 
     this.elements.body = await this.driver.findElement(By.tagName('body'))