tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

created site just for chat

Browse Source
This commit is contained in:
edbernar
2024-07-30 20:19:29 +02:00
parent 3b0d129479
commit 09dfdbceb8
12 changed files with 408 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
site/chat/index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-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.css'>
<script src='main.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div id="chatButton">
<p>CHAT</p>
</div>
<div id="chatDiv">
<div id="topChatHome">
<h1>Chat</h1>
<div id="topChatCross">
<h2>X</h2>
</div>
</div>
<div id="buttonTypeChatHome">
<h2 id="selected">Private</h2>
<h2>Game</h2>
</div>
<div id="messageListChatHome">
</div>
</div>
</body>
</html>

155
site/chat/main.js Normal file
View File

@ -0,0 +1,155 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/07/30 19:55:40 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
document.addEventListener('DOMContentLoaded', () => {
liveChat();
});
function liveChat() {
const chatButton = document.getElementById("chatButton");
const chatDiv = document.getElementById("chatDiv");
const topChatHomeCross = document.getElementById("topChatCross");
const privateButtonChatHome = document.getElementById("buttonTypeChatHome").getElementsByTagName("h2")[0];
const gameButtonChatHome= document.getElementById("buttonTypeChatHome").getElementsByTagName("h2")[1];
let userList = [
{
name: "Nessundorma",
status: "online",
pfp: "https://wallpapers-clan.com/wp-content/uploads/2023/05/cool-pfp-02.jpg"
},
{
name: "Succotash",
status: "offline",
pfp: "https://i.pinimg.com/200x/28/75/96/287596f98304bf1adc2c411619ae8fef.jpg"
},
{
name: "Astropower",
status: "online",
pfp: "https://ashisheditz.com/wp-content/uploads/2024/03/cool-anime-pfp-demon-slayer-HD.jpg"
},
{
name: "Assaultive",
status: "offline",
pfp: "https://i1.sndcdn.com/artworks-1Li0JIJrQGlojD3y-AEiNkw-t500x500.jpg"
},
{
name: "Redshock",
status: "offline",
pfp: "https://cdn.pfps.gg/pfps/7094-boy-pfp.png"
},
{
name: "Parley",
status: "offline",
pfp: "https://pbs.twimg.com/media/EscE6ckU0AA-Uhe.png"
},
]; //Remplace temporairement la requete qui devra être de la meme forme
chatButton.addEventListener("click", () => {
chatDiv.style.display = "flex";
});
topChatHomeCross.addEventListener("click", () => {
chatDiv.style.display = "none";
});
// showListUserMessage(userList);
console.warn("Retirer showActualGameMessage() et remettre showListUserMessage()")
showActualGameMessage();
privateButtonChatHome.addEventListener("click", () => {
gameButtonChatHome.removeAttribute("id");
privateButtonChatHome.setAttribute("id", "selected");
showListUserMessage(userList);
});
gameButtonChatHome.addEventListener("click", () => {
privateButtonChatHome.removeAttribute("id");
gameButtonChatHome.setAttribute("id", "selected");
showActualGameMessage();
});
}
function showListUserMessage(userList) {
const divMessageListChatHome = document.getElementById("messageListChatHome");
divMessageListChatHome.innerHTML = '';
userList.forEach(element => {
divMessageListChatHome.innerHTML += `
<div class="user">
<div class="status ${element.status}">
<img src="${element.pfp}">
</div>
<h3>${element.name}</h3>
</div>
`;
});
}
function showActualGameMessage() {
const divMessageListChatHome = document.getElementById("messageListChatHome");
let me = "Kumita";
let request = {
isInGame: true,
opponent: {
name: "Astropower",
pfp: "https://ashisheditz.com/wp-content/uploads/2024/03/cool-anime-pfp-demon-slayer-HD.jpg"
},
listMessage: [
{
from: "Astropower",
content: "Hello !",
date: "19:21 30/07/2024"
},
{
from: "Kumita",
content: "Hey",
date: "19:21 30/07/2024"
},
// {
// from: "Astropower",
// content: "Do you want play ?",
// date: "19:22 30/07/2024"
// },
// {
// from: "Kumita",
// content: "Yes, i'm ready !",
// date: "19:22 30/07/2024"
// },
// {
// from: "Kumita",
// content: "The game was too hard but well played",
// date: "19:27 30/07/2024"
// },
// {
// from: "Astropower",
// content: "Yeah but you still won. See you soon",
// date: "19:27 30/07/2024"
// },
]
}; //Remplace temporairement la requete qui devra être de la meme forme
divMessageListChatHome.innerHTML = '';
if (request.isInGame === false)
{
divMessageListChatHome.innerHTML = "<p style='text-align: center; margin-top: 20px;'>You are currently not in a game.</p>";
return ;
}
request.listMessage.forEach(element => {
divMessageListChatHome.innerHTML += `
<div class="${element.from === me ? "meMessage" : "opponentMessage"}">
<p class="content">${element.content}</p>
<p class="time">${element.date}</p>
</div>
`;
});
divMessageListChatHome.innerHTML += `
<div id="inputDiv" placeholder="Enter your message here"></div>
`;
divMessageListChatHome.setAttribute("contenteditable", "true");
}

BIN
site/chat/pp.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

183
site/chat/style.css Normal file
View File

@ -0,0 +1,183 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* style.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
/* Updated: 2024/07/30 20:18:19 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
body {
border: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #616161;
user-select: none;
}
#chatButton {
position: absolute;
bottom: 10px;
left: 30px;
background-color: white;
width: 100px;
height: 40px;
text-align: center;
cursor : pointer;
z-index: 998;
}
#chatButton p {
margin: 0;
margin-top: 10px;
}
#chatButton:hover {
background-color: rgb(204, 204, 204);
}
#chatDiv {
width: 350px;
height: 400px;
background-color: #131313;
position: absolute;
left: 20px;
bottom: 0px;
z-index: 999;
display: none;
flex-direction: column;
color: white;
font-family: 'Poppins';
padding: 20px;
padding-bottom: 0;
}
#chatDiv h1 {
margin: 0;
font-size: 25px;
}
/* Delete this, is just for cross style */
#chatDiv h2 {
cursor : pointer;
margin: 0;
font-size: 25px;
}
#chatDiv #topChatHome {
display: flex;
flex-direction: row;
justify-content: space-between;
border-bottom: 1px solid #484848;
padding-bottom: 10px;
}
#buttonTypeChatHome {
display: grid;
grid-template-columns: 50% 50%;
width: 100%;
border-bottom: 1px solid #484848;
}
#buttonTypeChatHome h2 {
text-align: center;
font-size: 20px;
color: #dfdfdf;
padding-top: 5px;
padding-bottom: 5px;
}
#selected {
background-color: black;
}
#messageListChatHome {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
}
#messageListChatHome .user {
display: flex;
flex-direction: row;
height: 75px;
margin: 0;
padding: 0;
margin-top: 10px;
}
#messageListChatHome .user .status {
border-radius: 1000px;
width: 60px;
height: 60px;
margin-right: 10px;
}
#messageListChatHome .online {
background-color: rgb(17, 165, 29);
}
#messageListChatHome .offline {
background-color: rgb(85, 85, 85);
}
#messageListChatHome .user img {
height: 52px;
margin-left: 4px;
margin-top: 4px;
border-radius: 1000px;
}
#messageListChatHome .opponentMessage {
max-width: 80%;
padding: 10px;
margin-top: 20px;
background-color: #484848;
margin-right: auto;
}
#messageListChatHome .meMessage {
max-width: 80%;
padding: 10px;
margin-top: 20px;
background-color: #222222;
margin-right: 0;
margin-left: auto;
}
#messageListChatHome .meMessage p {
text-align: right;
}
#messageListChatHome .content {
user-select: text;
}
#messageListChatHome .time {
margin-top: 10px;
font-size: 12px;
}
#messageListChatHome p {
margin: 0;
word-break: break-word;
}
#inputDiv {
position: absolute;
width: 90%;
height: 50px;
background-color: #0B0B0B;
bottom: 10px;
user-select: text;
}

0
site/index.html → site/game/index.html
View File

12
site/light.js → site/game/light.js
View File

@ -1,3 +1,15 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* light.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:46 by edbernar #+# #+# */
/* Updated: 2024/07/30 13:50:47 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from 'three';
// ------------------- Spot Light ------------------- // // ------------------- Spot Light ------------------- //

12
site/main.js → site/game/main.js
View File

@ -1,3 +1,15 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* 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 */
/* */
/* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from 'three';
import Stats from 'stats.js'; import Stats from 'stats.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

12
site/map.js → site/game/map.js
View File

@ -1,3 +1,15 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* map.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:51 by edbernar #+# #+# */
/* Updated: 2024/07/30 13:50:51 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from 'three'; import * as THREE from 'three';
function createMap(scene) { function createMap(scene) {

2
site/package-lock.json → site/game/package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "Three.js_game", "name": "site",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {

0
site/package.json → site/game/package.json
View File

0
site/space.jpg → site/game/space.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 MiB

After

Width:  |  Height:  |  Size: 4.7 MiB

0
site/space.tif → site/game/space.tif
View File