jacob1123/forge-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deduplicate effect row rendering

Browse Source
This commit is contained in:
Jan Bader
2026-06-17 22:32:29 +02:00
parent 40471cb1c5
commit 9093004146
1 changed files with 23 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+23 -32
View File
@@ -201,6 +201,27 @@ function renderControls() {
$("#recommendationCount").value = state.recommendationCount; $("#recommendationCount").value = state.recommendationCount;
} }
function createEffectRow(effect, effectIndex, typeAttribute, valueAttribute, showInitialHint = true) {
const row = document.createElement("div");
row.className = "effect-row";
row.innerHTML = `
<label>Effect ${effectIndex + 1}
<select ${typeAttribute}="${effectIndex}">
<option value="">None</option>
${EFFECTS.map((option) => `<option value="${option.id}">${option.label} (max ${option.cap}%)</option>`).join("")}
</select>
</label>
<label>Percent
<input ${valueAttribute}="${effectIndex}" type="number" min="1" step="0.1" value="${effect.value}" />
<span class="cap-hint"></span>
</label>`;
row.querySelector("select").value = effect.type;
if (showInitialHint) {
row.querySelector(".cap-hint").textContent = effect.type ? `Cap: ${effectById(effect.type).cap}%` : "Ignored";
}
return row;
}
function renderGear() { function renderGear() {
const grid = $("#gearGrid"); const grid = $("#gearGrid");
const template = $("#gearTemplate"); const template = $("#gearTemplate");
@@ -244,23 +265,7 @@ function renderGear() {
effects.innerHTML = '<p class="no-effects-note">Base stats only. No effects.</p>'; effects.innerHTML = '<p class="no-effects-note">Base stats only. No effects.</p>';
} else { } else {
piece.effects.forEach((effect, effectIndex) => { piece.effects.forEach((effect, effectIndex) => {
const row = document.createElement("div"); effects.appendChild(createEffectRow(effect, effectIndex, "data-effect-type", "data-effect-value"));
row.className = "effect-row";
row.innerHTML = `
<label>Effect ${effectIndex + 1}
<select data-effect-type="${effectIndex}">
<option value="">None</option>
${EFFECTS.map((option) => `<option value="${option.id}">${option.label} (max ${option.cap}%)</option>`).join("")}
</select>
</label>
<label>Percent
<input data-effect-value="${effectIndex}" type="number" min="1" step="0.1" value="${effect.value}" />
<span class="cap-hint"></span>
</label>`;
row.querySelector("select").value = effect.type;
const hint = row.querySelector(".cap-hint");
hint.textContent = effect.type ? `Cap: ${effectById(effect.type).cap}%` : "Ignored";
effects.appendChild(row);
}); });
} }
@@ -300,21 +305,7 @@ function renderNewItemComparison() {
const effects = $("#newItemEffects"); const effects = $("#newItemEffects");
effects.innerHTML = ""; effects.innerHTML = "";
state.newItem.effects.forEach((effect, effectIndex) => { state.newItem.effects.forEach((effect, effectIndex) => {
const row = document.createElement("div"); effects.appendChild(createEffectRow(effect, effectIndex, "data-new-item-effect-type", "data-new-item-effect-value", false));
row.className = "effect-row";
row.innerHTML = `
<label>Effect ${effectIndex + 1}
<select data-new-item-effect-type="${effectIndex}">
<option value="">None</option>
${EFFECTS.map((option) => `<option value="${option.id}">${option.label} (max ${option.cap}%)</option>`).join("")}
</select>
</label>
<label>Percent
<input data-new-item-effect-value="${effectIndex}" type="number" min="1" step="0.1" value="${effect.value}" />
<span class="cap-hint"></span>
</label>`;
row.querySelector("select").value = effect.type;
effects.appendChild(row);
}); });
} }