Method createVisualConnections

app/views/play/CampaignView.js:1499–1752

()

  }

  createVisualConnections () {
    const visualConnections = this.campaign?.get('visualConnections') || []
    if (!visualConnections.length) { return }

    const map = this.$el.find('.map')
    if (!map.length) { return }

    // Clear any existing layer (we use a fixed id to avoid duplicates)
    map.find('#visual-connections-svg').remove()
    this.$el.find('.visual-connection-handle').remove()

    // Use actual pixel size of the map as the SVG coordinate system
    const mapWidth = map.width()
    const mapHeight = map.height()
    if (!(mapWidth > 0 && mapHeight > 0)) { return }

    const svgNS = 'http://www.w3.org/2000/svg'
    const svg = document.createElementNS(svgNS, 'svg')
    $(svg)
      .attr({
        id: 'visual-connections-svg',
        width: mapWidth,
        height: mapHeight,
      })
      .css({
        position: 'absolute',
        left: 0,
        top: 0,
        width: mapWidth,
        height: mapHeight,
        'pointer-events': 'none',
        // Render visual connections beneath level markers/flags (z-index 2) but above the map background.
        'z-index': 1,
      })

    // Defaults from appearance-based colors; functional meaning only at use site
    const defaultConnectionColor = colors.black
    const defaultLockedColor = colors.grey
    const defaultCompleteColor = colors.lightGold
    const defaultActiveColor = colors.red
    const defaultOpacity = 0.7

    // Convert 0–100% campaign coords -> pixels in this SVG.
    // X is from left; Y is from bottom (like level positions), so we flip it
    // before mapping into the SVG's top-left–based pixel space.
    const mapToSvgX = xPercent => (xPercent / 100) * mapWidth
    const mapToSvgY = yPercentFromBottom => {
      const yPercentFromTop = 100 - yPercentFromBottom
      return (yPercentFromTop / 100) * mapHeight
    }

    // Container for per-path markers (arrow heads, etc.)
    const defs = document.createElementNS(svgNS, 'defs')
    svg.appendChild(defs)

    let connectionIndex = 0
    for (const conn of visualConnections) {
      const fromPos = conn?.fromPos