refactor and redesign of the 3d-web-text-chat package (#38)

* refactor and redesign of the 3d-web-text-chat package * removes unused file
mml-io · Sep 11, 2023 · c9bd94d · c9bd94d
1 parent ec6b399
commit c9bd94d
Show file tree

Hide file tree

Showing 16 changed files with 270 additions and 172 deletions.
diff --git a/packages/3d-web-text-chat/src/chat-ui/TextChatUI.tsx 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<ChatUIInstance> = createRef<ChatUIInstance>();
+
+  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(
+        <ForwardedChatUIComponent
+          ref={this.appRef}
+          clientName={this.clientname}
+          sendMessageToServer={this.sendMessageToServerMethod}
+        />,
+      ),
+    );
+  }
+}
diff --git a/...-chat/src/chat-ui/text-chat-ui.module.css → .../ChatPanel/TextChatUIComponent.module.css b/...-chat/src/chat-ui/text-chat-ui.module.css → .../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,70 +52,124 @@
   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;
   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: 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;
+}