From b2211c02178674216111c81a2e3839fdad30c56a Mon Sep 17 00:00:00 2001
From: Cuter <scuter@student.42nice.fr>
Date: Wed, 22 Feb 2023 19:56:05 +0100
Subject: [PATCH] chat

---
 front/volume/public/global.css          |   3 +-
 front/volume/public/img/chat.png        | Bin 0 -> 724 bytes
 front/volume/public/img/close.png       | Bin 0 -> 342 bytes
 front/volume/public/img/send.png        | Bin 0 -> 858 bytes
 front/volume/src/App.svelte             |   2 +
 front/volume/src/components/Chat.svelte | 139 ++++++++++++++++++++++++
 6 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 front/volume/public/img/chat.png
 create mode 100644 front/volume/public/img/close.png
 create mode 100644 front/volume/public/img/send.png
 create mode 100644 front/volume/src/components/Chat.svelte

diff --git a/front/volume/public/global.css b/front/volume/public/global.css
index bb28a94..420c3fb 100644
--- a/front/volume/public/global.css
+++ b/front/volume/public/global.css
@@ -1,5 +1,6 @@
 html, body {
-	position: relative;
+	position: fixed;
+	overflow: hidden;
 	width: 100%;
 	height: 100%;
 }
diff --git a/front/volume/public/img/chat.png b/front/volume/public/img/chat.png
new file mode 100644
index 0000000000000000000000000000000000000000..69ecb0d5f039821e5618e098e6d1cfe02b186296
GIT binary patch
literal 724
zcmV;_0xSKAP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0001m0001m0pjfc!2kdN8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10#QjsK~z|U?blC;k82bM@XwiRE+bsAxwlEAl$4w7un|$WCf!o9
zP*O-1qPx0fckQew7Q#YzabttU6j7SZWj7+FCYhDL`LA&2b}Zh<^!A(In4j^Reilxh
z-sgGF(>dSgd*1h)=Z(zNNtxET5E0YS(<cA_W#-$@?#N7qg$)?Q2(pbjjD3htvFbXl
zoO&HDA#ei^+r+?3ti=(`!J(!M;NOCFV>6Urqv*v8e89{mc0b@fZnrylEy%HQz+ISE
zw{@W#KjLYdXm2J@%JT#sMZ{m93|&(gw3(d8GaQVF-JJk%1Z!03=m-FrIfR>7+A@HM
zSRE0A5wWApPe#OG8Ly0p>k+Z@3vj$wieRe@^k5NwD)XPq9A;rfS^HucQ;M5OW?seI
z+Ptqe9>9#r1g8V<z;^)OB!CZii$xJJRe+Y1=kqa^(kw2ks?(pC(Z(he=qrbOj_$I4
z9q%%86u>gPDj;6szJ}I}1?VrfR`pTw`9HSSe2oI=DlFW=uQ-L*Sg5*8fQZ<JTlh_j
zwWG)@T*Ug!{HKw8C3quk`-|~+%*VMJGuzvcmbt2TZfNvMHjZq-ar}aN*o)zaSUSO}
zA7tjs`a(p^R^5zx@rR1t{)rfvtUku32A^9S_T0eii5R$xGgz$kymw<WE=0sh9LUT!
zHTxBu#<|QK8IOT|IEtQ0=6JcP-zSE!s>Z;cG5ec1`06@<={T(V{6;X)GJtlf>Yre^
zmisXPrnDDi<~3D)`Fp%QQIJl#M8uW?>TE{<j3*s$#~%Tl1Mc(#Yy;r{0000<MNUMn
GLSTZSxK`Hy

literal 0
HcmV?d00001

diff --git a/front/volume/public/img/close.png b/front/volume/public/img/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bd7e225c89e596890acec543f45b40bbe881144
GIT binary patch
literal 342
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3a
z8xUr!)F|8wWJs2{MwA5Sr<If^7Ns(jmzV2h=4BTrCl;jY<rk&TerF>ERCL+X#W5tJ
z_2_g*u0sX_uJTPEPwf)2@w~{qg8OU4E`cMVF&0jmTeiLQsaqJJ@#p(2waJ_Z_$rvI
z6$I;5A0(X7{WjsP9jmuW@}CO*Git*67hBW!Ej}k?Q5F}|Fje`FzH(4fNm<L0CqDk2
zk97DuZ%P(3-ErHfa-vqwmy;*jGr8$-_DO*SZi=s`?qGT@^+B;S>%%se@2iaqv>Wwf
zu4=_xidUH1aw%0q*X2@>&fT6Rw>NH4oVYFJ(z1|S(@yiNeOi2TG1DIZM|>L?=Q#-T
f<a?VOi>YTYQ2p<pW_BhR=sgBcS3j3^P6<r_zB_<c

literal 0
HcmV?d00001

diff --git a/front/volume/public/img/send.png b/front/volume/public/img/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..bec0025be456b3880819b90791371245ed37262a
GIT binary patch
literal 858
zcmV-g1Eu_lP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0002&0002&0eL8Ky#N3J8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10@q1IK~z|U?bc1GR#g-R;77fdm1T)&K?xS7h(Vw>=tmGLjH_vu
z;3RR9P>4<{5kVb=7!?tvf)Lm&kwPgoCkoaeE47K%D8--hH?{IsdOrtyozC`jzVGV2
zpEal#Hs_qZ-o4+o_g-u5!+#z9{sqlj@Eqph^gk*52-e{o8qp43Z_&H32>UY8yuEup
zL<it;e271q2p4T?JB1&>TR5Hx{D|`v(Vyda9yj(?bO`2SS0-=~+pz$j)rc>R_YJ)j
z?T<&X7QbYZ@5f?{z)YN|i2oYn-iz<K*D5>;EAT^QMXT{paBjw$uytonT)-45?GH)2
zH0)|b2Vpig$Djr-Nn1W&%IN~*@ojK^l2YzZDG;XxXF}L__9Q$3Z{uXP+QV3h`zqXi
zQmXwPylr?MUE%bcjJqN@FV~6Q5v$shiFQfpG+j!sD(=J<<u)(E!%}Q?<An<Uo8aD`
zcTUDfuFTml@gi=o^E5CEr-Hv1<1h(lqi<n_e@{4dpgK_=tta(d90p70TLjvhQa+DY
z9@)~GaW92!Rn^dm9Whyv$DiO?+)&|8!gs+tiYKCfG>%38$|jC)4f|uwRyG>1;fQia
zj^hof$}LeI)5pp*8Yx{WMQyLUVQ-b<>4f@Nx&r+*ujRi<fmVnNmkLk=AH>)?%nr``
zJ&9K_0<VN47ce%n4OQm-Ms&28XMONyU8@5H&O|G4o0KUHDGjT!lA}Wk&Mql{+v32s
z5Z@)0-&U9$+)wL_&CaY9I`L$@kCAG8E6j-Jre0|Mg?tC{t?!QZItDfw`+ackZifTY
zLi}qf6P{L9!`-;IGHzUE>l4mMSMTnaaC&ANi7%r6G@i+9uSWl}b~sSfg0K9&*mOuY
z-KF5H$4&S=z8`F-1D!2+Q<eXOd!({{u*TtDJ5aa!Duyf5w1Ic}DxN#=)K&5aV7c@Y
kGqD{Gtdq|5f3zK!0XVSunB1`;_5c6?07*qoM6N<$g5J)G`v3p{

literal 0
HcmV?d00001

diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte
index 21b5cc3..a1bfc7b 100644
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@@ -9,6 +9,7 @@
 	import type { SpectateType } from './components/Spectate.svelte';
 	import Play from './components/Play.svelte';
 	import Pong from './components/Pong/Pong.svelte';
+	import Chat from './components/Chat.svelte'
 
 	let isProfileOpen = false;
 	function clickProfile() {
@@ -76,6 +77,7 @@
 	{/if}
 	<Play />
 	<Pong />
+	<Chat />
 </main>
 
 <style>
diff --git a/front/volume/src/components/Chat.svelte b/front/volume/src/components/Chat.svelte
new file mode 100644
index 0000000..9b17caa
--- /dev/null
+++ b/front/volume/src/components/Chat.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+
+	let chatIsOpen = false;
+	const toggleChat = () => (chatIsOpen = !chatIsOpen);
+	let newText = '';
+
+	let chatMessages = [
+		{
+			name: 'Alice',
+			text: 'Hello guys! Happy to see you here!'
+		},
+		{
+			name: 'Bob',
+			text: 'Wanna play?'
+		},
+		{
+			name: 'Carl',
+			text: 'cyka blyat'
+		},
+	]
+
+	const sendMessage = () => {
+		if (newText !== '')
+		{
+			const newMessage = {
+				name: 'You',
+				text: newText
+			};
+			chatMessages = [
+				...chatMessages,
+				newMessage
+			];
+			newText = '';
+		}
+	}
+
+</script>
+
+
+
+<!-- Main chat div, changes style to hide/unhide the chat depending if it's open or closed -->
+<div class={
+	chatIsOpen
+		? 'chat-open chat-container'
+		: 'chat-container'}>
+	<!-- Button to toggle chat -->
+	<div class="chat-view-button">
+		<button on:click={toggleChat}>
+			{#if chatIsOpen}
+				<img src="img/close.png" alt="Close" />
+			{:else}
+				<img src="img/chat.png" alt="Open" />
+			{/if}
+		</button>
+	</div>
+	<div class="chat">
+		<!-- Chat history -->
+		<div class="messages">
+			{#each chatMessages as message}
+				<p class="message">
+					<span class="message-name">
+						{message.name}
+					</span>: {message.text}
+				</p>
+			{/each}
+		</div>
+		<!-- Form to send message -->
+		<form on:submit|preventDefault={sendMessage}>
+			<input
+				type="text"
+				placeholder="Type a message..."
+				bind:value={newText} />
+			<button>
+				<img src="img/send.png" alt="send" />
+			</button>
+		</form>
+	</div>
+</div>
+
+
+
+<style>
+	.chat-container {
+		position: absolute;
+		top: 10rem;
+		height: calc(100vh - 10rem);
+		z-index: 42; /* Show it above everything */
+		display: flex;
+		width: 300px;
+		right: -300px;
+		transition: right 0.3s ease-out;
+	}
+	.chat-view-button {
+		position: absolute;
+		left: -64px;
+		top: 0;
+		bottom: 0;
+		margin: auto 0;
+		height: 64px;
+	}
+	.chat-view-button button {
+		border: none;
+		cursor: pointer;
+		border-radius: 16px 0 0 16px;
+		padding: 16px 16px 16px 16px;
+	}
+	.chat-open {
+		right: 0; /* Shows chat */
+	}
+	.chat {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+	.messages {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 10rem);
+		padding: 1rem;
+		overflow-y: scroll;
+	}
+	.message-name {
+		cursor: pointer;
+	}
+	form {
+		/* border-bottom: var(--grey) 1px solid; */
+		margin: 1rem;
+		display: flex;
+		justify-content: space-between;
+	}
+	input {
+		border: none;
+	}
+	form button {
+		background: transparent;
+		border: none;
+		cursor: pointer;
+	}
+</style>