diff --git a/site/chat/index.html b/site/chat/index.html new file mode 100644 index 0000000..b3843e4 --- /dev/null +++ b/site/chat/index.html @@ -0,0 +1,33 @@ + + + + + + Chat + + + + + + + + +
+

CHAT

+
+
+
+

Chat

+
+

X

+
+
+
+

Private

+

Game

+
+
+
+
+ + \ No newline at end of file diff --git a/site/chat/main.js b/site/chat/main.js new file mode 100644 index 0000000..390f00c --- /dev/null +++ b/site/chat/main.js @@ -0,0 +1,155 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* main.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: edbernar +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* 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 += ` +
+
+ +
+

${element.name}

+
+ `; + }); +} + +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 = "

You are currently not in a game.

"; + return ; + } + request.listMessage.forEach(element => { + divMessageListChatHome.innerHTML += ` +
+

${element.content}

+

${element.date}

+
+ `; + }); + divMessageListChatHome.innerHTML += ` +
+ `; + divMessageListChatHome.setAttribute("contenteditable", "true"); +} diff --git a/site/chat/pp.jpg b/site/chat/pp.jpg new file mode 100644 index 0000000..9549734 Binary files /dev/null and b/site/chat/pp.jpg differ diff --git a/site/chat/style.css b/site/chat/style.css new file mode 100644 index 0000000..62a02fa --- /dev/null +++ b/site/chat/style.css @@ -0,0 +1,183 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* style.css :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: edbernar +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* 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; +} diff --git a/site/index.html b/site/game/index.html similarity index 100% rename from site/index.html rename to site/game/index.html diff --git a/site/light.js b/site/game/light.js similarity index 62% rename from site/light.js rename to site/game/light.js index 9992584..3b4cc34 100644 --- a/site/light.js +++ b/site/game/light.js @@ -1,3 +1,15 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* light.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: edbernar +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2024/07/30 13:50:46 by edbernar #+# #+# */ +/* Updated: 2024/07/30 13:50:47 by edbernar ### ########.fr */ +/* */ +/* ************************************************************************** */ + import * as THREE from 'three'; // ------------------- Spot Light ------------------- // diff --git a/site/main.js b/site/game/main.js similarity index 77% rename from site/main.js rename to site/game/main.js index a326222..abca12d 100644 --- a/site/main.js +++ b/site/game/main.js @@ -1,3 +1,15 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* main.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: edbernar +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* 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 Stats from 'stats.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; diff --git a/site/map.js b/site/game/map.js similarity index 50% rename from site/map.js rename to site/game/map.js index 3148624..7bc71a7 100644 --- a/site/map.js +++ b/site/game/map.js @@ -1,3 +1,15 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* map.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: edbernar +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2024/07/30 13:50:51 by edbernar #+# #+# */ +/* Updated: 2024/07/30 13:50:51 by edbernar ### ########.fr */ +/* */ +/* ************************************************************************** */ + import * as THREE from 'three'; function createMap(scene) { diff --git a/site/package-lock.json b/site/game/package-lock.json similarity index 99% rename from site/package-lock.json rename to site/game/package-lock.json index d987e28..37d68bd 100644 --- a/site/package-lock.json +++ b/site/game/package-lock.json @@ -1,5 +1,5 @@ { - "name": "Three.js_game", + "name": "site", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/site/package.json b/site/game/package.json similarity index 100% rename from site/package.json rename to site/game/package.json diff --git a/site/space.jpg b/site/game/space.jpg similarity index 100% rename from site/space.jpg rename to site/game/space.jpg diff --git a/site/space.tif b/site/game/space.tif similarity index 100% rename from site/space.tif rename to site/game/space.tif