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

wip base front end for chat ok

Browse Source
This commit is contained in:
lenovo
2022-11-23 16:13:38 +01:00
parent 6a119c0789
commit 1100ca35b1
9 changed files with 207 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
tests_hugo/chat_nest/chat_client/chat.css
View File

@@ -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 {
/*
*/
}

60
tests_hugo/chat_nest/chat_client/chat.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./style/chat.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="chat_input" style="display: none;"/>
<div class="chat_box">
<div class="chat_item controls_area">
</div>
<label class="chat_item open_close button" for="chat_input">
<p>chat</p>
</label>
<div class="chat_item msg_thread">
<div class="msg_box" id="msg_thread">
</div>
</div>
<div class="chat_item msg_write">
<div class="text_area" id="msg_write" contenteditable>
</div>
</div>
<button class="chat_item msg_send button" onclick="submit_new_message()">
<p>send</p>
</button>
</div>
<!-- https://socket.io/docs/v4/client-installation/ -->
<!--
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi"
crossorigin="anonymous"
import { io } from "https://cdn.socket.io/4.5.3/socket.io.min.js";
-->
<script type="module">
import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
const socket = io("http://localhost:3000");
</script>
<script src="./chat_submit_msg.js"></script>
<script src="./chat_receive_msg.js"></script>
</body>
</html>

0
tests_hugo/chat_nest/chat_client/chat_receive_msg.js Normal file
View File

12
tests_hugo/chat_nest/chat_client/chat_socket.js
View File

@@ -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) => {

24
tests_hugo/chat_nest/chat_client/chat_submit_msg.js Normal file
View File

@@ -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;
}

47
tests_hugo/chat_nest/chat_client/index.html
View File

@@ -1,47 +0,0 @@
</html><!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./chat.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="chat_main_button_input" style="display: none;" />
<div class="chat_box">
<div class="view_messages_area">
<div id="messages">
</div>
</div>
<div class="post_message_area">
<input type="text" id="message" />
<button onclick="handle_submit_new_message()">Submit</button>
</div>
<label for="chat_main_button_input" class="chat_main_button">
<p class="chat_main_button_title">chat</p>
</label>
</div>
<!-- https://socket.io/docs/v4/client-installation/ -->
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"></script>
<!--
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="module">
import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
const socket = io("http://localhost:3000");
</script>
-->
<script src="./chat_socket.js"></script>
</body>
</html>

103
tests_hugo/chat_nest/chat_client/style/chat.css Normal file
View File

@@ -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;
}

4
tests_hugo/chat_nest/chat_client/style/msg_thread.css Normal file
View File

@@ -0,0 +1,4 @@
.chat_box .chat_item .msg_box {
width: 100%;
border: 1px solid blue;
}

10
tests_hugo/chat_nest/chat_client/style/msg_write.css Normal file
View File

@@ -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;
}