chris/flashCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add quick consumables bar and new skins

Browse Source
This commit is contained in:
chris 2025-11-20 08:54:01 -05:00
parent 0a970d2b23
commit 53d140caf8
3 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app.js
View File

@ -396,6 +396,7 @@
if (!state.inventory[id] || state.inventory[id] <= 0) return; if (!state.inventory[id] || state.inventory[id] <= 0) return;
const feedback = document.getElementById('feedback-msg'); const feedback = document.getElementById('feedback-msg');
const fromShop = document.getElementById('shop-modal')?.classList.contains('visible');
if (id === 'time_turner') { if (id === 'time_turner') {
game.timeTurnerCharges = 5; game.timeTurnerCharges = 5;
@ -441,7 +442,8 @@
state.inventory[id]--; state.inventory[id]--;
saveData(); saveData();
closeShop(); renderQuickConsumables();
if (fromShop) closeShop(); else updateUI();
} }
function updateBuffDisplay() { function updateBuffDisplay() {
@ -455,6 +457,28 @@
} }
} }
function renderQuickConsumables() {
const holder = document.getElementById('quick-consumables');
if (!holder) return;
holder.innerHTML = "";
const consumables = SHOP_ITEMS.filter(i => i.type === 'consumable' && (state.inventory[i.id] || 0) > 0);
if (consumables.length === 0) {
holder.innerHTML = `<div style="font-size:0.8rem; color:#555;">No consumables on hand.</div>`;
return;
}
consumables.forEach(item => {
const qty = state.inventory[item.id] || 0;
const card = document.createElement('div');
card.className = 'consumable-card';
card.innerHTML = `
<h5>${item.name}</h5>
<div class="qty">Owned: ${qty}</div>
<button ${qty <= 0 ? 'disabled' : ''} onclick="useConsumable('${item.id}')">Use</button>
`;
holder.appendChild(card);
});
}
// --- VISUALS --- // --- VISUALS ---
function applyCosmetics() { function applyCosmetics() {
const card = document.getElementById('main-card'); const card = document.getElementById('main-card');
@ -651,6 +675,7 @@
document.getElementById('progress-bar').style.width = `${pct}%`; document.getElementById('progress-bar').style.width = `${pct}%`;
updateBuffDisplay(); updateBuffDisplay();
renderQuickConsumables();
} }
function startDementor(resume = false) { function startDementor(resume = false) {

1
index.html
View File

@ -109,6 +109,7 @@
</div> </div>
<div class="feedback" id="feedback-msg"></div> <div class="feedback" id="feedback-msg"></div>
<div id="quick-consumables" class="quick-consumables"></div>
<div id="pet-perch"></div> <div id="pet-perch"></div>
</div> </div>

29
style.css
View File

@ -301,6 +301,35 @@
.card-container .key-btn.key-clear:active { background: #f1c232; } .card-container .key-btn.key-clear:active { background: #f1c232; }
.feedback { height: 20px; margin: 5px 0; font-weight: bold; font-size: 0.9rem; } .feedback { height: 20px; margin: 5px 0; font-weight: bold; font-size: 0.9rem; }
.quick-consumables {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 6px;
margin: 8px 0;
}
.quick-consumables .consumable-card {
background: rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.15);
border-radius: 6px;
padding: 6px;
display: flex; flex-direction: column; gap: 4px;
font-size: 0.8rem;
}
.quick-consumables .consumable-card h5 { margin: 0; font-size: 0.9rem; }
.quick-consumables .consumable-card .qty { color: #555; }
.quick-consumables .consumable-card button {
padding: 6px;
font-family: 'Cinzel', serif;
border: 1px solid var(--burgundy);
background: var(--gold);
color: #2c2c2c;
cursor: pointer;
border-radius: 4px;
font-weight: bold;
}
.quick-consumables .consumable-card button:disabled {
opacity: 0.4; cursor: not-allowed;
}
#pet-perch { #pet-perch {
height: 40px; height: 40px;
display: flex; justify-content: center; align-items: center; display: flex; justify-content: center; align-items: center;