Improve puzzle 011, fix a few bugs

Updated the puzzle to include a non-directional portal to further
illustrate the rules of portals. The portal mask has been updated to
select the tile the mask applies to before applying the mask (which
ensures the toolbar for that tile is selected). In addition, the
before/after edit actions on tiles have been updated to disable all
modifiers when a mask is active on that tile. The use of modifiers while
a mask was active was causing bugs, especially in the case of a portal.

This also includes a bug fix for updating beam references in a tile.
Previously, all beam references were removed from a tile when a step for
that beam was removed from a tile. However, sometimes there are multiple
steps for a single beam in a tile, so the beam reference only needs to
be removed if there are no longer any steps in that tile for the beam.

src/components/items/beam.js

@@ -96,7 +96,7 @@ export class Beam extends Item {
 
     step.index = this.#stepIndex = this.#steps.length - 1
 
-    if (!step.tile.items.some((item) => item === this)) {
+    if (!step.tile.items.some((item) => item.equals(this))) {
       // Add this beam to the tile item list so other beams can see it
       step.tile.addItem(this)
     }
@@ -681,9 +681,9 @@ export class Beam extends Item {
 
       console.debug(this.toString(), 'removed steps: ', deletedSteps)
 
-      // Remove beam from tiles it is being removed from
       const tiles = [...new Set(deletedSteps.map((step) => step.tile))]
-      tiles.forEach((tile) => tile.removeItem(this))
+      // Remove references to the beam in any tiles it is no longer in
+      tiles.filter((tile) => this.getSteps(tile).length === 0).forEach((tile) => tile.removeItem(this))
 
       deletedSteps.forEach((step) => step.onRemove(step))
 

src/components/items/portal.js

@@ -161,6 +161,7 @@ export class Portal extends movable(rotatable(Item)) {
         }
       )
 
+      puzzle.updateSelectedTile(currentStep.tile)
       puzzle.mask(mask)
 
       // This will cause the beam to stop

src/components/items/tile.js

@@ -46,11 +46,13 @@ export class Tile extends Item {
 
   afterModify () {
     this.setStyle(this.selected ? 'selected' : 'default')
+    this.modifiers.forEach((modifier) => modifier.update({ disabled: false }))
   }
 
   beforeModify () {
     this.group.bringToFront()
     this.setStyle('edit')
+    this.modifiers.forEach((modifier) => modifier.update({ disabled: true }))
   }
 
   getState () {

src/components/modifier.js

@@ -185,15 +185,20 @@ export class Modifier extends Stateful {
       options || {}
     )
 
-    this.disabled = options.disabled
+    if (!this.immutable) {
+      this.disabled = options.disabled
+    }
+
     this.name = options.name
     this.title = options.title
     this.selected = options.selected
 
-    this.#container.classList.toggle('disabled', this.disabled)
-    this.#container.classList.toggle('selected', this.selected)
-    this.element.textContent = this.name
-    this.element.title = this.title
+    if (this.#container) {
+      this.#container.classList.toggle('disabled', this.disabled)
+      this.#container.classList.toggle('selected', this.selected)
+      this.element.textContent = this.name
+      this.element.title = this.title
+    }
   }
 
   #maskOnTap (puzzle, tile) {

src/components/state.js

@@ -95,6 +95,7 @@ export class State {
     this.#current = structuredClone(this.#original)
     this.#deltas = []
     this.#index = this.#lastIndex()
+    this.#selectedTile = undefined
 
     State.clearCache(this.getId())
 

src/puzzles/011.js

@@ -5,7 +5,6 @@ export default {
         {
           items: [
             {
-              direction: 5,
               type: 'Portal'
             }
           ],
@@ -50,12 +49,12 @@ export default {
         {
           items: [
             {
-              direction: 2,
+              direction: 0,
               type: 'Portal'
             }
           ],
           modifiers: [
-            { type: 'Lock' }
+            { type: 'Rotate' }
           ],
           type: 'Tile'
         },
@@ -88,7 +87,7 @@ export default {
             }
           ],
           modifiers: [
-            { type: 'Rotate' }
+            { type: 'Lock' }
           ],
           type: 'Tile'
         },
@@ -110,5 +109,6 @@ export default {
   },
   solution: [
     { amount: 1, type: 'Connections' }
-  ]
+  ],
+  version: 1
 }

test/puzzles/011.js

@@ -9,13 +9,13 @@ describe('Puzzle 011', function () {
   before(puzzle.before)
 
   it('should be solved', async function () {
-    await puzzle.clickTile(2, 0)
-    await puzzle.clickModifier('rotate', { times: 3 })
-    await puzzle.clickTile(0, 1)
+    await puzzle.clickTile(1, 1)
+    await puzzle.clickModifier('rotate', { times: 2 })
+    await puzzle.clickTile(2, 1)
 
-    await puzzle.clickTile(2, 0)
+    await puzzle.clickTile(1, 1)
     await puzzle.selectModifier('rotate')
-    await puzzle.clickTile(0, 0)
+    await puzzle.clickTile(2, 0)
     await puzzle.clickModifier('rotate', { times: 3 })
 
     assert(await puzzle.isSolved())