feat: option to play a game of fifteen to open CW

packages/frontend/src/app/components/dialog/confirm-dialog.component.html

···
         <strong class="dialog-content-suffix">{{ textData.contentSuffix | translate }}</strong>
       </p>
     }
+    @if (data.annoying === Annoyance.fifteen) {
+      <hr />
+      <p>{{ 'dialog.post-fragment.annoyances.puzzleWarning' | translate }}</p>
+      <div class="game flex justify-content-center">
+        <app-fifteen-game
+          [options]="{
+            width: 3,
+            height: 3
+          }"
+          (won)="winAnnoyance()"
+        ></app-fifteen-game>
+      </div>
+    }
   </mat-dialog-content>
 }
 <mat-dialog-actions>

packages/frontend/src/app/components/dialog/confirm-dialog.component.ts

···
 import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { TranslatePipe } from '@ngx-translate/core'
-import { timer } from 'rxjs'
+import { Subject, timer } from 'rxjs'
+import { FifteenGameComponent } from '../fifteen-game/fifteen-game.component'
+import { ParticleService } from 'src/app/services/particle.service'
 
 export enum Annoyance {
   none = '0',
-  timeout = '1'
+  timeout = '1',
+  fifteen = '2'
 }
 
 export interface ConfirmDialogData {
···
     MatDialogContent,
     MatFormFieldModule,
     MatInputModule,
+    FifteenGameComponent,
     TranslatePipe
   ],
   templateUrl: './confirm-dialog.component.html'
···
   textData: ConfirmDialogData
   confirmButtonEnabled: boolean
 
+  // Annoyance data
+  annoyanceComplete = new Subject<void>()
+
   // Defaults for the buttons
   defaultTextData = {
     options: {
···
 
   inputResponse = signal('')
 
-  constructor(@Inject(MAT_DIALOG_DATA) protected data: ConfirmDialogData) {
+  // Type mirroring for component
+  Annoyance = Annoyance
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) protected data: ConfirmDialogData,
+    private particle: ParticleService
+  ) {
     this.textData = Object.assign(this.defaultTextData, data)
-    this.confirmButtonEnabled = data.annoying !== Annoyance.timeout
+
+    // Disable button if there's additional conditions
+    this.confirmButtonEnabled = data.annoying !== undefined && data.annoying === Annoyance.none
+    this.annoyanceComplete.subscribe(() => {
+      this.confirmButtonEnabled = true
+    })
 
     // Various annoyances
+
     if (data.annoying === Annoyance.timeout) {
       timer(2000).subscribe(() => {
-        this.confirmButtonEnabled = true
+        this.annoyanceComplete.next()
       })
     }
+  }
+
+  winAnnoyance() {
+    this.particle.genericConfetti()
+    this.annoyanceComplete.next()
   }
 
   onInput(event: InputEvent): void {

packages/frontend/src/app/components/fifteen-game/fifteen-game.component.html

···
+<div class="game">
+  <div class="header flex justify-content-between">
+    <p class="mb-0 game-name">{{ 'games.fifteen.title' | translate }}</p>
+    <div class="moves">{{ moves }} {{ 'games.common.moves' | translate }}</div>
+  </div>
+  <div class="board mb-1" style="--grid-width: {{ opts.width }};">
+    @for (tile of board; track $index) {
+      @if (tile === 0) {
+        <div class="tile blank"></div>
+      } @else {
+        <button class="tile" (click)="handleTile($index)" [disabled]="!tileClickable($index)">{{ tile }}</button>
+      }
+    }
+  </div>
+  <div class="footer flex gap-2 justify-content-between">
+    <button mat-flat-button class="game-button mat-small-button" (click)="newBoard()">{{
+      'games.fifteen.newBoard' | translate
+    }}</button>
+    <button mat-stroked-button class="game-button mat-small-button" (click)="resetBoard()">{{
+      'games.fifteen.resetBoard' | translate
+    }}</button>
+  </div>
+</div>

packages/frontend/src/app/components/fifteen-game/fifteen-game.component.scss

···
+.game {
+  padding: 8px;
+  background-color: var(--mat-sys-outline-variant);
+  background-color: var(--mat-sys-surface-container-highest);
+  border: 1px solid var(--mat-sys-outline-variant);
+}
+
+.game-name {
+  font-weight: bold;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-width), 1fr);
+  gap: 2px;
+  padding: 2px;
+  background-color: var(--mat-sys-outline);
+  font-size: 1.25rem;
+}
+
+.tile {
+  padding: 0;
+  aspect-ratio: 1/1;
+  background-color: var(--mat-sys-surface-container-highest);
+  color: inherit;
+  border: unset;
+  box-shadow:
+    4px 4px 4px 2px var(--mat-sys-background) inset,
+    -4px -4px 8px -6px var(--mat-sys-shadow) inset;
+  cursor: pointer;
+  font-size: inherit;
+  user-select: none;
+}
+
+.blank,
+.tile[disabled] {
+  cursor: unset;
+}
+
+.blank {
+  box-shadow: unset;
+}

packages/frontend/src/app/components/fifteen-game/fifteen-game.component.ts

···
+import { Component, input, output } from '@angular/core'
+import { MatButtonModule } from '@angular/material/button'
+import { TranslatePipe } from '@ngx-translate/core'
+
+type Coordinate = [number, number]
+
+export type FifteenOptions = {
+  width: number
+  height: number
+  scrambleCount: number
+}
+
+@Component({
+  selector: 'app-fifteen-game',
+  imports: [MatButtonModule, TranslatePipe],
+  templateUrl: './fifteen-game.component.html',
+  styleUrl: './fifteen-game.component.scss'
+})
+export class FifteenGameComponent {
+  won = output()
+  options = input<Partial<FifteenOptions>>() // make the input name nicer
+
+  // just in case we make this not fifteen but w*h-1
+  opts: FifteenOptions
+  defaultOptions = {
+    width: 3,
+    height: 3,
+    scrambleCount: 101
+  }
+
+  moves = 0
+
+  wonBoard: number[] = []
+  board: number[] = []
+  blankIndex: number = 0
+  initialBoard: number[] = []
+  initialBlankIndex: number = 0
+
+  constructor() {
+    this.opts = this.defaultOptions
+  }
+
+  ngOnInit() {
+    this.opts = Object.assign(this.defaultOptions, this.options())
+    this.wonBoard = [...[...Array(this.opts.width * this.opts.height).keys()].slice(1), 0]
+
+    this.newBoard()
+    this.initialBoard = [...this.board]
+    this.initialBlankIndex = this.blankIndex
+  }
+
+  win() {
+    this.won.emit()
+  }
+
+  handleTile(index: number) {
+    this.swapTiles(this.indexToCoord(index), this.indexToCoord(this.blankIndex))
+    this.blankIndex = index
+
+    this.moves += 1
+
+    // Check if we won I guess
+    if (this.boardWon()) this.win()
+  }
+
+  //
+  // Game functionality
+  //
+  newBoard() {
+    this.moves = 0
+
+    // Try up to 20 boards to find one that isn't auto-solved already
+    let checkCount = 0
+    do {
+      this.board = [...[...Array(this.opts.width * this.opts.height).keys()].slice(1), 0] // [1...n-1,0]
+      this.blankIndex = this.opts.width * this.opts.height - 1 // Last time is 0 (blank)
+      for (let i = 0; i < this.opts.scrambleCount; i++) {
+        this.randomSwap(this.blankIndex)
+      }
+    } while (this.boardWon() && checkCount++ < 20)
+  }
+
+  resetBoard() {
+    this.board = [...this.initialBoard]
+    this.blankIndex = this.initialBlankIndex
+    this.moves = 0
+  }
+
+  tileClickable(index: number): boolean {
+    // Can't click the blank tile also
+    if (index === this.blankIndex) return false
+
+    // Ensure index is adjacent
+    const adjacentIndices = this.getAdjacentIndices(this.blankIndex)
+    return adjacentIndices.includes(index)
+  }
+
+  // start: tile to swap with an adjacent tile
+  private randomSwap(startIndex: number) {
+    const adjacentTiles: number[] = this.getAdjacentIndices(startIndex)
+
+    const nextIndex = adjacentTiles.at(Math.floor(Math.random() * adjacentTiles.length))
+    if (nextIndex === undefined) return
+
+    this.swapTiles(this.indexToCoord(startIndex), this.indexToCoord(nextIndex))
+    this.blankIndex = nextIndex
+  }
+
+  // Helpers
+
+  // Converts index to coordinate if valid or null if invalid
+  private indexToCoord(index: number): Coordinate | null {
+    if (index >= this.opts.width * this.opts.height) return null
+    return [index % this.opts.width, Math.floor(index / this.opts.width)]
+  }
+
+  // Converts coordinate to index if valid or null if invalid
+  private coordToIndex(pos: Coordinate): number | null {
+    const [x, y] = pos
+    if (x < 0 || y < 0 || x >= this.opts.width || y >= this.opts.width) return null
+    return x + y * this.opts.height
+  }
+
+  // Swaps two tiles as longs as they are both valid
+  private swapTiles(from: Coordinate | null, to: Coordinate | null) {
+    if (from === null || to === null) return
+
+    const fromIndex = this.coordToIndex(from)
+    const toIndex = this.coordToIndex(to)
+    if (fromIndex === null || toIndex === null) return
+
+    const temp = this.board[toIndex]
+    this.board[toIndex] = this.board[fromIndex]
+    this.board[fromIndex] = temp
+  }
+
+  // Result of adding two coordinates or null if off the edge
+  private coordAdd(a: Coordinate, b: Coordinate): Coordinate | null {
+    const res: Coordinate = [a[0] + b[0], a[1] + b[1]]
+    if (res[0] < 0 || res[1] < 0 || res[0] >= this.opts.width || res[1] >= this.opts.height) return null
+    return res
+  }
+
+  private getAdjacentIndices(index: number): number[] {
+    const startCoord = this.indexToCoord(index)
+    if (startCoord === null) return []
+
+    // Evil way to filter to tiles that can be picked
+    return (
+      [
+        [0, 1],
+        [1, 0],
+        [0, -1],
+        [-1, 0]
+      ] as Coordinate[]
+    )
+      .map((c) => this.coordAdd(c, startCoord))
+      .filter((v) => v !== null)
+      .map((c) => this.coordToIndex(c))
+      .filter((v) => v !== null)
+  }
+
+  // If the board is won
+  private boardWon(): boolean {
+    return this.board.every((tile, i) => tile === this.wonBoard[i])
+  }
+}

packages/frontend/src/app/services/particle.service.ts

···
       }
     })
   }
+
+  genericConfetti() {
+    this.confetti({
+      config: {
+        shapes: ['star'],
+        colors: ['#d2849c', '#70b07d', '#73a1dc'],
+        scalar: 2
+      }
+    })
+  }
 }

packages/frontend/src/app/services/settings.service.ts

···
     confirmOpenCw: {
       key: 'confirmOpenCw',
       translationKey: 'settings.confirmOpenCw',
+      translationDescriptionKey: 'settings.confirmOpenCwDescription',
       serverKey: 'wafrn.confirmOpenCw',
       localStorageKey: 'confirmOpenCw',
       type: 'checkbox',
···
       serverKey: 'wafrn.confirmOpenCwAnnoyance',
       localStorageKey: 'confirmOpenCwAnnoyance',
       type: 'select',
-      default: '1',
+      default: Annoyance.none,
       variants: {
         [Annoyance.none]: 'settings.confirmOpenCwAnnoyanceOptions.none',
-        [Annoyance.timeout]: 'settings.confirmOpenCwAnnoyanceOptions.timeout'
+        [Annoyance.timeout]: 'settings.confirmOpenCwAnnoyanceOptions.timeout',
+        [Annoyance.fifteen]: 'settings.confirmOpenCwAnnoyanceOptions.fifteen'
       }
     }
   }

packages/frontend/src/app/styles/material-overrides.scss

···
   pointer-events: none;
 }
 
+// Add small button style
+:root .mat-small-button {
+  height: unset;
+  padding-inline: 4px;
+  border-radius: var(--mat-sys-corner-small);
+}
+
 // Fix drawer border radius without requiring themes to use !important, though uses 0 2 0 specificity
 :root .mat-drawer {
   border-top-right-radius: 0;

packages/frontend/src/assets/i18n/en.json

···
     "confettiTestLocational": "Under Mouse",
     "confettiTestGeneric": "Screen sides",
     "confirmOpenCw": "Show dialog before opening content warnings",
-    "confirmOpenCwDescription": "Level of annoyance can be customized",
+    "confirmOpenCwDescription": "If you open CWs without thinking.",
+    "confirmOpenCwAnnoyance": "Type of additional annoyance",
     "confirmOpenCwAnnoyanceOptions": {
-      "none": "None",
-      "timeout": "2 second timeout"
+      "none": "Just the dialog",
+      "timeout": "2 second timeout",
+      "fifteen": "Solve a game of 3x3 Fifteen (EVIL)"
     }
   },
   "dialog": {
···
     },
     "post-fragment": {
       "confirmOpenCwTitle": "Confirm opening content warning",
-      "confirmOpenCwContent": "Post has the content warnings and muted words:"
+      "confirmOpenCwContent": "Post has the content warnings and muted words:",
+      "annoyances": {
+        "puzzleWarning": "Solve this to prove you aren't making a bad decision:"
+      }
     },
     "blog": {
       "customThemeTitle": "Custom Styles",
···
     "subtitle": "Looks like there isn't anything here.",
     "couldNotFind": "does not lead to a page",
     "returnHome": "Go Home"
+  },
+  "games": {
+    "common": {
+      "moves": "Moves"
+    },
+    "fifteen": {
+      "title": "Fifteen",
+      "newBoard": "New board",
+      "resetBoard": "Reset board"
+    }
   }
 }