42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chat msg send base ok

Browse Source
This commit is contained in:
simplonco
2022-12-27 15:00:35 +01:00
parent 11039be876
commit ed28b051e2
5 changed files with 512 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_msg.svelte Normal file
View File

@@ -0,0 +1,63 @@
<script>
export let content;
export let name;
</script>
<div class="chat_msg {name}">
<p class="name">{name}</p>
<p class="msg">{content}</p>
</div>
<style>
.chat_msg {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* all msg
*/
:global(.msg_thread) .chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
.chat_msg p {
padding: 0px;
}
.chat_msg p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_msg p.msg {
margin: 5px 0px;
}
/* msg perso
*/
.chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
.chat_msg.me p.name {
display: none;
}
/* msg server
*/
.chat_msg.SERVER {
margin-left: auto;
background-color: transparent;
}
.chat_msg.SERVER p.name {
display: none;
}
.chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}
</style>

90
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -2,11 +2,21 @@
<script>
import Button from './Chat_button.svelte';
import Msg from './Chat_msg.svelte';
export let layout = "";
export let back = "";
let msg = "";
let text_area;
let index = 0;
let msgs = [];
function add_msg(from, the_msg)
{
msgs = [...msgs, { id: index, content: the_msg, name: from }];
index++;
}
function send_msg()
{
@@ -14,7 +24,7 @@
if (msg.length > 0) {
//socket.emit('sendmsg', msg);
add_message("me", msg);
add_msg("me", msg);
}
msg = "";
@@ -52,33 +62,9 @@
<!-- msg -->
<div class="panel panel_msg">
<div class="msg_thread">
<!-- placeholders
------------- -->
<div class="chat_msg blub">
<p class="name">bob</p>
<p class="msg">hello hello<br>hello hello hello hello</p>
</div>
<div class="chat_msg blob">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg me">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg bleb">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
<div class="chat_msg SERVER">
<p class="name">me</p>
<p class="msg">hello</p>
</div>
<!-- END placeholders -->
{#each msgs as msg}
<Msg name={msg.name} content={msg.content} />
{/each}
</div>
</div>
@@ -159,54 +145,6 @@
width: 100%;
padding: 0px 5px;
}
.chat_msg {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
/* all msg
*/
.msg_thread .chat_msg {
margin-left: 0px;
background-color: rgb(210, 210, 210);
max-width: 80%;
}
.chat_msg p {
padding: 0px;
}
.chat_msg p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_msg p.msg {
margin: 5px 0px;
}
/* msg perso
*/
.chat_msg.me {
margin-right: 0px;
margin-left: auto;
background-color: rgb(210, 110, 10);
}
.chat_msg.me p.name {
display: none;
}
/* msg server
*/
.chat_msg.SERVER {
margin-left: auto;
background-color: transparent;
}
.chat_msg.SERVER p.name {
display: none;
}
.chat_msg.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}
</style>