Henry-Hiles/Messaging
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Working

Browse source
This commit is contained in:
Henry Hiles 2022-01-31 10:57:31 -05:00
parent abdffe2e7a
commit 75840914cf
5 changed files with 322 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

52
public/script.js
View file

@ -2,10 +2,13 @@ import moment from "https://jspm.dev/moment"
import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js"
const socket = io(":3000")
const messageButton = document.querySelector("#send")
const menuButton = document.querySelector("#menu")
const nameButton = document.querySelector("#name")
const roomContainer = document.querySelector("#room-container")
const nameInput = document.querySelector("input")
const roomContainer = document.querySelector("#room-container")
const messageInput = document.querySelector("textarea")
const login = document.querySelector("#login")
const nameDisplay = document.querySelector("#name-display")
setInterval(
() =>
@ -25,7 +28,7 @@ const addMessage = (messageObject) => {
.querySelector(".message")
if (isYours) messageDiv.classList.add("message-right")
else if (isSystem) messageDiv.classList.add("system")
if (isSystem) messageDiv.classList.add("system")
messageDiv.querySelector(".message-text").innerText = message
const time = Date.now()
messageDiv.dataset.time = time
@ -35,6 +38,26 @@ const addMessage = (messageObject) => {
document.querySelector("#messages").prepend(messageDiv)
}
if (roomName) {
socket.emit("new-user", roomName, localStorage.getItem("name"))
addMessage({
message: "You joined",
isYours: true,
isSystem: true,
})
}
menuButton.addEventListener("click", () =>
document.querySelector("#rooms").classList.toggle("opened")
)
if (!localStorage.getItem("name")) login.classList.remove("done")
else nameDisplay.innerHTML = localStorage.getItem("name")
document
.querySelector("#change-name")
.addEventListener("click", () => login.classList.remove("done"))
socket.on("room-created", (room) => {
const roomItem = document.createElement("li")
const roomLink = document.createElement("a")
@ -42,18 +65,23 @@ socket.on("room-created", (room) => {
roomLink.innerText = room
roomItem.append(roomLink)
roomContainer.append(roomItem)
if (document.querySelector("#no-rooms"))
document.querySelector("#no-rooms").classList.add("changed")
})
if (nameButton)
nameButton.addEventListener("click", () => {
if (!nameInput.value) return (nameInput.required = true)
document.querySelector("#login").classList.add("done")
socket.emit("new-user", roomName, nameInput.value)
addMessage({
message: "You joined",
isYours: true,
isSystem: true,
})
localStorage.setItem("name", nameInput.value)
nameDisplay.innerHTML = localStorage.getItem("name")
if (roomName) {
socket.emit("name-change", roomName, nameInput.value)
addMessage({
message: `You renamed yourself to ${nameInput.value}`,
isSystem: true,
})
}
})
if (messageButton)
@ -69,8 +97,14 @@ socket.on("chat-message", (message, user) => {
addMessage({ message, user })
})
socket.on("name-changed", (oldName, newName) => {
addMessage({
message: `${oldName} was renamed to ${newName}.`,
isSystem: true,
})
})
socket.on("user-connected", (name) => {
socket.emit("join-room", ROOM_ID)
addMessage({ message: `${name} joined`, isSystem: true })
})