feat(chat): Handle user change
This commit is contained in:
Maieul BOYER
Nigel
parent
0ec2b3007c
commit
f14d618ed5
4 changed files with 363 additions and 351 deletions
1
frontend/src/@types/dom.d.ts
vendored
1
frontend/src/@types/dom.d.ts
vendored
|
|
@ -2,6 +2,7 @@ import { type State } from "ft_state";
|
|||
|
||||
interface CustomEventMap {
|
||||
"ft:pageChange": CustomEvent<string>;
|
||||
"ft:userChange": CustomEvent<{id: user, name: string} | null>;
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { showError } from "@app/toast";
|
||||
import client from "@app/api";
|
||||
import cookie from "js-cookie";
|
||||
import { ensureWindowState } from "@app/utils";
|
||||
import { ensureWindowState, isNullish } from "@app/utils";
|
||||
import { navigateTo } from "./routing";
|
||||
|
||||
|
||||
|
|
@ -40,8 +40,14 @@ export function isLogged(): boolean {
|
|||
}
|
||||
|
||||
export function setUser(newUser: User | null) {
|
||||
let sendEvent = (window.__state.user?.id !== newUser?.id);
|
||||
window.__state.user = newUser;
|
||||
updateHeaderProfile();
|
||||
|
||||
if (sendEvent) {
|
||||
const event = new CustomEvent("ft:userChange", { detail: isNullish(newUser) ? null : { id: newUser.id, name: newUser.name } });
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
export function updateHeaderProfile() {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import { quitChat } from "./chatHelperFunctions/quitChat";
|
|||
import { openMessagePopup } from "./chatHelperFunctions/openMessagePopup";
|
||||
import { windowStateVisable } from "./chatHelperFunctions/windowStateVisable";
|
||||
import { cmdList } from "./chatHelperFunctions/cmdList";
|
||||
import { showInfo } from '../toast';
|
||||
import { showInfo } from "../toast";
|
||||
|
||||
const MAX_SYSTEM_MESSAGES = 10;
|
||||
let inviteMsgFlag: boolean = false;
|
||||
|
|
@ -52,19 +52,33 @@ export function getSocket(): Socket {
|
|||
}
|
||||
|
||||
const chatBox = document.getElementById("chatBox")!;
|
||||
chatBox.classList.add('hidden');
|
||||
chatBox.classList.add("hidden");
|
||||
chatBox.innerHTML = authHtml;
|
||||
|
||||
let socket = getSocket();
|
||||
let blockMessage: boolean;
|
||||
// Listen for the 'connect' event
|
||||
socket.on("connect", async () => {
|
||||
const systemWindow = document.getElementById("system-box") as HTMLDivElement;
|
||||
const sendtextbox = document.getElementById(
|
||||
"t-chat-window"
|
||||
) as HTMLButtonElement;
|
||||
const noGuest = document.getElementById("noGuest") ?? null;
|
||||
const bquit = document.getElementById("b-quit") as HTMLDivElement;
|
||||
const buddies = document.getElementById("div-buddies") as HTMLDivElement;
|
||||
const buttonMessage = document.getElementById("close-modal-message") ?? null;
|
||||
const buttonPro = document.getElementById("close-modal") ?? null;
|
||||
const chatButton = document.querySelector("#chatButton");
|
||||
const chatWindow = document.querySelector("#t-chatbox")!;
|
||||
const clearText = document.getElementById("b-clear") as HTMLButtonElement;
|
||||
const gameMessage = document.getElementById("game-modal") ?? null;
|
||||
const modalmessage = document.getElementById("modal-message") ?? null;
|
||||
const noGuest = document.getElementById("noGuest") ?? null;
|
||||
const notify = document.getElementById("notify") ?? null;
|
||||
const overlay = document.querySelector("#overlay")!;
|
||||
const profilList = document.getElementById("profile-modal") ?? null;
|
||||
const sendButton = document.getElementById("b-send") as HTMLButtonElement;
|
||||
const sendtextbox = document.getElementById(
|
||||
"t-chat-window",
|
||||
) as HTMLButtonElement;
|
||||
const systemWindow = document.getElementById("chat-system-box") as HTMLDivElement;
|
||||
|
||||
function initChatSocket() {
|
||||
let socket = getSocket();
|
||||
let blockMessage: boolean;
|
||||
// Listen for the 'connect' event
|
||||
socket.on("connect", async () => {
|
||||
await waitSocketConnected(socket);
|
||||
const user = getUser()?.name;
|
||||
const userID = getUser()?.id;
|
||||
|
|
@ -101,13 +115,10 @@ socket.on("connect", async () => {
|
|||
messageElement.textContent = `${user}: is connected au server`;
|
||||
systemWindow.appendChild(messageElement);
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
});
|
||||
|
||||
// Listen for messages from the server "MsgObjectServer"
|
||||
socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
|
||||
const systemWindow = document.getElementById("system-box") as HTMLDivElement;
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
});
|
||||
|
||||
// Listen for messages from the server "MsgObjectServer"
|
||||
socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
|
||||
if (socket) {
|
||||
connected(socket);
|
||||
}
|
||||
|
|
@ -128,7 +139,9 @@ socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
|
|||
|
||||
if (chatWindow && data.message.destination === "inviteMsg") {
|
||||
const messageElement = document.createElement("div-private");
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
const chatWindow = document.getElementById(
|
||||
"t-chatbox",
|
||||
) as HTMLDivElement;
|
||||
messageElement.innerHTML = `🏓${data.message.SenderUserName}: ${data.message.innerHtml}`;
|
||||
chatWindow.appendChild(messageElement);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
|
|
@ -145,9 +158,9 @@ socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
|
|||
}
|
||||
systemWindow.scrollTop = systemWindow.scrollHeight;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("profilMessage", (profil: ClientProfil) => {
|
||||
socket.on("profilMessage", (profil: ClientProfil) => {
|
||||
profil.SenderID = getUser()?.id ?? "";
|
||||
profil.SenderName = getUser()?.name ?? "";
|
||||
openProfilePopup(profil);
|
||||
|
|
@ -155,12 +168,11 @@ socket.on("profilMessage", (profil: ClientProfil) => {
|
|||
socket.emit("check_Block_button", profil);
|
||||
actionBtnPopUpInvite(profil, socket);
|
||||
actionBtnPopUpBlock(profil, socket);
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("blockUser", (blocked: ClientProfil) => {
|
||||
socket.on("blockUser", (blocked: ClientProfil) => {
|
||||
let icon = "⛔";
|
||||
if (inviteMsgFlag) {
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
const messageElement = document.createElement("div");
|
||||
if (`${blocked.text}` === "I have un-blocked you") {
|
||||
icon = "💚";
|
||||
|
|
@ -169,91 +181,62 @@ socket.on("blockUser", (blocked: ClientProfil) => {
|
|||
chatWindow.appendChild(messageElement);
|
||||
chatWindow.scrollTop = chatWindow.scrollHeight;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("blockBtn", (data: blockedUnBlocked) => {
|
||||
socket.on("blockBtn", (data: blockedUnBlocked) => {
|
||||
const blockUserBtn = document.querySelector("#popup-b-block");
|
||||
if (blockUserBtn) {
|
||||
let message = "";
|
||||
if (data.userState === "block") {
|
||||
(message = "un-block"), (blockMessage = true);
|
||||
((message = "un-block"), (blockMessage = true));
|
||||
} else {
|
||||
(message = "block"), (blockMessage = false);
|
||||
((message = "block"), (blockMessage = false));
|
||||
}
|
||||
blockUserBtn.textContent = message;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
socket.on("logout", () => {
|
||||
quitChat(socket);
|
||||
});
|
||||
socket.on("logout", () => {
|
||||
quitChat();
|
||||
});
|
||||
|
||||
socket.on("privMessageCopy", (message: string) => {
|
||||
socket.on("privMessageCopy", (message: string) => {
|
||||
addMessage(message);
|
||||
});
|
||||
});
|
||||
|
||||
//receives broadcast of the next GAME
|
||||
socket.on("nextGame", (message: string) => {
|
||||
//receives broadcast of the next GAME
|
||||
socket.on("nextGame", (message: string) => {
|
||||
openMessagePopup(message);
|
||||
});
|
||||
});
|
||||
|
||||
let toggle = false;
|
||||
window.addEventListener("focus", async () => {
|
||||
setTimeout(() => {
|
||||
connected(socket);
|
||||
}, 16);
|
||||
if (window.location.pathname === "/app/chat") {
|
||||
if (socket.id) {
|
||||
await windowStateVisable();
|
||||
}
|
||||
toggle = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("blur", () => {
|
||||
if (socket.id) windowStateHidden();
|
||||
toggle = false;
|
||||
});
|
||||
|
||||
socket.on("listBud", async (myBuddies: string[]) => {
|
||||
const buddies = document.getElementById("div-buddies") as HTMLDivElement;
|
||||
socket.on("listBud", async (myBuddies: string[]) => {
|
||||
const buddies = document.getElementById(
|
||||
"div-buddies",
|
||||
) as HTMLDivElement;
|
||||
listBuddies(socket, buddies, myBuddies);
|
||||
});
|
||||
});
|
||||
|
||||
socket.once("welcome", (data) => {
|
||||
const buddies = document.getElementById("div-buddies") as HTMLDivElement;
|
||||
socket.once("welcome", (data) => {
|
||||
const buddies = document.getElementById(
|
||||
"div-buddies",
|
||||
) as HTMLDivElement;
|
||||
buddies.textContent = "";
|
||||
buddies.innerHTML = "";
|
||||
connected(socket);
|
||||
addMessage(`${data.msg} ` + getUser()?.name);
|
||||
});
|
||||
setTitle("Chat Page");
|
||||
const sendButton = document.getElementById("b-send") as HTMLButtonElement;
|
||||
const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
|
||||
const sendtextbox = document.getElementById(
|
||||
"t-chat-window"
|
||||
) as HTMLButtonElement;
|
||||
const clearText = document.getElementById("b-clear") as HTMLButtonElement;
|
||||
const buddies = document.getElementById("div-buddies") as HTMLDivElement;
|
||||
const bquit = document.getElementById("b-quit") as HTMLDivElement;
|
||||
|
||||
buddies.textContent = "";
|
||||
buddies.innerHTML = "";
|
||||
const buttonPro = document.getElementById("close-modal") ?? null;
|
||||
});
|
||||
buddies.textContent = "";
|
||||
buddies.innerHTML = "";
|
||||
}
|
||||
|
||||
if (buttonPro)
|
||||
buttonPro.addEventListener("click", () => {
|
||||
const profilList = document.getElementById("profile-modal") ?? null;
|
||||
if (profilList) profilList.classList.add("hidden");
|
||||
});
|
||||
|
||||
const buttonMessage = document.getElementById("close-modal-message") ?? null;
|
||||
|
||||
if (buttonMessage)
|
||||
buttonMessage.addEventListener("click", () => {
|
||||
const gameMessage = document.getElementById("game-modal") ?? null;
|
||||
if (gameMessage) gameMessage.classList.add("hidden");
|
||||
const modalmessage = document.getElementById("modal-message") ?? null;
|
||||
if (modalmessage) {
|
||||
modalmessage.innerHTML = "";
|
||||
}
|
||||
|
|
@ -261,8 +244,8 @@ if (buttonMessage)
|
|||
|
||||
// Send button
|
||||
sendButton?.addEventListener("click", () => {
|
||||
const notify = document.getElementById("notify") ?? null;
|
||||
const noGuest = document.getElementById("noGuest") ?? null;
|
||||
let socket = window.__state.chatSock;
|
||||
if (!socket) return;
|
||||
const userId = getUser()?.id;
|
||||
const userAskingToBlock = getUser()?.name;
|
||||
if (sendtextbox && sendtextbox.value.trim()) {
|
||||
|
|
@ -357,7 +340,7 @@ sendButton?.addEventListener("click", () => {
|
|||
break;
|
||||
|
||||
case "@quit":
|
||||
quitChat(socket);
|
||||
quitChat();
|
||||
break;
|
||||
|
||||
default:
|
||||
|
|
@ -385,6 +368,23 @@ sendButton?.addEventListener("click", () => {
|
|||
}
|
||||
});
|
||||
|
||||
let toggle = false;
|
||||
window.addEventListener("focus", async () => {
|
||||
setTimeout(() => {
|
||||
if (window.__state.chatSock) connected(window.__state.chatSock);
|
||||
}, 16);
|
||||
if (window.location.pathname === "/app/chat") {
|
||||
if (window.__state.chatSock?.id) {
|
||||
await windowStateVisable();
|
||||
}
|
||||
toggle = true;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("blur", () => {
|
||||
if (window.__state.chatSock?.id) windowStateHidden();
|
||||
toggle = false;
|
||||
});
|
||||
// Clear Text button
|
||||
clearText?.addEventListener("click", () => {
|
||||
if (chatWindow) {
|
||||
|
|
@ -393,7 +393,7 @@ clearText?.addEventListener("click", () => {
|
|||
});
|
||||
|
||||
bquit?.addEventListener("click", () => {
|
||||
quitChat(socket);
|
||||
quitChat();
|
||||
});
|
||||
|
||||
// Enter key to send message
|
||||
|
|
@ -405,21 +405,26 @@ sendtextbox.addEventListener("keydown", (event) => {
|
|||
}
|
||||
});
|
||||
|
||||
const chatButton = document.querySelector('#chatButton');
|
||||
chatButton!.addEventListener("click", () => {
|
||||
|
||||
const overlay = document.querySelector('#overlay')!;
|
||||
if (chatBox.classList.contains('hidden')) {
|
||||
chatBox.classList.toggle('hidden');
|
||||
overlay.classList.add('opacity-60');
|
||||
if (chatBox.classList.contains("hidden")) {
|
||||
chatBox.classList.toggle("hidden");
|
||||
overlay.classList.add("opacity-60");
|
||||
} else {
|
||||
chatBox.classList.toggle('hidden');
|
||||
overlay.classList.remove('opacity-60');
|
||||
chatBox.classList.toggle("hidden");
|
||||
overlay.classList.remove("opacity-60");
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
if (socket) {
|
||||
connected(socket);
|
||||
document.addEventListener("ft:userChange", (user) => {
|
||||
let newUser: { id: string; name: string } | null = user.detail;
|
||||
window.__state.chatSock?.disconnect();
|
||||
window.__state.chatSock = undefined;
|
||||
if (newUser === null) {
|
||||
quitChat();
|
||||
// logged out
|
||||
// hide chat button
|
||||
} else {
|
||||
// user has changed
|
||||
initChatSocket();
|
||||
}
|
||||
});
|
||||
|
|
@ -10,7 +10,7 @@ import { setTitle } from "@app/routing";
|
|||
* @param socket
|
||||
*/
|
||||
|
||||
export function quitChat (socket: Socket) {
|
||||
export function quitChat () {
|
||||
const chatBox = document.getElementById("chatBox")!;
|
||||
const overlay = document.querySelector('#overlay')!;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue