Fix errors keeping production build from building

lib/Puzzle.ts

@@ -25,7 +25,7 @@ registerClass(PiecePlacement)
 
 export class Puzzle extends SerializableClass {
     grid: Grid
-    pieces: Map<string, Piece>
+    pieces: Map<string, PieceWithId>
     problems: Map<string, Problem>
 
     constructor(id: string, grid: Grid) {
@@ -55,7 +55,7 @@ export class Puzzle extends SerializableClass {
     }
 
     addPiece(piece: Piece): Piece {
-        if(piece.id === null) {
+        if(!piece.hasId()) {
             throw "Cannot add piece without ID"
         }
         if(this.pieces.has(piece.id)) {
@@ -208,6 +208,10 @@ export class Piece extends SerializableClass {
         this.label = id || "unlabeled-piece"
         this.color = "#00ff00"
     }
+
+    hasId(): this is PieceWithId {
+        return typeof this.id === "string"
+    }
 
     copy(): Piece {
         const coppied = deserialize<Piece>(serialize(this), "Piece")
@@ -216,5 +220,7 @@ export class Piece extends SerializableClass {
     }
 }
 
+export type PieceWithId = Piece & {id: string}
+
 registerClass(Puzzle)
 registerClass(Piece)

ui/components/ItemMetadataEditor.vue

@@ -2,7 +2,7 @@
 import {computed} from "vue"
 
 import {Piece, Puzzle} from  "~lib/Puzzle.ts"
-import {AssemblyProblem, Problem} from "~lib/Problem.ts"
+import {AssemblyProblem} from "~lib/Problem.ts"
 import {Action, EditPieceMetadataAction, EditProblemMetadataAction} from "~ui/actions.ts"
 import ProblemPiecesEditor from "~ui/components/ProblemPiecesEditor.vue"
 import ColorInput from "~ui/common/ColorInput.vue"
@@ -156,7 +156,7 @@ function handleBoundsInput(field: Field, dimensionIndex: number, el: HTMLInputEl
             />
 
             <ProblemPiecesEditor
-                    v-if="field.type === 'pieces' && item instanceof Problem"
+                    v-if="field.type === 'pieces' && item instanceof AssemblyProblem"
                     :puzzle="puzzle"
                     :problem="item"
                     :label="field.label"

ui/components/ProblemPiecesEditor.vue

@@ -4,14 +4,14 @@ import {VDataTable} from "vuetify/components/VDataTable"
 import {VToolbar} from "vuetify/components/VToolbar"
 
 import {Puzzle} from '~lib/Puzzle.ts'
-import {Problem} from '~lib/Problem.ts'
+import {AssemblyProblem} from '~lib/Problem.ts'
 import {Action, EditProblemMetadataAction} from "~ui/actions.ts"
 import GridDisplay from "./GridDisplay.vue"
 
 const props = withDefaults(
     defineProps<{
         puzzle: Puzzle,
-        problem: Problem,
+        problem: AssemblyProblem,
         label: string,
         disabledPieceIds: string[],
     }>(), {
@@ -32,7 +32,7 @@ const tableHeaders = [
 const tableItems = computed(() => {
     const pieces = Array.from(props.puzzle.pieces.values())
     return pieces.map((piece) => {
-        const disabled = props.disabledPieceIds.includes(piece.id)
+        const disabled = piece.id ? props.disabledPieceIds.includes(piece.id) : false
         return {
             id: piece.id,
             piece: piece,

ui/components/TitleBar.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import {PuzzleFile} from "~lib/PuzzleFile"
+
 withDefaults(
     defineProps<{
         puzzleFile?: PuzzleFile | null,
@@ -10,7 +12,7 @@ withDefaults(
 
 <template>
     <VAppBar>
-        <VAppBarTitle v-slot="title" class="main-title">
+        <VAppBarTitle v-slot class="main-title">
             <RouterLink to="/">
                 Riddlewood Studio
             </RouterLink>