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

feat(ui): Websocket

Browse Source 
Started implementing functionality to Websocket.
This commit is contained in:
LQ63
2025-11-26 01:35:46 +01:00
parent 52e5033afc
commit 0c2901bce0
17 changed files with 295 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
knockoutwhistweb/public/javascripts/events.js
View File

@@ -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,5 +65,113 @@ function receiveHandEvent(eventData) {
}
handElement.html(newHtml);
}
function newRoundEvent(eventData) {
const trumpsuit = eventData.trumpsuit;
const players = eventData.players;
onEvent("ReceivedHandEvent", receiveHandEvent)
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');
let newHtml = '';
newHtml += `
<img src="images/cards/1B.png" alt="Blank Card" width="80px"/>
`;
firstCardContainer.html(newHtml);
}
function requestCardEvent(eventData) {
const player = eventData.player;
const handElement = $('#card-slide')
handElement.removeClass('inactive');
}
//alertMessage("It worked!")
function gameStateChangeEvent(eventData) {
console.log("INSIDE EVENTHANDLER IN JAVASCRIPT")
const gameId = eventData.gameId
const newHtml = jsRoutes.controllers.IngameController.returnInnerHTML(gameId, eventData.oldState.toString());
console.log("HTML:" + newHtml)
const body = $('#main-body')
body.html(newHtml)
}
onEvent("ReceivedHandEvent", receiveHandEvent)
onEvent("NewRoundEvent", newRoundEvent)
onEvent("TrickEndEvent", trickEndEvent)
onEvent("NewTrickEvent", newTrickEvent)
onEvent("RequestCardEvent", requestCardEvent)
onEvent("GameStateChangeEvent", gameStateChangeEvent)

14
knockoutwhistweb/public/javascripts/interact.js
View File

@@ -4,4 +4,18 @@ function handlePlayCard(card, dog) {
function handleSkipDogLife(button) {
// TODO needs implementation
}
function startGame(gameId, userId, username, userpasswordhash, userinternalid) {
const userpayload = {
internalId: userinternalid,
id: userId,
name: username,
passwordHash: userpasswordhash
}
const payload = {
gameId: gameId,
user: userpayload
};
console.log("CLICKED START GAME, SENDING EVENT..." + payload)
sendEvent("Start Game", payload)
}

17
knockoutwhistweb/public/javascripts/websocket.js
View File

@@ -1,13 +1,14 @@
type EventHandler = (data: any) => any | Promise<any>;
// javascript
let ws = null; // will be created by connectWebSocket()
const pending: Map<string, any> = new Map(); // id -> { resolve, reject, timer }
const handlers: Map<string, EventHandler> = new Map(); // eventType -> handler(data) -> (value|Promise)
const pending = new Map(); // id -> { resolve, reject, timer }
const handlers = new Map(); // eventType -> handler(data) -> (value|Promise)
let timer = null;
function onEvent(eventType, handler) {
handlers.set(eventType, handler);
}
// helper to attach message/error/close handlers to a socket
function setupSocketHandlers(socket) {
socket.onmessage = (event) => {
@@ -15,7 +16,9 @@ function setupSocketHandlers(socket) {
let msg;
try {
msg = JSON.parse(event.data);
console.log("1 " + msg.event)
} catch (e) {
console.log("2 " + msg.event)
console.debug("Non-JSON message from server:", event.data, e);
return;
}
@@ -40,6 +43,7 @@ function setupSocketHandlers(socket) {
}
if (id && eventType) {
console.log("3 " + eventType)
const handler = handlers.get(eventType);
const sendResponse = (result) => {
const response = {id: id, event: eventType, status: result};
@@ -57,6 +61,7 @@ function setupSocketHandlers(socket) {
}
try {
console.log("4 " + msg.event)
Promise.resolve(handler(data === undefined ? {} : data))
.then(_ => sendResponse("success"))
.catch(_ => sendResponse("error"));
@@ -182,9 +187,7 @@ function sendEventAndWait(eventType, eventData, timeoutMs = 10000) {
return p;
}
function onEvent(eventType: string, handler: EventHandler) {
handlers.set(eventType, handler);
}
globalThis.sendEvent = sendEvent;
globalThis.sendEventAndWait = sendEventAndWait;