From 09dfdbceb83a41f1b81bf717e6f0769fc7db8049 Mon Sep 17 00:00:00 2001 From: edbernar Date: Tue, 30 Jul 2024 20:19:29 +0200 Subject: [PATCH] created site just for chat --- site/chat/index.html | 33 ++++++ site/chat/main.js | 155 +++++++++++++++++++++++++ site/chat/pp.jpg | Bin 0 -> 9101 bytes site/chat/style.css | 183 ++++++++++++++++++++++++++++++ site/{ => game}/index.html | 0 site/{ => game}/light.js | 12 ++ site/{ => game}/main.js | 12 ++ site/{ => game}/map.js | 12 ++ site/{ => game}/package-lock.json | 2 +- site/{ => game}/package.json | 0 site/{ => game}/space.jpg | Bin site/{ => game}/space.tif | Bin 12 files changed, 408 insertions(+), 1 deletion(-) create mode 100644 site/chat/index.html create mode 100644 site/chat/main.js create mode 100644 site/chat/pp.jpg create mode 100644 site/chat/style.css rename site/{ => game}/index.html (100%) rename site/{ => game}/light.js (62%) rename site/{ => game}/main.js (77%) rename site/{ => game}/map.js (50%) rename site/{ => game}/package-lock.json (99%) rename site/{ => game}/package.json (100%) rename site/{ => game}/space.jpg (100%) rename site/{ => game}/space.tif (100%) 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 0000000000000000000000000000000000000000..9549734440f8126cfdecc4ef3130f50d16a1aa70 GIT binary patch literal 9101 zcmeHM2UJsAm%cGHLBvQ?nh0o=5(p$n*C&Lc1_Tm%kx)YjK@zH9K~ajJfS?ZqDI$Z0c;=cJlQY4UB8hW#$9ro-C#!Bl zCGjrWP)j6Q3GJin>VY>5_H{K6HpVyy6P(pupu2UrwE{H)i9SSEij!m@(aW2x5vUFQ zOs>Hkv&@Q6$ zAOIGi0wejlE5g;))fJVL6_u40ms1#XY{3)#edZ^58SS(NI#uIU!V35eiO7HCF|M8qQ4t=LSbA;G7W%q>C$DO-aq=v+i%*S@~yDFpWmu zWQvowvn!KxxnNyL&P-l1D{>80I2^8ua8pxI#vz;)5Uy^@3hHV&6$LlAii-dibb1u#!W zOTB9GvU8IGK%)hiC0N2;aty5IzWmUr0=tUqD0<0@<{6lZd$Z zmMvTOg{5SqBxJ-Swn(r@KulLo4$k#lTa4SM-@5r^pxcXW~>ybE-$N}0NKE9(Z2l7h{i|vXh zw#4dxFfE~%RA>)3W7hE*$tOJP`?#3dxdbFnMdT=HHDMQpfv)JXhI{X$3W zt2ycEgW9$Hx>^d!o2_L?Xq#DeL24TJW#Hw18kTdh_`9|aAL`8Jlu8 z_DxV}R0G7=aLT7m?fSc(9}l|mf^okOgLLo&1{vOHax3VY*a z%&^yfkW8K0gKS8xsE8^x`$R9V3=iw)VR#VFSBLT{lNZZJI%Wo&^qyNqOy_=HM@B5Z z`4KkJa=M@dqkyV(&+N3_9=srOVdw*2d)`PxTHc*FTk*z_yZ5^jPVIavA)ae_ZwW99 z+>*H;EekCWZ7()=^t~2!Ss-dA{hxGGCId8h6w*q@Db(1c)3L&>rikb)XJ=Dvi(?ol zKQu$dVkr6M1mV`0j8L*GMU{$l*l@q-MjoSP5n@;Ka#Rl{rN;U#jMZd9(@M>T60Igg zZ}G^?CMSCB+J|u9*DbmcIonO8Sw2nOch#arp1B+&Eq`H;zC|X&D?A8<&aE5}A`uxI6ZsaiBYV1^#`{J_@$5)y3ru$`94f zwHg+kV6^6B58mAx{XrE!sXsP%;pVwDm=!nBWLZ$1$=!<9(~4JjSmAzNq1(es zjny72knehMM#T7dmD7iqg0U>ZPS+eqa#z8pbWe$EX*TrAs|JU3}Q9Y)Zs_%N(FlII&90t z4IaIQS614f7Ue>)mD25Z#UCB&d~t2hilY~wQ%Gq7m+PZT*T#&C?Ta@myA_YOwVCaj zMo(FK7CEw$q!n zvXMPDu5l;5*TAbS^bYySz`AXMs3D%wBC<`?LbAZiX=6oP=#5bmJbwWZ6}-G3JUpeR zn}z#=v{fbRiZRyLYjS7l5AyShj1Qm&>J@t(Zp@knKgQO*zurSElham6Yelj1vdiEF z1g6UU;^-Q2{7V3#0~N4mMcR-1yxa{AK3;b(&W~CbS`7D}CMi=Z7zlVyMq=N~Gbgbj zww1IVD!YBd5m~nyv3Mhejs-g-{iiz>DqW_N18Wz>i%tean@MRt<*!p!w-+4aeM)Tg z9L_V>l|R;;?liZhy6Wb5kauCWKCa=^Tl71NI@kLFDbanEQsxJnw%1wYciW_`avG%BH2$@LR^l4xT6E*#;JXDks-!4Knn{Tuj% zGUuy;%!?03r9u#+KMroyy6LiMR&Wg4#{iV#9n{UzXtrKU5=!HD|Sk&UtEOgmxS z6}tmXy51MruleVeBQt`{=tm%aGt-L&%|NoeWeRq-SFo|!_v+2IeaQ``Xcd>3r$b0A zFzI)^4S2pF4!t^kMgPpP@nA&f+kdU6=ozPr@1c+`reI@x6&nBWy;^Rnm;BHatKu9} zGpB9}gm*I6J8_s%(0~s>3fWLBTR32+8&X?t*$?OKDI2r-R55zZS}bjC zky+sO2o9y(W+yT0$m@y6+OO9w40@zmcKFGR)*d^V^5o?d#!U9`J<&t2iPSz}DgzI4 zPuhAGxMQYE<-Hx*+Y7XWF;WFW#>~WA4N-m6RGu9oCOT8F&Z9eJP{yHY@lC%Y`v%&P zlf}job+c+kR-TjlDd`uxlR3vS7cW9>?NSRcC}TYfm%rN+AY3(~M|iz!$VQvo6!9Se z_2iQ9b8QzEayVOF&YIIVrIpM}jk0q*3JHxW<@h+(B3p&F-z{)@x0{H6(P(|`^CzF= zdZ^h3m%hG91K{>oH9B?Hp+|{B-1gZSSHjR+=)Ah-GcLF(-(v!Am^<Q0%*g${J)Vbx4uKvpyAZf#IWng17w`IkVen! z@N3)m#nrJX^D5=o=ci1AE2E++^E|0JNtv1M`SDG1jMliuO4?;w9oCYLmj338Avh^M zGk9MvHP1bXJHjCzC2wL;9gAX!F^qTQR_C%0cWZjgzYS=+ZlRtRE2f)ifN~fYX*#oA zv$*sa=d8yqVYz56fgdRa*{RmHhTriYI@Gt*>{&~27dPh7& znazCko~)@trR7~C=lhS3?l;#ILO9ykt3Svqst`#HuSKEud`Gpf3idjr!uj_n42Ft& znP%+xHb!csND&Qoc@W##S7`hgri$n9mM6yVqQCK#qBq-{ng%BdL@j!QXzYu(CzhR{LHZo!x3oeM3QAyL8~vd;+UXW zRz&V!cvw?)ye#x8HL5Vlz(9-7t6005c*N48XdnVb%uzhdrbb)S4VU5WZ%SoD+CWEX zT~T>c_U6w~?t8wa0xpkWL$7%3lvo_CUBF;{GEbh9|=SwIY^?L_?I8Asc@xm;q^4ukGmV@COcS7@% zkUQcc?+k8Y(!8@?1H+y1+V`&h;kQMJQ~y@ngdj8}_x*7V^aB6@ literal 0 HcmV?d00001 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