feat(api): Implemented card played event via websocket (#85)

Reviewed-on: #85
Reviewed-by: lq64 <lq@blackhole.local>
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>
This commit is contained in:
2025-11-26 13:35:05 +01:00
committed by lq64
parent ae7f04abc3
commit 3c0828fdbe
4 changed files with 63 additions and 3 deletions

View File

@@ -45,6 +45,45 @@ function receiveGameStateChange(eventData) {
exchangeBody(content, title);
}
function receiveCardPlayedEvent(eventData) {
const firstCard = eventData.firstCard;
const playedCards = eventData.playedCards;
const trickCardsContainer = $('#trick-cards-container');
const firstCardContainer = $('#first-card-container')
let trickHTML = '';
playedCards.forEach(cardCombo => {
trickHTML += `
<div class="col-auto">
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
<div class="p-2">
<img src="/assets/images/cards/${cardCombo.cardId}.png" width="100%" alt="${cardCombo.cardId}"/>
</div>
<div class="card-body p-2 bg-transparent">
<small class="fw-semibold text-secondary">${cardCombo.player}</small>
</div>
</div>
</div>
`;
});
trickCardsContainer.html(trickHTML);
let altText;
let imageSrc;
if (firstCard === "BLANK") {
imageSrc = "/assets/images/cards/1B.png";
altText = "Blank Card";
} else {
imageSrc = `/assets/images/cards/${firstCard}.png`;
altText = `Card ${firstCard}`;
}
const newFirstCardHTML = `
<img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
`;
firstCardContainer.html(newFirstCardHTML);
}
onEvent("ReceivedHandEvent", receiveHandEvent)
onEvent("GameStateChangeEvent", receiveGameStateChange)
onEvent("GameStateChangeEvent", receiveGameStateChange)
onEvent("CardPlayedEvent", receiveCardPlayedEvent)