MediaWiki:CharacterBuilder.js: Difference between revisions
From EQOA Sandstorm Wiki
Jump to navigationJump to search
RenodorDev (talk | contribs) No edit summary |
RenodorDev (talk | contribs) No edit summary |
||
| Line 10: | Line 10: | ||
var data = window.EQOA_BUILDER_DATA; | var data = window.EQOA_BUILDER_DATA; | ||
var gearSlots = [ | |||
"Head", | |||
"Chest", | |||
"Hands", | |||
"Legs", | |||
"Feet", | |||
"Forearm", | |||
"Bracelet1", | |||
"Bracelet2", | |||
"Waist", | |||
"Neck", | |||
"Ear1", | |||
"Ear2", | |||
"Ring1", | |||
"Ring2", | |||
"Primary", | |||
"Secondary", | |||
"Shield", | |||
"Held1", | |||
"Held2", | |||
"Robe", | |||
"Range" | |||
]; | |||
app.innerHTML = ` | app.innerHTML = ` | ||
<div class="character-builder-box"> | <div class="character-builder-box"> | ||
<div class="character-builder-title"> | <div class="character-builder-title">EQOA Character Builder</div> | ||
<div class="character-builder-controls"> | <div class="character-builder-controls"> | ||
| Line 25: | Line 47: | ||
</div> | </div> | ||
<div class="character-builder-section-title"> | <div class="character-builder-section-title">Base Stats</div> | ||
<table class="character-builder-stat-table"> | <table class="character-builder-stat-table"> | ||
| Line 39: | Line 59: | ||
<th>CHA</th> | <th>CHA</th> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td id="cb-str">0</td> | <td id="cb-str">0</td> | ||
| Line 50: | Line 69: | ||
</tr> | </tr> | ||
</table> | </table> | ||
<div class="character-builder-section-title" style="margin-top:18px;">Equipment</div> | |||
<div id="cb-gear-grid" class="character-builder-gear-grid"></div> | |||
</div> | </div> | ||
`; | `; | ||
| Line 55: | Line 78: | ||
var raceSelect = document.getElementById('cb-race'); | var raceSelect = document.getElementById('cb-race'); | ||
var classSelect = document.getElementById('cb-class'); | var classSelect = document.getElementById('cb-class'); | ||
var gearGrid = document.getElementById('cb-gear-grid'); | |||
function addOption(select, value, label) { | function addOption(select, value, label) { | ||
| Line 68: | Line 92: | ||
function loadClasses() { | function loadClasses() { | ||
classSelect.innerHTML = ''; | classSelect.innerHTML = ''; | ||
| Line 74: | Line 97: | ||
Object.keys(data.baseStats[race]).forEach(function(classCode) { | Object.keys(data.baseStats[race]).forEach(function(classCode) { | ||
var className = data.classes[classCode] || classCode; | |||
var className = data.classes[classCode]; | addOption(classSelect, classCode, classCode + ' - ' + className); | ||
addOption( | |||
}); | }); | ||
| Line 88: | Line 105: | ||
function updateStats() { | function updateStats() { | ||
var race = raceSelect.value; | var race = raceSelect.value; | ||
var classCode = classSelect.value; | var classCode = classSelect.value; | ||
| Line 101: | Line 117: | ||
document.getElementById('cb-int').textContent = stats.int || 0; | document.getElementById('cb-int').textContent = stats.int || 0; | ||
document.getElementById('cb-cha').textContent = stats.cha || 0; | document.getElementById('cb-cha').textContent = stats.cha || 0; | ||
} | |||
function buildGearSlots() { | |||
gearGrid.innerHTML = ''; | |||
gearSlots.forEach(function(slot) { | |||
var slotBox = document.createElement('div'); | |||
slotBox.className = 'character-builder-slot'; | |||
slotBox.innerHTML = | |||
'<label>' + slot + '</label>' + | |||
'<select id="cb-slot-' + slot.toLowerCase() + '">' + | |||
'<option value="">-- None --</option>' + | |||
'</select>'; | |||
gearGrid.appendChild(slotBox); | |||
}); | |||
} | } | ||
| Line 107: | Line 140: | ||
loadClasses(); | loadClasses(); | ||
buildGearSlots(); | |||
}); | }); | ||
Revision as of 02:38, 14 May 2026
mw.hook('wikipage.content').add(function () {
var app = document.getElementById('character-builder-app');
if (!app) return;
if (!window.EQOA_BUILDER_DATA) {
app.innerHTML = '<div style="color:red;">EQOA_BUILDER_DATA failed to load.</div>';
return;
}
var data = window.EQOA_BUILDER_DATA;
var gearSlots = [
"Head",
"Chest",
"Hands",
"Legs",
"Feet",
"Forearm",
"Bracelet1",
"Bracelet2",
"Waist",
"Neck",
"Ear1",
"Ear2",
"Ring1",
"Ring2",
"Primary",
"Secondary",
"Shield",
"Held1",
"Held2",
"Robe",
"Range"
];
app.innerHTML = `
<div class="character-builder-box">
<div class="character-builder-title">EQOA Character Builder</div>
<div class="character-builder-controls">
<label>Race</label>
<select id="cb-race"></select>
<label>Class</label>
<select id="cb-class"></select>
</div>
<div class="character-builder-section-title">Base Stats</div>
<table class="character-builder-stat-table">
<tr>
<th>STR</th>
<th>STA</th>
<th>AGI</th>
<th>DEX</th>
<th>WIS</th>
<th>INT</th>
<th>CHA</th>
</tr>
<tr>
<td id="cb-str">0</td>
<td id="cb-sta">0</td>
<td id="cb-agi">0</td>
<td id="cb-dex">0</td>
<td id="cb-wis">0</td>
<td id="cb-int">0</td>
<td id="cb-cha">0</td>
</tr>
</table>
<div class="character-builder-section-title" style="margin-top:18px;">Equipment</div>
<div id="cb-gear-grid" class="character-builder-gear-grid"></div>
</div>
`;
var raceSelect = document.getElementById('cb-race');
var classSelect = document.getElementById('cb-class');
var gearGrid = document.getElementById('cb-gear-grid');
function addOption(select, value, label) {
var option = document.createElement('option');
option.value = value;
option.textContent = label;
select.appendChild(option);
}
Object.keys(data.baseStats).forEach(function(race) {
addOption(raceSelect, race, race);
});
function loadClasses() {
classSelect.innerHTML = '';
var race = raceSelect.value;
Object.keys(data.baseStats[race]).forEach(function(classCode) {
var className = data.classes[classCode] || classCode;
addOption(classSelect, classCode, classCode + ' - ' + className);
});
updateStats();
}
function updateStats() {
var race = raceSelect.value;
var classCode = classSelect.value;
var stats = data.baseStats[race][classCode];
document.getElementById('cb-str').textContent = stats.str || 0;
document.getElementById('cb-sta').textContent = stats.sta || 0;
document.getElementById('cb-agi').textContent = stats.agi || 0;
document.getElementById('cb-dex').textContent = stats.dex || 0;
document.getElementById('cb-wis').textContent = stats.wis || 0;
document.getElementById('cb-int').textContent = stats.int || 0;
document.getElementById('cb-cha').textContent = stats.cha || 0;
}
function buildGearSlots() {
gearGrid.innerHTML = '';
gearSlots.forEach(function(slot) {
var slotBox = document.createElement('div');
slotBox.className = 'character-builder-slot';
slotBox.innerHTML =
'<label>' + slot + '</label>' +
'<select id="cb-slot-' + slot.toLowerCase() + '">' +
'<option value="">-- None --</option>' +
'</select>';
gearGrid.appendChild(slotBox);
});
}
raceSelect.addEventListener('change', loadClasses);
classSelect.addEventListener('change', updateStats);
loadClasses();
buildGearSlots();
});