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

wip handle newline with enter shift

Browse Source
This commit is contained in:
hugogogo
2022-12-20 23:02:45 +01:00
parent 6f29dab558
commit 55cff329c3
6 changed files with 114 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests_hugo/chat_node/chat_client/_test_layouts.js
View File

@@ -2,7 +2,7 @@
*/ */
let test = document.createElement('form'); let test = document.createElement('form');
test.innerHTML = ` test.innerHTML = `
<br><br><button onclick="chat_layout(this.innerText)" type="reset">close</button> <button onclick="chat_layout(this.innerText)" type="reset">close</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">home</button> <br><br><button onclick="chat_layout(this.innerText)" type="reset">home</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">room</button> <br><br><button onclick="chat_layout(this.innerText)" type="reset">room</button>
<br><br><button onclick="chat_layout(this.innerText)" type="reset">new</button> <br><br><button onclick="chat_layout(this.innerText)" type="reset">new</button>

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

@@ -12,21 +12,21 @@
<div class="close" id="chat_box"> <div class="close" id="chat_box">
<!-- <!--
classes: classes:
close -> layout close 1. close -> layout close
home -> layout home 2. home -> layout home
room -> layout room 3. room -> layout room
new -> layout new 4. new -> layout new
settings -> layout settings 5. settings -> layout settings
room_set -> layout room_set 6. room_set -> layout room_set
protected -> layout protected 7. protected -> layout protected
create -> layout create 8. create -> layout create
mute -> layout mute 9. mute -> layout mute
user -> layout user 10. user -> layout user
_blocked -> for user layout : user is blocked 11. _blocked -> for user layout : user is blocked
_muted -> for user layout : user is muted 12. _muted -> for user layout : user is muted
_admin -> for user layout : you are admin 13. _admin -> for user layout : you are admin
_room_set -> for user layout : comes from room_set 14. _room_set -> for user layout : comes from room_set
_settings -> for user layout : comes from settings 15. _settings -> for user layout : comes from settings
classes for layout must replace the entire previous class classes for layout must replace the entire previous class
but classes starting with "_" must be added to existing class but classes starting with "_" must be added to existing class
@@ -37,7 +37,6 @@
<button class="chat_item chat_new btn" id="chat_new" onclick="chat_layout('new')" title="new" ><p>new</p></button> <button class="chat_item chat_new btn" id="chat_new" onclick="chat_layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings btn" id="chat_settings" onclick="chat_layout('settings')" title="settings"><p>settings</p></button> <button class="chat_item chat_settings btn" id="chat_settings" onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name btn" id="chat_room_name" onclick="chat_layout('room_set')" ><p>&lt;room_name&gt;</p></button> <button class="chat_item chat_room_name btn" id="chat_room_name" onclick="chat_layout('room_set')" ><p>&lt;room_name&gt;</p></button>
<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p> <p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >&lt;user_name&gt;</p> <p class="chat_item chat_user" id="chat_user" >&lt;user_name&gt;</p>
@@ -73,8 +72,8 @@
<div class="chat_room_name __show_if_only_child"> <div class="chat_room_name __show_if_only_child">
<p class="__center">/ you have no chat room yet /</p> <p class="__center">/ you have no chat room yet /</p>
</div> </div>
<!-- placeholders ------- <!-- placeholders
--> ------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')"> <button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">a room</p> <p class="__left">a room</p>
</button> </button>
@@ -88,23 +87,6 @@
</div> </div>
</div> </div>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders -------
-->
<div class="chat_msg bob">
<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>
<!-- END placeholders -->
</div>
</div>
<!-- NEW --> <!-- NEW -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new"> <div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<button class="chat_create_btn btn"><p>create</p></button> <button class="chat_create_btn btn"><p>create</p></button>
@@ -113,8 +95,8 @@
<div class="__show_if_only_child"> <div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p> <p class="__center">/ there are no public rooms yet /</p>
</div> </div>
<!-- placeholders ------- <!-- placeholders
--> ------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')"> <button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">join room</p> <p class="__left">join room</p>
</button> </button>
@@ -135,8 +117,8 @@
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings"> <div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<p>blocked users :</p> <p>blocked users :</p>
<div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn"> <div id="chat_api_blocked_users" class="chat_api chat_blocked_users list_btn">
<!-- placeholders ------- <!-- placeholders
--> ------------- -->
<button class="chat_user btn" onclick="chat_layout('user _settings')"> <button class="chat_user btn" onclick="chat_layout('user _settings')">
<p class="__left blocked">user 1</p> <p class="__left blocked">user 1</p>
</button> </button>
@@ -161,8 +143,8 @@
<div class="chat_public_rooms __show_if_only_child"> <div class="chat_public_rooms __show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p> <p class="__center">/ there are no public rooms yet /</p>
</div> </div>
<!-- placeholders ------- <!-- placeholders
--> ------------- -->
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')"> <button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
<p class="__left">user 1</p> <p class="__left">user 1</p>
</button> </button>
@@ -390,15 +372,40 @@
</form> </form>
</div> </div>
<!-- MSG -->
<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
<div id="chat_api_msg_thread" class="chat_api">
<!-- placeholders
------------- -->
<div class="chat_msg bob">
<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>
<!-- END placeholders -->
</div>
</div>
<!-- WRITE --> <!-- WRITE -->
<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write"> <div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
<div class="text_area" contenteditable></div> <!--
<div class="text_area" id="chat_msg_write" onkeypress="send_msg(event.key, event.shiftKey)" contenteditable="true"></div>
<div class="text_area" id="chat_msg_write" onkeypress="" contenteditable="true"></div>
<div class="text_area" id="chat_msg_write" contenteditable="true"></div>
<textarea class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)"></textarea>
<textarea class="text_area" id="chat_msg_write" onkeyup="send_if_enter(event)"></textarea>
-->
<div class="text_area" id="chat_msg_write" onkeypress="send_if_enter(event)" contenteditable="true"></div>
</div> </div>
<!-- send -->
<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>
<!-- -------------------------------- <!-- --------------------------------
MODELS MODELS
<div class="chat_model" id="chat_model_myroom_name"> <div class="chat_model" id="chat_model_myroom_name">
</div> </div>
<div class="chat_model" id="chat_model_msg"> <div class="chat_model" id="chat_model_msg">

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

@@ -13,6 +13,7 @@ const build_new_message = (from, message) => {
const p_name = document.createElement("p"); const p_name = document.createElement("p");
const p_msg = document.createElement("p"); const p_msg = document.createElement("p");
div.classList.add("chat_msg");
div.classList.add(from); div.classList.add(from);
p_name.classList.add("name"); p_name.classList.add("name");
p_msg.classList.add("msg"); p_msg.classList.add("msg");
@@ -25,3 +26,10 @@ const build_new_message = (from, message) => {
return div; return div;
} }
/*
<div class="chat_msg bob">
<p class="name">bob</p>
<p class="msg">hello</p>
</div>
*/

42
tests_hugo/chat_node/chat_client/chat_send_msg.js
View File

@@ -1,14 +1,50 @@
const send_msg = () => { function send_msg(evt = null)
{
const div_msg = document.getElementById('msg_write'); const div_msg = document.getElementById('chat_msg_write');
const msg = div_msg.innerText.trim(); const msg = div_msg.innerText.trim();
div_msg.innerText = ""; div_msg.innerText = "";
div_msg.focus(); div_msg.focus();
/*
const div_msg = document.getElementById('chat_msg_write');
const msg = div_msg.value.trim();
div_msg.value = "";
div_msg.focus();
*/
if (msg.length > 0) { if (msg.length > 0) {
socket.emit('sendmsg', msg); socket.emit('sendmsg', msg);
add_message("me", msg); add_message("me", msg);
} }
} }
function send_if_enter(evt)
{
//let test = new Event('test');
let test = new evt;
test = evt;
console.log("evt:");
console.log(evt);
console.log("test:");
console.log(test);
// change height of textarea according to content
//evt.target.style.height = evt.target.scrollHeight + "px";
if (evt.key != "Enter")
return;
if (evt.shiftKey == true)
{
console.log(evt.target);
console.log(evt.target.value);
console.log(evt.target.innerText);
evt.preventDefault();
// https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/20548330#20548330
evt.target.dispatchEvent(new Event('Enter'));
return;
}
evt.preventDefault();
send_msg();
}

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

@@ -1,6 +1,5 @@
/* /*
cxv
*/ */
@import 'chat__global.css'; @import 'chat__global.css';
@@ -25,23 +24,9 @@ cxv
@import 'chat_blocked.css'; @import 'chat_blocked.css';
@import 'chat_form.css'; @import 'chat_form.css';
/*
@import '_chat_controls.css';
@import '_action_board.css';
*/
/* vanish elements wihtout display:none;
input.vanish {
opacity: 0;
position: absolute;
pointer-events: none;
}
*/
/* /*
/* GRID GRID
*/ */
#chat_box * { #chat_box * {
@@ -52,7 +37,7 @@ input.vanish {
padding: 0px; padding: 0px;
margin: auto; margin: auto;
} }
#chat_box .chat_item { #chat_box .chat_item {
display: none; display: none;
/* /*
border: 1px solid black; border: 1px solid black;

26
tests_hugo/chat_node/chat_client/style/chat_msg.css
View File

@@ -1,15 +1,15 @@
.chat_item#chat_panel_msg { #chat_box #chat_panel_msg {
flex-direction: column-reverse; flex-direction: column-reverse;
overflow: scroll; overflow: scroll;
border: 1px solid black; border: 1px solid black;
} }
.chat_item#chat_panel_msg #chat_api_msg_thread { #chat_box #chat_panel_msg #chat_api_msg_thread {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
padding: 0px 5px; padding: 0px 5px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
white-space: pre-wrap; white-space: pre-wrap;
margin: 5px auto; margin: 5px auto;
padding: 5px; padding: 5px;
@@ -22,21 +22,23 @@
ALL MSG ALL MSG
*/ */
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg {
margin-left: 0px; margin-left: 0px;
background-color: rgb(210, 210, 210); background-color: rgb(210, 210, 210);
max-width: 80%; max-width: 80%;
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p {
padding: 0px; padding: 0px;
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.name { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.name {
margin: 0px; margin: 0px;
margin-bottom: 5px;
font-size: 12px; font-size: 12px;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg p.msg { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg p.msg {
margin: 5px 0px; margin: 5px 0px;
line-height: 8px;
} }
@@ -44,12 +46,12 @@
MSG PERSO MSG PERSO
*/ */
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me {
margin-right: 0px; margin-right: 0px;
margin-left: auto; margin-left: auto;
background-color: rgb(210, 110, 10); background-color: rgb(210, 110, 10);
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.me p.name {
display: none; display: none;
} }
@@ -58,14 +60,14 @@
MSG SERVER MSG SERVER
*/ */
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER {
margin-left: auto; margin-left: auto;
background-color: transparent; background-color: transparent;
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.name {
display: none; display: none;
} }
.chat_item#chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg { #chat_box #chat_panel_msg #chat_api_msg_thread .chat_msg.SERVER p.msg {
margin: 0px auto; margin: 0px auto;
font-size: 12px; font-size: 12px;
color: rgb(100, 100, 100); color: rgb(100, 100, 100);