diff --git a/tests_hugo/chat_nest/chat_client/chat.css b/tests_hugo/chat_nest/chat_client/chat.css deleted file mode 100644 index f0633ed2..00000000 --- a/tests_hugo/chat_nest/chat_client/chat.css +++ /dev/null @@ -1,197 +0,0 @@ - -/* global settings */ -.chat_box { - /* - */ - --chat_box_width: 300px; - --chat_box_height: 400px; - - --top_bar_height: 30px; - --bottom_bar_height: 40px; -} - -/* */ -.chat_box, -.chat_box * { - /* - */ - display: flex; - flex-direction: column; - position: relative; - margin: auto; - padding: 0px; - box-sizing: border-box; -} - -/* */ -.chat_box { - /* - width: 0px; - height: 0px; - */ - position: fixed; - bottom: 20px; - right: 20px; - justify-content: flex-end; - - width: var(--chat_box_width); - height: var(--chat_box_height); - border: 1px solid green; -} - -/* */ -.chat_box .chat_main_button { - /* - */ - position: absolute; - top: auto; - right: 0px; - bottom: 0px; - - padding: 10px; - border-radius: 3px; - background-color: rgb(128, 128, 128); - cursor: pointer; -} - -/* */ -.chat_box .chat_main_button_title { - /* - */ - margin: 0px; - color: rgb(230, 230, 230); - text-size: 20px; - font-weight: 700; -} - -/* */ -.chat_box .chat_main_button:hover { - /* - */ - background-color: rgb(108, 108, 108); -} - -/* */ -.chat_box .chat_main_button:active { - /* - */ - background-color: rgb(128, 128, 128); - box-shadow: 0px 0px 5px rgb(108, 108, 108) inset; -} - - - - - -/** - * when input is checked - * box grow to become the chat box - * label move to become a little _ on top right to close the box - */ - -/* grow the box */ -input#chat_main_button_input:checked + -.chat_box { - /* - */ - width: var(--chat_box_width); - height: var(--chat_box_height); - border: 1px solid rgb(128, 128, 128); -} - -/* transform chat button into little - in top right corner */ -input#chat_main_button_input:checked + -.chat_box .chat_main_button { - /* - */ - top: 0px; - right: 0px; - bottom: auto; - - padding: 0px; - height: var(--top_bar_height); - width: 30px; - box-shadow: none; - border-radius: 0px; - background-color: transparent; - border: none; - - border: 1px solid green; -} -/* design the little - */ -input#chat_main_button_input:checked + -.chat_box .chat_main_button::before { - /* - */ - content: ""; - position: absolute; - left: calc((100% - 20px) / 2); - top: 50%; - transform: translateY(-50%); - height: 2px; - width: 20px; - max-width: 100%; - background-color: rgb(98, 98, 98); -} - -/* hide the "chat" button text */ -input#chat_main_button_input:checked + -.chat_box .chat_main_button_title { - /* - */ - display: none; -} - - - - - - -/** - * chat area is composed of - * post message area - * and view message area - */ - -/* */ -.chat_box .view_messages_area { - /* - */ - width: 100%; - height: calc(100% - var(--top_bar_height) - var(--bottom_bar_height)); - padding: 0px; - margin: 0px; - - border: 1px solid red; -} - -/* */ -.chat_box .post_message_area { - /* - */ - flex-direction: row; - width: 100%; - height: var(--bottom_bar_height); - margin: 0px; - - border: 1px solid orange; -} - - - - - - -/** - * chat area is composed of - * post message area - * and view message area - */ - -/* */ -.chat_box { - /* - */ -} - - diff --git a/tests_hugo/chat_nest/chat_client/chat.html b/tests_hugo/chat_nest/chat_client/chat.html new file mode 100644 index 00000000..1764a11b --- /dev/null +++ b/tests_hugo/chat_nest/chat_client/chat.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + +
+ +
+
+ + + +
+
+
+
+ +
+
+
+
+ + + +
+ + + + + + + + + + + diff --git a/tests_hugo/chat_nest/chat_client/chat_receive_msg.js b/tests_hugo/chat_nest/chat_client/chat_receive_msg.js new file mode 100644 index 00000000..e69de29b diff --git a/tests_hugo/chat_nest/chat_client/chat_socket.js b/tests_hugo/chat_nest/chat_client/chat_socket.js index 60accbf0..12a0268f 100644 --- a/tests_hugo/chat_nest/chat_client/chat_socket.js +++ b/tests_hugo/chat_nest/chat_client/chat_socket.js @@ -1,10 +1,10 @@ -const socket = io("http://localhost:3000"); -const div_message = document.getElementById('message'); -const div_messages = document.getElementById('messages'); +const div_msg = document.getElementById('msg_write'); +const div_thread = document.getElementById('msg_thread'); -const handle_submit_new_message = () => { - socket.emit('message', { data: div_message.value }); +const submit_new_message = () => { + if (is_valid_msg) + socket.emit('message', { data: div_msg.value }); } socket.on('message', ({ data }) => { @@ -12,7 +12,7 @@ socket.on('message', ({ data }) => { }); const handle_new_message = (message) => { - div_messages.appendChild(build_new_message(message)); + div_thread.appendChild(build_new_message(message)); } const build_new_message = (message) => { diff --git a/tests_hugo/chat_nest/chat_client/chat_submit_msg.js b/tests_hugo/chat_nest/chat_client/chat_submit_msg.js new file mode 100644 index 00000000..3b6d3638 --- /dev/null +++ b/tests_hugo/chat_nest/chat_client/chat_submit_msg.js @@ -0,0 +1,24 @@ + +const div_msg = document.getElementById('msg_write'); +const div_thread = document.getElementById('msg_thread'); + +const submit_new_message = () => { + if (is_valid_msg) + socket.emit('message', { data: div_msg.value }); +} + +socket.on('message', ({ data }) => { + handle_new_message(data); +}); + +const handle_new_message = (message) => { + div_thread.appendChild(build_new_message(message)); +} + +const build_new_message = (message) => { + const p = document.createElement("p"); + p.appendChild(document.createTextNode(message)); + return p; +} + + diff --git a/tests_hugo/chat_nest/chat_client/index.html b/tests_hugo/chat_nest/chat_client/index.html deleted file mode 100644 index 0fe6077a..00000000 --- a/tests_hugo/chat_nest/chat_client/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - -
- -
-
-
-
- -
- - -
- - -
- - - - - - - - - - - diff --git a/tests_hugo/chat_nest/chat_client/style/chat.css b/tests_hugo/chat_nest/chat_client/style/chat.css new file mode 100644 index 00000000..75874649 --- /dev/null +++ b/tests_hugo/chat_nest/chat_client/style/chat.css @@ -0,0 +1,103 @@ + +@import 'msg_thread.css'; +@import 'msg_write.css'; + +/** + * GRID + */ + +/* global settings */ + +.chat_box * { + position: relative; + box-sizing: border-box; +} +.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.msg_write { grid-area: msg_write;} +.chat_box .chat_item.msg_send { grid-area: msg_send;} +.chat_box { + position: fixed; + bottom: 20px; + right: 20px; + display: grid; + grid: + ' controls open_close ' auto + ' msg_thread msg_thread ' 1fr + ' msg_write msg_send ' auto + / 1fr auto; + gap: 0px; + padding: 0px; + width: auto; + height: auto; + + border: 1px solid green; +} +.chat_box .chat_item { + /* + border: 1px solid blue; + */ +} +/* buttons settings */ +.chat_box .chat_item.button { + display: flex; + width: auto; + padding: 10px; + cursor: pointer; + outline: none; + border: none; + background-color: rgb(220, 220, 220); +} +.chat_box .chat_item.button p { + margin: auto; +} +.chat_box .chat_item.button:hover { + background-color: rgb(200, 200, 200); +} +.chat_box .chat_item.button:active { + background-color: rgb(220, 220, 220); +} +/* collapse settings */ +.chat_box .chat_item:not(.open_close) { + display: none; +} +#chat_input:checked + +.chat_box { + gap: 5px; + padding: 5px; + width: 300px; + height: 400px; +} +#chat_input:checked + +.chat_box .chat_item { + display: flex; +} +#chat_input:checked + +.chat_box .chat_item.open_close p { + display: none; +} +#chat_input:checked + +.chat_box .chat_item.open_close { + /* + */ + width: 30px; + height: 20px; + padding: 0px; + justify-self: end; + background-color: transparent; + border: none; +} +#chat_input:checked + +.chat_box .chat_item.open_close::before { + --collapse_width: 20px; + content: ""; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + height: 2px; + width: 15px; + background-color: black; +} + diff --git a/tests_hugo/chat_nest/chat_client/style/msg_thread.css b/tests_hugo/chat_nest/chat_client/style/msg_thread.css new file mode 100644 index 00000000..b61ad141 --- /dev/null +++ b/tests_hugo/chat_nest/chat_client/style/msg_thread.css @@ -0,0 +1,4 @@ +.chat_box .chat_item .msg_box { + width: 100%; + border: 1px solid blue; +} diff --git a/tests_hugo/chat_nest/chat_client/style/msg_write.css b/tests_hugo/chat_nest/chat_client/style/msg_write.css new file mode 100644 index 00000000..fe0d0278 --- /dev/null +++ b/tests_hugo/chat_nest/chat_client/style/msg_write.css @@ -0,0 +1,10 @@ +.chat_box .text_area { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: auto; + min-height: 100%; + background-color: white; + border: 1px solid red; +}