Game

- Added websocket

site/game/main.js

@@ -6,10 +6,11 @@
 /*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:49 by edbernar          #+#    #+#             */
-/*   Updated: 2024/07/30 13:50:49 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/07 15:29:04 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { sendRequest } from './websocket.js';
 import * as THREE from 'three';
 import Stats from 'stats.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
@@ -41,7 +42,6 @@ camera.position.z = 4;
 camera.position.y = 3;
 camera.rotation.x = -(Math.PI / 4);
 
-
 // ------------------- Ball ------------------- //
 const geometryBall = new THREE.SphereGeometry(0.1, 32, 32);
 const materialBall = new THREE.MeshLambertMaterial({ color: 0xffffff });

site/game/typeResponse/typeLogin.js

@@ -0,0 +1,25 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   typeLogin.js                                       :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/02 00:39:53 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/03 23:37:33 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+let userMeInfo = {
+	username: "",
+	id: 42
+};
+
+function	typeLogin(content)
+{
+	console.log("Welcome " + content.username + "\nYou're id is " + content.id);
+	userMeInfo.username = content.username;
+	userMeInfo.id = content.id;
+}
+
+export { userMeInfo, typeLogin };

site/game/websocket.js

@@ -0,0 +1,78 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   websocket.js                                       :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/07/31 22:17:24 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/07 15:29:26 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+import { typeLogin } from "./typeResponse/typeLogin.js";
+
+/*
+	Todo (Eddy) :
+		- Request to connect by email and password. Waiting for the front to do it (already functional on the back side)
+		  sendRequest("login", {type: "byPass", mail: "aa@aa.fr", password: "ABC123"});
+		- Information: the 'token' variable is only used until the connection is fully implemented
+*/
+
+const	socket = new WebSocket('ws://localhost:8000/');
+const	token = "IDSNCSDAd465sd13215421";
+
+const	typeResponse = ["login"];
+const	functionResponse = [typeLogin];
+
+let		status = 0;
+
+socket.onopen = () => {
+	status = 1;
+	console.log('Connected');
+	if (token)
+		sendRequest("login", {"type": "byToken", "token": token});
+};
+
+socket.onmessage = (event) => {
+	let	response;
+
+	try {
+		response = JSON.parse(event.data);
+	} catch {
+		return ;
+	}
+	if (response.code >= 9000 && response.code <= 9999)
+		console.warn(response);
+	else
+	{
+		try {
+			functionResponse[typeResponse.indexOf(response.type)](response.content);
+		} catch {
+			console.warn(response);
+		}
+	}
+};
+
+socket.onclose = () => {
+	status = 0;
+	console.log('Disconnected');
+};
+
+function	sendRequest(type, content) {
+	let coc = null;
+
+	if (status === 0)
+		return ;
+	if (content instanceof Object)
+		coc = JSON.stringify(content);
+	else
+		coc = content;
+	socket.send(JSON.stringify({
+		type: type,
+		token: token,
+		content: content
+	}));
+}
+
+export { socket, token, sendRequest };

site/interface/site/index.html

@@ -5,7 +5,8 @@
 	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 	<title>Chat</title>
 	<meta name='viewport' content='width=device-width, initial-scale=1'>
-	<link rel='stylesheet' type='text/css' href='style/style.css'>
+	<link rel='stylesheet' type='text/css' href='style/home.css'>
+	<link rel='stylesheet' type='text/css' href='style/liveChat.css'>
 	<link rel='stylesheet' type='text/css' href='style/notification.css'>
 	<script type="module" src='main.js'></script>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -15,6 +16,12 @@
 <body>
 	<div id="divNotification">
 	</div>
+	<div id="topBar">
+		<p>PTME</p>
+		<div id="loginButton">
+			<p>Login</p>
+		</div>
+	</div>
 	<div id="chatButton">
 		<p>CHAT</p>
 	</div>

site/interface/site/style/home.css

@@ -0,0 +1,49 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   home.css                                           :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/07 12:10:04 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	border: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #616161;
+	user-select: none;
+}
+
+#topBar {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+#topBar h1 {
+	margin: 0;
+	padding: 0;
+	font-size: 40px;
+	color: white;
+	font-family: 'Poppins';
+}
+
+#topBar p {
+	margin: 0;
+	padding: 0;
+	font-size: 20px;
+	color: white;
+	font-family: 'Poppins';
+}

site/interface/site/style/liveChat.css

@@ -1,23 +1,15 @@
 /* ************************************************************************** */
 /*                                                                            */
 /*                                                        :::      ::::::::   */
-/*   style.css                                          :+:      :+:    :+:   */
+/*   liveChat.css                                       :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:53:39 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/04 23:44:06 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/07 12:02:11 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-body {
-	border: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #616161;
-	user-select: none;
-}
 
 #chatButton {
 	position: absolute;
@@ -236,9 +228,9 @@ body {
 }
 
 @supports not selector(::-webkit-scrollbar) {
-#messageListChatHome {
-	scrollbar-color: var(--sb-thumb-color)
-					var(--sb-track-color);
-}
+	#messageListChatHome {
+		scrollbar-color: var(--sb-thumb-color)
+						var(--sb-track-color);
+	}
 }