From 0830391eee80831ae03dbc7e6a950366adc91247 Mon Sep 17 00:00:00 2001 From: TheCodeTherapy Date: Mon, 11 Sep 2023 13:43:43 +0100 Subject: [PATCH 1/2] refactor and redesign of the 3d-web-text-chat package --- .../src/chat-ui/TextChatUI.tsx | 42 ++++ .../TextChatUIComponent.module copy.css | 203 ++++++++++++++++++ .../ChatPanel/TextChatUIComponent.module.css} | 166 +++++++++----- .../ChatPanel/TextChatUIComponent.tsx} | 145 +++++-------- .../Input/InputBox.module.css} | 11 +- .../Input/InputBox.tsx} | 9 +- .../components/Message/Message.module.css | 19 ++ .../Message/Message.tsx} | 2 +- .../components/Messages/Messages.module.css | 17 ++ .../Messages/Messages.tsx} | 9 +- .../src/chat-ui/{chat.svg => icons/Chat.svg} | 0 .../PaperPlane.svg} | 0 .../src/chat-ui/{pin.svg => icons/Pin.svg} | 0 .../src/chat-ui/images/gradient.ts | 2 + .../src/chat-ui/message.module.css | 10 - .../src/chat-ui/messages.module.css | 8 - packages/3d-web-text-chat/src/index.ts | 2 +- 17 files changed, 473 insertions(+), 172 deletions(-) create mode 100644 packages/3d-web-text-chat/src/chat-ui/TextChatUI.tsx create mode 100644 packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css rename packages/3d-web-text-chat/src/chat-ui/{text-chat-ui.module.css => components/ChatPanel/TextChatUIComponent.module.css} (52%) rename packages/3d-web-text-chat/src/chat-ui/{text-chat-ui.tsx => components/ChatPanel/TextChatUIComponent.tsx} (58%) rename packages/3d-web-text-chat/src/chat-ui/{input-box.module.css => components/Input/InputBox.module.css} (82%) rename packages/3d-web-text-chat/src/chat-ui/{input-box.tsx => components/Input/InputBox.tsx} (90%) create mode 100644 packages/3d-web-text-chat/src/chat-ui/components/Message/Message.module.css rename packages/3d-web-text-chat/src/chat-ui/{message.tsx => components/Message/Message.tsx} (88%) create mode 100644 packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.module.css rename packages/3d-web-text-chat/src/chat-ui/{messages.tsx => components/Messages/Messages.tsx} (79%) rename packages/3d-web-text-chat/src/chat-ui/{chat.svg => icons/Chat.svg} (100%) rename packages/3d-web-text-chat/src/chat-ui/{paper-plane-solid.svg => icons/PaperPlane.svg} (100%) rename packages/3d-web-text-chat/src/chat-ui/{pin.svg => icons/Pin.svg} (100%) create mode 100644 packages/3d-web-text-chat/src/chat-ui/images/gradient.ts delete mode 100644 packages/3d-web-text-chat/src/chat-ui/message.module.css delete mode 100644 packages/3d-web-text-chat/src/chat-ui/messages.module.css diff --git a/packages/3d-web-text-chat/src/chat-ui/TextChatUI.tsx b/packages/3d-web-text-chat/src/chat-ui/TextChatUI.tsx new file mode 100644 index 00000000..039e6d18 --- /dev/null +++ b/packages/3d-web-text-chat/src/chat-ui/TextChatUI.tsx @@ -0,0 +1,42 @@ +import { createRef, forwardRef } from "react"; +import { flushSync } from "react-dom"; +import { createRoot, Root } from "react-dom/client"; + +import { ChatUIComponent } from "./components/ChatPanel/TextChatUIComponent"; + +const ForwardedChatUIComponent = forwardRef(ChatUIComponent); + +export type ChatUIInstance = { + addMessage: (username: string, message: string) => void; +}; + +export class TextChatUI { + private root: Root; + private appRef: React.RefObject = createRef(); + + public addTextMessage(username: string, message: string) { + if (this.appRef.current) this.appRef.current.addMessage(username, message); + } + + private container = document.getElementById("text-chat-ui")!; + + constructor( + private clientname: string, + private sendMessageToServerMethod: (message: string) => void, + ) { + this.root = createRoot(this.container); + this.sendMessageToServerMethod = sendMessageToServerMethod; + } + + init() { + flushSync(() => + this.root.render( + , + ), + ); + } +} diff --git a/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css new file mode 100644 index 00000000..da55c077 --- /dev/null +++ b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css @@ -0,0 +1,203 @@ +.textChat { + z-index: -1; + position: fixed; + + display: flex; + flex-direction: column; + justify-content: space-between; + + bottom: 45px; + left: 60px; + + width: 400px; + min-width: 400px; + max-height: 500px; + + color: #ffffff; + padding: 7px; + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + opacity: 0; + transform: translateX(-100%); + transition: + opacity 0.25s ease-in-out, + transform 0.2s ease-in-out; +} + +.fadeIn { + transform: translateX(0%); + opacity: 1; +} + +.fadeOut { + transform: translateX(calc(-100% - 72px)); + opacity: 0.6; +} + +.controls { + position: absolute; + right: 0px; + top: 2px; +} + +.openTab { + z-index: 1001; + position: fixed; + width: 42px; + height: 42px; + border-radius: 50%; + bottom: 12px; + left: 12px; + background-color: rgba(0, 0, 0, 0.8); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); + border: 1px solid rgba(255, 255, 255, 0.21); + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; +} + +.openTab img { + filter: invert(60%); + width: 35px; + height: 35px; + transition: all 0.3s ease-in-out; + position: relative; + top: 3px; + left: 4px; + transform: scale(0.7); +} + +.stickyButton { + z-index: 1002; + position: fixed; + width: 42px; + height: 42px; + border-radius: 50%; + + bottom: 62px; + left: 12px; + + background-color: rgba(0, 0, 0, 0.8); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); + border: 1px solid rgba(255, 255, 255, 0.21); + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + transition: border 0.2s ease-in-out; + cursor: pointer; +} + +.stickyButton:hover { + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.stickyButtonEnabled { + z-index: 1002; + position: fixed; + width: 42px; + height: 42px; + border-radius: 50%; + + bottom: 62px; + left: 12px; + + background-color: rgba(0, 0, 0, 0.8); + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); + border: 1px solid rgba(255, 255, 255, 0.21); + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + border: 1px solid rgba(21, 210, 21, 0.9); + transition: border 0.2s ease-in-out; + cursor: pointer; +} + +.stickyButtonEnabled:hover { + border: 1px solid rgba(55, 255, 55, 1); +} + +.stickyButton img { + /* width: 25px; + height: 25px; + position: relative; + top: 1px; + left: 0px; + filter: invert(50%); + transform: scale(0.7); + transition: all 0.3s ease-in-out; */ + + filter: invert(50%); + width: 31px; + height: 31px; + position: relative; + top: 7px; + left: 6px; + transform: scale(0.7); + transition: all 0.3s ease-in-out; +} + +.stickyButton:hover img { + filter: invert(70%); + transform: scale(0.8); +} + +.stickyButtonEnabled img { + filter: invert(50%); + width: 31px; + height: 31px; + position: relative; + top: 7px; + left: 6px; + transform: scale(0.7); + transition: all 0.3s ease-in-out; +} + +.stickyButtonEnabled:hover img { + filter: invert(70%); + transform: scale(0.8); +} + +.controls .closeButton { + font-family: "arial black"; + font-weight: 900; + color: #aaaaaa; + position: absolute; + top: 3px; + right: 3px; + width: 25px; + height: 24px; + background-color: rgba(0, 0, 0, 0.9); + line-height: 24px; + text-align: center; + vertical-align: middle; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.12); + transition: border 0.2s ease-in-out; + cursor: pointer; +} + +.closeButton:hover { + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.messagesWrapper { + position: relative; + height: 500px; + min-height: 500px; + max-height: 500px; + -webkit-mask-image: url("http://localhost:8080/assets/chat-gradient.png"); + -webkit-mask-size: contain; + -webkit-mask-repeat: repeat-x; + mask-image: url("http://localhost:8080/assets/chat-gradient.png"); + mask-size: contain; + mask-repeat: repeat-x; + direction: rtl; +} diff --git a/packages/3d-web-text-chat/src/chat-ui/text-chat-ui.module.css b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module.css similarity index 52% rename from packages/3d-web-text-chat/src/chat-ui/text-chat-ui.module.css rename to packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module.css index 3c72b4af..06312349 100644 --- a/packages/3d-web-text-chat/src/chat-ui/text-chat-ui.module.css +++ b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module.css @@ -1,3 +1,12 @@ +.uiHover { + width: 475px; + min-width: 475px; + min-height: 90px; + position: fixed; + bottom: 0; + left: 0; +} + .textChat { z-index: -1; position: fixed; @@ -6,20 +15,15 @@ flex-direction: column; justify-content: space-between; - top: 12px; - left: 12px; + bottom: 45px; + left: 60px; + width: 400px; min-width: 400px; - - height: 50%; - min-height: 50%; + max-height: 500px; color: #ffffff; - background-color: rgba(7, 7, 7, 0.85); - backdrop-filter: blur(12px); - padding: 7px; - border-radius: 7px 14px 0px 7px; -webkit-user-select: none; -ms-user-select: none; @@ -38,7 +42,7 @@ } .fadeOut { - transform: translateX(calc(-100% - 12px)); + transform: translateX(calc(-100% - 72px)); opacity: 0.6; } @@ -48,34 +52,45 @@ top: 2px; } -.controls .openTab { - background-color: rgba(7, 7, 7, 0.85); - border-radius: 0 7px 7px 0; - width: 30px; - height: 51px; - position: relative; - top: calc(50vh - 39px); - left: 30px; +.openTab { + background-color: rgba(0, 0, 0, 0.8); + border-radius: 50%; + width: 42px; + height: 42px; + position: fixed; + bottom: 12px; + left: 12px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); + border: 1px solid rgba(255, 255, 255, 0.21); + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + z-index: 1001; } -.controls .openTab img { +.openTab img { filter: invert(60%); - width: 30px; - height: 30px; + width: 35px; + height: 35px; transition: all 0.3s ease-in-out; position: relative; - top: 10px; - left: -1px; + top: 3px; + left: 4px; transform: scale(0.7); } -.controls .stickyButton { +.stickyButton { + z-index: 1002; position: absolute; - top: 3px; - right: 32px; - width: 25px; - height: 24px; - background-color: rgba(0, 0, 0, 0.9); + + left: 42px; + bottom: 42px; + + width: 23px; + height: 22px; + + background-color: rgba(0, 0, 0, 0.8); line-height: 24px; text-align: center; vertical-align: middle; @@ -83,35 +98,78 @@ border: 1px solid rgba(255, 255, 255, 0.12); transition: border 0.2s ease-in-out; cursor: pointer; + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + opacity: 1; + transition: all 0.3s ease; } -.controls .stickyButton:hover { - border: 1px solid rgba(255, 255, 255, 0.3); +.stickyButtonFadeOut { + z-index: 1002; + position: absolute; + + left: 42px; + bottom: 42px; + + width: 23px; + height: 22px; + + background-color: rgba(0, 0, 0, 0.8); + line-height: 24px; + text-align: center; + vertical-align: middle; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.12); + transition: border 0.2s ease-in-out; + cursor: pointer; + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; } -.controls .stickyButtonEnabled { +.stickyButtonEnabled { + z-index: 1002; position: absolute; - top: 3px; - right: 32px; - width: 25px; - height: 24px; + + left: 42px; + bottom: 42px; + + width: 23px; + height: 22px; + background-color: rgba(0, 0, 0, 0.9); line-height: 24px; text-align: center; vertical-align: middle; border-radius: 50%; - border: 1px solid rgba(21, 210, 21, 0.9); + border: 1px solid rgba(21, 250, 21, 0.5); transition: border 0.2s ease-in-out; cursor: pointer; + + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.stickyButton:hover { + border: 1px solid rgba(255, 255, 255, 0.3); } -.controls .stickyButtonEnabled:hover { +.stickyButtonEnabled:hover { border: 1px solid rgba(55, 255, 55, 1); } -.controls .stickyButton img { - width: 25px; - height: 25px; +.stickyButton img { + width: 23px; + height: 22px; position: relative; top: 1px; left: 0px; @@ -120,14 +178,9 @@ transition: all 0.3s ease-in-out; } -.controls .stickyButton:hover img { - filter: invert(70%); - transform: scale(0.8); -} - -.controls .stickyButtonEnabled img { - width: 25px; - height: 25px; +.stickyButtonEnabled img { + width: 23px; + height: 22px; position: relative; top: 1px; left: 0px; @@ -136,7 +189,12 @@ transition: all 0.3s ease-in-out; } -.controls .stickyButtonEnabled:hover img { +.stickyButton:hover img { + filter: invert(70%); + transform: scale(0.8); +} + +.stickyButtonEnabled:hover img { filter: invert(70%); transform: scale(0.8); } @@ -163,3 +221,11 @@ .closeButton:hover { border: 1px solid rgba(255, 255, 255, 0.3); } + +.messagesWrapper { + position: relative; + height: 500px; + min-height: 500px; + max-height: 500px; + direction: rtl; +} diff --git a/packages/3d-web-text-chat/src/chat-ui/text-chat-ui.tsx b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.tsx similarity index 58% rename from packages/3d-web-text-chat/src/chat-ui/text-chat-ui.tsx rename to packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.tsx index 17648fe4..6ba9ffdb 100644 --- a/packages/3d-web-text-chat/src/chat-ui/text-chat-ui.tsx +++ b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.tsx @@ -1,35 +1,30 @@ import { - createRef, - forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, + ForwardRefRenderFunction, } from "react"; -import { flushSync } from "react-dom"; -import { createRoot, Root } from "react-dom/client"; -import ChatIcon from "./chat.svg"; -import { useClickOutside } from "./helpers"; -import InputBox from "./input-box"; -import Messages from "./messages"; -import PinButton from "./pin.svg"; -import styles from "./text-chat-ui.module.css"; - -const MAX_MESSAGES = 50; -const SECONDS_TO_FADE_OUT = 6; - -type ChatUIInstance = { - addMessage: (username: string, message: string) => void; -}; +import { useClickOutside } from "../../Helpers"; +import ChatIcon from "../../icons/Chat.svg"; +import PinButton from "../../icons/Pin.svg"; +import { gradient } from "../../images/gradient"; +import { type ChatUIInstance } from "../../TextChatUI"; +import { InputBox } from "../Input/InputBox"; +import { Messages } from "../Messages/Messages"; +import styles from "./TextChatUIComponent.module.css"; type ChatUIProps = { clientName: string; sendMessageToServer: (message: string) => void; }; -const ChatUIComponent: React.ForwardRefRenderFunction = ( +const MAX_MESSAGES = 50; +const SECONDS_TO_FADE_OUT = 6; + +export const ChatUIComponent: ForwardRefRenderFunction = ( props: ChatUIProps, ref, ) => { @@ -38,6 +33,7 @@ const ChatUIComponent: React.ForwardRefRenderFunction { + setOpenHovered(false); if (!isFocused && !isSticky && isVisible) { startHideTimeout(); } }; + const handleMouseEnter = () => { + setOpenHovered(true); + if (!isVisible) setIsVisible(true); + }; + const chatPanelRef = useClickOutside(() => { if (isFocused) { setIsFocused(false); @@ -101,7 +103,13 @@ const ChatUIComponent: React.ForwardRefRenderFunction { setPanelStyle(isVisible || isFocused || isSticky ? styles.fadeIn : styles.fadeOut); - setStickyStyle(isSticky ? styles.stickyButtonEnabled : styles.stickyButton); + setStickyStyle( + isSticky + ? styles.stickyButtonEnabled + : isOpenHovered + ? styles.stickyButton + : styles.stickyButtonFadeOut, + ); if (chatPanelRef.current && chatPanelRef.current.style.zIndex !== "100") { // we just want to change the z-index after the browser has the chance // to apply the CSS to the SVG icons @@ -109,7 +117,7 @@ const ChatUIComponent: React.ForwardRefRenderFunction { setMessages((prev) => { @@ -143,79 +151,40 @@ const ChatUIComponent: React.ForwardRefRenderFunction -
-
{ - if (!isVisible) setIsVisible(true); - }} - onClick={hide} - > - -
-
- -
+
+
+ +
+
+ +
+
{ - if (isSticky) setSticky(false); - hide(); + className={styles.messagesWrapper} + style={{ + WebkitMaskImage: `url(data:image/png;base64,${gradient})`, + maskImage: `url(data:image/png;base64,${gradient})`, + WebkitMaskRepeat: "repeat-x", + maskRepeat: "repeat-x", + WebkitMaskSize: "contain", + maskSize: "contain", }} > - X +
+
- -
); }; - -const ForwardedChatUIComponent = forwardRef(ChatUIComponent); - -export class TextChatUI { - private root: Root; - private appRef: React.RefObject = createRef(); - - public addTextMessage(username: string, message: string) { - if (this.appRef.current) this.appRef.current.addMessage(username, message); - } - - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - private container = document.getElementById("text-chat-ui")!; - - constructor( - private clientname: string, - private sendMessageToServerMethod: (message: string) => void, - ) { - this.root = createRoot(this.container); - this.sendMessageToServerMethod = sendMessageToServerMethod; - } - - init() { - flushSync(() => - this.root.render( - , - ), - ); - } -} diff --git a/packages/3d-web-text-chat/src/chat-ui/input-box.module.css b/packages/3d-web-text-chat/src/chat-ui/components/Input/InputBox.module.css similarity index 82% rename from packages/3d-web-text-chat/src/chat-ui/input-box.module.css rename to packages/3d-web-text-chat/src/chat-ui/components/Input/InputBox.module.css index ebd5a728..4df5dab5 100644 --- a/packages/3d-web-text-chat/src/chat-ui/input-box.module.css +++ b/packages/3d-web-text-chat/src/chat-ui/components/Input/InputBox.module.css @@ -1,8 +1,11 @@ .inputWrapper { display: flex; align-items: center; - border-top: 1px solid rgba(255, 255, 255, 0.2); - padding-top: 7px; +} + +.inputWrapper input { + /* backdrop-filter: blur(12px); */ + background-color: rgba(0, 0, 0, 0.7); } .chatInput { @@ -29,7 +32,7 @@ justify-content: center; } -.sendButton .svgIcon svg { +.sendButton .svgIcon img { width: 25px; height: 25px; position: relative; @@ -40,7 +43,7 @@ transition: all 0.3s ease-in-out; } -.sendButton .svgIcon:hover svg { +.sendButton .svgIcon:hover img { filter: invert(70%); transform: scale(0.8); } diff --git a/packages/3d-web-text-chat/src/chat-ui/input-box.tsx b/packages/3d-web-text-chat/src/chat-ui/components/Input/InputBox.tsx similarity index 90% rename from packages/3d-web-text-chat/src/chat-ui/input-box.tsx rename to packages/3d-web-text-chat/src/chat-ui/components/Input/InputBox.tsx index e17ae453..1719ebcb 100644 --- a/packages/3d-web-text-chat/src/chat-ui/input-box.tsx +++ b/packages/3d-web-text-chat/src/chat-ui/components/Input/InputBox.tsx @@ -1,7 +1,8 @@ import { forwardRef, KeyboardEvent, useImperativeHandle, useRef, useState } from "react"; -import styles from "./input-box.module.css"; -import SendButton from "./paper-plane-solid.svg"; +import SendButton from "../../icons/PaperPlane.svg"; + +import styles from "./InputBox.module.css"; type InputBoxProps = { onSendMessage: (message: string) => void; @@ -9,7 +10,7 @@ type InputBoxProps = { setFocus: () => void; }; -const InputBox = forwardRef<{ focusInput: () => void } | null, InputBoxProps>( +export const InputBox = forwardRef<{ focusInput: () => void } | null, InputBoxProps>( ({ onSendMessage, hide, setFocus }, ref) => { const inputRef = useRef(null); const buttonRef = useRef(null); @@ -66,5 +67,3 @@ const InputBox = forwardRef<{ focusInput: () => void } | null, InputBoxProps>( }, ); InputBox.displayName = "InputBox"; - -export default InputBox; diff --git a/packages/3d-web-text-chat/src/chat-ui/components/Message/Message.module.css b/packages/3d-web-text-chat/src/chat-ui/components/Message/Message.module.css new file mode 100644 index 00000000..9dc26499 --- /dev/null +++ b/packages/3d-web-text-chat/src/chat-ui/components/Message/Message.module.css @@ -0,0 +1,19 @@ +.messageContainer { + padding: 7px; + overflow-x: hidden; + background-color: rgba(0, 0, 0, 0.7); + /* backdrop-filter: blur(3px); */ + border-radius: 9px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); + font-weight: 700; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); + direction: ltr; + margin: 12px auto 12px 2px; + width: fit-content; + margin-right: auto; +} + +.userName { + color: #cccccc; + font-weight: 900; +} diff --git a/packages/3d-web-text-chat/src/chat-ui/message.tsx b/packages/3d-web-text-chat/src/chat-ui/components/Message/Message.tsx similarity index 88% rename from packages/3d-web-text-chat/src/chat-ui/message.tsx rename to packages/3d-web-text-chat/src/chat-ui/components/Message/Message.tsx index cac674c4..71378d35 100644 --- a/packages/3d-web-text-chat/src/chat-ui/message.tsx +++ b/packages/3d-web-text-chat/src/chat-ui/components/Message/Message.tsx @@ -1,6 +1,6 @@ import { FC } from "react"; -import styles from "./message.module.css"; +import styles from "./Message.module.css"; type MessageProps = { username: string; diff --git a/packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.module.css b/packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.module.css new file mode 100644 index 00000000..98f4bf12 --- /dev/null +++ b/packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.module.css @@ -0,0 +1,17 @@ +.messagesContainer { + position: absolute; + overflow-y: auto; + z-index: 1000; + bottom: 0px; + left: -1px; + direction: rtl; + max-height: inherit; + /* scrollbar-width: thin; + scrollbar-color: transparent transparent; */ +} + +.messagesContainer::-webkit-scrollbar { + width: 4; + height: 0; + display: none; +} diff --git a/packages/3d-web-text-chat/src/chat-ui/messages.tsx b/packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.tsx similarity index 79% rename from packages/3d-web-text-chat/src/chat-ui/messages.tsx rename to packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.tsx index 6a936052..3c2e4dfd 100644 --- a/packages/3d-web-text-chat/src/chat-ui/messages.tsx +++ b/packages/3d-web-text-chat/src/chat-ui/components/Messages/Messages.tsx @@ -1,13 +1,14 @@ import { FC, useEffect, useRef } from "react"; -import Message from "./message"; -import styles from "./messages.module.css"; +import Message from "../Message/Message"; + +import styles from "./Messages.module.css"; type MessagesProps = { messages: Array<{ username: string; message: string }>; }; -const Messages: FC = ({ messages }) => { +export const Messages: FC = ({ messages }) => { const messagesEndRef = useRef(null); useEffect(() => { @@ -26,5 +27,3 @@ const Messages: FC = ({ messages }) => {
); }; - -export default Messages; diff --git a/packages/3d-web-text-chat/src/chat-ui/chat.svg b/packages/3d-web-text-chat/src/chat-ui/icons/Chat.svg similarity index 100% rename from packages/3d-web-text-chat/src/chat-ui/chat.svg rename to packages/3d-web-text-chat/src/chat-ui/icons/Chat.svg diff --git a/packages/3d-web-text-chat/src/chat-ui/paper-plane-solid.svg b/packages/3d-web-text-chat/src/chat-ui/icons/PaperPlane.svg similarity index 100% rename from packages/3d-web-text-chat/src/chat-ui/paper-plane-solid.svg rename to packages/3d-web-text-chat/src/chat-ui/icons/PaperPlane.svg diff --git a/packages/3d-web-text-chat/src/chat-ui/pin.svg b/packages/3d-web-text-chat/src/chat-ui/icons/Pin.svg similarity index 100% rename from packages/3d-web-text-chat/src/chat-ui/pin.svg rename to packages/3d-web-text-chat/src/chat-ui/icons/Pin.svg diff --git a/packages/3d-web-text-chat/src/chat-ui/images/gradient.ts b/packages/3d-web-text-chat/src/chat-ui/images/gradient.ts new file mode 100644 index 00000000..8d5ccb82 --- /dev/null +++ b/packages/3d-web-text-chat/src/chat-ui/images/gradient.ts @@ -0,0 +1,2 @@ +export const gradient = + "iVBORw0KGgoAAAANSUhEUgAAAAEAAAH0CAYAAAD8PUeXAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+2SrVUHOwg4pChCkILoiKOWoUiVAi1QqsOJpf+QZOGJMXFUXAtOPizWHVwcdbVwVUQBH9AXF2cFF2kxO+SQosY7zju4b3vfbn7DvA3Kkw1u8YBVbOMdDIhZHOrQvAVvQjRHENMYqY+J4opeI6ve/j4fhfnWd51f44+JW8ywCcQzzLdsIg3iKc3LZ3zPnGElSSF+Jw4ZtAFiR+5Lrv8xrnosJ9nRoxMep44QiwUO1juYFYyVOIp4qiiapTvz7qscN7irFZqrHVP/sJwXltZ5jqtYSSxiCWIECCjhjIqsBCnXSPFRJrOEx7+IccvkksmVxmMHAuoQoXk+MH/4HdvzcLkhJsUTgDdL7b9MQIEd4Fm3ba/j227eQIEnoErre2vNoCZT9LrbS16BPRvAxfXbU3eAy53gMEnXTIkRwrQ8hcKwPsZfVMOGLgFQmtu31rnOH0AMtSr1A1wcAiMFil73ePdPZ19+7em1b8fjlxysniMtzsAAAAGYktHRAAAAAAAAPlDu38AAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfnCQoMNiFpV3vAAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAW1JREFUSMftlLFuwzAMRO8ekP7/x5pUM6UDScVGi6AdumUII5u0xcc7S5IkAGwJG7BtJBssIxC2wLKhLm1sg23tlXf46d4vA8aWwRid9tCUVLsWU6ZuzTIyvZqF8RlBCAw2SBZ9ZU9WxYjsWmLVDXD9z27dro0G+Peo1JZn6Etis/UoBuY0dg85+zF1tpqst6DuT6LqJIvOXV4qlcZGYojQFpRnG33v7+TsgX3PXthqAiXR3m16KVlEeRY1m5qooE6aAwVdLtnu1Nl6XbITtbevIo/wr8lfUU62LarrW0DFgVFJWJIVaDtWGidqm7Ae2/31bJ6jMz0L+Szo2U1n3lH6Z4RX+FvG8W7/9vFQZi3fT/G2Yx009TlPcSXqy2NgvA8j7THNaabH4/FAkt7hHd7hHf4t3D/vd3JlstZKMjPJlYuVa5GZaxJrVd1nlayuy8hFZBxEZJIRWZcZmcRxBLlWEEckkUcQsUIft9vtC/MzaCwwmDyNAAAAAElFTkSuQmCC"; diff --git a/packages/3d-web-text-chat/src/chat-ui/message.module.css b/packages/3d-web-text-chat/src/chat-ui/message.module.css deleted file mode 100644 index d1c2d700..00000000 --- a/packages/3d-web-text-chat/src/chat-ui/message.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.messageContainer { - border-bottom: 1px solid rgba(128, 128, 128, 0.21); - padding: 5px 0px; - overflow-x: hidden; -} - -.userName { - color: #cccccc; - font-weight: 900; -} diff --git a/packages/3d-web-text-chat/src/chat-ui/messages.module.css b/packages/3d-web-text-chat/src/chat-ui/messages.module.css deleted file mode 100644 index 5b68d02e..00000000 --- a/packages/3d-web-text-chat/src/chat-ui/messages.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.messagesContainer { - position: relative; - top: 30px; - max-height: 420px; - overflow-y: auto; - padding-left: 7px; - border-top: 1px solid rgba(255, 255, 255, 0.21); -} diff --git a/packages/3d-web-text-chat/src/index.ts b/packages/3d-web-text-chat/src/index.ts index 16c8cd45..bd085645 100644 --- a/packages/3d-web-text-chat/src/index.ts +++ b/packages/3d-web-text-chat/src/index.ts @@ -1,4 +1,4 @@ -export { TextChatUI } from "./chat-ui/text-chat-ui"; +export { TextChatUI } from "./chat-ui/TextChatUI"; export * from "./chat-network/ChatNetworkingServer"; export * from "./chat-network/ChatNetworkingClient"; export * from "./chat-network/ReconnectingWebsocket"; From d07c6c1d5a02434c91f19700c397f121415cd889 Mon Sep 17 00:00:00 2001 From: TheCodeTherapy Date: Mon, 11 Sep 2023 16:10:56 +0100 Subject: [PATCH 2/2] removes unused file --- .../TextChatUIComponent.module copy.css | 203 ------------------ 1 file changed, 203 deletions(-) delete mode 100644 packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css diff --git a/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css b/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css deleted file mode 100644 index da55c077..00000000 --- a/packages/3d-web-text-chat/src/chat-ui/components/ChatPanel/TextChatUIComponent.module copy.css +++ /dev/null @@ -1,203 +0,0 @@ -.textChat { - z-index: -1; - position: fixed; - - display: flex; - flex-direction: column; - justify-content: space-between; - - bottom: 45px; - left: 60px; - - width: 400px; - min-width: 400px; - max-height: 500px; - - color: #ffffff; - padding: 7px; - - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - - opacity: 0; - transform: translateX(-100%); - transition: - opacity 0.25s ease-in-out, - transform 0.2s ease-in-out; -} - -.fadeIn { - transform: translateX(0%); - opacity: 1; -} - -.fadeOut { - transform: translateX(calc(-100% - 72px)); - opacity: 0.6; -} - -.controls { - position: absolute; - right: 0px; - top: 2px; -} - -.openTab { - z-index: 1001; - position: fixed; - width: 42px; - height: 42px; - border-radius: 50%; - bottom: 12px; - left: 12px; - background-color: rgba(0, 0, 0, 0.8); - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); - border: 1px solid rgba(255, 255, 255, 0.21); - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; -} - -.openTab img { - filter: invert(60%); - width: 35px; - height: 35px; - transition: all 0.3s ease-in-out; - position: relative; - top: 3px; - left: 4px; - transform: scale(0.7); -} - -.stickyButton { - z-index: 1002; - position: fixed; - width: 42px; - height: 42px; - border-radius: 50%; - - bottom: 62px; - left: 12px; - - background-color: rgba(0, 0, 0, 0.8); - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); - border: 1px solid rgba(255, 255, 255, 0.21); - - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - - transition: border 0.2s ease-in-out; - cursor: pointer; -} - -.stickyButton:hover { - border: 1px solid rgba(255, 255, 255, 0.3); -} - -.stickyButtonEnabled { - z-index: 1002; - position: fixed; - width: 42px; - height: 42px; - border-radius: 50%; - - bottom: 62px; - left: 12px; - - background-color: rgba(0, 0, 0, 0.8); - box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); - border: 1px solid rgba(255, 255, 255, 0.21); - - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - - border: 1px solid rgba(21, 210, 21, 0.9); - transition: border 0.2s ease-in-out; - cursor: pointer; -} - -.stickyButtonEnabled:hover { - border: 1px solid rgba(55, 255, 55, 1); -} - -.stickyButton img { - /* width: 25px; - height: 25px; - position: relative; - top: 1px; - left: 0px; - filter: invert(50%); - transform: scale(0.7); - transition: all 0.3s ease-in-out; */ - - filter: invert(50%); - width: 31px; - height: 31px; - position: relative; - top: 7px; - left: 6px; - transform: scale(0.7); - transition: all 0.3s ease-in-out; -} - -.stickyButton:hover img { - filter: invert(70%); - transform: scale(0.8); -} - -.stickyButtonEnabled img { - filter: invert(50%); - width: 31px; - height: 31px; - position: relative; - top: 7px; - left: 6px; - transform: scale(0.7); - transition: all 0.3s ease-in-out; -} - -.stickyButtonEnabled:hover img { - filter: invert(70%); - transform: scale(0.8); -} - -.controls .closeButton { - font-family: "arial black"; - font-weight: 900; - color: #aaaaaa; - position: absolute; - top: 3px; - right: 3px; - width: 25px; - height: 24px; - background-color: rgba(0, 0, 0, 0.9); - line-height: 24px; - text-align: center; - vertical-align: middle; - border-radius: 50%; - border: 1px solid rgba(255, 255, 255, 0.12); - transition: border 0.2s ease-in-out; - cursor: pointer; -} - -.closeButton:hover { - border: 1px solid rgba(255, 255, 255, 0.3); -} - -.messagesWrapper { - position: relative; - height: 500px; - min-height: 500px; - max-height: 500px; - -webkit-mask-image: url("http://localhost:8080/assets/chat-gradient.png"); - -webkit-mask-size: contain; - -webkit-mask-repeat: repeat-x; - mask-image: url("http://localhost:8080/assets/chat-gradient.png"); - mask-size: contain; - mask-repeat: repeat-x; - direction: rtl; -}