Module:Sandbox/SkillTree: Difference between revisions

Module:Sandbox/SkillTree (view source)

Revision as of 11:09, 5 September 2024

367 bytes added , 5 September

definitely not chatgpt nonsense

Toadmilk

393

edits

@@ Line 53: / Line 53: @@
      end
-     local html = mw.html.create('div')
+     local html = mw.html.create('div'):addClass('skill-tree-container'):css({
+        ['position'] = 'relative',
+        ['width'] = '100%',
+        ['height'] = 'auto'
+    })
      for _, node in ipairs(skillNodes) do
-	    local nodeDiv = html:tag('div')
+        local nodeDiv = html:tag('div'):css({
-	        :tag('h4'):wikitext(node.name):done()
+            ['position'] = 'absolute',
-	        :tag('p'):wikitext('Points: ' .. node.costs.points):done()
+            ['width'] = '225px',
+            ['height'] = '150px',
-	    if node.modifiers then
+            ['top'] = node.top .. 'px',
-	        local modifierText = ""
+            ['left'] = node.left .. 'px',
-	        for modifier, data in pairs(node.modifiers) do
+        })
-	            if type(data) == "table" then
-	                modifierText = modifierText .. modifier .. ": Skill: " .. (data.skillID or "N/A") .. ", Value: " .. (data.value or "N/A") .. "<br>"
-	            else
-	                modifierText = modifierText .. modifier .. ": " .. tostring(data) .. "<br>"
-	            end
-	        end
-	        nodeDiv:tag('p'):wikitext(modifierText):done()
-	    end
-	    if node.combatEffects then
-	        local combatEffectText = ""
-	        for _, effect in pairs(node.combatEffects) do
-	            combatEffectText = combatEffectText .. "Effect ID: " .. (effect.effectID or "N/A") .. ", Chance: " .. (effect.chance or "N/A") .. "%<br>"
-	            if effect.condition then
-	                combatEffectText = combatEffectText .. "Condition Type: " .. (effect.condition.type or "N/A") .. "<br>"
-	            end
-	        end
-	        nodeDiv:tag('p'):wikitext(combatEffectText):done()
-	    end
-	    html:done()
-	end
+        nodeDiv:tag('span'):wikitext(node.name):css({
+            ['position'] = 'absolute',
+            ['top'] = '6px',
+            ['left'] = '6px',
+            ['z-index'] = 1,
+            ['font-size'] = 'smaller',
+            ['font-weight'] = '700',
+        }):done()
-    return tostring(html)
+        nodeDiv:tag('img'):attr('src', node.imageSrc):css({
-end
+            ['border'] = '2px solid ' .. (node.locked and 'red' or 'green')
+        }):done()
+        nodeDiv:tag('div'):wikitext(node.description):css({
+            ['text-align'] = 'center',
+            ['overflow-y'] = 'auto',
+            ['padding'] = '10px'
+        }):done()
+        if node.connections then
+            for _, connection in ipairs(node.connections) do
+                html:tag('svg')
+                    :attr('width', '100%')
+                    :attr('height', '100%')
+                    :attr('preserveAspectRatio', 'none')
+                    :tag('path'):attr('d', connection.path)
+                    :css({
+                        ['stroke'] = connection.strokeColor,
+                        ['stroke-width'] = '3px',
+                        ['fill'] = 'none'
+                    }):done()
+            end
+        end
+        html:done()
+    end
+    return tostring(html)
+end
 return p