From a03db8ea54747450e83df2feb140d20b54a84793 Mon Sep 17 00:00:00 2001 From: Aiken Tine Ahac Date: Sat, 3 Dec 2022 15:56:15 +0100 Subject: [PATCH] Ura - 03. 12. 2022 --- index.js | 1 + static/index.html | 9 ++++--- static/script.js | 31 ++++++++++++++++++++---- static/styles.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 95 insertions(+), 7 deletions(-) create mode 100644 static/styles.css diff --git a/index.js b/index.js index 303ed86..50db9d7 100644 --- a/index.js +++ b/index.js @@ -15,6 +15,7 @@ io.on('connection', (socket) => { socket.on('name', (n) => { console.log(n); name = n; + socket.broadcast.emit('join', name); }); socket.on('text', (text) => { diff --git a/static/index.html b/static/index.html index 55eb850..8c95cf9 100644 --- a/static/index.html +++ b/static/index.html @@ -4,13 +4,16 @@ Document + - - -
+ + + + + diff --git a/static/script.js b/static/script.js index 1c74895..7aef9d6 100644 --- a/static/script.js +++ b/static/script.js @@ -14,16 +14,39 @@ socket.on('connect', () => { socket.on('text', (text) => { console.log(text); - addText(text); + addText(text.name, text.text, false); +}); + +socket.on('join', (name) => { + console.log(`${name} has joined the chat`); + joinedChat(name); }); button.addEventListener('click', () => { socket.emit('text', input.value); - addText(input.value); + addText(name, input.value, true); + input.value = ''; }); -function addText(text) { +function addText(name, text, mine) { + const bubble = document.createElement('div'); const p = document.createElement('p'); - p.innerText = text; + p.innerHTML = `${name}: ${text}`; + + bubble.classList.add('message-bubble'); + + if (mine) { + bubble.classList.add('my-message'); + } + + bubble.appendChild(p); + chat.appendChild(bubble); +} + +function joinedChat(name) { + const p = document.createElement('p'); + p.innerText = `${name} has joined the chat`; + p.style.fontWeight = 'bold'; + p.style.color = 'white'; chat.appendChild(p); } diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..2918286 --- /dev/null +++ b/static/styles.css @@ -0,0 +1,61 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + /* justify-content: center; */ + + height: 100vh; + width: 100vw; + + background-color: #252525; + + margin: 0; +} + +chatinput { + display: flex; + flex-direction: row; + bottom: 0; + position: absolute; + margin-bottom: 10px; +} + +#send { + margin-left: 10px; + background-color: #247ba0; + color: white; + border: 0px; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; +} + +#send:hover { + cursor: pointer; + box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, + rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, + rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; + transition: 0.3s; +} + +#input { + background-color: transparent; + color: white; + border: 1px solid white; + border-radius: 5px; + padding-left: 5px; + padding-right: 5px; +} + +.message-bubble { + background-color: #984edf; + padding-left: 10px; + padding-right: 10px; + + color: white; + + border-radius: 5px; +} + +.my-message { + background-color: #247ba0; +}