wip litle front end for chat
This commit is contained in:
lenovo
197
tests_hugo/chat_nest/chat_client/chat.css
Normal file
197
tests_hugo/chat_nest/chat_client/chat.css
Normal file
@@ -0,0 +1,197 @@
|
||||
|
||||
/* 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 {
|
||||
/*
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
23
tests_hugo/chat_nest/chat_client/chat_socket.js
Normal file
23
tests_hugo/chat_nest/chat_client/chat_socket.js
Normal file
@@ -0,0 +1,23 @@
|
||||
const socket = io("http://localhost:3000");
|
||||
|
||||
const div_message = document.getElementById('message');
|
||||
const div_messages = document.getElementById('messages');
|
||||
|
||||
const handle_submit_new_message = () => {
|
||||
socket.emit('message', { data: div_message.value });
|
||||
}
|
||||
|
||||
socket.on('message', ({ data }) => {
|
||||
handle_new_message(data);
|
||||
});
|
||||
|
||||
const handle_new_message = (message) => {
|
||||
div_messages.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
Normal file
47
tests_hugo/chat_nest/chat_client/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
</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>
|
||||
Reference in New Issue
Block a user