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 = '' +
'\n' +
' \n' +
' \n' +
' \n' +
'\n' +
'\n' +
' \n' +
' \n' +
'\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 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 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