feat(ui): Implement countless feature using the SJWP (#89)
Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #89
This commit is contained in:
@@ -1,3 +1,30 @@
|
||||
function alertMessage(message) {
|
||||
let newHtml = '';
|
||||
const alertId = `alert-${Date.now()}`;
|
||||
const fadeTime = 500;
|
||||
const duration = 5000;
|
||||
newHtml += `
|
||||
<div class="fixed-top d-flex justify-content-center mt-3" style="z-index: 1050;">
|
||||
<div
|
||||
id="${alertId}" class="alert alert-primary d-flex align-items-center p-2 mb-0 w-auto" role="alert" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
||||
<div class="small">
|
||||
<small>${message}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$('#main-body').prepend(newHtml);
|
||||
const $notice = $(`#${alertId}`);
|
||||
$notice.fadeIn(fadeTime);
|
||||
setTimeout(function() {
|
||||
$notice.fadeOut(fadeTime, function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
}, duration);
|
||||
}
|
||||
function receiveHandEvent(eventData) {
|
||||
//Data
|
||||
const dog = eventData.dog;
|
||||
@@ -38,6 +65,100 @@ function receiveHandEvent(eventData) {
|
||||
}
|
||||
handElement.html(newHtml);
|
||||
}
|
||||
function newRoundEvent(eventData) {
|
||||
const trumpsuit = eventData.trumpsuit;
|
||||
const players = eventData.players;
|
||||
|
||||
const tableElement = $('#score-table-body');
|
||||
|
||||
|
||||
let tablehtml = `
|
||||
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||
|
||||
<div class="d-flex justify-content-between score-header pb-1">
|
||||
<div style="width: 50%">PLAYER</div>
|
||||
<div style="width: 50%">TRICKS</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
players.forEach(
|
||||
tablehtml += `
|
||||
<div class="d-flex justify-content-between score-row pt-1">
|
||||
<div style="width: 50%" class="text-truncate">'${players}'</div>
|
||||
<div style="width: 50%">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
tableElement.html(tablehtml);
|
||||
|
||||
const trumpsuitClass = $('#trumpsuit');
|
||||
trumpsuitClass.html(trumpsuit);
|
||||
|
||||
}
|
||||
function trickEndEvent(eventData) {
|
||||
const winner = eventData.playerwon;
|
||||
const players = eventData.playersin;
|
||||
const tricklist = eventData.tricklist;
|
||||
|
||||
let newHtml = '';
|
||||
|
||||
let tricktable = $('#score-table-body');
|
||||
|
||||
newHtml += `
|
||||
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||
|
||||
<div class="d-flex justify-content-between score-header pb-1">
|
||||
<div style="width: 50%">PLAYER</div>
|
||||
<div style="width: 50%">TRICKS</div>
|
||||
</div>
|
||||
`;
|
||||
let playercounts = new Map();
|
||||
|
||||
players.forEach( player => {
|
||||
playercounts.set(player, 0)
|
||||
});
|
||||
tricklist.forEach( player => {
|
||||
if ( player !== "Trick in Progress" && playercounts.has(player)) {
|
||||
playercounts.set(player, playercounts.get(player) + 1)
|
||||
}
|
||||
}
|
||||
)
|
||||
const playerorder = players.sort((playerA, playerB) => {
|
||||
const countA = playercounts.get(playerA.name) || 0;
|
||||
const countB = playercounts.get(playerB.name) || 0;
|
||||
return countB - countA;
|
||||
});
|
||||
playerorder.forEach( player => {
|
||||
newHtml += `
|
||||
<div class="d-flex justify-content-between score-row pt-1">
|
||||
<div style="width: 50%" class="text-truncate">${player}</div>
|
||||
<div style="width: 50%">
|
||||
${playercounts.get(player)}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
tricktable.html(newHtml);
|
||||
}
|
||||
function newTrickEvent() {
|
||||
const firstCardContainer = $('#first-card-container');
|
||||
const emptyHtml = '';
|
||||
let newHtml = '';
|
||||
newHtml += `
|
||||
<img src="/assets/images/cards/1B.png" alt="Blank Card" width="80px" style="border-radius: 6px"/>
|
||||
`;
|
||||
firstCardContainer.html(newHtml);
|
||||
const playedCardsContainer = $('#trick-cards-container')
|
||||
playedCardsContainer.html(emptyHtml)
|
||||
}
|
||||
function requestCardEvent(eventData) {
|
||||
const player = eventData.player;
|
||||
const handElement = $('#card-slide')
|
||||
handElement.removeClass('inactive');
|
||||
}
|
||||
|
||||
|
||||
function receiveGameStateChange(eventData) {
|
||||
const content = eventData.content;
|
||||
@@ -85,37 +206,6 @@ function receiveCardPlayedEvent(eventData) {
|
||||
`;
|
||||
firstCardContainer.html(newFirstCardHTML);
|
||||
}
|
||||
function receiveTurnEvent(eventData) {
|
||||
const currentPlayer = eventData.currentPlayer;
|
||||
const nextPlayers = eventData.nextPlayers;
|
||||
|
||||
const currentPlayerNameContainer = $('#current-player-name');
|
||||
const nextPlayersContainer = $('#next-players-container');
|
||||
const nextPlayerText = $('#next-players-section');
|
||||
|
||||
let currentPlayerName = currentPlayer.name;
|
||||
if (currentPlayer.dog) {
|
||||
currentPlayerName += " 🐶";
|
||||
}
|
||||
currentPlayerNameContainer.text(currentPlayerName);
|
||||
|
||||
if (nextPlayers.length === 0) {
|
||||
nextPlayerText.hide();
|
||||
nextPlayersContainer.html('');
|
||||
} else {
|
||||
nextPlayerText.show();
|
||||
let nextPlayersHtml = '';
|
||||
nextPlayers.forEach((player) => {
|
||||
let playerName = player.name;
|
||||
if (player.dog) {
|
||||
playerName += " 🐶";
|
||||
}
|
||||
nextPlayersHtml += `<p className="fs-5 text-primary">${playerName}</p>`;
|
||||
});
|
||||
nextPlayersContainer.html(nextPlayersHtml);
|
||||
}
|
||||
}
|
||||
|
||||
function receiveLobbyUpdateEvent(eventData) {
|
||||
const host = eventData.host;
|
||||
const maxPlayers = eventData.maxPlayers;
|
||||
@@ -218,9 +308,15 @@ function receiveTurnEvent(eventData) {
|
||||
|
||||
onEvent("ReceivedHandEvent", receiveHandEvent)
|
||||
onEvent("GameStateChangeEvent", receiveGameStateChange)
|
||||
onEvent("NewRoundEvent", newRoundEvent)
|
||||
onEvent("TrickEndEvent", trickEndEvent)
|
||||
onEvent("NewTrickEvent", newTrickEvent)
|
||||
onEvent("RequestCardEvent", requestCardEvent)
|
||||
onEvent("CardPlayedEvent", receiveCardPlayedEvent)
|
||||
onEvent("LobbyUpdateEvent", receiveLobbyUpdateEvent)
|
||||
onEvent("LeftEvent", receiveGameStateChange)
|
||||
onEvent("KickEvent", receiveKickEvent)
|
||||
onEvent("SessionClosed", receiveSessionClosedEvent)
|
||||
onEvent("TurnEvent", receiveTurnEvent)
|
||||
onEvent("TurnEvent", receiveTurnEvent)
|
||||
|
||||
globalThis.alertMessage = alertMessage
|
||||
@@ -1,10 +1,58 @@
|
||||
function handlePlayCard(card, dog) {
|
||||
// TODO needs implementation
|
||||
function handlePlayCard(cardIndex, dog) {
|
||||
const cardslide = $('#card-slide')
|
||||
cardslide.addClass("inactive")
|
||||
|
||||
const payload = {
|
||||
cardindex: cardIndex,
|
||||
isDog: dog
|
||||
}
|
||||
sendEventAndWait("play Card", payload).then(
|
||||
() => {
|
||||
console.debug("play card successful")
|
||||
const datacardid = $(`#${cardIndex}`)
|
||||
datacardid.parent('.handcard').remove();
|
||||
cardslide.find('.handcard').each(function(newIndex) {
|
||||
|
||||
const $innerButton = $(this).find('.btn');
|
||||
|
||||
$innerButton.attr('id', newIndex);
|
||||
$innerButton.attr('data-card-id', newIndex);
|
||||
|
||||
const isInDogLife = $innerButton.attr('onclick').includes("'true'") ? 'true' : 'false';
|
||||
$innerButton.attr('onclick', `handlePlayCard(${newIndex}, '${isInDogLife}')`);
|
||||
|
||||
console.debug(`Re-indexed card: Old index was ${$innerButton.attr('data-card-id')}, New index is ${newIndex}`);
|
||||
});
|
||||
}
|
||||
).catch(
|
||||
(err) => {
|
||||
const cardslide = $('#card-slide')
|
||||
console.warn("play card was not successful")
|
||||
if (err.message === "You can't play this card!") {
|
||||
cardslide.removeClass("inactive")
|
||||
}
|
||||
alertMessage("You aren't allowed to play this card")
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function handleSkipDogLife(button) {
|
||||
// TODO needs implementation
|
||||
}
|
||||
function startGame() {
|
||||
sendEvent("Start Game")
|
||||
}
|
||||
|
||||
function handleTrumpSelection(object) {
|
||||
const $button = $(object);
|
||||
const trumpIndex = parseInt($button.data('trump'));
|
||||
const payload = {
|
||||
suitIndex: trumpIndex
|
||||
}
|
||||
console.log("SENDING TRUMP SUIT SELECTION:", payload);
|
||||
sendEvent("Picked Trumpsuit", payload)
|
||||
|
||||
}
|
||||
function handleKickPlayer(playerId) {
|
||||
// TODO needs implementation
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user