Use UUIDv4 for item IDs to prevent collisions

The previous solution of using an incrementing integer would result in
collisions between items stored in state and beams, since beam IDs are
generated on the fly and not stored in state, and the unique ID was only
incremented when the ID was not stored in state. This makes item IDs a
little harder to read, but ensure they remain unique across all items.

src/components/item.js

@@ -16,7 +16,7 @@ export class Item extends Stateful {
 
   constructor (parent, state, configuration) {
     // Retain ID from state if it exists, otherwise generate a new one
-    state.id ??= Item.uniqueId++
+    state.id ??= Item.uniqueId()
 
     super(state)
 
@@ -102,7 +102,7 @@ export class Item extends Stateful {
     'wall'
   ].map((type) => [type, capitalize(type)])))
 
-  // This should be stable per puzzle as state refers to it
-  // Note that IDs will change if the puzzle configuration changes
-  static uniqueId = 0
+  static uniqueId () {
+    return crypto.randomUUID().split('-')[0]
+  }
 }

src/components/puzzle.js

@@ -429,9 +429,6 @@ export class Puzzle {
   }
 
   #setup () {
-    // Reset the item IDs, so they are unique per-puzzle
-    Item.uniqueId = 0
-
     const { layout, message, solution } = this.#state.getCurrent()
 
     this.layout = new Layout(layout)