Template:TalentCalculator: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
<includeonly>{{ | <includeonly> | ||
{{{html}}} | |||
<script type="text/javascript"> | |||
(function() { | |||
// Parse the JSON data | |||
const talents = JSON.parse('{{{talentsData}}}'); | |||
const talentTrees = JSON.parse('{{{treeConfig}}}'); | |||
// Now insert all your JavaScript and HTML for the talent calculator | |||
// We'll use document.write for simplicity, though in practice a more modern approach would be better | |||
document.write(` | |||
<style> | |||
/* Insert all your CSS here */ | |||
.talent-calculator { | |||
display: flex; | |||
flex-direction: column; | |||
font-family: Arial, sans-serif; | |||
max-width: 900px; | |||
margin: 0 auto; | |||
} | |||
/* Include all the other CSS from your original script */ | |||
</style> | |||
<div class="talent-calculator"> | |||
<div class="talent-trees"> | |||
<!-- Generate the HTML for each tree --> | |||
${Object.entries(talentTrees).map(([treeId, tree]) => ` | |||
<div class="talent-tree" style="border-color: ${tree.color}"> | |||
<div class="talent-tree-header" style="color: ${tree.color}">${tree.name}</div> | |||
${[...Array(tree.tiers)].map((_, tierIndex) => { | |||
const tier = tierIndex + 1; | |||
return ` | |||
<div class="talent-tier${tier > 1 ? " talent-tier-disabled" : ""}" data-tree="${treeId}" data-tier="${tier}"> | |||
<div class="talent-tier-header" style="background-color: ${tree.color}30"> | |||
Tier ${tier} (Requires ${tree.tier_point_requirements[tierIndex]} points) | |||
</div> | |||
<div class="talents-container"> | |||
${[...Array(tree.talents_per_tier)].map((_, i) => { | |||
const talentNum = i + 1; | |||
const talentId = `${treeId}_${tier}_${talentNum}`; | |||
const talent = talents[treeId][talentId]; | |||
return ` | |||
<div class="talent" | |||
data-talent-id="${talentId}" | |||
data-tree-id="${treeId}" | |||
data-tier="${tier}" | |||
data-max-points="${talent.maxPoints}"> | |||
<div class="talent-icon">${tier}-${talentNum}</div> | |||
<div class="talent-points"><span id="${talentId}-points">0</span>/${talent.maxPoints}</div> | |||
</div>`; | |||
}).join('')} | |||
</div> | |||
</div>`; | |||
}).join('')} | |||
</div> | |||
`).join('')} | |||
</div> | |||
<div class="controls"> | |||
<div class="points-display"> | |||
<span id="points-spent">Total Points Spent: 0/100</span> | |||
<div> | |||
<span id="points-pvm">PvM: 0 points</span> | | |||
<span id="points-skilling">Skilling: 0 points</span> | | |||
<span id="points-utility">Utility: 0 points</span> | |||
</div> | |||
</div> | |||
<div class="import-export"> | |||
<button class="button" id="export-build">Export Build</button> | |||
<button class="button" id="import-build">Import Build</button> | |||
<button class="button" id="reset-build">Reset</button> | |||
</div> | |||
</div> | |||
<div class="talent-tooltip" id="talent-tooltip"></div> | |||
<div id="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1000;"> | |||
<div style="position:relative; margin:10% auto; padding:20px; width:50%; background-color:white; border-radius:5px;"> | |||
<span id="close-modal" style="position:absolute; top:10px; right:15px; cursor:pointer; font-size:20px;">×</span> | |||
<h3 id="modal-title">Import/Export Build</h3> | |||
<p>Copy this code to share your build:</p> | |||
<textarea id="build-code" style="width:100%; height:100px;"></textarea> | |||
<button id="modal-button" class="button" style="margin-top:10px;">Copy to Clipboard</button> | |||
</div> | |||
</div> | |||
</div>`); | |||
// Add the JavaScript logic | |||
// Insert all the JavaScript from your original code here | |||
(function() { | |||
let talentState = { | |||
pvm: {}, | |||
skilling: {}, | |||
utility: {}, | |||
pointsSpent: { | |||
pvm: 0, | |||
skilling: 0, | |||
utility: 0 | |||
}, | |||
totalPoints: 0, | |||
maxPoints: 100 | |||
}; | |||
const treeRequirements = { | |||
pvm: [0, 5, 10, 15, 20], | |||
skilling: [0, 5, 10, 15, 20], | |||
utility: [0, 5, 10, 15, 20] | |||
}; | |||
// Initialize talent state | |||
Object.keys(talents).forEach(treeId => { | |||
Object.keys(talents[treeId]).forEach(talentId => { | |||
talentState[treeId][talentId] = 0; | |||
}); | |||
}); | |||
// Add event listeners to talents | |||
document.querySelectorAll('.talent').forEach(talent => { | |||
talent.addEventListener('click', handleTalentClick); | |||
talent.addEventListener('mouseover', showTooltip); | |||
talent.addEventListener('mouseout', hideTooltip); | |||
}); | |||
// Handle talent click | |||
function handleTalentClick(event) { | |||
// Add all the talent click handling logic from original script | |||
// ... | |||
} | |||
// Include all the other JavaScript functions from your original script | |||
// ... | |||
})(); | |||
})(); | |||
</script> | |||
</includeonly> | |||