Skip to content

Commit 458e696

Browse files
rodrigogiraoserraorodrigogiraoserrao
authored
Add manual energy status indicator for consumables card (#71)
- add a status banner to the consumables card that communicates when manual energy entry disables consumable inputs - show a warning style when energy is set directly and clear consumable inputs to reflect that state ------ [Codex Task](https://chatgpt.com/codex/tasks/task_e_693c749d2c0c832586018e204bdc26ed)
1 parent 6cc5b27 commit 458e696

1 file changed

Lines changed: 120 additions & 0 deletions

File tree

‎erepublik-air-damage-calculator.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,43 @@
7777
margin: 0;
7878
}
7979

80+
.hover-note {
81+
text-decoration: underline;
82+
text-decoration-style: dotted;
83+
text-underline-offset: 0.15em;
84+
}
85+
86+
.status-banner {
87+
display: inline-flex;
88+
align-items: center;
89+
gap: 0.5rem;
90+
padding: 0.6rem 0.75rem;
91+
border-radius: 0.75rem;
92+
border: 1px dashed #cbd5e1;
93+
background: #f8fafc;
94+
}
95+
96+
.status-indicator {
97+
width: 0.75rem;
98+
height: 0.75rem;
99+
border-radius: 50%;
100+
background: #22c55e;
101+
}
102+
103+
.status-text {
104+
margin: 0;
105+
}
106+
107+
.status-banner.warning {
108+
border-color: #fdba74;
109+
background: #fff7ed;
110+
color: #b45309;
111+
}
112+
113+
.status-banner.warning .status-indicator {
114+
background: #f97316;
115+
}
116+
80117
@media (max-width: 720px) {
81118
body {
82119
padding: 20px 16px 40px;
@@ -102,6 +139,33 @@ <h1>eRepublik Air Damage Calculator</h1>
102139
</div>
103140
</section>
104141

142+
<section class="surface tool-card">
143+
<div class="result-display">
144+
<div class="status-banner" id="consumables-status" role="status" aria-live="polite">
145+
<span class="status-indicator" aria-hidden="true"></span>
146+
<p class="status-text" id="consumables-status-text">Fill in consumables to update energy automatically.</p>
147+
</div>
148+
</div>
149+
<form id="energy-packs" class="inputs-grid" aria-label="Energy from consumables">
150+
<div class="form-group">
151+
<label for="ebs">EBs</label>
152+
<input id="ebs" name="ebs" type="number" min="0" step="1" value="">
153+
</div>
154+
<div class="form-group">
155+
<label for="ebs2">x2 EBs</label>
156+
<input id="ebs2" name="ebs2" type="number" min="0" step="1" value="">
157+
</div>
158+
<div class="form-group">
159+
<label for="ebs3">x3 EBs</label>
160+
<input id="ebs3" name="ebs3" type="number" min="0" step="1" value="">
161+
</div>
162+
<div class="form-group">
163+
<label for="treats"><span class="hover-note" title="treaks, pumpkins, ice creams, and other 50 energy consumables">Treats</span></label>
164+
<input id="treats" name="treats" type="number" min="0" step="1" value="">
165+
</div>
166+
</form>
167+
</section>
168+
105169
<section class="surface tool-card">
106170
<form id="calculator" aria-label="Air damage calculator">
107171
<div class="inputs-grid">
@@ -269,6 +333,12 @@ <h1>eRepublik Air Damage Calculator</h1>
269333
const level100Checkbox = document.getElementById('level-100');
270334
const finalDamage = document.getElementById('final-damage');
271335
const breakdown = document.getElementById('breakdown');
336+
const ebInput = document.getElementById('ebs');
337+
const eb2Input = document.getElementById('ebs2');
338+
const eb3Input = document.getElementById('ebs3');
339+
const treatsInput = document.getElementById('treats');
340+
const consumablesStatus = document.getElementById('consumables-status');
341+
const consumablesStatusText = document.getElementById('consumables-status-text');
272342

273343
const weaponMultipliers = {
274344
none: 1,
@@ -292,6 +362,44 @@ <h1>eRepublik Air Damage Calculator</h1>
292362
return Math.max(value, min);
293363
};
294364

365+
let updatingEnergyFromPacks = false;
366+
const packInputs = [ebInput, eb2Input, eb3Input, treatsInput];
367+
368+
const setConsumablesStatus = (mode) => {
369+
if (mode === 'manual') {
370+
consumablesStatusText.textContent = 'Energy set manually — consumable inputs are cleared and not being used.';
371+
consumablesStatus.classList.add('warning');
372+
} else {
373+
consumablesStatusText.textContent = 'Fill in consumables to update energy automatically.';
374+
consumablesStatus.classList.remove('warning');
375+
}
376+
};
377+
378+
const resetEnergyPackInputs = () => {
379+
packInputs.forEach((input) => {
380+
input.value = '';
381+
});
382+
};
383+
384+
const updateEnergyFromPacks = () => {
385+
const eb = clampNumber(parseInt(ebInput.value, 10), 0);
386+
const eb2 = clampNumber(parseInt(eb2Input.value, 10), 0);
387+
const eb3 = clampNumber(parseInt(eb3Input.value, 10), 0);
388+
const treats = clampNumber(parseInt(treatsInput.value, 10), 0);
389+
390+
ebInput.value = eb;
391+
eb2Input.value = eb2;
392+
eb3Input.value = eb3;
393+
treatsInput.value = treats;
394+
395+
const energyFromPacks = (eb * 100) + (eb2 * 200) + (eb3 * 300) + (treats * 50);
396+
updatingEnergyFromPacks = true;
397+
energyInput.value = energyFromPacks;
398+
calculateDamage();
399+
updatingEnergyFromPacks = false;
400+
setConsumablesStatus('auto');
401+
};
402+
295403
function calculateDamage() {
296404
const energy = clampNumber(parseInt(energyInput.value, 10), 0);
297405
if (energyInput.value === '') energyInput.value = energy;
@@ -339,7 +447,19 @@ <h1>eRepublik Air Damage Calculator</h1>
339447
breakdown.textContent = parts.join(' • ');
340448
}
341449

450+
energyInput.addEventListener('input', () => {
451+
if (!updatingEnergyFromPacks) {
452+
resetEnergyPackInputs();
453+
setConsumablesStatus('manual');
454+
}
455+
});
456+
457+
packInputs.forEach((input) => {
458+
input.addEventListener('input', updateEnergyFromPacks);
459+
});
460+
342461
document.getElementById('calculator').addEventListener('input', calculateDamage);
462+
setConsumablesStatus('auto');
343463
calculateDamage();
344464
})();
345465
</script>

0 commit comments

Comments
 (0)