index.civet

{ SVG, type Svg, type G, type Line, type Text } from @svgdotjs/svg.js
{ urlFor, byName, setStyle, toName, type Style } from ./pokedex.civet

xSpace .= 80
ySpace .= 100
nodeSize .= 100
animDelay .= 1000

class SpriteNode
  key: number?
  parent: SpriteNode?
  left: SpriteNode?
  right: SpriteNode?
  size: number?
  height: number?
  index: number?
  parentLine: Line
  heightText: Text?
  sizeText: Text?
  indexText: Text?
  loaded: Promise<void>?

  x: number?
  y: number?
  tree: SpriteTree
  g: G

  @(@tree: SpriteTree, @parent?: SpriteNode, key?: number?)
    @g = @tree.nodeGroup.group()
    @parentLine = @tree.lineGroup.line()
    .opacity 0
    @setKey key
  computeHeight(): number
    @height =
      if @key?
        1 + Math.max @left!.computeHeight(), @right!.computeHeight()
      else
        -1
    @heightText?.plain @height.toString()
    @height
  computeSize(): number
    @size =
      if @key?
        @left!.computeSize() + 1 + @right!.computeSize()
      else
        0
    @sizeText?.plain @size.toString()
    @size
  skew(): number
    if @key?
      @right!.height! - @left!.height!
    else
      0
  inorder(): Generator<SpriteNode>
    return unless @key?
    yield* @left!.inorder()
    yield @
    yield* @right!.inorder()
  preorder(): Generator<SpriteNode>
    return unless @key?
    yield @
    yield* @left!.preorder()
    yield* @right!.preorder()
  postorder(): Generator<SpriteNode>
    return unless @key?
    yield* @left!.postorder()
    yield* @right!.postorder()
    yield @
  ancestors(): SpriteNode[]
    node: SpriteNode .= @
    while node.parent?
      node = node.parent!

  // Main node rendering
  setKey(@key: number?): void
    @g.clear()
    return unless @key?
    @size = 1
    @height = 0
    @g.opacity 1
    let loadComplete: =>
    @loaded = new Promise (loadComplete =)
    @g.image urlFor(@key), loadComplete!
    .on 'error', (error) =>
      console.log `Failed to load image for key ${@key} at ${urlFor @key}`
      loadComplete()
    .attr 'data-key', @key
    .size nodeSize, nodeSize
    .center 0, 0
    .add @g.element('title').words toName @key
    @loaded.then =>
      @g.plain @key!.toString()
      .attr 'x', 0
      .attr 'y', nodeSize/2
      .addClass 'key'
      @heightText = @g.plain (@height ?? 0).toString()
      .attr 'x', -nodeSize * 0.6
      .attr 'y', 0
      .addClass 'height'
      @sizeText = @g.plain (@size ?? 1).toString()
      .attr 'x', +nodeSize * 0.6
      .attr 'y', 0
      .addClass 'size'
      @indexText = @g.plain (@index ?? 0).toString()
      .attr 'x', +nodeSize * 0.6
      .attr 'y', 0
      .addClass 'index'
    @updateParentLine()
  setParent(@parent: SpriteNode?): void
    @updateParentLine()
  updateParentLine(): void
    if @parent?
      @parentLine.opacity 1
      @parentLine.plot @x!, @y!, @parent.x!, @parent.y!
    else
      @parentLine.opacity 0
      @parentLine.plot @x!, @y!, @x!, @y!
  addClass(className: string): void
    @g.addClass className
  removeClass(className: string): void
    @g.removeClass className

  // Call computeSize() before this
  layout(x: number, y: number): void
    return unless @key?
    @move x, y
    @updateParentLine()
    @left!.layout
      x - xSpace * (@left!.size! - (@left!.left?.size ?? 0))
      y + ySpace
    @right!.layout
      x + xSpace * (@right!.size! - (@right!.right?.size ?? 0))
      y + ySpace

  move(@x: number, @y: number)
    @g.transform
      translateX: @x
      translateY: @y
    @updateParentLine()
    @
  animMove(@x: number, @y: number, skipLine?: boolean): Promise<void>
    new Promise (done) =>
      if @parent? and not skipLine
        @parentLine.opacity 1
      @g.animate(animDelay).transform
        translateX: @x
        translateY: @y
      .during (t: number) =>
        if @parent? and not skipLine
          trans .= @g.transform()
          transParent .= @parent.g.transform()
          @parentLine.plot
            trans.translateX!, trans.translateY!
            transParent.translateX!, transParent.translateY!
      .after =>
        done()
  animParent(): Promise<void>
    new Promise (done) =>
      return done() unless @parent?
      trans .= @g.transform()
      transParent .= @parent.g.transform()
      /* Up
      @parentLine.plot
        trans.translateX!, trans.translateY!
        trans.translateX!, trans.translateY!
      */
      @parentLine.opacity 1
      @parentLine.plot
        transParent.translateX!, transParent.translateY!
        transParent.translateX!, transParent.translateY!
      @parentLine.animate(animDelay).opacity(1).plot
        trans.translateX!, trans.translateY!
        transParent.translateX!, transParent.translateY!
      .after =>
        done()
  remove(): void
    @g.remove()
    @parentLine.remove()
  fadeOut(): Promise<void>
    new Promise (done) =>
      @parentLine.animate(animDelay)
      .opacity 0
      @g.animate(animDelay)
      .opacity 0
      .after =>
        @g.clear()
        @parentLine.plot 0, 0, 0, 0
        done()
  hide(): void
    @parentLine.opacity 0
    @g.opacity 0
  fadeIn(skipLine?: boolean): Promise<void>
    new Promise (done) =>
      unless skipLine
        @parentLine.animate(animDelay)
        .opacity 1
      @g.animate(animDelay)
      .opacity 1
      .after => done()
  eject(newKey: number): SpriteNode
    key .= @key
    @setKey newKey
    new SpriteNode @tree, undefined, key
    .move @x!, @y!
  // Swap actual images instead of redrawing with new keys, which can flicker
  swap(other: SpriteNode): void
    [@g, other.g] = [other.g, @g]
    [@x, other.x] = [other.x, @x]
    [@y, other.y] = [other.y, @y]
    [@key, other.key] = [other.key, @key]
    [@loaded, other.loaded] = [other.loaded, @loaded]
    [@sizeText, other.sizeText] = [other.sizeText, @sizeText]
    [@heightText, other.heightText] = [other.heightText, @heightText]
    [@indexText, other.indexText] = [other.indexText, @indexText]
    @sizeText?.plain (@size ?? 1).toString()
    @heightText?.plain (@height ?? 0).toString()
    @indexText?.plain (@index ?? 0).toString()
    other.sizeText?.plain (other.size ?? 1).toString()
    other.heightText?.plain (other.height ?? 0).toString()
    other.indexText?.plain (other.index ?? 0).toString()

class SpriteTree
  svg: Svg
  root: SpriteNode
  lineGroup: G
  nodeGroup: G

  @(@svg: Svg)
    @lineGroup .= @svg.group()
    .addClass 'lines'
    @nodeGroup .= @svg.group()
    .addClass 'nodes'
    @root = @newNode()
  newNode(parent?: SpriteNode, key?: number?)
    new SpriteNode @, parent, key
  clear(): void
    @lineGroup.clear()
    @nodeGroup.clear()
    @root = @newNode()
    @draw()
  empty(): boolean
    not @root.key?

  draw(anim?: boolean): Promise<void>
    // Draw nodes in postorder
    //for node of @root.postorder()
    //  @nodeGroup.add node.g
    @root.computeSize()
    @root.computeHeight()
    @computeIndex()
    @root.x ?= 0
    @root.y ?= 0
    @root.layout @root.x, @root.y
    xMin .= @root.x! - (@root.left?.size ?? 0) * xSpace - nodeSize
    xMax .= @root.x! + (@root.right?.size ?? 0) * xSpace + nodeSize
    yMin .= @root.y! - nodeSize
    yMax .= @root.y! + ((@root.height ?? 0) + 1) * ySpace + nodeSize
    width .= xMax - xMin
    height .= yMax - yMin
    oldBox .= @svg.viewbox()
    if anim and not (xMin is oldBox.x and yMin is oldBox.y and width is oldBox.w and height is oldBox.h)
      new Promise (done) =>
        @root.g.animate animDelay
        .during (t: number) =>
          @svg.viewbox
            (1-t) * oldBox.x + t * xMin
            (1-t) * oldBox.y + t * yMin
            (1-t) * oldBox.w + t * width
            (1-t) * oldBox.h + t * height
        .after =>
          @svg.viewbox xMin, yMin, width, height
          done undefined
    else
      @svg.viewbox xMin, yMin, width, height
      Promise.resolve()

  find(key: number): SpriteNode
    node .= @root
    loop
      if not node.key? or key is node.key
        return node
      else if key < node.key
        node = node.left!
      else
        node = node.right!

  insert(key: number): void
    node .= @find key
    node.setKey key
    node.left = @newNode node
    node.right = @newNode node

  animFind(key: number): Promise<void>
    await @animInsert key, true
    return

  animInsert(key: number, find = false, del?: boolean): Promise<{node: SpriteNode, newNode?: SpriteNode}?>
    node .= @find key
    if @empty()
      unless find
        node.left = @newNode node
        node.right = @newNode node
        node.setKey key
        @draw()
      return

    newNode .= @newNode undefined, key
    newNode.addClass 'bad' if del
    newNode.move @root.x!, -nodeSize
    await newNode.loaded

    // animate move sprite to parent
    ancestors .= node.ancestors()
    ancestors.reverse()
    for ancestor of ancestors
      await newNode.animMove ancestor.x!, ancestor.y!

    if not node.key? // new key
      unless find
        node.left = @newNode node
        node.right = @newNode node
        node.move newNode.x!, newNode.y!
        node.setKey newNode.key
      parent := node.parent!
      newX .=
        if node is parent.left
          parent.x! - xSpace / 2
        else
          parent.x! + xSpace / 2
      newY .= parent.y! + ySpace
      if find
        await newNode.animMove newX, newY
        await newNode.fadeOut()
      else
        await.all [
          node.animMove newX, newY
          newNode.animMove newX, newY
          ...for n of @root.inorder() // animate make room for new node
            continue if n is node
            direction .= Math.sign n.key! - key
            n.animMove n.x! + direction * xSpace / 2, n.y!
        ]
        newNode.remove()
    else // replace
      await newNode.animMove node.x!, node.y!
      if del
        return {node, newNode}
      node.setKey key
      newNode.remove()
    await @draw not find
    return {node}

  animDelete(key: number): Promise<{node: SpriteNode}?>
    //unless {node, newNode} .= await @animInsert key, true, true
    return unless ref .= await @animInsert key, true, true
    {node, newNode} .= ref
    node.setKey undefined
    newNode = newNode!

    /*
    function swap(other: SpriteNode): void
      key .= node.key
      node.setKey other.key
      other.setKey key
      [node.x, other.x] = [other.x, node.x]
      [node.y, other.y] = [other.y, node.y]
    */

    loop // swap down until empty subtree
      node = node!
      start .= node.{x!,y!}
      if node.left?.key? // swap with predecessor
        pred: SpriteNode .= node.left
        await newNode.animMove pred.x!, pred.y!
        while pred.right?.key?
          pred = pred.right
          await newNode.animMove pred.x!, pred.y!
        /*
        predXY .= pred.{x!,y!}
        await pred.animMove start.x, start.y, true
        swap pred
        pred.{x,y} = predXY
        */
        eject .= pred.eject key
        await eject.animMove start.x, start.y
        node.setKey eject.key
        eject.remove()
        node = pred
      else if node.right?.key? // swap with successor
        succ: SpriteNode .= node.right
        await newNode.animMove succ.x!, succ.y!
        while succ.left?.key?
          succ = succ.left
          await newNode.animMove succ.x!, succ.y!
        eject .= succ.eject key
        await eject.animMove start.x, start.y
        node.setKey eject.key
        eject.remove()
        node = succ
      else // delete leaf
        await [
          node.fadeOut()
          newNode.fadeOut()
        ]
        node.left = node.right = undefined
        node.setKey undefined
        await.all
          for n of @root.inorder() // animate collapse space
            continue if n is node or n.key is key
            direction .= Math.sign n.x! - node.x!
            n.animMove n.x! - direction * xSpace / 2, n.y!
        await @draw true
        return {node}

  animRotate(key: number?, direction: 'left' | 'right'): Promise<void>
    return unless key?
    opposite: 'left' | 'right' .= 'left'
    if direction is 'left'
      opposite = 'right'
    else
      direction = 'right'
    node .= @find key
    return unless node.key?

    child .= node[opposite]
    unless child?.key?
      sign .= if direction is 'left' then 1 else -1
      await new Promise<void> (done) =>
        flash .= @svg.line node.x!, node.y!, node.x! + sign * xSpace, node.y! + ySpace
        .back()
        .addClass 'bad'
        flash.animate animDelay
        .opacity 0
        .after =>
          flash.remove()
          done()
      return

    unless node.parent?
      @root = child
    else
      if key < node.parent.key!
        node.parent.left = child
      else
        node.parent.right = child
      node.parentLine.animate animDelay
      .plot
        child.x!, node.y!
        node.parent.x!, node.parent.y!
    nodeY := node.y!
    child.parent = node.parent
    node[opposite] = child[direction]
    child[direction] = node
    node.parent = child
    child.parentLine.animate animDelay
    .plot
      child.x!, node.y!
      node.x!, child.y!
    node[opposite]!.parent = node
    if node[opposite]!.key?
      node[opposite]!.parentLine.animate animDelay
      .plot
        node[opposite]!.x!, node[opposite]!.y!
        node.x!, child!.y!
    await.all [
      node.animMove node.x!, child.y!, true
      child.animMove child.x!, nodeY, true
      ...for n of child[opposite]!.inorder()
        n.animMove n.x!, n.y! - ySpace
      ...for n of node[direction]!.inorder()
        n.animMove n.x!, n.y! + ySpace
    ]
    await @draw true
    return

  // Force tree into a binary search tree
  makeBST(): Promise<void>
    keys .=
      for node of @root.inorder()
        node.key
    sorted .= keys[..].sort (a, b) => a - b
    return if JSON.stringify(keys) is JSON.stringify(sorted)
    for node, i of @root.inorder()
      node.setKey sorted[i]
    await @draw()

  buildBST(keys: number[]): Promise<void>
    @clear()
    keys.sort (a, b) => a - b
    tree .= this
    function recurse(i, j)
      return unless i < j
      mid .= (i + j) %/ 2
      tree.insert keys[mid]
      recurse i, mid
      recurse mid + 1, j
    recurse 0, keys#
    @draw()

  // AVL

  // AVLify a node (specified by key) and its ancestors,
  // as used by AVL Insert and AVL Delete
  animAVL(key: number?): Promise<void>
    return unless key?
    node: SpriteNode? .= @find key
    @root.computeHeight()
    while node?.key?
      await @animAVLOne node
      node = node.parent

  // AVLify a single node
  animAVLOne(node: SpriteNode): Promise<boolean>
    if Math.abs(node.skew()) > 1
      node.addClass 'bad'
      await new Promise (done) => setTimeout done, animDelay
      if node.skew() < -1
        if node.left!.skew() > 0
          await @animRotate node.left!.key, 'left'
        await @animRotate node.key, 'right'
      else if node.skew() > 1
        if node.right!.skew() < 0
          await @animRotate node.right!.key, 'right'
        await @animRotate node.key, 'left'
      node.removeClass 'bad'
      true
    else
      false

  // AVLify all nodes in post order (for converting BST into AVL)
  animAVLAll(): Promise<void>
    @root.computeHeight()
    for node of @root.postorder()
      // May need to AVLify the same node multiple times, for large skew
      while await @animAVLOne node

  animAVLInsert(key: number): Promise<void>
    result .= await @animInsert key
    return unless result?
    {node} .= result
    await @animAVL key

  animAVLDelete(key: number): Promise<void>
    result .= await @animDelete key
    return unless result?
    {node} .= result
    await @animAVL node.parent?.key

  // HEAPS

  // BFS order of nodes, which is the array representation of the heap.
  // 1-indexed via an empty 0th element.
  heapArray(): (SpriteNode?)[]
    queue: SpriteNode[] .= [@root]
    nodes: (SpriteNode?)[] .= [,]  // 1-indexed
    while queue#
      node .= queue.shift()!
      nodes.push node
      queue.push node.left if node.left?.key?
      queue.push node.right if node.right?.key?
    nodes
  
  computeIndex(): void
    for each node, i of @heapArray()
      continue unless node?
      node.index = i
      node.indexText?.plain i.toString()

  // Force tree into a complete tree, then build
  makeMaxHeap(): Promise<void>
    nodes .= @heapArray()
    for node, i of nodes
      continue unless node?
      if i > 1
        node.parent = nodes[i %/ 2]
      else
        node.parent = undefined
      node.left = nodes[2 * i] ?? @newNode node
      node.right = nodes[2 * i + 1] ?? @newNode node
    await @draw()
    await new Promise (done) => setTimeout done, animDelay
    await @maxHeapifyAll()

  maxHeapifyAll(): Promise<void>
    return if @empty()
    nodes .= @heapArray()
    for i of [nodes# - 1 .. 1]
      await @animMaxHeapifyDown nodes[i]!
    await @draw()

  buildMaxHeap(keys: number[]): Promise<void>
    @clear()
    for key of keys
      @heapAppend key
    await @draw()
    await new Promise (done) => setTimeout done, animDelay
    await @maxHeapifyAll()

  heapAppend(key: number): SpriteNode
    let node: SpriteNode
    if @empty()
      node = @root
    else
      heap .= @heapArray()
      index .= heap#
      parent .= index %/ 2
      direction .=
        if index %% 2
          'right' as const
        else
          'left' as const
      node = heap[parent]![direction]!
    node.left = @newNode node
    node.right = @newNode node
    node.setKey key
    node

  animHeapAppend(key: number): Promise<SpriteNode>
    node .= @heapAppend key
    let newX = 0, newY = 0
    parent .= node.parent
    if parent?
      newX =
        if node is parent.left
          parent.x! - xSpace / 2
        else
          parent.x! + xSpace / 2
      newY = parent.y! + ySpace
    node.move newX, newY
    node.hide()
    await node.loaded
    await.all [
      node.animParent()
      node.fadeIn true
    ]
    await.all [
      ...for n of @root.inorder() // animate make room for new node
        direction .= Math.sign n.x! - (newX + (parent?.x ?? 0)) / 2
        direction = 0 if n is node
        n.animMove n.x! + direction * xSpace / 2, n.y!
    ]
    await @draw true
    node

  animSwap(a: SpriteNode, b: SpriteNode): Promise<void>
    aOrig .= a.{x!,y!,key}
    bOrig .= b.{x!,y!,key}
    await.all [
      a.animMove bOrig.x, bOrig.y, true
      b.animMove aOrig.x, aOrig.y, true
    ]
    a.swap b

  animMaxHeapInsert(key: number): Promise<void>
    node .= await @animHeapAppend key
    await @animMaxHeapifyUp node
    @draw()

  animMaxHeapifyUp(node: SpriteNode): Promise<void>
    while node?.parent?
      break if node.key! <= node.parent.key!
      await @animSwap node, node.parent
      node = node.parent

  animMaxHeapDeleteMax(): Promise<void>
    @animMaxHeapDeleteNode @root

  animMaxHeapDeleteNode(node: SpriteNode): Promise<void>
    return if @empty()
    last .= @heapArray().-1!
    await @animSwap node, last

    // Delete leaf
    await last.fadeOut()
    last.left = last.right = undefined
    last.setKey undefined
    await.all
      for n of @root.inorder() // animate collapse space
        continue if n is last
        direction .= Math.sign n.x! - last.x!
        n.animMove n.x! - direction * xSpace / 2, n.y!
    await @draw true
    await @animMaxHeapifyDown node
    await @animMaxHeapifyUp node
    @draw()

  animMaxHeapDelete(key: number): Promise<void>
    for node of @root.inorder()
      if node.key is key
        return await @animMaxHeapDeleteNode node

  animMaxHeapifyDown(node: SpriteNode): Promise<void>
    return unless node.key?
    while node.left?.key?
      break if node.key! >= node.left.key and (
        not node.right?.key? or node.key! >= node.right.key
      )
      if node.right?.key? > node.left.key
        await @animSwap node, node.right
        node = node.right
      else
        await @animSwap node, node.left
        node = node.left

type Mode = 'BST' | 'AVL' | 'maxheap'

function gui(): void
  svg := SVG().addTo '#app'
  T := new SpriteTree svg
  if true
    T.root.setKey 39 // Jigglypuff
    T.root.left = T.newNode T.root, 7 // Squirtle
    T.root.left.left = T.newNode T.root.left
    T.root.left.right = T.newNode T.root.left, 25 // Pikachu
    T.root.left.right.left = T.newNode T.root.left.right
    T.root.left.right.right = T.newNode T.root.left.right
    T.root.right = T.newNode T.root, 114 // Tangela
    T.root.right.left = T.newNode T.root.right
    T.root.right.right = T.newNode T.root.right
  T.draw()

  mode: Mode .= 'BST'
  modeCommands: Record<Mode, Record<string, (key: number) => Promise<unknown>>> :=
    BST:
      build: T@buildBST
      find: T@animFind
      insert: T@animInsert
      delete: T@animDelete
      rotateleft: (key: number) => T.animRotate key, 'left'
      rotateright: (key: number) => T.animRotate key, 'right'
      avl: T@animAVL
      avlinsert: T@animAVLInsert
      avldelete: T@animAVLDelete
    AVL:
      build: T@buildBST
      find: T@animFind
      insert: T@animAVLInsert
      delete: T@animAVLDelete
      avlinsert: T@animAVLInsert
      avldelete: T@animAVLDelete
    maxheap:
      // @ts-ignore wrong argument type
      build: T@buildMaxHeap
      insert: T@animMaxHeapInsert
      delete: T@animMaxHeapDelete
      deletemax: (key) => T.animMaxHeapDeleteMax()

  aliases: Record<string, string> :=
    f: 'find'
    ins: 'insert'
    i: 'insert'
    add: 'insert'
    a: 'insert'
    del: 'delete'
    d: 'delete'
    remove: 'delete'
    rem: 'delete'
    delmax: 'deletemax'
    delm: 'deletemax'
    dmax: 'deletemax'
    dm: 'deletemax'
    remmax: 'deletemax'
    remm: 'deletemax'
    rmax: 'deletemax'
    rm: 'deletemax'
    avladd: 'avlinsert'
    aa: 'avlinsert'
    avlins: 'avlinsert'
    ai: 'avlinsert'
    avldel: 'avldelete'
    avlrem: 'avldelete'
    ad: 'avldelete'
    rotatel: 'rotateleft'
    rotleft: 'rotateleft'
    rotl: 'rotateleft'
    left: 'rotateleft'
    l: 'rotateleft'
    rotater: 'rotateright'
    rotright: 'rotateright'
    rotr: 'rotateright'
    right: 'rotateright'
    r: 'rotateright'
    b: 'build'

  commandInput := document.querySelector('#command') as HTMLInputElement
  let submit: (e?: SubmitEvent) => void
  document.querySelector('form')!.addEventListener 'submit',
    submit = (e?: SubmitEvent) =>
      e?.preventDefault()
      execute commandInput.value

  function start
    commandInput.disabled = true
    for each modeInput of document.querySelectorAll('input[name="mode"]') as NodeListOf<HTMLInputElement>
      modeInput.disabled = not modeInput.checked
  function finish
    for each modeInput of document.querySelectorAll('input[name="mode"]') as NodeListOf<HTMLInputElement>
      modeInput.disabled = false
    commandInput.disabled = false
    commandInput.focus()

  function updateMode: Promise<void>
    newMode .= new FormData(document.querySelector('form')!).get('mode') as Mode
    commandInput.title =
      switch mode
        when 'BST'
          "find/f, insert/ins/i/add/a, delete/del/d/remove/rem, rotateleft/rotl/l, rotateright/rotr/r, avladd/aa/avlins/ai, avldel/ad/avlrem, build/b, clear"
        when 'AVL'
          "find/f, insert/ins/i/add/a, delete/del/d/remove/rem, build/b, clear"
        when 'maxheap'
          "insert/ins/i/add/a, deletemax/delmax/dmax/dm/removemax/rmax/rm, delete/del/d/remove/rem, build/b, clear"
        else
          ''
    unless mode is newMode or T.empty()
      try
        start()
        switch newMode
          when 'BST'
            await T.makeBST()
          when 'AVL'
            await T.makeBST()
            await T.animAVLAll()
          when 'maxheap'
            await T.makeMaxHeap()
      finally
        finish()
    mode = newMode
  updateMode()

  for each radio of document.querySelectorAll 'input[name="mode"]'
    radio.addEventListener 'input', updateMode

  for each radio of document.querySelectorAll 'input[name="style"]'
    radio.addEventListener 'input', =>
      setStyle new FormData(document.querySelector('form')!).get('style') as Style
      for each image of document.querySelectorAll('image[data-key]') as NodeListOf<SVGImageElement>
        key := Number image.dataset.key!
        image.setAttribute 'href', urlFor key
        image.querySelector('title')?.innerHTML = toName key

  for toggle of ['size', 'height', 'index']
    document.querySelector(`#${toggle}`)!.addEventListener 'input', (e) =>
      document.documentElement.classList.toggle toggle,
        (e.currentTarget as HTMLInputElement).checked
  document.querySelector('#speed')!.addEventListener 'input', (e) =>
    speed := (e.currentTarget as HTMLInputElement).valueAsNumber
    animDelay = 6000 / speed

  function execute(commandString: string): void
    command .= commandString.split(/\s*,\s*|\s+/).filter &
    return unless command#

    cmd .= command[0].toLowerCase()
    cmd = aliases[cmd] if cmd in aliases

    function parseKey(arg: string): number
      key .= parseInt arg
      if isNaN key
        key = byName arg
      key

    start()
    switch cmd
      when 'clear'
        T.clear()
        commandInput.value = command[1..].join ' '
        finish()
        submit()
        return
      when 'deletemax'
        await modeCommands[mode].deletemax? -1
        commandInput.value = command[1..].join ' '
        finish()
        submit()
        return
      when 'build'
        (modeCommands[mode].build as! (keys: number[]) => Promise<void>)
          command[1..].map parseKey
        finish()
        commandInput.value = ''
        return

    // Remaining commands need one or more arguments
    return finish() if command# < 2
    key .= parseKey command[1]
    (modeCommands[mode]?[cmd] ?? => Promise.resolve()) key
    .then =>
      finish()
      if command# > 2
        commandInput.value = [command[0], ...command[2..]].join ' '
        submit()
      else
        commandInput.value = ''
    .catch =>
      finish()

window.addEventListener 'load', gui