Anonymous

Module:Sandbox/SkillTree: Difference between revisions

From Melvor Idle

Module:Sandbox/SkillTree (view source)

Revision as of 12:49, 5 September 2024

77 bytes added ,  5 September
no edit summary
No edit summary
No edit summary
 
Line 93: Line 93:


     -- Constants for layout
     -- Constants for layout
     local baseX = 500 -- Center of the tree horizontally
     local containerWidth = 1000 -- Adjust container width as needed
     local baseY = 50  -- Start Y position (top of the screen)
     local baseY = 50  -- Start Y position (top of the screen)
     local verticalSpacing = 200  -- Distance between levels (Y-axis)
     local verticalSpacing = 200  -- Distance between levels (Y-axis)
Line 110: Line 110:
     local html = mw.html.create('div'):addClass('skill-tree-container'):css({
     local html = mw.html.create('div'):addClass('skill-tree-container'):css({
         ['position'] = 'relative',
         ['position'] = 'relative',
         ['width'] = '1000px', -- Adjust based on max width
         ['width'] = containerWidth .. 'px',
         ['height'] = (maxLevel + 1) * verticalSpacing .. 'px',  -- Adjust height dynamically
         ['height'] = (maxLevel + 1) * verticalSpacing .. 'px',  -- Adjust height dynamically
         ['margin'] = 'auto',
         ['margin'] = 'auto',
Line 119: Line 119:
     local svg = html:tag('svg'):attr('height', '100%'):attr('width', '100%')
     local svg = html:tag('svg'):attr('height', '100%'):attr('width', '100%')
         :attr('preserveAspectRatio', 'none')
         :attr('preserveAspectRatio', 'none')
         :attr('viewBox', '0 0 1000 ' .. (maxLevel + 1) * verticalSpacing)
         :attr('viewBox', '0 0 ' .. containerWidth .. ' ' .. (maxLevel + 1) * verticalSpacing)


     -- Track positions for each node
     -- Track positions for each node
Line 132: Line 132:
         nodeIndexPerLevel[level] = (nodeIndexPerLevel[level] or 0) + 1
         nodeIndexPerLevel[level] = (nodeIndexPerLevel[level] or 0) + 1
         local indexInLevel = nodeIndexPerLevel[level]
         local indexInLevel = nodeIndexPerLevel[level]
        -- Center the nodes in each level
        local baseX = (containerWidth / 2) - ((nodesPerLevel[level] - 1) / 2) * horizontalSpacing


         -- Calculate X and Y positions for this node
         -- Calculate X and Y positions for this node
        local nodesAtThisLevel = nodesPerLevel[level]
         local xPos = baseX + (indexInLevel - 1) * horizontalSpacing
         local xPos = baseX + (indexInLevel - nodesAtThisLevel / 2) * horizontalSpacing
         local yPos = baseY + level * verticalSpacing
         local yPos = baseY + level * verticalSpacing


         -- Debugging output to track node positions
         -- Store node position for connections
         nodePositions[node.name] = { x = xPos, y = yPos }
         nodePositions[node.name] = { x = xPos, y = yPos }


Line 170: Line 172:
                 local childPos = nodePositions[node.name]
                 local childPos = nodePositions[node.name]
                 if parentPos and childPos then
                 if parentPos and childPos then
                     local path = string.format("M%d,%d L%d,%d", parentPos.x + 100, parentPos.y + 100, childPos.x + 100, childPos.y)
                     local path = string.format("M%d,%d L%d,%d", parentPos.x + 75, parentPos.y + 100, childPos.x + 75, childPos.y)
                     svg:tag('path')
                     svg:tag('path')
                         :attr('d', path)
                         :attr('d', path)
Toadmilk
393

edits

Retrieved from "https://testwiki.melvoridle.com/w/Special:MobileDiff/82416"