|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <includeonly> | | <includeonly>{{#invoke:TalentCalculator|renderCalculator}}</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> | |