rparodi/ft_transcendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[wip] local ~= ok, colision = ok, queue != ok, front (looks) = ok, sock Shapes ~= ok (missing new shapes)

Browse source
This commit is contained in:
bgoulard 2025-12-16 14:14:54 +01:00 • committed by Maix0
parent 0033956ca1
commit dded33f5fa
12 changed files with 243 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/pages/chat/chat.css
View file

@ -1,8 +1,8 @@
@import "tailwindcss";
/* @font-face {
@font-face {
font-family: "Nimbus Mono L";
src: url("/fonts/NimbusMonoL.woff2") format("woff2");
} */
}
@tailwind utilities;

4
frontend/src/pages/pong/addPongMessage.ts
View file

@ -3,8 +3,8 @@ import { color } from './pong';
/**
* function adds a message to the frontend pongMessage
* ATTENTION send inner HTML ******
* @param text
* @returns
* @param text
* @returns
*/
export function addPongMessage(text: string) {

4
frontend/src/pages/pong/broadcastMsg.ts
View file

@ -5,8 +5,8 @@ import { getUser } from "@app/auth";
/**
* function sends socket.emit to the backend to active and a broadcast message to all sockets
* echos addPongMessage() the message with addMessage to the sender
* @param socket
* @param msgCommand
* @param socket
* @param msgCommand
*/
export function broadcastMsg (socket: Socket, msgCommand: string[]): void {
let msgText = msgCommand[1] ?? "";

15
frontend/src/pages/pong/pong.html
View file

@ -2,13 +2,26 @@
<div id="mainbox" class="mainboxDisplay">
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
<br>
<button id="b-joinQueu" class="btn-style absolute top-16 left-6">Queu Up</button>
<button id="b-joinQueu" class="btn-style absolute top-16 left-6">Queue Up</button>
<br>
<h1 class="text-3xl font-bold text-gray-800">
Pong Box<span id="t-username"></span>
</h1><br>
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
<!-- Checkbox -->
<input id="modeToggle" type="checkbox" class="sr-only"/>
<!-- Switch -->
<div id="toggleTrack" class="relative w-14 h-7 rounded-full bg-gray-300 transition-colors duration-300">
<span id="toggleKnob" class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full transition-transform duration-300"></span>
</div>
<!-- Label -->
<span id="toggleLabel" class="text-sm font-medium text-gray-700"> Local </span>
</label>
<!-- Horizontal Message Box -->
<div id="system-box" class="system-info">System: connecting ... </div>
<h1 id="score-board" class="text-p10 font-bold text-gray-800">0:0</h1>
<!-- Pong Box -->
<div class="flex justify-center mt-2">
<div id="pongspace" class="flex flex-col">

76
frontend/src/pages/pong/pong.ts
View file

@ -8,20 +8,20 @@ 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;',
green: 'color: green;',
yellow: 'color: orange;',
blue: 'color: blue;',
reset: '',
reset: '',
};
// TODO: local game (2player -> server -> 2player : current setup)
// TODO: tournament via remote (dedicated queu? idk)
//
//
// get the name of the machine used to connect
// get the name of the machine used to connect
const machineHostName = window.location.hostname;
console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow);
@ -34,6 +34,9 @@ document.addEventListener('ft:pageChange', () => { // dont regen socket on page
console.log("Page changed");
});
/**
* @returns the initialized socket
*/
export function getSocket(): Socket {
let addressHost = `wss://${machineHostName}:8888`;
@ -46,6 +49,11 @@ export function getSocket(): Socket {
return __socket;
};
/**
*
* @param socket The socket to wait for
* @returns voir or a promise<void>
*/
function waitSocketConnected(socket: Socket): Promise<void> {
return new Promise(resolve => {
if (socket.connected) return resolve();
@ -53,6 +61,11 @@ function waitSocketConnected(socket: Socket): Promise<void> {
});
};
/**
*
* @param socket The socket to communicat
* @returns nothing
*/
async function whoami(socket: Socket) {
try {
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
@ -135,7 +148,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// keys handler
const keys: Record<string, boolean> = {};
document.addEventListener("keydown", (e) => {
keys[e.key.toLowerCase()] = true;
});
@ -144,35 +157,35 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
});
setInterval(() => { // key sender
if ((keys['w'] || keys['s']) && !(keys['w'] && keys['s'])) { // exclusive or to filter requests
if (keys['w']) {
if (keys['w']) {
socket.emit("batmove_Left", "up");
console.log('north key pressed - emit batmove_Left up');
}
if (keys['s']) {
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']) {
if (keys['p']) {
socket.emit("batmove_Right", "up");
console.log('north key pressed - emit batmove_Right up');
}
if (keys['l']) {
if (keys['l']) {
socket.emit("batmove_Right", "down");
console.log('south key pressed - emit batmove_Right down');
}
}
}, 16);
// 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.");
return ;
}
return ;
}
if (typeof y === 'number' && !isNaN(y)) {
bat.style.transform = `translateY(${y}px)`;
} else {
@ -184,8 +197,8 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
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 ;
}
return ;
}
if (typeof y === 'number' && !isNaN(y)) {
bat.style.transform = `translateY(${y}px)`;
} else {
@ -193,7 +206,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
});
socket.on("ballPos_update", (x:number, y : number) => {
console.log('ballPos_update recieved: ', x, ' / ', y);
console.log('ballPos_update recieved');
const ball = document.getElementById("ball") as HTMLDivElement | null;
if (!ball) {
@ -202,12 +215,12 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
if (typeof y !== 'number' || isNaN(y) || typeof x !== 'number' || isNaN(x)) {
console.warn(`Received invalid X/Y value: ${x} / ${y}`);
return ;
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')
@ -216,6 +229,7 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
// Listen for messages from the server "MsgObjectServer"
socket.on("MsgObjectServer", (data: { message: ClientMessage}) => {
// Display the message in the chat window
console.log("message recieved : ", data.message.text);
const systemWindow = document.getElementById('system-box') as HTMLDivElement;
const MAX_SYSTEM_MESSAGES = 10;
@ -230,7 +244,17 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
}
systemWindow.scrollTop = systemWindow.scrollHeight;
}
console.log("Getuser():", getUser());
if (systemWindow && data.message.destination === "score-info") {
console.log("score update:", data.message.text);
const scoreboard = document.getElementById('score-board') as HTMLHeadingElement ;
if (!scoreboard) {
console.log("update score failed :(");
return ;
}
scoreboard.textContent = `${data.message.text}`;
}
// console.log("Getuser():", getUser());
});
setTitle('Pong Game Page');
@ -247,6 +271,22 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
joinQueu(socket);
});
const checkbox = document.getElementById("modeToggle") as HTMLInputElement;
const label = document.getElementById("toggleLabel") as HTMLSpanElement;
const track = document.getElementById("toggleTrack") as HTMLDivElement;
const knob = document.getElementById("toggleKnob") as HTMLSpanElement;
checkbox.addEventListener("change", () => { // web vs local
if (checkbox.checked) {
label.textContent = "Web";
track.classList.replace("bg-gray-300", "bg-blue-600");
knob.classList.add("translate-x-7");
} else {
label.textContent = "Local";
track.classList.replace("bg-blue-600", "bg-gray-300");
knob.classList.remove("translate-x-7");
}
});
}
}
};

4
frontend/src/pages/pong/types_front.ts
View file

@ -10,7 +10,7 @@ export type ClientProfil = {
command: string,
destination: string,
type: string,
user: string,
user: string,
loginName: string,
userID: string,
text: string,
@ -19,4 +19,4 @@ export type ClientProfil = {
SenderName: string,
Sendertext: string,
innerHtml?: string,
};
};

39
frontend/src/pong/pong.css
View file

@ -10,7 +10,7 @@
@apply
w-[100px]
h-[32px]
border-1
border-1
border-gray-500
rounded-3xl
bg-gray-500
@ -31,10 +31,10 @@
p-[8px]
border-1
border-black
shadow-2xl
shadow-2xl
text-left
text-gray-700
bg-white
bg-white
rounded-3xl
overflow-y-auto
whitespace-pre-line
@ -46,12 +46,12 @@
.system-info {
@apply
h-[40px]
bg-gray-200
text-gray-700
p-3
rounded-3xl
mb-2 border
border-gray-200
bg-gray-200
text-gray-700
p-3
rounded-3xl
mb-2 border
border-gray-200
text-center
shadow
overflow-y-auto
@ -67,20 +67,20 @@
items-center
justify-center
bg-[#43536b];
}
.mainboxDisplay {
@apply
fixed
top-1/2
left-1/2
-translate-x-1/2
-translate-y-1/2
bg-gray-200 w-[850px]
p-6 rounded-xl
shadow-2xl
text-center
fixed
top-1/2
left-1/2
-translate-x-1/2
-translate-y-1/2
bg-gray-200 w-[850px]
p-6 rounded-xl
shadow-2xl
text-center
z-50;
}
@ -103,7 +103,6 @@
.text-style {
@apply
text-black
}
.pong-field {