handle edge cases during solving

src/app/app.component.html

@@ -12,7 +12,7 @@
 
     <button
       class="material-symbols icon-button"
-      title="Generate new maze"
+      title="Generate a new maze"
       (click)="generateNewMaze()"
     >
       refresh
@@ -28,7 +28,7 @@
 
     <button
       class="material-symbols icon-button"
-      title="Share maze"
+      title="Share this maze"
       (click)="shareMaze()"
     >
       share

src/app/app.component.ts

@@ -57,6 +57,7 @@ export class AppComponent implements OnInit {
 
   /** Solves the maze and displays the solution. */
   solveMaze(): void {
+    if (this.gameStateService.inAnimation) return;
     this.gameStateService.solve(true);
   }
 

src/app/game-state.service.ts

@@ -26,13 +26,17 @@ export class GameStateService {
   /** Whether an animation is currently ongoing. */
   inAnimation = false;
 
+  /** Whether to abort the animation on its next frame. */
+  abortAnimation = false;
+
   /** Generate a new maze and reset the game state. */
   reset(size: number, seed?: number): void {
     seed = seed ?? makeInsecureSeed();
     this.chooser = new Chooser(seed);
     this.mazeInternal = new Maze(size, this.chooser);
     this.positionInternal.set(this.maze.start);
     this.pathInternal.set([this.maze.start]);
+    if (this.inAnimation) this.abortAnimation = true;
   }
 
   /** The node corresponding to the current position in the maze. */
@@ -60,10 +64,7 @@ export class GameStateService {
    * in that direction).
    */
   move(dir: Dir): void {
-    if (!this.canMove(dir)) {
-      console.log(`invalid movement: ${dir}`);
-      return;
-    }
+    if (!this.canMove(dir)) return;
     const coords = this.positionInternal().getNeighborCoordinates(dir);
     const newPos = this.maze.getNode(coords);
     this.pathInternal.set([...this.pathInternal(), newPos]); // TODO: should this detect when the user moves back along the path
@@ -86,6 +87,11 @@ export class GameStateService {
     this.inAnimation = true;
     let idx = 0;
     const animateFrame = () => {
+      if (this.abortAnimation) {
+        this.inAnimation = false;
+        this.abortAnimation = false;
+        return;
+      }
       this.positionInternal.set(path[idx]);
       this.pathInternal.set(path.slice(0, idx + 1));
       if (idx++ < path.length - 1) {

src/app/maze/maze.component.ts

@@ -56,10 +56,7 @@ export class MazeComponent implements AfterViewInit, OnDestroy {
   /** Handle a keydown event to move the current position. */
   handleKeypress(evt: KeyboardEvent) {
     const arrowDir = keyToDir(evt.key);
-    if (arrowDir === undefined) {
-      console.log(`invalid keypress: ${evt.key}`);
-      return;
-    }
+    if (arrowDir === undefined) return;
     this.move.emit(arrowDir);
   }