cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sfrjr

Browse Source
This commit is contained in:
cay 2026-04-07 09:05:16 +01:00
parent 42e5c19dd9
commit ea7f01278e
2 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/css/events.css
View File

@ -406,6 +406,32 @@
white-space: nowrap; white-space: nowrap;
} }
/* ── Holz-Spenden Stempel ── */
.wood-btn-wrap {
position: relative;
width: 100%;
}
.wood-stamp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-20deg);
padding: 5px 10px;
border: 3px solid #c8400a;
border-radius: 5px;
color: #e85010;
background: rgba(0, 0, 0, 0.5);
font-family: "Cinzel", serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 0 8px rgba(200, 64, 10, 0.5);
text-shadow: 0 0 6px rgba(200, 64, 10, 0.6);
}
.event-done-overlay { .event-done-overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;

28
public/js/quickmenu/events.js
View File

@ -114,16 +114,18 @@ export async function loadEvents() {
<button class="booster-back-btn" id="wood-back-btn">← Zurück</button> <button class="booster-back-btn" id="wood-back-btn">← Zurück</button>
<div class="booster-stage"> <div class="booster-stage">
<div class="booster-left"> <div class="booster-left">
<div class="wood-btn-wrap">
<img id="wood-btn" src="/images/items/holz.png" alt="Holz Spenden" draggable="false" class="booster-stapel-img"> <img id="wood-btn" src="/images/items/holz.png" alt="Holz Spenden" draggable="false" class="booster-stapel-img">
<div class="wood-stamp" id="wood-stamp">Bitte Spenden</div>
</div>
<span class="booster-stapel-hint" id="wood-hint">100 Holz spenden</span> <span class="booster-stapel-hint" id="wood-hint">100 Holz spenden</span>
</div> </div>
<div class="booster-slots" id="wood-slots"> <div class="booster-slots">
${Array.from({length: 5}, (_, i) => ` <div class="booster-slot" id="wood-slot-0">
<div class="booster-slot" id="wood-slot-${i}">
<div class="booster-slot-inner"> <div class="booster-slot-inner">
<img class="booster-slot-img" src="/images/items/rueckseite.png" alt="?" draggable="false"> <img class="booster-slot-img" src="/images/items/rueckseite.png" alt="?" draggable="false">
</div> </div>
</div>`).join("")} </div>
</div> </div>
</div> </div>
</div> </div>
@ -415,16 +417,16 @@ export async function loadEvents() {
isWoodSpinning = false; isWoodSpinning = false;
woodRevealed = false; woodRevealed = false;
for (let i = 0; i < 5; i++) { const inner = body.querySelector(`#wood-slot-0 .booster-slot-inner`);
const inner = body.querySelector(`#wood-slot-${i} .booster-slot-inner`);
inner.innerHTML = `<img class="booster-slot-img" src="/images/items/rueckseite.png" alt="?" draggable="false">`; inner.innerHTML = `<img class="booster-slot-img" src="/images/items/rueckseite.png" alt="?" draggable="false">`;
body.querySelector(`#wood-slot-${i}`).classList.remove("revealed", "spinning"); body.querySelector(`#wood-slot-0`).classList.remove("revealed", "spinning");
}
const btn = body.querySelector("#wood-btn"); const btn = body.querySelector("#wood-btn");
const stamp = body.querySelector("#wood-stamp");
btn.classList.remove("used"); btn.classList.remove("used");
btn.style.opacity = "1"; btn.style.opacity = "1";
btn.style.cursor = "pointer"; btn.style.cursor = "pointer";
if (stamp) stamp.style.display = "";
body.querySelector("#wood-hint").textContent = "100 Holz spenden"; body.querySelector("#wood-hint").textContent = "100 Holz spenden";
preloadRarity3(); preloadRarity3();
} }
@ -467,9 +469,11 @@ export async function loadEvents() {
isWoodSpinning = true; isWoodSpinning = true;
const btn = body.querySelector("#wood-btn"); const btn = body.querySelector("#wood-btn");
const stamp = body.querySelector("#wood-stamp");
btn.classList.add("used"); btn.classList.add("used");
btn.style.opacity = "0.35"; btn.style.opacity = "0.35";
btn.style.cursor = "default"; btn.style.cursor = "default";
if (stamp) stamp.style.display = "none";
body.querySelector("#wood-hint").textContent = "Wird verarbeitet..."; body.querySelector("#wood-hint").textContent = "Wird verarbeitet...";
const backBtn = body.querySelector("#wood-back-btn"); const backBtn = body.querySelector("#wood-back-btn");
@ -498,12 +502,12 @@ export async function loadEvents() {
return; return;
} }
// Alle 5 Slots starten // Nur Slot 0 starten
for (let i = 0; i < 5; i++) startWoodSlot(i); startWoodSlot(0);
// Nach 5 Sekunden alle gleichzeitig enthüllen (dieselbe Karte) // Nach 5 Sekunden enthüllen
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 5; i++) revealWoodSlot(i, drawnCard); revealWoodSlot(0, drawnCard);
body.querySelector("#wood-hint").textContent = "Karte erhalten! ✓"; body.querySelector("#wood-hint").textContent = "Karte erhalten! ✓";
isWoodSpinning = false; isWoodSpinning = false;