added ball + bounces; started on queu system for user to join game
This commit is contained in:
bgoulard
Maix0
parent
7571927097
commit
8a6394786c
7 changed files with 258 additions and 182 deletions
|
|
@ -7,6 +7,7 @@ import io, { Socket } from 'socket.io-client';
|
|||
import { addPongMessage } from './addPongMessage';
|
||||
import { isLoggedIn } from './isLoggedIn';
|
||||
import type { ClientMessage, ClientProfil } from './types_front';
|
||||
import { isNullish } from "@app/utils";
|
||||
|
||||
export const color = {
|
||||
red: 'color: red;',
|
||||
|
|
@ -21,7 +22,8 @@ const machineHostName = window.location.hostname;
|
|||
console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);
|
||||
|
||||
export let __socket: Socket | undefined = undefined;
|
||||
document.addEventListener('ft:pageChange', () => {
|
||||
|
||||
document.addEventListener('ft:pageChange', () => { // dont regen socket on page change from forward/backward navigation arrows
|
||||
if (__socket !== undefined)
|
||||
__socket.close();
|
||||
__socket = undefined;
|
||||
|
|
@ -30,9 +32,8 @@ document.addEventListener('ft:pageChange', () => {
|
|||
|
||||
export function getSocket(): Socket {
|
||||
let addressHost = `wss://${machineHostName}:8888`;
|
||||
// let addressHost = `wss://localhost:8888`;
|
||||
if (__socket === undefined)
|
||||
|
||||
if (__socket === undefined)
|
||||
__socket = io(addressHost, {
|
||||
path: "/api/pong/socket.io/",
|
||||
secure: false,
|
||||
|
|
@ -41,19 +42,16 @@ export function getSocket(): Socket {
|
|||
return __socket;
|
||||
};
|
||||
|
||||
|
||||
function waitSocketConnected(socket: Socket): Promise<void> {
|
||||
return new Promise(resolve => {
|
||||
if (socket.connected) return resolve();
|
||||
socket.on("connect", () => resolve());
|
||||
});
|
||||
return new Promise(resolve => {
|
||||
if (socket.connected) return resolve();
|
||||
socket.on("connect", () => resolve());
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
async function whoami(socket: Socket) {
|
||||
try {
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
const loggedIn = isLoggedIn();
|
||||
|
||||
const res = await client.guestLogin();
|
||||
switch (res.kind) {
|
||||
|
|
@ -80,148 +78,172 @@ async function whoami(socket: Socket) {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
|
||||
|
||||
function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
|
||||
let socket = getSocket();
|
||||
|
||||
/**
|
||||
* on connection plays this part
|
||||
*/
|
||||
|
||||
socket.on("connect", async () => {
|
||||
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
|
||||
await waitSocketConnected(socket);
|
||||
console.log("I AM Connected to the server:", socket.id);
|
||||
const message = {
|
||||
command: "",
|
||||
destination: 'system-info',
|
||||
type: "chat",
|
||||
user: getUser()?.name,
|
||||
token: document.cookie ?? "",
|
||||
text: " has Just ARRIVED in the chat",
|
||||
timestamp: Date.now(),
|
||||
SenderWindowID: socket.id,
|
||||
};
|
||||
socket.emit('message', JSON.stringify(message));
|
||||
// const message = {
|
||||
// command: "",
|
||||
// destination: 'system-info',
|
||||
// type: "chat",
|
||||
// user: getUser()?.name,
|
||||
// token: document.cookie ?? "",
|
||||
// text: " has Just ARRIVED in the chat",
|
||||
// timestamp: Date.now(),
|
||||
// SenderWindowID: socket.id,
|
||||
// };
|
||||
// socket.emit('message', JSON.stringify(message));
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.textContent = `${message.user}: is connected au server`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
// messageElement.textContent = `${message.user}: is connected au server`;
|
||||
messageElement.textContent = `${getUser()?.name ?? "unkown user"}: is connected au server`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
});
|
||||
|
||||
|
||||
// Queu handler
|
||||
async function joinQueu(socket : Socket) {
|
||||
try {
|
||||
const res = await client.guestLogin();
|
||||
|
||||
switch (res.kind) {
|
||||
case 'success': {
|
||||
let user = await updateUser();
|
||||
|
||||
if (user === null)
|
||||
return showError('Failed to get user: no user ?');
|
||||
socket.emit('queuJoin', user.id);
|
||||
console.log('queu join sent for : ', user.id);
|
||||
break;
|
||||
}
|
||||
case 'failed': {
|
||||
showError(`Failed to Join Game Queu: ${res.msg}`);
|
||||
console.log('Failed to Join Game Queu');
|
||||
}
|
||||
}
|
||||
} catch (err ) {
|
||||
showError(`Failed to Join Game Queu`);
|
||||
console.log('Failed to Join Game Queu');
|
||||
}
|
||||
}
|
||||
|
||||
// keys handler
|
||||
const keys: Record<string, boolean> = {};
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
keys[e.key.toLowerCase()] = true;
|
||||
});
|
||||
|
||||
document.addEventListener("keyup", (e) => {
|
||||
keys[e.key.toLowerCase()] = false;
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
if (keys['w']) {
|
||||
socket.emit("batmove_Left", "up");
|
||||
console.log('north key pressed - emit batmove_Left up');
|
||||
setInterval(() => { // key sender
|
||||
if ((keys['w'] || keys['s']) && !(keys['w'] && keys['s'])) { // exclusive or to filter requests
|
||||
if (keys['w']) {
|
||||
socket.emit("batmove_Left", "up");
|
||||
console.log('north key pressed - emit batmove_Left up');
|
||||
}
|
||||
if (keys['s']) {
|
||||
socket.emit("batmove_Left", "down");
|
||||
console.log('south key pressed - emit batmove_Left down');
|
||||
}
|
||||
}
|
||||
if (keys['s']) {
|
||||
socket.emit("batmove_Left", "down");
|
||||
console.log('south key pressed - emit batmove_Left down');
|
||||
if ((keys['p'] || keys['l']) && !(keys['p'] && keys['l'])) { // exclusive or to filter requests
|
||||
if (keys['p']) {
|
||||
socket.emit("batmove_Right", "up");
|
||||
console.log('north key pressed - emit batmove_Right up');
|
||||
}
|
||||
if (keys['l']) {
|
||||
socket.emit("batmove_Right", "down");
|
||||
console.log('south key pressed - emit batmove_Right down');
|
||||
}
|
||||
}
|
||||
if (keys['p']) {
|
||||
socket.emit("batmove_Right", "up");
|
||||
console.log('north key pressed - emit batmove_Right up');
|
||||
}
|
||||
if (keys['l']) {
|
||||
socket.emit("batmove_Right", "down");
|
||||
console.log('south key pressed - emit batmove_Right down');
|
||||
}
|
||||
}, 16);
|
||||
|
||||
|
||||
|
||||
// Listen for Left bat updates
|
||||
socket.on("batLeft_update", (y: number) => {
|
||||
console.log('batLeft_update received y: ', y);
|
||||
// Pong Objects updators
|
||||
socket.on("batLeft_update", (y: number) => {
|
||||
console.log('batLeft_update received y: ', y);
|
||||
const bat = document.getElementById("batleft") as HTMLDivElement | null;
|
||||
if (!bat) {
|
||||
console.error("FATAL ERROR: Bat element with ID 'bat-left' not found. Check HTML.");
|
||||
if (!bat) {
|
||||
console.error("FATAL ERROR: Bat element with ID 'bat-left' not found. Check HTML.");
|
||||
return ;
|
||||
}
|
||||
if (typeof y === 'number' && !isNaN(y)) {
|
||||
bat.style.transform = `translateY(${y}px)`;
|
||||
} else {
|
||||
console.warn(`Received invalid Y value: ${y}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for Right bat updates
|
||||
socket.on("batRight_update", (y: number) => {
|
||||
console.log('batRight_update received y: ', y);
|
||||
const bat = document.getElementById("batright") as HTMLDivElement | null;
|
||||
if (!bat) {
|
||||
console.error("FATAL ERROR: Bat element with ID 'bat-Right' not found. Check HTML.");
|
||||
return ;
|
||||
}
|
||||
if (typeof y === 'number' && !isNaN(y)) {
|
||||
bat.style.transform = `translateY(${y}px)`;
|
||||
} else {
|
||||
console.warn(`Received invalid Y value: ${y}`);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
socket.once('welcome', (data) => {
|
||||
console.log('%cWelcome PONG PAGE', color.yellow );
|
||||
addPongMessage('socket.once \'Welcome\' called')
|
||||
}
|
||||
if (typeof y === 'number' && !isNaN(y)) {
|
||||
bat.style.transform = `translateY(${y}px)`;
|
||||
} else {
|
||||
console.warn(`Received invalid Y value: ${y}`);
|
||||
}
|
||||
});
|
||||
socket.on("batRight_update", (y: number) => {
|
||||
console.log('batRight_update received y: ', y);
|
||||
const bat = document.getElementById("batright") as HTMLDivElement | null;
|
||||
if (!bat) {
|
||||
console.error("FATAL ERROR: Bat element with ID 'bat-Right' not found. Check HTML.");
|
||||
return ;
|
||||
}
|
||||
if (typeof y === 'number' && !isNaN(y)) {
|
||||
bat.style.transform = `translateY(${y}px)`;
|
||||
} else {
|
||||
console.warn(`Received invalid Y value: ${y}`);
|
||||
}
|
||||
});
|
||||
socket.on("ballPos_update", (x:number, y : number) => {
|
||||
console.log('ballPos_update recieved: ', x, ' / ', y);
|
||||
const ball = document.getElementById("ball") as HTMLDivElement | null;
|
||||
|
||||
if (!ball) {
|
||||
console.error("FATAL ERROR: Bat element with ID 'bat-Right' not found. Check HTML.");
|
||||
return ;
|
||||
}
|
||||
if (typeof y !== 'number' || isNaN(y) || typeof x !== 'number' || isNaN(x)) {
|
||||
console.warn(`Received invalid X/Y value: ${x} / ${y}`);
|
||||
return ;
|
||||
}
|
||||
ball.style.transform = `translateY(${y}px)`;
|
||||
ball.style.transform += `translateX(${x}px)`;
|
||||
});
|
||||
|
||||
// socket.once('welcome', (data) => {
|
||||
// console.log('%cWelcome PONG PAGE', color.yellow );
|
||||
// addPongMessage('socket.once \'Welcome\' called')
|
||||
// });
|
||||
|
||||
|
||||
// Listen for messages from the server "MsgObjectServer"
|
||||
// Listen for messages from the server "MsgObjectServer"
|
||||
socket.on("MsgObjectServer", (data: { message: ClientMessage}) => {
|
||||
// Display the message in the chat window
|
||||
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
|
||||
|
||||
|
||||
const MAX_SYSTEM_MESSAGES = 10;
|
||||
|
||||
if (systemWindow && data.message.destination === "system-info") {
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
const messageElement = document.createElement("div");
|
||||
messageElement.textContent = `${data.message.user}: ${data.message.text}`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
|
||||
// keep only last 10
|
||||
while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) {
|
||||
systemWindow.removeChild(systemWindow.firstChild!);
|
||||
}
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
// keep only last 10
|
||||
while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) {
|
||||
systemWindow.removeChild(systemWindow.firstChild!);
|
||||
}
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
}
|
||||
console.log("Getuser():", getUser());
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
setTitle('Pong Page');
|
||||
setTitle('Pong Game Page');
|
||||
return {
|
||||
|
||||
html: authHtml, postInsert: async (app) => {
|
||||
const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
|
||||
|
||||
const bqueu = document.getElementById('b-joinQueu') as HTMLButtonElement;
|
||||
|
||||
bwhoami?.addEventListener('click', async () => {
|
||||
whoami(socket);
|
||||
});
|
||||
bqueu?.addEventListener('click', async () => {
|
||||
joinQueu(socket);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
addRoute('/pong', handleChat, { bypass_auth: true });
|
||||
addRoute('/pong', pongClient, { bypass_auth: true });
|
||||
Loading…
Add table
Add a link
Reference in a new issue