KnockOutWhist/KnockOutWhist-Web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(game)!: Add winner display and return to lobby functionality

Browse Source
This commit is contained in:
Janis
2025-11-19 22:37:48 +01:00
parent 437f8fd466
commit 6b760ccb07
19 changed files with 562 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
knockoutwhistweb/public/javascripts/main.js
View File

@@ -88,7 +88,8 @@ function pollForUpdates(gameId) {
const $handElement = $('#card-slide');
const $lobbyElement = $('#lobbybackground');
const $mainmenuElement = $('#main-menu-screen')
if (!$handElement.length && !$lobbyElement.length && !$mainmenuElement.length) {
const $mainbody = $('#main-body')
if (!$handElement.length && !$lobbyElement.length && !$mainmenuElement.length && !$mainbody.length) {
setTimeout(() => pollForUpdates(gameId), 1000);
return;
}
@@ -141,6 +142,13 @@ function pollForUpdates(gameId) {
}
$handElement.html(newHandHTML);
if (data.yourTurn) {
$handElement.removeClass('inactive');
} else {
$handElement.addClass('inactive');
}
$('#current-player-name').text(data.currentPlayerName)
if (data.nextPlayer) {
$('#next-player-name').text(data.nextPlayer);
@@ -207,7 +215,7 @@ function pollForUpdates(gameId) {
}
} else if (data.status === "reloadEvent") {
console.log("[DEBUG] Reload event received. Redirecting...");
window.location.href = data.redirectUrl;
exchangeBody(data.content, "Knockout Whist - Ingame", data.redirectUrl);
}
else if (data.status === "lobbyUpdate") {
console.log("[DEBUG] Entering 'lobbyUpdate' logic.");
@@ -280,6 +288,26 @@ function createGameJS() {
sendGameCreationRequest(jsonObj);
}
function backToLobby(gameId) {
const route = jsRoutes.controllers.IngameController.returnToLobby(gameId);
$.ajax({
url: route.url,
type: route.type,
contentType: 'application/json',
dataType: 'json',
error: ((jqXHR) => {
const errorData = JSON.parse(jqXHR.responseText);
if (errorData && errorData.errorMessage) {
alert(`${errorData.errorMessage}`);
} else {
alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
}
})
})
}
function sendGameCreationRequest(dataObject) {
const route = jsRoutes.controllers.MainMenuController.createGame();
@@ -291,7 +319,7 @@ function sendGameCreationRequest(dataObject) {
dataType: 'json',
success: (data => {
if (data.status === 'success') {
window.location.href = data.redirectUrl;
exchangeBody(data.content, "Knockout Whist - Lobby", data.redirectUrl);
}
}),
error: ((jqXHR) => {
@@ -304,9 +332,19 @@ function sendGameCreationRequest(dataObject) {
})
})
}
function exchangeBody(content, title = "Knockout Whist", url = null) {
if (url) {
window.history.pushState({}, title, url);
}
$("#main-body").html(content);
document.title = title;
}
function startGame(gameId) {
sendGameStartRequest(gameId)
}
function sendGameStartRequest(gameId) {
const route = jsRoutes.controllers.IngameController.startGame(gameId);
@@ -357,21 +395,28 @@ function sendRemovePlayerRequest(gameId, playersessionId) {
})
}
function leaveGame(gameId) {
sendLeavePlayerRequest(gameId)
}
function login() {
const username = $('#username').val();
const password = $('#password').val();
function sendLeavePlayerRequest(gameId) {
const jsonObj = {
username: username,
password: password
};
const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
const route = jsRoutes.controllers.UserController.login_Post();
$.ajax({
url: route.url,
type: route.type,
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(jsonObj),
success: (data => {
if (data.status === 'success') {
window.location.href = data.redirectUrl;
exchangeBody(data.content, "Knockout Whist - Main Menu", data.redirectUrl);
return
}
alert('Login failed. Please check your credentials and try again.');
}),
error: ((jqXHR) => {
const errorData = JSON.parse(jqXHR.responseText);
@@ -381,6 +426,118 @@ function sendLeavePlayerRequest(gameId) {
alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
}
})
});
}
function joinGame() {
const gameId = $('#gameId').val();
const jsonObj = {
gameId: gameId
};
const route = jsRoutes.controllers.MainMenuController.joinGame();
$.ajax({
url: route.url,
type: route.type,
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(jsonObj),
success: (data => {
if (data.status === 'success') {
exchangeBody(data.content, "Knockout Whist - Lobby", data.redirectUrl);
return
}
alert('Could not join the game. Please check the Game ID and try again.');
}),
error: ((jqXHR) => {
const errorData = JSON.parse(jqXHR.responseText);
if (errorData && errorData.errorMessage) {
alert(`${errorData.errorMessage}`);
} else {
alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
}
})
});
return false
}
function selectTie(gameId) {
const route = jsRoutes.controllers.IngameController.playTie(gameId);
const jsonObj = {
tie: $('#tieNumber').val()
};
$.ajax({
url: route.url,
type: route.type,
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(jsonObj),
error: (jqXHR => {
let error;
try {
error = JSON.parse(jqXHR.responseText);
} catch (e) {
console.error("Failed to parse error response:", e);
}
if (error?.errorMessage) {
alert(`${error.errorMessage}`);
} else {
alert('An unexpected error occurred. Please try again.');
}
})
})
}
function leaveGame(gameId) {
sendLeavePlayerRequest(gameId)
}
function sendLeavePlayerRequest(gameId) {
const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
$.ajax({
url: route.url,
type: route.type,
dataType: 'json',
error: ((jqXHR) => {
const errorData = JSON.parse(jqXHR.responseText);
if (errorData && errorData.errorMessage) {
alert(`${errorData.errorMessage}`);
} else {
alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
}
})
})
}
function handleTrumpSelection(cardobject, gameId) {
const trumpId = cardobject.dataset.trump;
const jsonObj = {
trump: trumpId
}
const route = jsRoutes.controllers.IngameController.playTrump(gameId);
$.ajax({
url: route.url,
type: route.type,
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(jsonObj),
error: (jqXHR => {
let error;
try {
error = JSON.parse(jqXHR.responseText);
} catch (e) {
console.error("Failed to parse error response:", e);
}
if (error?.errorMessage) {
alert(`${error.errorMessage}`);
} else {
alert('An unexpected error occurred. Please try again.');
}
})
})
}
@@ -393,6 +550,22 @@ function handlePlayCard(cardobject, gameId, dog = false) {
}
function handleSkipDogLife(cardobject, gameId) {
const wiggleKeyframes = [
{ transform: 'translateX(0)' },
{ transform: 'translateX(-5px)' },
{ transform: 'translateX(5px)' },
{ transform: 'translateX(-5px)' },
{ transform: 'translateX(0)' }
];
const wiggleTiming = {
duration: 400,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
};
const route = jsRoutes.controllers.IngameController.playDogCard(gameId);
$.ajax({
@@ -410,7 +583,9 @@ function handleSkipDogLife(cardobject, gameId) {
} catch (e) {
console.error("Failed to parse error response:", e);
}
if (error?.errorMessage) {
if (error?.errorMessage.includes("You can't skip this round!")) {
cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
} else if (error?.errorMessage) {
alert(`${error.errorMessage}`);
} else {
alert('An unexpected error occurred. Please try again.');
@@ -434,7 +609,7 @@ function sendPlayCardRequest(jsonObj, gameId, cardobject, dog) {
easing: 'ease-in-out',
fill: 'forwards'
};
const route = dog ? jsRoutes.controllers.IngameController.playCard(gameId) : jsRoutes.controllers.IngameController.playDogCard(gameId);
const route = dog === "true" ? jsRoutes.controllers.IngameController.playDogCard(gameId) : jsRoutes.controllers.IngameController.playCard(gameId);
$.ajax({
url: route.url,