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

wip chat users and rooms base

Browse Source
This commit is contained in:
lenovo
2022-12-06 14:59:18 +01:00
parent 5510861c63
commit d0b39dbb82
13 changed files with 143 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -32,13 +32,14 @@
<div class="control create drop_down">
<p class="_title" tabindex=0>create</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>direct chat</p></label>
<label for="input_outside"><p onclick="">direct chat</p></label>
<div class="drop_down _push">
<p class="_title" tabindex=0>room</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>test1</p></label>
<label for="input_outside"><p>test2</p></label>
<label for="input_outside"><p onclick="">public</p></label>
<label for="input_outside"><p onclick="">privte</p></label>
<label for="input_outside"><p onclick="">protected</p></label>
</div>
</div>
@@ -66,7 +67,7 @@
</div>
</div>
<button class="chat_item msg_send button" onclick="submit_new_message()">
<button class="chat_item msg_send button" onclick="send_msg()">
<p>send</p>
</button>
@@ -83,9 +84,12 @@
});
</script>
<script src="./chat_submit_msg.js"></script>
<script src="./chat_receive_msg.js"></script>
<script src="./chat_connection.js"></script>
<script src="./chat_send_msg.js"></script>
<script src="./chat_add_msg.js"></script>
<script src="./event_updatemsg.js"></script>
<script src="./chat_update_room.js"></script>
</body>
</html>

24
tests_hugo/chat_node/chat_client/chat_add_msg.js
View File

@@ -1,17 +1,27 @@
const add_new_message = (message, from = "others") => {
const add_message = (from, message ) => {
const div_thread = document.getElementById('msg_thread');
//console.log("received message:");
//console.log(`[${message}]`);
div_thread.appendChild(build_new_message(message, from));
div_thread.appendChild(build_new_message(from, message));
}
const build_new_message = (message, from) => {
const p = document.createElement("p");
p.classList.add(from);
p.appendChild(document.createTextNode(message));
return p;
const build_new_message = (from, message) => {
const div = document.createElement("div");
const p_name = document.createElement("p");
const p_msg = document.createElement("p");
div.classList.add(from);
p_name.classList.add("name");
p_msg.classList.add("msg");
p_name.appendChild(document.createTextNode(from + " :"));
p_msg.appendChild(document.createTextNode(message));
div.appendChild(p_name);
div.appendChild(p_msg);
return div;
}

4
tests_hugo/chat_node/chat_client/chat_connection.js Normal file
View File

@@ -0,0 +1,4 @@
socket.on('connect', () => {
//socket.emit('adduser', prompt("what's your name ?"));
socket.emit('adduser', "glurk");
});

5
tests_hugo/chat_node/chat_client/chat_receive_msg.js
View File

@@ -1,5 +0,0 @@
socket.on('chat_message', ({ data }) => {
add_new_message(data);
});

14
tests_hugo/chat_node/chat_client/chat_send_msg.js Normal file
View File

@@ -0,0 +1,14 @@
const send_msg = () => {
const div_msg = document.getElementById('msg_write');
const msg = div_msg.innerText.trim();
div_msg.innerText = "";
div_msg.focus();
if (msg.length > 0) {
socket.emit('sendmsg', { data: msg });
add_message("me", msg);
}
}

22
tests_hugo/chat_node/chat_client/chat_submit_msg.js
View File

@@ -1,22 +0,0 @@
const submit_new_message = () => {
const div_msg = document.getElementById('msg_write');
/*
const msg = div_msg.value;
const msg = div_msg.innerText;
*/
const msg = div_msg.innerText.trim();
div_msg.innerText = "";
div_msg.focus();
//console.log("msg:");
//console.log(`[${msg}]`);
//console.log(msg.length);
if (msg.length > 0) {
socket.emit('chat_message', { data: msg });
add_new_message(msg, "me");
}
}

4
tests_hugo/chat_node/chat_client/chat_update_room.js Normal file
View File

@@ -0,0 +1,4 @@
//socket.on('updateroom', (from, data) => {
// add_new_message(from, data);
//});

5
tests_hugo/chat_node/chat_client/event_updatemsg.js Normal file
View File

@@ -0,0 +1,5 @@
socket.on('updatemsg', (from, data) => {
//console.log("data: " + data);
add_message(from, data);
});

3
tests_hugo/chat_node/chat_client/style/drop_down_menu.css
View File

@@ -44,6 +44,9 @@
margin-left: 0px;
cursor: pointer;
}
.drop_down p._section {
color: rgb(100, 100, 100);
}
.drop_down p._section:hover,
.drop_down p._section:active {
background-color: transparent !important;

25
tests_hugo/chat_node/chat_client/style/msg_thread.css
View File

@@ -10,18 +10,37 @@
padding: 5px;
}
.chat_box #msg_thread p {
.chat_box #msg_thread div {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
.chat_box #msg_thread p.others {
.chat_box #msg_thread div.others {
margin-left: 0px;
background-color: rgb(210, 210, 210);
}
.chat_box #msg_thread p.me {
.chat_box #msg_thread div.me {
margin-right: 0px;
background-color: rgb(210, 110, 10);
}
.chat_box #msg_thread div.me p.name {
display: none;
}
.chat_box #msg_thread div.SERVER p.name {
display: none;
}
.chat_box #msg_thread div.SERVER p.msg {
margin: 0px auto;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_box #msg_thread div p.name {
margin: 0px;
font-size: 12px;
color: rgb(100, 100, 100);
}
.chat_box #msg_thread div p.msg {
margin-top: 10px;
}