Migrate to a full rails app

1 files changed, 1055 insertions, 0 deletions

@@ -0,0 +1,1055 @@
+namespace(function() {
+
+var BBOX_DEBUG = false
+
+function clamp(value, min, max) {
+  return value < min ? min : value > max ? max : value
+}
+
+class BoundingBox {
+  constructor(x1, x2, y1, y2, sym=false) {
+    this.raw = {'x1':x1, 'x2':x2, 'y1':y1, 'y2':y2}
+    this.sym = sym
+    if (BBOX_DEBUG === true) {
+      this.debug = createElement('rect')
+      data.svg.appendChild(this.debug)
+      this.debug.setAttribute('opacity', 0.5)
+      this.debug.setAttribute('style', 'pointer-events: none;')
+      if (data.puzzle.symType == SYM_TYPE_NONE) {
+        this.debug.setAttribute('fill', 'white')
+      } else {
+        if (this.sym !== true) {
+          this.debug.setAttribute('fill', 'blue')
+        } else {
+          this.debug.setAttribute('fill', 'orange')
+        }
+      }
+    }
+    this._update()
+  }
+
+  shift(dir, pixels) {
+    if (dir === 'left') {
+      this.raw.x2 = this.raw.x1
+      this.raw.x1 -= pixels
+    } else if (dir === 'right') {
+      this.raw.x1 = this.raw.x2
+      this.raw.x2 += pixels
+    } else if (dir === 'top') {
+      this.raw.y2 = this.raw.y1
+      this.raw.y1 -= pixels
+    } else if (dir === 'bottom') {
+      this.raw.y1 = this.raw.y2
+      this.raw.y2 += pixels
+    }
+    this._update()
+  }
+
+  inMain(x, y) {
+    var inMainBox =
+      (this.x1 < x && x < this.x2) &&
+      (this.y1 < y && y < this.y2)
+    var inRawBox =
+      (this.raw.x1 < x && x < this.raw.x2) &&
+      (this.raw.y1 < y && y < this.raw.y2)
+
+    return inMainBox && !inRawBox
+  }
+
+  _update() {
+    this.x1 = this.raw.x1
+    this.x2 = this.raw.x2
+    this.y1 = this.raw.y1
+    this.y2 = this.raw.y2
+
+    // Check for endpoint adjustment.
+    // Pretend it's not an endpoint if the sym cell isn't an endpoint.
+    if (data.puzzle.symType != SYM_TYPE_NONE) {
+      var cell1 = data.puzzle.getCell(data.pos.x, data.pos.y)
+      var cell2 = data.puzzle.getSymmetricalCell(data.pos.x, data.pos.y)
+
+      if ((cell1.end == null) != (cell2.end == null)) {
+        var cell = {'end': 'none'}
+      } else if (this.sym !== true) {
+        var cell = cell1
+      } else {
+        var cell = cell2
+      }
+    } else {
+      var cell = data.puzzle.getCell(data.pos.x, data.pos.y)
+    }
+    if (cell.end === 'left') {
+      this.x1 -= 24
+    } else if (cell.end === 'right') {
+      this.x2 += 24
+    } else if (cell.end === 'top') {
+      this.y1 -= 24
+    } else if (cell.end === 'bottom') {
+      this.y2 += 24
+    }
+
+    this.middle = { // Note: Middle of the raw object
+      'x':(this.raw.x1 + this.raw.x2)/2,
+      'y':(this.raw.y1 + this.raw.y2)/2
+    }
+
+    if (this.debug != null) {
+      this.debug.setAttribute('x', this.x1)
+      this.debug.setAttribute('y', this.y1)
+      this.debug.setAttribute('width', this.x2 - this.x1)
+      this.debug.setAttribute('height', this.y2 - this.y1)
+    }
+  }
+}
+
+class PathSegment {
+  constructor(dir) {
+    this.poly1 = createElement('polygon')
+    this.circ = createElement('circle')
+    this.poly2 = createElement('polygon')
+    this.pillarCirc = createElement('circle')
+    this.dir = dir
+    data.svg.insertBefore(this.circ, data.cursor)
+    data.svg.insertBefore(this.poly2, data.cursor)
+    data.svg.insertBefore(this.pillarCirc, data.cursor)
+    this.circ.setAttribute('cx', data.bbox.middle.x)
+    this.circ.setAttribute('cy', data.bbox.middle.y)
+
+    if (data.puzzle.pillar === true) {
+      // cx/cy are updated in redraw(), since pillarCirc tracks the cursor
+      this.pillarCirc.setAttribute('cy', data.bbox.middle.y)
+      this.pillarCirc.setAttribute('r', 12)
+      if (data.pos.x === 0 && this.dir === MOVE_RIGHT) {
+        this.pillarCirc.setAttribute('cx', data.bbox.x1)
+        this.pillarCirc.setAttribute('static', true)
+      } else if (data.pos.x === data.puzzle.width - 1 && this.dir === MOVE_LEFT) {
+        this.pillarCirc.setAttribute('cx', data.bbox.x2)
+        this.pillarCirc.setAttribute('static', true)
+      } else {
+        this.pillarCirc.setAttribute('cx', data.bbox.middle.x)
+      }
+    }
+
+    if (data.puzzle.symType == SYM_TYPE_NONE) {
+      this.poly1.setAttribute('class', 'line-1 ' + data.svg.id)
+      this.circ.setAttribute('class', 'line-1 ' + data.svg.id)
+      this.poly2.setAttribute('class', 'line-1 ' + data.svg.id)
+      this.pillarCirc.setAttribute('class', 'line-1 ' + data.svg.id)
+    } else {
+      this.poly1.setAttribute('class', 'line-2 ' + data.svg.id)
+      this.circ.setAttribute('class', 'line-2 ' + data.svg.id)
+      this.poly2.setAttribute('class', 'line-2 ' + data.svg.id)
+      this.pillarCirc.setAttribute('class', 'line-2 ' + data.svg.id)
+
+      this.symPoly1 = createElement('polygon')
+      this.symCirc = createElement('circle')
+      this.symPoly2 = createElement('polygon')
+      this.symPillarCirc = createElement('circle')
+      data.svg.insertBefore(this.symCirc, data.cursor)
+      data.svg.insertBefore(this.symPoly2, data.cursor)
+      data.svg.insertBefore(this.symPillarCirc, data.cursor)
+
+      if (data.puzzle.settings.INVISIBLE_SYMMETRY) {
+        this.symPoly1.setAttribute('class', 'line-4 ' + data.svg.id)
+        this.symCirc.setAttribute('class', 'line-4 ' + data.svg.id)
+        this.symPoly2.setAttribute('class', 'line-4 ' + data.svg.id)
+        this.symPillarCirc.setAttribute('class', 'line-4 ' + data.svg.id)
+      } else {
+        this.symPoly1.setAttribute('class', 'line-3 ' + data.svg.id)
+        this.symCirc.setAttribute('class', 'line-3 ' + data.svg.id)
+        this.symPoly2.setAttribute('class', 'line-3 ' + data.svg.id)
+        this.symPillarCirc.setAttribute('class', 'line-3 ' + data.svg.id)
+      }
+
+      this.symCirc.setAttribute('cx', data.symbbox.middle.x)
+      this.symCirc.setAttribute('cy', data.symbbox.middle.y)
+
+      if (data.puzzle.pillar === true) {
+        // cx/cy are updated in redraw(), since symPillarCirc tracks the cursor
+        this.symPillarCirc.setAttribute('cy', data.symbbox.middle.y)
+        this.symPillarCirc.setAttribute('r', 12)
+        var symmetricalDir = getSymmetricalDir(data.puzzle, this.dir)
+        if (data.sym.x === 0 && symmetricalDir === MOVE_RIGHT) {
+          this.symPillarCirc.setAttribute('cx', data.symbbox.x1)
+          this.symPillarCirc.setAttribute('static', true)
+        } else if (data.sym.x === data.puzzle.width - 1 && symmetricalDir === MOVE_LEFT) {
+          this.symPillarCirc.setAttribute('cx', data.symbbox.x2)
+          this.symPillarCirc.setAttribute('static', true)
+        } else {
+          this.symPillarCirc.setAttribute('cx', data.symbbox.middle.x)
+        }
+      }
+    }
+
+    if (this.dir === MOVE_NONE) { // Start point
+      this.circ.setAttribute('r', 24)
+      this.circ.setAttribute('class', this.circ.getAttribute('class') + ' start')
+      if (data.puzzle.symType != SYM_TYPE_NONE) {
+        this.symCirc.setAttribute('r', 24)
+        this.symCirc.setAttribute('class', this.symCirc.getAttribute('class') + ' start')
+      }
+    } else {
+      // Only insert poly1 in non-startpoints
+      data.svg.insertBefore(this.poly1, data.cursor)
+      this.circ.setAttribute('r', 12)
+      if (data.puzzle.symType != SYM_TYPE_NONE) {
+        data.svg.insertBefore(this.symPoly1, data.cursor)
+        this.symCirc.setAttribute('r', 12)
+      }
+    }
+  }
+
+  destroy() {
+    data.svg.removeChild(this.poly1)
+    data.svg.removeChild(this.circ)
+    data.svg.removeChild(this.poly2)
+    data.svg.removeChild(this.pillarCirc)
+    if (data.puzzle.symType != SYM_TYPE_NONE) {
+      data.svg.removeChild(this.symPoly1)
+      data.svg.removeChild(this.symCirc)
+      data.svg.removeChild(this.symPoly2)
+      data.svg.removeChild(this.symPillarCirc)
+    }
+  }
+
+  redraw() { // Uses raw bbox because of endpoints
+    // Move the cursor and related objects
+    var x = clamp(data.x, data.bbox.x1, data.bbox.x2)
+    var y = clamp(data.y, data.bbox.y1, data.bbox.y2)
+    data.cursor.setAttribute('cx', x)
+    data.cursor.setAttribute('cy', y)
+    if (data.puzzle.symType != SYM_TYPE_NONE) {
+      data.symcursor.setAttribute('cx', this._reflX(x,y))
+      data.symcursor.setAttribute('cy', this._reflY(x,y))
+    }
+    if (data.puzzle.pillar === true) {
+      if (this.pillarCirc.getAttribute('static') == null) {
+        this.pillarCirc.setAttribute('cx', x)
+        this.pillarCirc.setAttribute('cy', y)
+      }
+      if (data.puzzle.symType != SYM_TYPE_NONE) {
+        if (this.symPillarCirc.getAttribute('static') == null) {
+          this.symPillarCirc.setAttribute('cx', this._reflX(x,y))
+          this.symPillarCirc.setAttribute('cy', this._reflY(x,y))
+        }
+      }
+    }
+
+    // Draw the first-half box
+    var points1 = JSON.parse(JSON.stringify(data.bbox.raw))
+    if (this.dir === MOVE_LEFT) {
+      points1.x1 = clamp(data.x, data.bbox.middle.x, data.bbox.x2)
+    } else if (this.dir === MOVE_RIGHT) {
+      points1.x2 = clamp(data.x, data.bbox.x1, data.bbox.middle.x)
+    } else if (this.dir === MOVE_TOP) {
+      points1.y1 = clamp(data.y, data.bbox.middle.y, data.bbox.y2)
+    } else if (this.dir === MOVE_BOTTOM) {
+      points1.y2 = clamp(data.y, data.bbox.y1, data.bbox.middle.y)
+    }
+    this.poly1.setAttribute('points',
+      points1.x1 + ' ' + points1.y1 + ',' +
+      points1.x1 + ' ' + points1.y2 + ',' +
+      points1.x2 + ' ' + points1.y2 + ',' +
+      points1.x2 + ' ' + points1.y1
+    )
+
+    var firstHalf = false
+    var isEnd = (data.puzzle.grid[data.pos.x][data.pos.y].end != null)
+    // The second half of the line uses the raw so that it can enter the endpoint properly.
+    var points2 = JSON.parse(JSON.stringify(data.bbox.raw))
+    if (data.x < data.bbox.middle.x && this.dir !== MOVE_RIGHT) {
+      points2.x1 = clamp(data.x, data.bbox.x1, data.bbox.middle.x)
+      points2.x2 = data.bbox.middle.x
+      if (isEnd && data.pos.x%2 === 0 && data.pos.y%2 === 1) {
+        points2.y1 += 17
+        points2.y2 -= 17
+      }
+    } else if (data.x > data.bbox.middle.x && this.dir !== MOVE_LEFT) {
+      points2.x1 = data.bbox.middle.x
+      points2.x2 = clamp(data.x, data.bbox.middle.x, data.bbox.x2)
+      if (isEnd && data.pos.x%2 === 0 && data.pos.y%2 === 1) {
+        points2.y1 += 17
+        points2.y2 -= 17
+      }
+    } else if (data.y < data.bbox.middle.y && this.dir !== MOVE_BOTTOM) {
+      points2.y1 = clamp(data.y, data.bbox.y1, data.bbox.middle.y)
+      points2.y2 = data.bbox.middle.y
+      if (isEnd && data.pos.x%2 === 1 && data.pos.y%2 === 0) {
+        points2.x1 += 17
+        points2.x2 -= 17
+      }
+    } else if (data.y > data.bbox.middle.y && this.dir !== MOVE_TOP) {
+      points2.y1 = data.bbox.middle.y
+      points2.y2 = clamp(data.y, data.bbox.middle.y, data.bbox.y2)
+      if (isEnd && data.pos.x%2 === 1 && data.pos.y%2 === 0) {
+        points2.x1 += 17
+        points2.x2 -= 17
+      }
+    } else {
+      firstHalf = true
+    }
+
+    this.poly2.setAttribute('points',
+      points2.x1 + ' ' + points2.y1 + ',' +
+      points2.x1 + ' ' + points2.y2 + ',' +
+      points2.x2 + ' ' + points2.y2 + ',' +
+      points2.x2 + ' ' + points2.y1
+    )
+
+    // Show the second poly only in the second half of the cell
+    this.poly2.setAttribute('opacity', (firstHalf ? 0 : 1))
+    // Show the circle in the second half of the cell AND in the start
+    if (firstHalf && this.dir !== MOVE_NONE) {
+      this.circ.setAttribute('opacity', 0)
+    } else {
+      this.circ.setAttribute('opacity', 1)
+    }
+
+    // Draw the symmetrical path based on the original one
+    if (data.puzzle.symType != SYM_TYPE_NONE) {
+      this.symPoly1.setAttribute('points',
+        this._reflX(points1.x2, points1.y2) + ' ' + this._reflY(points1.x2, points1.y2) + ',' +
+        this._reflX(points1.x2, points1.y2) + ' ' + this._reflY(points1.x1, points1.y1) + ',' +
+        this._reflX(points1.x1, points1.y1) + ' ' + this._reflY(points1.x1, points1.y1) + ',' +
+        this._reflX(points1.x1, points1.y1) + ' ' + this._reflY(points1.x2, points1.y2)
+      )
+
+      this.symPoly2.setAttribute('points',
+        this._reflX(points2.x2, points2.y2) + ' ' + this._reflY(points2.x2, points2.y2) + ',' +
+        this._reflX(points2.x2, points2.y2) + ' ' + this._reflY(points2.x1, points2.y1) + ',' +
+        this._reflX(points2.x1, points2.y1) + ' ' + this._reflY(points2.x1, points2.y1) + ',' +
+        this._reflX(points2.x1, points2.y1) + ' ' + this._reflY(points2.x2, points2.y2)
+      )
+
+      this.symCirc.setAttribute('opacity', this.circ.getAttribute('opacity'))
+      this.symPoly2.setAttribute('opacity', this.poly2.getAttribute('opacity'))
+    }
+  }
+
+  _reflX(x,y) {
+    if (data.puzzle.symType == SYM_TYPE_NONE) return x
+
+    if (data.puzzle.symType == SYM_TYPE_VERTICAL || data.puzzle.symType == SYM_TYPE_ROTATIONAL || data.puzzle.symType == SYM_TYPE_PARALLEL_H_FLIP) {
+      // Mirror position inside the bounding box
+      return (data.bbox.middle.x - x) + data.symbbox.middle.x
+    }
+    if (data.puzzle.symType == SYM_TYPE_HORIZONTAL || data.puzzle.symType == SYM_TYPE_PARALLEL_H || data.puzzle.symType == SYM_TYPE_PARALLEL_V || data.puzzle.symType == SYM_TYPE_PARALLEL_V_FLIP) {
+      // Copy position inside the bounding box
+      return (x - data.bbox.middle.x) + data.symbbox.middle.x
+    }
+    if (data.puzzle.symType == SYM_TYPE_ROTATE_LEFT || data.puzzle.symType == SYM_TYPE_FLIP_XY) {
+      // Rotate position left inside the bounding box
+      return (y - data.bbox.middle.y) + data.symbbox.middle.x
+    }
+    if (data.puzzle.symType == SYM_TYPE_ROTATE_RIGHT || data.puzzle.symType == SYM_TYPE_FLIP_NEG_XY) {
+      // Rotate position right inside the bounding box
+      return (data.bbox.middle.y - y) + data.symbbox.middle.x
+    }
+  }
+
+  _reflY(x,y) {
+    if (data.puzzle.symType == SYM_TYPE_NONE) return y
+
+    if (data.puzzle.symType == SYM_TYPE_HORIZONTAL || data.puzzle.symType == SYM_TYPE_ROTATIONAL || data.puzzle.symType == SYM_TYPE_PARALLEL_V_FLIP) {
+      // Mirror position inside the bounding box
+      return (data.bbox.middle.y - y) + data.symbbox.middle.y
+    }
+    if (data.puzzle.symType == SYM_TYPE_VERTICAL || data.puzzle.symType == SYM_TYPE_PARALLEL_V || data.puzzle.symType == SYM_TYPE_PARALLEL_H || data.puzzle.symType == SYM_TYPE_PARALLEL_H_FLIP) {
+      // Copy position inside the bounding box
+      return (y - data.bbox.middle.y) + data.symbbox.middle.y
+    }
+    if (data.puzzle.symType == SYM_TYPE_ROTATE_RIGHT || data.puzzle.symType == SYM_TYPE_FLIP_XY) {
+      // Rotate position left inside the bounding box
+      return (x - data.bbox.middle.x) + data.symbbox.middle.y
+    }
+    if (data.puzzle.symType == SYM_TYPE_ROTATE_LEFT || data.puzzle.symType == SYM_TYPE_FLIP_NEG_XY) {
+      // Rotate position right inside the bounding box
+      return (data.bbox.middle.x - x) + data.symbbox.middle.y
+    }
+  }
+}
+
+var data = {}
+
+function clearGrid(svg, puzzle) {
+  if (data.bbox != null && data.bbox.debug != null) {
+    data.svg.removeChild(data.bbox.debug)
+    data.bbox = null
+  }
+  if (data.symbbox != null && data.symbbox.debug != null) {
+    data.svg.removeChild(data.symbbox.debug)
+    data.symbbox = null
+  }
+
+  window.deleteElementsByClassName(svg, 'cursor')
+  window.deleteElementsByClassName(svg, 'line-1')
+  window.deleteElementsByClassName(svg, 'line-2')
+  window.deleteElementsByClassName(svg, 'line-3')
+  window.deleteElementsByClassName(svg, 'line-4')
+  puzzle.clearLines()
+}
+
+// This copy is an exact copy of puzzle.getSymmetricalDir, except that it uses MOVE_* values instead of strings
+function getSymmetricalDir(puzzle, dir) {
+  if (puzzle.symType == SYM_TYPE_VERTICAL || puzzle.symType == SYM_TYPE_ROTATIONAL || puzzle.symType == SYM_TYPE_PARALLEL_H_FLIP) {
+    if (dir === MOVE_LEFT) return MOVE_RIGHT
+    if (dir === MOVE_RIGHT) return MOVE_LEFT
+  }
+  if (puzzle.symType == SYM_TYPE_HORIZONTAL || puzzle.symType == SYM_TYPE_ROTATIONAL || puzzle.symType == SYM_TYPE_PARALLEL_V_FLIP) {
+    if (dir === MOVE_TOP) return MOVE_BOTTOM
+    if (dir === MOVE_BOTTOM) return MOVE_TOP
+  }
+  if (puzzle.symType == SYM_TYPE_ROTATE_LEFT || puzzle.symType == SYM_TYPE_FLIP_NEG_XY) {
+    if (dir === MOVE_LEFT) return MOVE_BOTTOM
+    if (dir === MOVE_RIGHT) return MOVE_TOP
+  }
+  if (puzzle.symType == SYM_TYPE_ROTATE_RIGHT || puzzle.symType == SYM_TYPE_FLIP_NEG_XY) {
+    if (dir === MOVE_TOP) return MOVE_RIGHT
+    if (dir === MOVE_BOTTOM) return MOVE_LEFT
+  }
+  if (puzzle.symType == SYM_TYPE_ROTATE_LEFT || puzzle.symType == SYM_TYPE_FLIP_XY) {
+    if (dir === MOVE_TOP) return MOVE_LEFT
+    if (dir === MOVE_BOTTOM) return MOVE_RIGHT
+  }
+  if (puzzle.symType == SYM_TYPE_ROTATE_RIGHT || puzzle.symType == SYM_TYPE_FLIP_XY) {
+    if (dir === MOVE_RIGHT) return MOVE_BOTTOM
+    if (dir === MOVE_LEFT) return MOVE_TOP
+  }
+  return dir
+}
+
+window.trace = function(event, puzzle, pos, start, symStart=null) {
+  /*if (data.start == null) {*/
+  if (data.tracing !== true) { // could be undefined or false
+    var svg = start.parentElement
+    data.tracing = true
+    window.PLAY_SOUND('start')
+    // Cleans drawn lines & puzzle state
+    clearGrid(svg, puzzle)
+    onTraceStart(puzzle, pos, svg, start, symStart)
+    data.animations.insertRule('.' + svg.id + '.start {animation: 150ms 1 forwards start-grow}\n')
+
+    hookMovementEvents(start)
+  } else {
+    event.stopPropagation()
+    // Signal the onMouseMove to stop accepting input (race condition)
+    data.tracing = false
+
+    // At endpoint and in main box
+    var cell = puzzle.getCell(data.pos.x, data.pos.y)
+    if (cell.end != null && data.bbox.inMain(data.x, data.y)) {
+      data.cursor.onpointerdown = null
+      setTimeout(function() { // Run validation asynchronously so we can free the pointer immediately.
+        puzzle.endPoint = data.pos
+        var puzzleData = window.validate(puzzle, false) // We want all invalid elements so we can show the user.
+
+        for (var negation of puzzleData.negations) {
+          console.debug('Rendering negation', negation)
+          data.animations.insertRule('.' + data.svg.id + '_' + negation.source.x + '_' + negation.source.y + ' {animation: 0.75s 1 forwards fade}\n')
+          data.animations.insertRule('.' + data.svg.id + '_' + negation.target.x + '_' + negation.target.y + ' {animation: 0.75s 1 forwards fade}\n')
+        }
+
+        if (puzzleData.valid()) {
+          window.PLAY_SOUND('success')
+          // !important to override the child animation
+          data.animations.insertRule('.' + data.svg.id + ' {animation: 1s 1 forwards line-success !important}\n')
+
+          // Convert the traced path into something suitable for solve.drawPath (for publishing purposes)
+          var rawPath = [puzzle.startPoint]
+          for (var i=1; i<data.path.length; i++) rawPath.push(data.path[i].dir)
+          rawPath.push(0)
+
+          if (window.TRACE_COMPLETION_FUNC) window.TRACE_COMPLETION_FUNC(puzzle, rawPath)
+        } else {
+          window.PLAY_SOUND('fail')
+          data.animations.insertRule('.' + data.svg.id + ' {animation: 1s 1 forwards line-fail !important}\n')
+          // Get list of invalid elements
+          if (puzzle.settings.FLASH_FOR_ERRORS) {
+            for (var invalidElement of puzzleData.invalidElements) {
+              data.animations.insertRule('.' + data.svg.id + '_' + invalidElement.x + '_' + invalidElement.y + ' {animation: 0.4s 20 alternate-reverse error}\n')
+            }
+          }
+        }
+      }, 1)
+
+    // Right-clicked (or double-tapped) and not at the end: Clear puzzle
+    } else if (event.isRightClick()) {
+      window.PLAY_SOUND('abort')
+      clearGrid(data.svg, puzzle)
+    } else { // Exit lock but allow resuming from the cursor (Desktop only)
+      data.cursor.onpointerdown = function() {
+        if (start.parentElement !== data.svg) return // Another puzzle is live, so data is gone
+        data.tracing = true
+        hookMovementEvents(start)
+      }
+    }
+
+    unhookMovementEvents()
+  }
+}
+
+window.clearAnimations = function() {
+  if (data.animations == null) return
+  for (var i=0; i<data.animations.cssRules.length; i++) {
+    var rule = data.animations.cssRules[i]
+    if (rule.selectorText != null && rule.selectorText.startsWith('.' + data.svg.id)) {
+      data.animations.deleteRule(i--)
+    }
+  }
+}
+
+window.onTraceStart = function(puzzle, pos, svg, start, symStart=null) {
+  var x = parseFloat(start.getAttribute('cx'))
+  var y = parseFloat(start.getAttribute('cy'))
+
+  var cursor = createElement('circle')
+  cursor.setAttribute('r', 12)
+  cursor.setAttribute('fill', window.CURSOR)
+  cursor.setAttribute('stroke', 'black')
+  cursor.setAttribute('stroke-width', '2px')
+  cursor.setAttribute('stroke-opacity', '0.4')
+  cursor.setAttribute('class', 'cursor')
+  cursor.setAttribute('cx', x)
+  cursor.setAttribute('cy', y)
+  svg.insertBefore(cursor, svg.getElementById('cursorPos'))
+
+  data.svg = svg
+  data.cursor = cursor
+  data.x = x
+  data.y = y
+  data.pos = pos
+  data.sym = puzzle.getSymmetricalPos(pos.x, pos.y)
+  data.puzzle = puzzle
+  data.path = []
+  puzzle.startPoint = {'x': pos.x, 'y': pos.y}
+
+  if (pos.x % 2 === 1) { // Start point is on a horizontal segment
+    data.bbox = new BoundingBox(x - 29, x + 29, y - 12, y + 12)
+  } else if (pos.y % 2 === 1) { // Start point is on a vertical segment
+    data.bbox = new BoundingBox(x - 12, x + 12, y - 29, y + 29)
+  } else { // Start point is at an intersection
+    data.bbox = new BoundingBox(x - 12, x + 12, y - 12, y + 12)
+  }
+
+  for (var styleSheet of document.styleSheets) {
+    if (styleSheet.title === 'animations') {
+      data.animations = styleSheet
+      break
+    }
+  }
+
+  clearAnimations()
+
+  // Add initial line segments + secondary symmetry cursor, if needed
+  if (puzzle.symType == SYM_TYPE_NONE) {
+    data.puzzle.updateCell2(data.pos.x, data.pos.y, 'type', 'line')
+    data.puzzle.updateCell2(data.pos.x, data.pos.y, 'line', window.LINE_BLACK)
+  } else {
+    data.puzzle.updateCell2(data.pos.x, data.pos.y, 'type', 'line')
+    data.puzzle.updateCell2(data.pos.x, data.pos.y, 'line', window.LINE_BLUE)
+    data.puzzle.updateCell2(data.sym.x, data.sym.y, 'type', 'line')
+    data.puzzle.updateCell2(data.sym.x, data.sym.y, 'line', window.LINE_YELLOW)
+
+    var dx = parseFloat(symStart.getAttribute('cx')) - data.x
+    var dy = parseFloat(symStart.getAttribute('cy')) - data.y
+    data.symbbox = new BoundingBox(
+      data.bbox.raw.x1 + dx,
+      data.bbox.raw.x2 + dx,
+      data.bbox.raw.y1 + dy,
+      data.bbox.raw.y2 + dy,
+      sym = true)
+
+    data.symcursor = createElement('circle')
+    svg.appendChild(data.symcursor)
+    if (data.puzzle.settings.INVISIBLE_SYMMETRY) {
+      data.symcursor.setAttribute('class', 'line-4 ' + data.svg.id)
+    } else {
+      data.symcursor.setAttribute('class', 'line-3 ' + data.svg.id)
+    }
+    data.symcursor.setAttribute('cx', symStart.getAttribute('cx'))
+    data.symcursor.setAttribute('cy', symStart.getAttribute('cy'))
+    data.symcursor.setAttribute('r', 12)
+  }
+
+  // Fixup: Mark out of bounds cells as null, setting inbounds cells as {}
+  // This allows tracing to correctly identify inbounds cells (and thus interior walls) and correctly handle exterior walls for oddly shaped puzzles.
+  {
+    var savedGrid = data.puzzle.switchToMaskedGrid()
+    var maskedGrid = data.puzzle.grid
+    data.puzzle.grid = savedGrid
+
+    for (var x=1; x<data.puzzle.width; x+=2) {
+      for (var y=1; y<data.puzzle.height; y+=2) {
+        if (maskedGrid[x][y] == null) { // null == MASKED_OOB
+          data.puzzle.grid[x][y] = null
+        } else if (data.puzzle.grid[x][y] == null) {
+          data.puzzle.grid[x][y] = {'type':'nonce'}
+        }
+      }
+    }
+  }
+  data.path.push(new PathSegment(MOVE_NONE)) // Must be created after initializing data.symbbox
+}
+
+// In case the user exit the pointer lock via another means (clicking outside the window, hitting esc, etc)
+// we still need to disengage our tracing hooks.
+document.onpointerlockchange = function() {
+  if (document.pointerLockElement == null) unhookMovementEvents()
+}
+
+function unhookMovementEvents() {
+  data.start = null
+  document.onmousemove = null
+  document.ontouchstart = null
+  document.ontouchmove = null
+  document.ontouchend = null
+  if (document.exitPointerLock != null) document.exitPointerLock()
+  if (document.mozExitPointerLock != null) document.mozExitPointerLock()
+}
+
+function hookMovementEvents(start) {
+  data.start = start
+  if (start.requestPointerLock != null) start.requestPointerLock()
+  if (start.mozRequestPointerLock != null) start.mozRequestPointerLock()
+
+  var sens = parseFloat(document.getElementById('sens').value)
+  document.onmousemove = function(event) {
+    // Working around a race condition where movement events fire after the handler is removed.
+    if (data.tracing !== true) return
+    // Prevent accidental fires on mobile platforms (ios and android). They will be handled via ontouchmove instead.
+    if (event.movementX == null) return
+    onMove(sens * event.movementX, sens * event.movementY)
+  }
+  document.ontouchstart = function(event) {
+    if (event.touches.length > 1) {
+      // Stop tracing for two+ finger touches (the equivalent of a right click on desktop)
+      window.trace(event, data.puzzle, null, null, null)
+      return
+    }
+    data.lastTouchPos = event.position
+  }
+  document.ontouchmove = function(event) {
+    if (data.tracing !== true) return
+
+    var eventIsWithinPuzzle = false
+    for (var node = event.target; node != null; node = node.parentElement) {
+      if (node == data.svg) {
+        eventIsWithinPuzzle = true
+        break
+      }
+    }
+    if (!eventIsWithinPuzzle) return // Ignore drag events that aren't within the puzzle
+    event.preventDefault() // Prevent accidental scrolling if the touch event is within the puzzle.
+
+    var newPos = event.position
+    onMove(newPos.x - data.lastTouchPos.x, newPos.y - data.lastTouchPos.y)
+    data.lastTouchPos = newPos
+  }
+  document.ontouchend = function(event) {
+    data.lastTouchPos = null
+    // Only call window.trace (to stop tracing) if we're really in an endpoint.
+    var cell = data.puzzle.getCell(data.pos.x, data.pos.y)
+    if (cell.end != null && data.bbox.inMain(data.x, data.y)) {
+      window.trace(event, data.puzzle, null, null, null)
+    }
+  }
+}
+
+// @Volatile -- must match order of PATH_* in solve
+var MOVE_NONE   = 0
+var MOVE_LEFT   = 1
+var MOVE_RIGHT  = 2
+var MOVE_TOP    = 3
+var MOVE_BOTTOM = 4
+
+window.onMove = function(dx, dy) {
+  {
+    // Also handles some collision
+    var collidedWith = pushCursor(dx, dy)
+    console.spam('Collided with', collidedWith)
+  }
+
+  while (true) {
+    hardCollision()
+
+    // Potentially move the location to a new cell, and make absolute boundary checks
+    var moveDir = move()
+    data.path[data.path.length - 1].redraw()
+    if (moveDir === MOVE_NONE) break
+    console.debug('Moved', ['none', 'left', 'right', 'top', 'bottom'][moveDir])
+
+    // Potentially adjust data.x/data.y if our position went around a pillar
+    if (data.puzzle.pillar === true) pillarWrap(moveDir)
+
+    var lastDir = data.path[data.path.length - 1].dir
+    var backedUp = ((moveDir === MOVE_LEFT && lastDir === MOVE_RIGHT)
+                 || (moveDir === MOVE_RIGHT && lastDir === MOVE_LEFT)
+                 || (moveDir === MOVE_TOP && lastDir === MOVE_BOTTOM)
+                 || (moveDir === MOVE_BOTTOM && lastDir === MOVE_TOP))
+
+    if (data.puzzle.symType != SYM_TYPE_NONE) {
+      var symMoveDir = getSymmetricalDir(data.puzzle, moveDir)
+    }
+
+    // If we backed up, remove a path segment and mark the old cell as unvisited
+    if (backedUp) {
+      data.path.pop().destroy()
+      data.puzzle.updateCell2(data.pos.x, data.pos.y, 'line', window.LINE_NONE)
+      if (data.puzzle.symType != SYM_TYPE_NONE) {
+        if (data.puzzle.getLine(data.sym.x, data.sym.y) == window.LINE_OVERLAP) {
+          data.puzzle.updateCell2(data.sym.x, data.sym.y, 'line', window.LINE_BLUE)
+        } else {
+          data.puzzle.updateCell2(data.sym.x, data.sym.y, 'line', window.LINE_NONE)
+        }
+      }
+    }
+
+    // Move to the next cell
+    changePos(data.bbox, data.pos, moveDir)
+    if (data.puzzle.symType != SYM_TYPE_NONE) {
+      changePos(data.symbbox, data.sym, symMoveDir)
+    }
+
+    // If we didn't back up, add a path segment and mark the new cell as visited
+    if (!backedUp) {
+      data.path.push(new PathSegment(moveDir))
+      if (data.puzzle.symType == SYM_TYPE_NONE) {
+        data.puzzle.updateCell2(data.pos.x, data.pos.y, 'line', window.LINE_BLACK)
+      } else {
+        data.puzzle.updateCell2(data.pos.x, data.pos.y, 'line', window.LINE_BLUE)
+        if (data.puzzle.getLine(data.sym.x, data.sym.y) == window.LINE_BLUE) {
+          data.puzzle.updateCell2(data.sym.x, data.sym.y, 'line', window.LINE_OVERLAP)
+        } else {
+          data.puzzle.updateCell2(data.sym.x, data.sym.y, 'line', window.LINE_YELLOW)
+        }
+      }
+    }
+  }
+}
+
+// Helper function for pushCursor. Used to determine the direction and magnitude of redirection.
+function push(dx, dy, dir, targetDir) {
+  // Fraction of movement to redirect in the other direction
+  var movementRatio = null
+  if (targetDir === 'left' || targetDir === 'top') {
+    movementRatio = -3
+  } else if (targetDir === 'right' || targetDir === 'bottom') {
+    movementRatio = 3
+  }
+  if (window.settings.disablePushing === true) movementRatio *= 1000
+
+  if (dir === 'left') {
+    var overshoot = data.bbox.x1 - (data.x + dx) + 12
+    if (overshoot > 0) {
+      data.y += dy + overshoot / movementRatio
+      data.x = data.bbox.x1 + 12
+      return true
+    }
+  } else if (dir === 'right') {
+    var overshoot = (data.x + dx) - data.bbox.x2 + 12
+    if (overshoot > 0) {
+      data.y += dy + overshoot / movementRatio
+      data.x = data.bbox.x2 - 12
+      return true
+    }
+  } else if (dir === 'leftright') {
+    data.y += dy + Math.abs(dx) / movementRatio
+    return true
+  } else if (dir === 'top') {
+    var overshoot = data.bbox.y1 - (data.y + dy) + 12
+    if (overshoot > 0) {
+      data.x += dx + overshoot / movementRatio
+      data.y = data.bbox.y1 + 12
+      return true
+    }
+  } else if (dir === 'bottom') {
+    var overshoot = (data.y + dy) - data.bbox.y2 + 12
+    if (overshoot > 0) {
+      data.x += dx + overshoot / movementRatio
+      data.y = data.bbox.y2 - 12
+      return true
+    }
+  } else if (dir === 'topbottom') {
+    data.x += dx + Math.abs(dy) / movementRatio
+    return true
+  }
+  return false
+}
+
+// Redirect momentum from pushing against walls, so that all further moment steps
+// will be strictly linear. Returns a string for logging purposes only.
+function pushCursor(dx, dy) {
+  // Outer wall collision
+  var cell = data.puzzle.getCell(data.pos.x, data.pos.y)
+  if (cell == null) return 'nothing'
+
+  // Only consider non-endpoints or endpoints which are parallel
+  if ([undefined, 'top', 'bottom'].includes(cell.end)) {
+    var leftCell = data.puzzle.getCell(data.pos.x - 1, data.pos.y)
+    if (leftCell == null || leftCell.gap === window.GAP_FULL) {
+      if (push(dx, dy, 'left', 'top')) return 'left outer wall'
+    }
+    var rightCell = data.puzzle.getCell(data.pos.x + 1, data.pos.y)
+    if (rightCell == null || rightCell.gap === window.GAP_FULL) {
+      if (push(dx, dy, 'right', 'top')) return 'right outer wall'
+    }
+  }
+  // Only consider non-endpoints or endpoints which are parallel
+  if ([undefined, 'left', 'right'].includes(cell.end)) {
+    var topCell = data.puzzle.getCell(data.pos.x, data.pos.y - 1)
+    if (topCell == null || topCell.gap === window.GAP_FULL) {
+      if (push(dx, dy, 'top', 'right')) return 'top outer wall'
+    }
+    var bottomCell = data.puzzle.getCell(data.pos.x, data.pos.y + 1)
+    if (bottomCell == null || bottomCell.gap === window.GAP_FULL) {
+      if (push(dx, dy, 'bottom', 'right')) return 'bottom outer wall'
+    }
+  }
+
+  // Inner wall collision
+  if (cell.end == null) {
+    if (data.pos.x%2 === 1 && data.pos.y%2 === 0) { // Horizontal cell
+      if (data.x < data.bbox.middle.x) {
+        push(dx, dy, 'topbottom', 'left')
+        return 'topbottom inner wall, moved left'
+      } else {
+        push(dx, dy, 'topbottom', 'right')
+        return 'topbottom inner wall, moved right'
+      }
+    } else if (data.pos.x%2 === 0 && data.pos.y%2 === 1) { // Vertical cell
+      if (data.y < data.bbox.middle.y) {
+        push(dx, dy, 'leftright', 'top')
+        return 'leftright inner wall, moved up'
+      } else {
+        push(dx, dy, 'leftright', 'bottom')
+        return 'leftright inner wall, moved down'
+      }
+    }
+  }
+
+  // Intersection & endpoint collision
+  // Ratio of movement to be considered turning at an intersection
+  var turnMod = 2
+  if ((data.pos.x%2 === 0 && data.pos.y%2 === 0) || cell.end != null) {
+    if (data.x < data.bbox.middle.x) {
+      push(dx, dy, 'topbottom', 'right')
+      // Overshot the intersection and appears to be trying to turn
+      if (data.x > data.bbox.middle.x && Math.abs(dy) * turnMod > Math.abs(dx)) {
+        data.y += Math.sign(dy) * (data.x - data.bbox.middle.x)
+        data.x = data.bbox.middle.x
+        return 'overshot moving right'
+      }
+      return 'intersection moving right'
+    } else if (data.x > data.bbox.middle.x) {
+      push(dx, dy, 'topbottom', 'left')
+      // Overshot the intersection and appears to be trying to turn
+      if (data.x < data.bbox.middle.x && Math.abs(dy) * turnMod > Math.abs(dx)) {
+        data.y += Math.sign(dy) * (data.bbox.middle.x - data.x)
+        data.x = data.bbox.middle.x
+        return 'overshot moving left'
+      }
+      return 'intersection moving left'
+    }
+    if (data.y < data.bbox.middle.y) {
+      push(dx, dy, 'leftright', 'bottom')
+      // Overshot the intersection and appears to be trying to turn
+      if (data.y > data.bbox.middle.y && Math.abs(dx) * turnMod > Math.abs(dy)) {
+        data.x += Math.sign(dx) * (data.y - data.bbox.middle.y)
+        data.y = data.bbox.middle.y
+        return 'overshot moving down'
+      }
+      return 'intersection moving down'
+    } else if (data.y > data.bbox.middle.y) {
+      push(dx, dy, 'leftright', 'top')
+      // Overshot the intersection and appears to be trying to turn
+      if (data.y < data.bbox.middle.y && Math.abs(dx) * turnMod > Math.abs(dy)) {
+        data.x += Math.sign(dx) * (data.bbox.middle.y - data.y)
+        data.y = data.bbox.middle.y
+        return 'overshot moving up'
+      }
+      return 'intersection moving up'
+    }
+  }
+
+  // No collision, limit movement to X or Y only to prevent out-of-bounds
+  if (Math.abs(dx) > Math.abs(dy)) {
+    data.x += dx
+    return 'nothing, x'
+  } else {
+    data.y += dy
+    return 'nothing, y'
+  }
+}
+
+// Check to see if we collided with any gaps, or with a symmetrical line, or a startpoint.
+// In any case, abruptly zero momentum.
+function hardCollision() {
+  var lastDir = data.path[data.path.length - 1].dir
+  var cell = data.puzzle.getCell(data.pos.x, data.pos.y)
+  if (cell == null) return
+
+  var gapSize = 0
+  if (cell.gap === window.GAP_BREAK) {
+    console.spam('Collided with a gap')
+    gapSize = 21
+  } else {
+    var nextCell = null
+    if (lastDir === MOVE_LEFT)   nextCell = data.puzzle.getCell(data.pos.x - 1, data.pos.y)
+    if (lastDir === MOVE_RIGHT)  nextCell = data.puzzle.getCell(data.pos.x + 1, data.pos.y)
+    if (lastDir === MOVE_TOP)    nextCell = data.puzzle.getCell(data.pos.x, data.pos.y - 1)
+    if (lastDir === MOVE_BOTTOM) nextCell = data.puzzle.getCell(data.pos.x, data.pos.y + 1)
+    if (nextCell != null && nextCell.start === true && nextCell.line > window.LINE_NONE) {
+      gapSize = -5
+    }
+  }
+
+  if (data.puzzle.symType != SYM_TYPE_NONE) {
+    if (data.sym.x === data.pos.x && data.sym.y === data.pos.y) {
+      console.spam('Collided with our symmetrical line')
+      gapSize = 13
+    } else if (data.puzzle.getCell(data.sym.x, data.sym.y).gap === window.GAP_BREAK) {
+      console.spam('Symmetrical line hit a gap')
+      gapSize = 21
+    }
+  }
+  if (gapSize === 0) return // Didn't collide with anything
+
+  if (lastDir === MOVE_LEFT) {
+    data.x = Math.max(data.bbox.middle.x + gapSize, data.x)
+  } else if (lastDir === MOVE_RIGHT) {
+    data.x = Math.min(data.x, data.bbox.middle.x - gapSize)
+  } else if (lastDir === MOVE_TOP) {
+    data.y = Math.max(data.bbox.middle.y + gapSize, data.y)
+  } else if (lastDir === MOVE_BOTTOM) {
+    data.y = Math.min(data.y, data.bbox.middle.y - gapSize)
+  }
+}
+
+// Check to see if we've gone beyond the edge of puzzle cell, and if the next cell is safe,
+// i.e. not out of bounds. Reports the direction we are going to move (or none),
+// but does not actually change data.pos
+function move() {
+  var lastDir = data.path[data.path.length - 1].dir
+
+  if (data.x < data.bbox.x1 + 12) { // Moving left
+    var cell = data.puzzle.getCell(data.pos.x - 1, data.pos.y)
+    if (cell == null || cell.type !== 'line' || cell.gap === window.GAP_FULL) {
+      console.spam('Collided with outside / gap-2', cell)
+      data.x = data.bbox.x1 + 12
+    } else if (cell.line > window.LINE_NONE && lastDir !== MOVE_RIGHT) {
+      console.spam('Collided with other line', cell.line)
+      data.x = data.bbox.x1 + 12
+    } else if (data.puzzle.symType != SYM_TYPE_NONE) {
+      var symCell = data.puzzle.getSymmetricalCell(data.pos.x - 1, data.pos.y)
+      if (symCell == null || symCell.type !== 'line' || symCell.gap === window.GAP_FULL) {
+        console.spam('Collided with symmetrical outside / gap-2', cell)
+        data.x = data.bbox.x1 + 12
+      }
+    }
+    if (data.x < data.bbox.x1) {
+      return MOVE_LEFT
+    }
+  } else if (data.x > data.bbox.x2 - 12) { // Moving right
+    var cell = data.puzzle.getCell(data.pos.x + 1, data.pos.y)
+    if (cell == null || cell.type !== 'line' || cell.gap === window.GAP_FULL) {
+      console.spam('Collided with outside / gap-2', cell)
+      data.x = data.bbox.x2 - 12
+    } else if (cell.line > window.LINE_NONE && lastDir !== MOVE_LEFT) {
+      console.spam('Collided with other line', cell.line)
+      data.x = data.bbox.x2 - 12
+    } else if (data.puzzle.symType != SYM_TYPE_NONE) {
+      var symCell = data.puzzle.getSymmetricalCell(data.pos.x + 1, data.pos.y)
+      if (symCell == null || symCell.type !== 'line' || symCell.gap === window.GAP_FULL) {
+        console.spam('Collided with symmetrical outside / gap-2', cell)
+        data.x = data.bbox.x2 - 12
+      }
+    }
+    if (data.x > data.bbox.x2) {
+      return MOVE_RIGHT
+    }
+  } else if (data.y < data.bbox.y1 + 12) { // Moving up
+    var cell = data.puzzle.getCell(data.pos.x, data.pos.y - 1)
+    if (cell == null || cell.type !== 'line' || cell.gap === window.GAP_FULL) {
+      console.spam('Collided with outside / gap-2', cell)
+      data.y = data.bbox.y1 + 12
+    } else if (cell.line > window.LINE_NONE && lastDir !== MOVE_BOTTOM) {
+      console.spam('Collided with other line', cell.line)
+      data.y = data.bbox.y1 + 12
+    } else if (data.puzzle.symType != SYM_TYPE_NONE) {
+      var symCell = data.puzzle.getSymmetricalCell(data.pos.x, data.pos.y - 1)
+      if (symCell == null || symCell.type !== 'line' || symCell.gap === window.GAP_FULL) {
+        console.spam('Collided with symmetrical outside / gap-2', cell)
+        data.y = data.bbox.y1 + 12
+      }
+    }
+    if (data.y < data.bbox.y1) {
+      return MOVE_TOP
+    }
+  } else if (data.y > data.bbox.y2 - 12) { // Moving down
+    var cell = data.puzzle.getCell(data.pos.x, data.pos.y + 1)
+    if (cell == null || cell.type !== 'line' || cell.gap === window.GAP_FULL) {
+      console.spam('Collided with outside / gap-2')
+      data.y = data.bbox.y2 - 12
+    } else if (cell.line > window.LINE_NONE && lastDir !== MOVE_TOP) {
+      console.spam('Collided with other line', cell.line)
+      data.y = data.bbox.y2 - 12
+    } else if (data.puzzle.symType != SYM_TYPE_NONE) {
+      var symCell = data.puzzle.getSymmetricalCell(data.pos.x, data.pos.y + 1)
+      if (symCell == null || symCell.type !== 'line' || symCell.gap === window.GAP_FULL) {
+        console.spam('Collided with symmetrical outside / gap-2', cell)
+        data.y = data.bbox.y2 - 12
+      }
+    }
+    if (data.y > data.bbox.y2) {
+      return MOVE_BOTTOM
+    }
+  }
+  return MOVE_NONE
+}
+
+// Check to see if you moved beyond the edge of a pillar.
+// If so, wrap the cursor x to preserve momentum.
+// Note that this still does not change the position.
+function pillarWrap(moveDir) {
+  if (moveDir === MOVE_LEFT && data.pos.x === 0) {
+    data.x += data.puzzle.width * 41
+  }
+  if (moveDir === MOVE_RIGHT && data.pos.x === data.puzzle.width - 1) {
+    data.x -= data.puzzle.width * 41
+  }
+}
+
+// Actually change the data position. (Note that this takes in pos to allow easier symmetry).
+// Note that this doesn't zero the momentum, so that we can adjust appropriately on further loops.
+// This function also shifts the bounding box that we use to determine the bounds of the cell.
+function changePos(bbox, pos, moveDir) {
+  if (moveDir === MOVE_LEFT) {
+    pos.x--
+    // Wrap around the left
+    if (data.puzzle.pillar === true && pos.x < 0) {
+      pos.x += data.puzzle.width
+      bbox.shift('right', data.puzzle.width * 41 - 82)
+      bbox.shift('right', 58)
+    } else {
+      bbox.shift('left', (pos.x%2 === 0 ? 24 : 58))
+    }
+  } else if (moveDir === MOVE_RIGHT) {
+    pos.x++
+    // Wrap around to the right
+    if (data.puzzle.pillar === true && pos.x >= data.puzzle.width) {
+      pos.x -= data.puzzle.width
+      bbox.shift('left', data.puzzle.width * 41 - 82)
+      bbox.shift('left', 24)
+    } else {
+      bbox.shift('right', (pos.x%2 === 0 ? 24 : 58))
+    }
+  } else if (moveDir === MOVE_TOP) {
+    pos.y--
+    bbox.shift('top', (pos.y%2 === 0 ? 24 : 58))
+  } else if (moveDir === MOVE_BOTTOM) {
+    pos.y++
+    bbox.shift('bottom', (pos.y%2 === 0 ? 24 : 58))
+  }
+}
+
+})