add chat

_includes/SideBar.html

@@ -1,6 +1,6 @@
-<div class="SideBar full background is-flex is-flex-direction-column">
+<div class="SideBar ">
 	
-	<div class="top-sidebar is-flex">
+	<div class="top-sidebar">
 		<img
 			src="{{ site.baseurl }}/assets/images/AliceClassIcon.png"
 			class="image logo"

assets/css/stylesheet.css

@@ -69,20 +69,23 @@ h1, h2, h3, h4, h5, h6 {
     display: flex;
     flex-direction: row;
 
+    justify-content: center;
+    
     padding: 30px 25px;
 }
 
 .page-sidebar{
-    width: 100px;
+    width: auto;
     flex-grow: 1;
     margin: 0 25px;
+
+    
 }
 .page-content{
-    width: 100px;
 
     background-color: var(--tertiary-color);
     flex-grow: 10;
-    margin: 0 25px;
+    margin: 0 50px;
     border-radius: 30px;
 
     box-shadow: -10px 5px 15px var(--primary-color);
@@ -93,14 +96,13 @@ h1, h2, h3, h4, h5, h6 {
 .SideBar{
     display: flex;
     flex-direction: column;
-    height: 90vh;
+    height: 100vh;
     position: fixed;
 
 }
 
 .SideBar .top-sidebar{
     flex-grow: 1;
-    display: flex;
     align-items: end;
     justify-content: start;
 }
@@ -111,15 +113,12 @@ h1, h2, h3, h4, h5, h6 {
 
 .SideBar .button-sidebar{
     flex-grow: 1;
-    display: flex;
-    align-items: end;
-    justify-content: start;
 }
 
 .SideBar .image{
-    width: 90%;
+    width: 60%;
     height: auto;
-    margin: 30px 0px;
+    margin: 10px 0px;
 }
 
 .menu{

pages/live.html

@@ -6,25 +6,58 @@ permalink: /live.html
 <script src="/assets/js/dash.all.min.js"></script>
 
 
-<div class="player-container">
+<div class="live-container">
-    <video
+    <div class="player-container">
-        class="player"
+        <video
-        data-dashjs-player
+            class="player"
-        autoplay
+            data-dashjs-player
-        controls
+            autoplay
-        muted 
+            controls
-    ></video>
+            muted 
-    
+        ></video>
-    <div class="player-off">
+        
-        <h1>Offline</h1>
+        <div class="player-off">
+            <h1>Offlinee</h1>
+        </div>
     </div>
+
+    <div class="chat">
+        <div class="chat-container">
+            <div class="chat-info">
+                <div>
+                    <h1>Live chat</h1>
+                </div>
+                <div class="chat-views">
+                    <i class="fa-solid fa-users"></i>
+                    <!-- <h4>679 pessoas online</h4> -->
+                </div>
+            </div>
+    
+            <div class="chat-lines">
+                <div class="chat-line">
+                    <!-- <p><span class="username">{msg.nome}:</span> {msg.mensagem}</p> -->
+                </div>
+            </div>
+    
+            <div class="chat-input">
+                <form on:submit|preventDefault={sendMessage} class="chat-input-form">
+                    <input class="input chat-enter" placeholder="Converse com o chat aqui" bind:value={message} />
+                    <input type="submit" hidden />
+                </form>
+            </div>
+        </div>
+    </div>
+    
+
 </div>
 
 <style>
     .player-container {
         position: relative;
-        width: 100%;
+        /* width: 100%;
-        height: 100%;
+        height: 100%; */
+
+        flex-grow: 10;
     }
 
     .player {
@@ -62,6 +95,90 @@ permalink: /live.html
     video::-webkit-media-controls-play-button {
         color: #fff;
     }
+
+    .live-container{
+        display: flex;
+        flex-direction: row;
+
+        height: 70vh;
+        width: 100%;
+    }
+
+    .chat {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: 15px;
+    background-color: #0b1a33;
+    border-radius: 10px;
+    color: #fff;
+    }
+
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .chat-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        border-bottom: 1px solid #1a2b4d;
+    }
+
+    .chat h1, .chat h4 {
+        margin: 0;
+    }
+
+    .chat-lines {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: 10px;
+        background-color: #0b1a33;
+    }
+
+    .chat-line {
+        margin-bottom: 10px;
+    }
+
+    .chat-line p {
+        margin: 0;
+        color: #fff;
+    }
+
+    .username {
+        font-weight: bold;
+        color: #4a90e2;
+        margin-right: 5px;
+    }
+
+    .chat-input {
+        padding: 10px;
+        border-top: 1px solid #1a2b4d;
+    }
+
+    .chat-input-form {
+        display: flex;
+        align-items: center;
+    }
+
+    .chat-enter {
+        flex-grow: 1;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+        background-color: #1a2b4d;
+        color: #fff;
+    }
+
+    .chat-enter:focus {
+        outline: none;
+        background-color: #243b65;
+    }
+
+
 </style>
 
 
@@ -98,4 +215,68 @@ permalink: /live.html
                 
             }
         })
+
+    // URL do servidor WebSocket
+    const socket = new WebSocket('ws://alice.ufsj.edu.br:8081/chat');
+
+    // Variáveis para armazenar o nome do usuário e a mensagem
+    let username = prompt('Qual é o seu nome?');
+    let message = '';
+
+    // Função que envia a mensagem
+    function sendMessage(event) {
+        event.preventDefault(); // Previne o comportamento padrão do formulário
+
+        // Cria um objeto com os dados da mensagem
+        const msgData = {
+            nome: username,
+            mensagem: message
+        };
+
+        // Envia a mensagem como uma string JSON
+        socket.send(JSON.stringify(msgData));
+
+        // Limpa o campo de entrada de mensagem
+        document.querySelector('.chat-enter').value = '';
+    }
+
+    // Função que adiciona uma nova linha de mensagem ao chat
+    function addMessage(msg) {
+        const chatLines = document.querySelector('.chat-lines');
+
+        // Cria o elemento da mensagem
+        const newMessage = document.createElement('div');
+        newMessage.classList.add('chat-line');
+        newMessage.innerHTML = `<p><span class="username">${msg.nome}:</span> ${msg.mensagem}</p>`;
+
+        // Adiciona a nova mensagem no final da lista de mensagens
+        chatLines.appendChild(newMessage);
+
+        // Rola o chat para baixo para mostrar a nova mensagem
+        chatLines.scrollTop = chatLines.scrollHeight;
+    }
+
+    // Event listener para quando o WebSocket abrir a conexão
+    socket.addEventListener('open', () => {
+        console.log('Conectado ao servidor WebSocket');
+    });
+
+    // Event listener para quando uma mensagem é recebida do servidor
+    socket.addEventListener('message', event => {
+        // Parseia a mensagem recebida como JSON
+        const msg = JSON.parse(event.data);
+
+        // Adiciona a mensagem ao chat
+        addMessage(msg);
+    });
+
+    // Event listener para o envio de mensagem no formulário
+    document.querySelector('.chat-input-form').addEventListener('submit', event => {
+        // Captura o valor do input
+        message = document.querySelector('.chat-enter').value;
+
+        // Chama a função que envia a mensagem
+        sendMessage(event);
+    });
+
 </script>