Template:Skill tree skill marker

From Ring of Brodgar
Jump to navigation Jump to search


Template documentation (for the template shown above, sometimes hidden or invisible)

this fills up the skill tree png's (File:Skill_tree_definition.png) ancestor div with itself for each area definition in Data:Skill_tree_skill_icon_area_registry - each one of this should be a link to the respective icon's page from the skills page

these "area" links on the png work the way that there is an "o" hidden link display that is 30px font size for each icon inside the same div the png is in (roughly)

the 30px font size is the proportional icon size: for example the original icons were set to be 76px squared, and the png was set to be 1200px wide with 3123px original width - so the pixel size of the font of a single character like "o" has to be 76px times 1200 over 3123 pixels that is approximately 29.2px - however i rounded it up

each position can be got by using the source code included in the summary of the File:Skill_tree_definition.png in an application like visual studio code with jebbs' plantuml extension (both are free), and then generate a new svg based on that source, open the svg in browser, open dev mode with f12, and then run javascript that is going to paste every single node the plantumel was containing as "rectangles" onto the user's clipboard:

example javascript used for the old uml source code: 

// 1. Get the total width and height of the SVG viewbox
const svg = document.querySelector('svg');
const totalW = svg.viewBox.baseVal.width || svg.width.baseVal.value;
const totalH = svg.viewBox.baseVal.height || svg.height.baseVal.value;

// 2. Select and sort skills
const skills = Array.from(document.querySelectorAll('g[id^="elem_"]'));
skills.sort((a, b) => a.id.localeCompare(b.id));

// 3. Map to Percentage Rates
const registryData = skills.map(skill => {
    const bbox = skill.getBBox();
    const alias = skill.id.replace('elem_', '');
    
    // Calculate Percentages
    const centerX = ((bbox.x + (bbox.width / 2)) / totalW) * 100;
    const centerY = ((bbox.y + (bbox.height / 2)) / totalH) * 100;
    const sizeX = (bbox.width / totalW) * 100;
    const sizeY = (bbox.height / totalH) * 100;
    
    return `{{#subobject: |Skill_page=${alias} |Skill_tree_coordinate_rates=${centerX.toFixed(2)}; ${centerY.toFixed(2)}; ${sizeX.toFixed(2)}; ${sizeY.toFixed(2)} }}`;
});

// 4. Copy directly to your clipboard
const finalOutput = registryData.join('\n');
copy(finalOutput);

console.log("=== SUCCESS ===");
console.log(`${registryData.length} skills converted to PERCENTAGE rates and copied to clipboard.`);
console.log(`Based on SVG Size: ${totalW}x${totalH}`);

note that using the old uml source code as template instead of the new one to update the uml source code, and then use this javascript on the svg of it will contain the rectangle definitions with lower case letters, and include two default nodes - that all will need to be rewritten to page names by hand, and will need to be removed by hand respectively after the extraction

i have just uploaded new uml source code (it is at File:Skill_tree_definition.png) that will facilitate to upload smaller png files (wiki friendlyness), and will facilitate page name, position, and size extraction - as a new javascript (perhaps witten by ai) will be able to differentiate between stereotypes of rectangles (in order to not extract the root skill nodes), and the page names may be according to the contents of the nodes (in order to not make wiki writers rewrite extracted page names themselves among these subobjects)

i just asked google ai how to extract these infos from svg files, however the important stuff to know before extracting: every coordinate, and size must be relative percentage in format from zero to hundred (not zero to one), without percentage marks (those are placed after the extraction), and rounded to two digits (for readable code)

it is also worth mentioning that with the new source code template the aliases are no longer feasable to be extracted (it has not been, but it did not matter before) because some of the aliases may contain different letters compared to the page names for the sake of handling those in uml. for example content "locks & bolts" is under alias "locks n bolts" in the new uml source - so the content will be needed to be extracted, not the alias (the current javascript example is extracting aliases)

further more according to ai's current knowledge it is possible to extract only the images', or only the labels' positions, and sizes (beside page name) - such that for example it is possible to make the interactive skill tree have the hover-title with the lp cost for skill icons, and then the link to the skill on the skill's name near the skill icon

also: according to object oriented programming the skill tree skill marker template is meant to be "touching" the skill tree it is on, because it is the collective marker on the skill tree - so me personally am not recommending to put other data between when it comes to extension of code for example to separate skill tree skill icon, and skill tree skill name definitions (to do title-link combination on the interactive map)

currently it is also possible to possess the lp points written on the skill tree using transparent font in the uml sourcecode, and then looking for the lp text area position, and then just placing the actual ever so updated lp cost onto the skill tree from here



Retrieved from "https://ringofbrodgar.com/index.php?title=Template:Skill_tree_skill_marker&oldid=120246"