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

wip chat rooms can now create new room with prompt

Browse Source
This commit is contained in:
lenovo
2022-12-07 15:42:36 +01:00
parent 3b60f3952c
commit 556c16e3f2
12 changed files with 111 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,38 +14,33 @@
<div class="chat_box">
<div class="chat_item controls_area">
<!-- MENU -------------- -->
<div class="control list drop_down">
<p class="_title" tabindex=0>list</p>
<div class="_items" tabindex=0>
<p class="_section">directs chats</p>
<label for="input_outside"><p class="_subsection">test1</p></label>
<label for="input_outside"><p class="_subsection">test2</p></label>
<p class="_section">rooms</p>
<label for="input_outside"><p class="_subsection">test1</p></label>
<label for="input_outside"><p class="_subsection">test2</p></label>
<p class="_title" tabindex=0>rooms</p>
<div class="_items" tabindex=0 id="rooms">
<label for="input_outside"><p class="room_name">test1</p></label>
<label for="input_outside"><p class="room_name">test2</p></label>
<label for="input_outside"><p class="room_name">test1</p></label>
<label for="input_outside"><p class="room_name">test2</p></label>
</div>
</div>
<!-- MENU -------------- -->
<div class="control create drop_down">
<p class="_title" tabindex=0>create</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p onclick="">direct chat</p></label>
<label for="input_outside"><p onclick="create_room()">direct chat</p></label>
<!-- SUBMENU ----------- -->
<div class="drop_down _push">
<p class="_title" tabindex=0>room</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p onclick="">public</p></label>
<label for="input_outside"><p onclick="">privte</p></label>
<label for="input_outside"><p onclick="">private</p></label>
<label for="input_outside"><p onclick="">protected</p></label>
</div>
</div>
</div>
</div>
<!-- MENU -------------- -->
<div class="control join">
<p>join</p>
</div>
@@ -55,9 +50,13 @@
<p>chat</p>
</label>
<div class="chat_item msg_thread">
<div class="chat_item main_window">
<!-- THREAD ------------ -->
<div class="msg_box" id="msg_thread">
<!-- messages go there -->
<!-- messages go there -->
</div>
<!-- INFO WINDOW ------- -->
<div class="action_board">
</div>
</div>
@@ -86,9 +85,10 @@
<script src="./chat_connection.js"></script>
<script src="./chat_send_msg.js"></script>
<script src="./chat_add_msg.js"></script>
<script src="./chat_create_room.js"></script>
<script src="./event_updatemsg.js"></script>
<script src="./chat_update_room.js"></script>
<script src="./event_updaterooms.js"></script>
</body>
</html>

3
tests_hugo/chat_node/chat_client/chat_add_room.js Normal file
View File

@@ -0,0 +1,3 @@
//const add_room = (rooms, newroom) => {
//
//};

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

@@ -0,0 +1,5 @@
let create_room = () => {
let room_name = prompt("room name ?");
socket.emit('createroom', room_name);
};

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

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

30
tests_hugo/chat_node/chat_client/event_updaterooms.js Normal file
View File

@@ -0,0 +1,30 @@
socket.on('updaterooms', (rooms) => {
let div_rooms = document.getElementById("rooms");
console.log("rooms: ");
console.log(rooms);
// let div_room_count = div_rooms.childElementCount;
// let div_room_list = document.getElementsByClassName("room_name");
// console.log(".div_room_list: ");
// console.log(div_room_list);
// for(let room of div_room_list) {
// console.log(room);
// console.log(room.innerHTML);
// }
div_rooms.innerHTML = "";
for (let room of rooms) {
//console.log(room.name);
const label = document.createElement("label");
const p = document.createElement("p");
const p_content = document.createTextNode(room.name);
label.setAttribute('for', "input_outside");
p.className = "room_name";
p.appendChild(p_content);
label.appendChild(p);
div_rooms.appendChild(label);
}
});

18
tests_hugo/chat_node/chat_client/style/action_board.css Normal file
View File

@@ -0,0 +1,18 @@
.chat_box .chat_item.main_window .action_board {
/*
display: none;
*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
}
/* * * * * * * * * * * * * *
INFO WINDOW
*/

11
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -1,4 +1,5 @@
@import 'action_board.css';
@import 'msg_thread.css';
@import 'msg_write.css';
@import 'msg_controls.css';
@@ -28,7 +29,7 @@
}
.chat_box .chat_item.controls_area { grid-area: controls;}
.chat_box .chat_item.open_close { grid-area: open_close;}
.chat_box .chat_item.msg_thread { grid-area: msg_thread;}
.chat_box .chat_item.main_window { grid-area: main_window;}
.chat_box .chat_item.msg_write { grid-area: msg_write;}
.chat_box .chat_item.msg_send { grid-area: msg_send;}
.chat_box {
@@ -37,10 +38,10 @@
right: 20px;
display: grid;
grid:
' controls open_close ' auto
' msg_thread msg_thread ' 1fr
' msg_write msg_send ' auto
/ 1fr auto;
' controls open_close ' auto
' main_window main_window ' 1fr
' msg_write msg_send ' auto
/ 1fr auto;
gap: 0px;
padding: 0px;
width: auto;

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

@@ -1,4 +1,4 @@
.chat_box .chat_item.msg_thread {
.chat_box .chat_item.main_window {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid blue;