-
-
+ $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);
+ } else if (nextPlayerElement) {
+ $('#next-player-name').text("");
+ } else {
+ console.warn("[DEBUG] 'current-player-name' element missing in DOM");
+ }
+ $('#trump-suit').text(data.trumpSuit);
+ if ($('#trick-cards-container').length) {
+ let trickHTML = '';
+
+ data.trickCards.forEach(trickCard => {
+ trickHTML += `
+
+
+
+
+
+
+ ${trickCard.player}
- `;
- newHandHTML += cardHtml;
- });
+
+ `;
+ });
+ $('#trick-cards-container').html(trickHTML);
+ }
+ if ($('#score-table-body').length && data.scoreTable) {
+ let scoreHTML = '';
+ scoreHTML += `
Tricks Won
- element.innerHTML = newHandHTML;
+ `
+ data.scoreTable.forEach(score => {
+ scoreHTML += `
+
+
${score.name}
+
${score.tricks}
+
+ `;
+ });
+ $('#score-table-body').html(scoreHTML);
+ }
+ const cardId = data.firstCardId;
+ if ($('#first-card-container').length) {
+ let imageSrc = '';
+ let altText = 'First Card';
- const currentPlayerElement = document.getElementById('current-player-name');
- if (currentPlayerElement) {
- currentPlayerElement.textContent = data.currentPlayerName;
- }
- const nextPlayerElement = document.getElementById('next-player-name');
- if (nextPlayerElement && data.nextPlayer) {
- // Use the correctly named field from the server response
- nextPlayerElement.textContent = data.nextPlayer;
- } else {
- // Case 2: Player name is empty or null (signal to clear display).
- nextPlayerElement.textContent = "";
- }
-
- const trumpElement = document.getElementById('trump-suit');
- if (trumpElement) {
- trumpElement.textContent = data.trumpSuit;
- }
- const trickContainer = document.getElementById('trick-cards-container');
- if (trickContainer) {
- let trickHTML = '';
-
- // Iterate over the array of played cards received from the server
- data.trickCards.forEach(trickCard => {
- // Reconstruct the HTML structure from your template
- trickHTML += `
-
-
-
-
-
-
- ${trickCard.player}
-
-
-
- `;
- });
- trickContainer.innerHTML = trickHTML;
- }
- const scoreBody = document.getElementById('score-table-body');
- if (scoreBody && data.scoreTable) {
- let scoreHTML = '';
- scoreHTML += `
Tricks Won
-
- `
- data.scoreTable.forEach(score => {
- scoreHTML += `
-
-
${score.name}
-
${score.tricks}
-
- `;
- });
- scoreBody.innerHTML = scoreHTML;
- }
- const firstCardContainer = document.getElementById('first-card-container');
- const cardId = data.firstCardId; // This will be "KH", "S7", or "BLANK"
-
- if (firstCardContainer) {
- let imageSrc = '';
- let altText = 'First Card';
-
- // Check if a card was actually played or if it's the start of a trick
- if (cardId === "BLANK") {
- imageSrc = "/assets/images/cards/1B.png";
- altText = "Blank Card";
- } else {
- imageSrc = `/assets/images/cards/${cardId}.png`;
- }
-
- // Reconstruct the image HTML (assuming the inner element needs replacement)
- const newImageHTML = `
-
- `;
-
- // Clear the container and insert the new image
- firstCardContainer.innerHTML = newImageHTML;
- }
- } else if (data.status === "reloadEvent") {
- window.location.href = data.redirectUrl;
- } else if (data.status === "lobbyUpdate") {
- const players = document.getElementById("players");
- let newHtml = ''
-
- if (data.host) {
- data.users.forEach(user => {
-
- const inner = user.self ? `
${user.name} (You)
-
Remove`
- : `
${user.name}
-
Remove
`
-
- newHtml += `
-
-
-
- ${inner}
-
-
-
`
- })
- } else {
- data.users.forEach(user => {
-
- const inner = user.self ? `
${user.name} (You)
` : `
${user.name}
`
-
- newHtml += `
-
-
-
- ${inner}
-
-
-
`
- })
- }
- players.innerHTML = newHtml;
+ if (cardId === "BLANK") {
+ imageSrc = "/assets/images/cards/1B.png";
+ altText = "Blank Card";
+ } else {
+ imageSrc = `/assets/images/cards/${cardId}.png`;
}
- pollForUpdates(gameId);
- });
- } else {
- // Handle network or server errors
- console.error(`Polling error: Status ${response.status}`);
- // Wait before retrying, passing gameId correctly
- setTimeout(() => pollForUpdates(gameId), 5000);
+
+ const newImageHTML = `
+
+ `;
+
+ $('#first-card-container').html(newImageHTML);
+ }
+ } else if (data.status === "reloadEvent") {
+ console.log("[DEBUG] Reload event received. Redirecting...");
+ exchangeBody(data.content, "Knockout Whist - Ingame", data.redirectUrl);
}
+ else if (data.status === "lobbyUpdate") {
+ console.log("[DEBUG] Entering 'lobbyUpdate' logic.");
+ let newHtml = ''
+
+ if (data.host) {
+ data.users.forEach(user => {
+
+ const inner = user.self ? `
${user.name} (You)
+
Remove`
+ : `
${user.name}
+
Remove
`
+
+ newHtml += `
+
+
+
+ ${inner}
+
+
+
`
+ })
+ } else {
+ data.users.forEach(user => {
+
+ const inner = user.self ? `
${user.name} (You)
` : `
${user.name}
`
+
+ newHtml += `
+
+
+
+ ${inner}
+
+
+
`
+ })
+ }
+ $("#players").html(newHtml);
+ } else {
+ console.warn(`[DEBUG] Received unknown status: ${data.status}`);
+ }
+ }),
+ error: ((jqXHR, textStatus, errorThrown) => {
+ if (jqXHR.status >= 400) {
+ console.error(`Server error: ${jqXHR.status}, ${errorThrown}`);
+ }
+ else {
+ console.error(`Something unexpected happened while polling. ${jqXHR.status}, ${errorThrown}`)
+ }
+ }),
+ complete: (() => {
+ if (!window.location.href.includes("game")) {
+ console.log("[DEBUG] Page URL changed. Stopping poll restart.");
+ return;
+ }
+ setTimeout(() => pollForUpdates(gameId), 200);
})
- .catch(error => {
- console.error("Network error during polling:", error);
- // Wait before retrying on network failure, passing gameId correctly
- setTimeout(() => pollForUpdates(gameId), 5000);
- });
+ })
}
function createGameJS() {
- let lobbyName = document.getElementById("lobbyname").value;
- if (lobbyName === "") {
+ let lobbyName = $('#lobbyname').val();
+ if ($.trim(lobbyName) === "") {
lobbyName = "DefaultLobby"
}
- const playerAmount = document.getElementById("playeramount").value;
const jsonObj = {
lobbyname: lobbyName,
- playeramount: playerAmount
+ playeramount: $("#playeramount").val()
}
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();
- fetch(route.url, {
- method: route.type,
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(dataObject)
- })
- .then(response => {
- return response.json().then(data => {
- if (!response.ok) {
- return Promise.reject(data);
- }
- return data;
- });
- })
- .then(data => {
+ $.ajax({
+ url: route.url,
+ type: route.type,
+ contentType: 'application/json',
+ data: JSON.stringify(dataObject),
+ dataType: 'json',
+ success: (data => {
if (data.status === 'success') {
- window.location.href = data.redirectUrl;
+ exchangeBody(data.content, "Knockout Whist - Lobby", data.redirectUrl);
+ }
+ }),
+ 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}`);
}
})
- .catch(error => {
- if (error && error.errorMessage) {
- alert(`${error.errorMessage}`);
- } else {
- alert('An unexpected error occurred. Please try again.');
- }
- });
+ })
}
+
+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);
- fetch(route.url, {
- method: route.type,
- })
- .then(response => {
- return response.json().then(data => {
- if (!response.ok) {
- return Promise.reject(data);
- }
- return data;
- });
- })
- .then(data => {
- // SUCCESS BLOCK: data is the { status: 'success', ... } object
+ $.ajax({
+ url: route.url,
+ type: route.type,
+ dataType: 'json',
+ success: (data => {
if (data.status === 'success') {
window.location.href = data.redirectUrl;
}
- })
- .catch(error => {
- if (error && error.errorMessage) {
- alert(`${error.errorMessage}`);
+ }),
+ error: ((jqXHR) => {
+ const errorData = JSON.parse(jqXHR.responseText);
+ if (errorData && errorData.errorMessage) {
+ alert(`${errorData.errorMessage}`);
} else {
- alert('An unexpected error occurred. Please try again.');
+ alert(`An unexpected error occurred. Please try again. Status: ${jqXHR.status}`);
}
- });
+ })
+ })
}
function removePlayer(gameid, playersessionId) {
sendRemovePlayerRequest(gameid, playersessionId)
@@ -357,33 +374,148 @@ function removePlayer(gameid, playersessionId) {
function sendRemovePlayerRequest(gameId, playersessionId) {
const route = jsRoutes.controllers.IngameController.kickPlayer(gameId, playersessionId);
- fetch(route.url, {
- method: route.type,
- headers: {
- 'Content-Type': 'application/json',
- }
- })
- .then(response => {
- return response.json().then(data => {
- if (!response.ok) {
- return Promise.reject(data);
- }
- return data;
- });
- })
- .then(data => {
- // SUCCESS BLOCK: data is the { status: 'success', ... } object
+ $.ajax({
+ url: route.url,
+ type: route.type,
+ contentType: 'application/json',
+ dataType: 'json',
+ success: (data => {
if (data.status === 'success') {
window.location.href = data.redirectUrl;
}
+ }),
+ 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}`);
+ }
})
- .catch(error => {
- if (error && error.errorMessage) {
+ })
+}
+
+function login() {
+ const username = $('#username').val();
+ const password = $('#password').val();
+
+ const jsonObj = {
+ username: username,
+ password: password
+ };
+
+ 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') {
+ exchangeBody(data.content, 'Knockout Whist - Create Game', data.redirectUrl);
+ return
+ }
+ alert('Login failed. Please check your credentials 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}`);
+ }
+ })
+ });
+}
+
+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 navSpa(page, title) {
+ const route = jsRoutes.controllers.MainMenuController.navSPA(page);
+ $.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, title, 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) {
@@ -391,43 +523,62 @@ function leaveGame(gameId) {
}
function sendLeavePlayerRequest(gameId) {
-
const route = jsRoutes.controllers.IngameController.leaveGame(gameId);
- fetch(route.url, {
- method: route.type,
- })
- .then(response => {
- return response.json().then(data => {
- if (!response.ok) {
- return Promise.reject(data);
- }
- return data;
- });
- })
- .then(data => {
- // SUCCESS BLOCK: data is the { status: 'success', ... } object
- if (data.status === 'success') {
- window.location.href = data.redirectUrl;
+ $.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}`);
}
})
- .catch(error => {
- if (error && error.errorMessage) {
+ })
+}
+
+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.');
}
- });
+ })
+ })
}
-function handlePlayCard(cardobject, gameId) {
+function handlePlayCard(cardobject, gameId, dog = false) {
const cardId = cardobject.dataset.cardId;
const jsonObj = {
cardID: cardId
}
- sendPlayCardRequest(jsonObj, gameId, cardobject)
+ sendPlayCardRequest(jsonObj, gameId, cardobject, dog)
}
-function sendPlayCardRequest(jsonObj, gameId, cardobject) {
+function handleSkipDogLife(cardobject, gameId) {
+
const wiggleKeyframes = [
{ transform: 'translateX(0)' },
{ transform: 'translateX(-5px)' },
@@ -436,44 +587,78 @@ function sendPlayCardRequest(jsonObj, gameId, cardobject) {
{ transform: 'translateX(0)' }
];
- // Define the timing options
const wiggleTiming = {
- duration: 400, // 0.4 seconds
+ duration: 400,
iterations: 1,
easing: 'ease-in-out',
- // Fill mode ensures the final state is applied until reset
fill: 'forwards'
};
- const route = jsRoutes.controllers.IngameController.playCard(gameId);
- fetch(route.url, {
- method: route.type,
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(jsonObj)
- })
- .then(response => {
- return response.json().then(data => {
- if (!response.ok) {
- return Promise.reject(data);
- }
- return data;
- });
- })
- .then(data => {
- if (data.status === 'success') {
- //window.location.href = data.redirectUrl;
+ const route = jsRoutes.controllers.IngameController.playDogCard(gameId);
+
+ $.ajax({
+ url: route.url,
+ type: route.type,
+ contentType: 'application/json',
+ dataType: 'json',
+ data: JSON.stringify({
+ cardID: 'skip'
+ }),
+ error: (jqXHR => {
+ let error;
+ try {
+ error = JSON.parse(jqXHR.responseText);
+ } catch (e) {
+ console.error("Failed to parse error response:", e);
}
- })
- .catch(error => {
- if (error && error.errorMessage.includes("You can't play this card!")) {
+ if (error?.errorMessage.includes("You can't skip this round!")) {
cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
- } else if (error && error.errorMessage) {
+ } else if (error?.errorMessage) {
alert(`${error.errorMessage}`);
} else {
alert('An unexpected error occurred. Please try again.');
}
- });
+ })
+ })
+}
+
+function sendPlayCardRequest(jsonObj, gameId, cardobject, dog) {
+ 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 = dog === "true" ? jsRoutes.controllers.IngameController.playDogCard(gameId) : jsRoutes.controllers.IngameController.playCard(gameId);
+
+ $.ajax({
+ url: route.url,
+ type: route.type,
+ contentType: 'application/json',
+ dataType: 'json',
+ data: JSON.stringify(jsonObj),
+ error: (jqXHR => {
+ try {
+ error = JSON.parse(jqXHR.responseText);
+ } catch (e) {
+ console.error("Failed to parse error response:", e);
+ }
+ if (error?.errorMessage.includes("You can't play this card!")) {
+ cardobject.parentElement.animate(wiggleKeyframes, wiggleTiming);
+ } else if (error?.errorMessage) {
+ alert(`${error.errorMessage}`);
+ } else {
+ alert('An unexpected error occurred. Please try again.');
+ }
+ })
+ })
}
-