1 files changed, 316 insertions, 0 deletions

@@ -0,0 +1,316 @@
+var SYM_TYPE_NONE               = 0
+var SYM_TYPE_HORIZONTAL         = 1
+var SYM_TYPE_VERTICAL           = 2
+var SYM_TYPE_ROTATIONAL         = 3
+var SYM_TYPE_ROTATE_LEFT        = 4
+var SYM_TYPE_ROTATE_RIGHT       = 5
+var SYM_TYPE_FLIP_XY            = 6
+var SYM_TYPE_FLIP_NEG_XY        = 7
+var SYM_TYPE_PARALLEL_H         = 8
+var SYM_TYPE_PARALLEL_V         = 9
+var SYM_TYPE_PARALLEL_H_FLIP    = 10
+var SYM_TYPE_PARALLEL_V_FLIP    = 11
+var SYM_TYPE_PILLAR_PARALLEL    = 12
+var SYM_TYPE_PILLAR_HORIZONTAL  = 13
+var SYM_TYPE_PILLAR_VERTICAL    = 14
+var SYM_TYPE_PILLAR_ROTATIONAL  = 15
+
+namespace(function() {
+
+window.draw = function(puzzle, target='puzzle') {
+  if (puzzle == null) return
+  var svg = document.getElementById(target)
+  console.info('Drawing', puzzle, 'into', svg)
+  while (svg.firstChild) svg.removeChild(svg.firstChild)
+
+  // Prevent context menu popups within the puzzle
+  svg.oncontextmenu = function(event) {
+    event.preventDefault()
+  }
+
+  if (puzzle.pillar === true) {
+    // 41*width + 30*2 (padding) + 10*2 (border)
+    var pixelWidth = 41 * puzzle.width + 80
+  } else {
+    // 41*(width-1) + 24 (extra edge) + 30*2 (padding) + 10*2 (border)
+    var pixelWidth = 41 * puzzle.width + 63
+  }
+  var pixelHeight = 41 * puzzle.height + 63
+  svg.setAttribute('viewbox', '0 0 ' + pixelWidth + ' ' + pixelHeight)
+  svg.setAttribute('width', pixelWidth)
+  svg.setAttribute('height', pixelHeight)
+
+  var rect = createElement('rect')
+  svg.appendChild(rect)
+  rect.setAttribute('stroke-width', 10)
+  rect.setAttribute('stroke', window.BORDER)
+  rect.setAttribute('fill', window.OUTER_BACKGROUND)
+  // Accounting for the border thickness
+  rect.setAttribute('x', 5)
+  rect.setAttribute('y', 5)
+  rect.setAttribute('width', pixelWidth - 10) // Removing border
+  rect.setAttribute('height', pixelHeight - 10) // Removing border
+
+  drawCenters(puzzle, svg)
+  drawGrid(puzzle, svg, target)
+  drawStartAndEnd(puzzle, svg)
+  // Draw cell symbols after so they overlap the lines, if necessary
+  drawSymbols(puzzle, svg, target)
+
+  // For pillar puzzles, add faders for the left and right sides
+  if (puzzle.pillar === true) {
+    var defs = window.createElement('defs')
+    defs.id = 'cursorPos'
+    defs.innerHTML = '' +
+    '<linearGradient id="fadeInLeft">\n' +
+    '  <stop offset="0%"   stop-opacity="1.0" stop-color="' + window.OUTER_BACKGROUND + '"></stop>\n' +
+    '  <stop offset="25%"  stop-opacity="1.0" stop-color="' + window.OUTER_BACKGROUND + '"></stop>\n' +
+    '  <stop offset="100%" stop-opacity="0.0" stop-color="' + window.OUTER_BACKGROUND + '"></stop>\n' +
+    '</linearGradient>\n' +
+    '<linearGradient id="fadeOutRight">\n' +
+    '  <stop offset="0%"   stop-opacity="0.0" stop-color="' + window.OUTER_BACKGROUND + '"></stop>\n' +
+    '  <stop offset="100%" stop-opacity="1.0" stop-color="' + window.OUTER_BACKGROUND + '"></stop>\n' +
+    '</linearGradient>\n'
+    svg.appendChild(defs)
+
+    var leftBox = window.createElement('rect')
+    leftBox.setAttribute('x', 16)
+    leftBox.setAttribute('y', 10)
+    leftBox.setAttribute('width', 48)
+    leftBox.setAttribute('height', 41 * puzzle.height + 43)
+    leftBox.setAttribute('fill', 'url(#fadeInLeft)')
+    leftBox.setAttribute('style', 'pointer-events: none')
+    svg.appendChild(leftBox)
+
+    var rightBox = window.createElement('rect')
+    rightBox.setAttribute('x', 41 * puzzle.width + 22)
+    rightBox.setAttribute('y', 10)
+    rightBox.setAttribute('width', 30)
+    rightBox.setAttribute('height', 41 * puzzle.height + 43)
+    rightBox.setAttribute('fill', 'url(#fadeOutRight)')
+    rightBox.setAttribute('style', 'pointer-events: none')
+    svg.appendChild(rightBox)
+  }
+}
+
+function drawCenters(puzzle, svg) {
+  // @Hack that I am not fixing. This switches the puzzle's grid to a floodfilled grid
+  // where null represents cells which are part of the outside
+  var savedGrid = puzzle.switchToMaskedGrid()
+  if (puzzle.pillar === true) {
+    for (var y=1; y<puzzle.height; y += 2) {
+      if (puzzle.getCell(-1, y) == null) continue // Cell borders the outside
+
+      var rect = createElement('rect')
+      rect.setAttribute('x', 28)
+      rect.setAttribute('y', 41 * y + 11)
+      rect.setAttribute('width', 24)
+      rect.setAttribute('height', 82)
+      rect.setAttribute('fill', window.BACKGROUND)
+      svg.appendChild(rect)
+    }
+  }
+
+  for (var x=1; x<puzzle.width; x += 2) {
+    for (var y=1; y<puzzle.height; y += 2) {
+      if (puzzle.grid[x][y] == null) continue // Cell borders the outside
+
+      var rect = createElement('rect')
+      rect.setAttribute('x', 41 * x + 11)
+      rect.setAttribute('y', 41 * y + 11)
+      rect.setAttribute('width', 82)
+      rect.setAttribute('height', 82)
+      rect.setAttribute('fill', window.BACKGROUND)
+      rect.setAttribute('shape-rendering', 'crispedges') // Otherwise they don't meet behind gaps
+      svg.appendChild(rect)
+    }
+  }
+  puzzle.grid = savedGrid
+}
+
+function drawGrid(puzzle, svg, target) {
+  for (var x=0; x<puzzle.width; x++) {
+    for (var y=0; y<puzzle.height; y++) {
+      var cell = puzzle.grid[x][y]
+      if (cell != null && cell.gap === window.GAP_FULL) continue
+      if (cell != null && cell.gap === window.GAP_BREAK) {
+        var params = {
+          'width':58,
+          'height':58,
+          'x': x*41 + 23,
+          'y': y*41 + 23,
+          'class': target + '_' + x + '_' + y,
+          'type': 'gap',
+        }
+        if (x%2 === 0 && y%2 === 1) params.rot = 1
+        drawSymbolWithSvg(svg, params)
+        continue
+      }
+
+      var line = createElement('line')
+      line.setAttribute('stroke-width', 24)
+      line.setAttribute('stroke-linecap', 'round')
+      line.setAttribute('stroke', window.FOREGROUND)
+      if (x%2 === 1 && y%2 === 0) { // Horizontal
+        if (cell.gap === window.GAP_BREAK) continue
+        line.setAttribute('x1', (x-1)*41 + 52)
+        // Adjust the length if it's a pillar -- the grid is not as wide!
+        if (puzzle.pillar === true && x === puzzle.width - 1) {
+          line.setAttribute('x2', (x+1)*41 + 40)
+        } else {
+          line.setAttribute('x2', (x+1)*41 + 52)
+        }
+        line.setAttribute('y1', y*41 + 52)
+        line.setAttribute('y2', y*41 + 52)
+        svg.appendChild(line)
+      } else if (x%2 === 0 && y%2 === 1) { // Vertical
+        if (cell.gap === window.GAP_BREAK) continue
+        line.setAttribute('x1', x*41 + 52)
+        line.setAttribute('x2', x*41 + 52)
+        line.setAttribute('y1', (y-1)*41 + 52)
+        line.setAttribute('y2', (y+1)*41 + 52)
+        svg.appendChild(line)
+      } else if (x%2 === 0 && y%2 === 0) { // Intersection
+        var surroundingLines = 0
+        if (cell.end != null) surroundingLines++
+        var leftCell = puzzle.getCell(x - 1, y)
+        if (leftCell != null && leftCell.gap !== window.GAP_FULL) surroundingLines++
+        var rightCell = puzzle.getCell(x + 1, y)
+        if (rightCell != null && rightCell.gap !== window.GAP_FULL) surroundingLines++
+        var topCell = puzzle.getCell(x, y - 1)
+        if (topCell != null && topCell.gap !== window.GAP_FULL) surroundingLines++
+        var bottomCell = puzzle.getCell(x, y + 1)
+        if (bottomCell != null && bottomCell.gap !== window.GAP_FULL) surroundingLines++
+
+        if (surroundingLines === 1) {
+          // Add square caps for dead ends which are non-endpoints
+          var rect = createElement('rect')
+          rect.setAttribute('x', x*41 + 40)
+          rect.setAttribute('y', y*41 + 40)
+          rect.setAttribute('width', 24)
+          rect.setAttribute('height', 24)
+          rect.setAttribute('fill', window.FOREGROUND)
+          svg.appendChild(rect)
+        } else if (surroundingLines > 1) {
+          // Add rounding for other intersections (handling gap-only corners)
+          var circ = createElement('circle')
+          circ.setAttribute('cx', x*41 + 52)
+          circ.setAttribute('cy', y*41 + 52)
+          circ.setAttribute('r', 12)
+          circ.setAttribute('fill', window.FOREGROUND)
+          svg.appendChild(circ)
+        }
+      }
+    }
+  }
+  // Determine if left-side needs a 'wrap indicator'
+  if (puzzle.pillar === true) {
+    var x = 0;
+    for (var y=0; y<puzzle.height; y+=2) {
+      var cell = puzzle.getCell(x-1, y)
+      if (cell == null || cell.gap === window.GAP_FULL) continue
+      var line = createElement('line')
+      line.setAttribute('stroke-width', 24)
+      line.setAttribute('stroke-linecap', 'round')
+      line.setAttribute('stroke', window.FOREGROUND)
+      line.setAttribute('x1', x*41 + 40)
+      line.setAttribute('x2', x*41 + 52)
+      line.setAttribute('y1', y*41 + 52)
+      line.setAttribute('y2', y*41 + 52)
+      svg.appendChild(line)
+    }
+  }
+}
+
+function drawSymbols(puzzle, svg, target) {
+  for (var x=0; x<puzzle.width; x++) {
+    for (var y=0; y<puzzle.height; y++) {
+      var cell = puzzle.grid[x][y]
+      if (cell == null) continue
+      var params = {
+        'width':58,
+        'height':58,
+        'x': x*41 + 23,
+        'y': y*41 + 23,
+        'class': target + '_' + x + '_' + y,
+      }
+      if (cell.dot > window.DOT_NONE) {
+        params.type = 'dot'
+        if (cell.dot === window.DOT_BLACK) params.color = 'black'
+        else if (cell.dot === window.DOT_BLUE) params.color = window.LINE_PRIMARY
+        else if (cell.dot === window.DOT_YELLOW) params.color = window.LINE_SECONDARY
+        else if (cell.dot === window.DOT_INVISIBLE) {
+          params.color = window.FOREGROUND
+          // This makes the invisible dots visible, but only while we're in the editor.
+          if (document.getElementById('metaButtons') != null) {
+            params.stroke = 'black'
+            params.strokeWidth = '2px'
+          }
+        }
+        drawSymbolWithSvg(svg, params)
+      } else if (cell.gap === window.GAP_BREAK) {
+        // Gaps were handled above, while drawing the grid.
+      } else if (x%2 === 1 && y%2 === 1) {
+        // Generic draw for all other elements
+        Object.assign(params, cell)
+        window.drawSymbolWithSvg(svg, params, puzzle.settings.CUSTOM_MECHANICS)
+      }
+    }
+  }
+}
+
+function drawStartAndEnd(puzzle, svg) {
+  for (var x=0; x<puzzle.width; x++) {
+    for (var y=0; y<puzzle.height; y++) {
+      var cell = puzzle.grid[x][y]
+      if (cell == null) continue
+      if (cell.end != null) {
+        window.drawSymbolWithSvg(svg, {
+          'type': 'end',
+          'width': 58,
+          'height': 58,
+          'dir': cell.end,
+          'x': x*41 + 23,
+          'y': y*41 + 23,
+        })
+      }
+
+      if (cell.start === true) {
+        var symStart = null
+        if (puzzle.symType != SYM_TYPE_NONE) {
+          var sym = puzzle.getSymmetricalPos(x, y)
+          window.drawSymbolWithSvg(svg, {
+            'type': 'start',
+            'width': 58,
+            'height': 58,
+            'x': sym.x*41 + 23,
+            'y': sym.y*41 + 23,
+          })
+          symStart = svg.lastChild
+          symStart.style.display = 'none'
+          symStart.id = 'symStart_' + svg.id + '_' + x + '_' + y
+        }
+
+        window.drawSymbolWithSvg(svg, {
+          'type': 'start',
+          'width': 58,
+          'height': 58,
+          'x': x*41 + 23,
+          'y': y*41 + 23,
+        })
+        var start = svg.lastChild
+        start.id = 'start_' + svg.id + '_' + x + '_' + y
+
+        // ;(function(a){}(a))
+        // This syntax is used to forcibly copy all of the arguments
+        ;(function(puzzle, x, y, start, symStart) {
+          start.onpointerdown = function(event) {
+            window.trace(event, puzzle, {'x':x, 'y':y}, start, symStart)
+          }
+        }(puzzle, x, y, start, symStart))
+      }
+    }
+  }
+}
+
+})