From e5d81b7a536fc041380795a054e665ac0f0d2d33 Mon Sep 17 00:00:00 2001
From: Batman <montevechiol@gmail.com>
Date: Wed, 21 Apr 2021 19:52:06 -0300
Subject: [PATCH] Init Chat widget

---
 src/views/room/RoomView.tsx                      |  6 +++++-
 src/views/room/widgets/Widgets.scss              |  1 +
 src/views/room/widgets/chat/ChatWidgetsView.scss |  1 +
 src/views/room/widgets/chat/ChatWidgetsView.tsx  | 15 +++++++++++++++
 .../room/widgets/chat/ChatWidgetsView.types.ts   |  3 +++
 .../widgets/chat/form/ChatFormWidgetView.scss    | 16 ++++++++++++++++
 .../widgets/chat/form/ChatFormWidgetView.tsx     | 15 +++++++++++++++
 .../chat/form/ChatFormWidgetView.types.tsx       |  2 ++
 .../chat/messages/ChatMessagesWidgetView.tsx     | 10 ++++++++++
 .../messages/ChatMessagesWidgetView.types.ts     |  2 ++
 .../messages/message/ChatMessageWidgetView.tsx   | 10 ++++++++++
 .../message/ChatMessageWidgetView.types.ts       |  2 ++
 12 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 src/views/room/widgets/chat/ChatWidgetsView.scss
 create mode 100644 src/views/room/widgets/chat/ChatWidgetsView.tsx
 create mode 100644 src/views/room/widgets/chat/ChatWidgetsView.types.ts
 create mode 100644 src/views/room/widgets/chat/form/ChatFormWidgetView.scss
 create mode 100644 src/views/room/widgets/chat/form/ChatFormWidgetView.tsx
 create mode 100644 src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx
 create mode 100644 src/views/room/widgets/chat/messages/ChatMessagesWidgetView.tsx
 create mode 100644 src/views/room/widgets/chat/messages/ChatMessagesWidgetView.types.ts
 create mode 100644 src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.tsx
 create mode 100644 src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.types.ts

diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx
index 60665fa0..97e066f1 100644
--- a/src/views/room/RoomView.tsx
+++ b/src/views/room/RoomView.tsx
@@ -6,6 +6,7 @@ import { WindowResizeEvent } from '../../api/nitro/room/DispatchResizeEvent';
 import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
 import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
 import { RoomViewProps } from './RoomView.types';
+import { ChatWidgetsView } from './widgets/chat/ChatWidgetsView';
 import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView';
 
 export function RoomView(props: RoomViewProps): JSX.Element
@@ -85,7 +86,10 @@ export function RoomView(props: RoomViewProps): JSX.Element
             { roomSession && <div id="room-view" className="nitro-room-container"></div> }
             { roomSession && events && roomCanvas &&
                 createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) &&
-                <FurnitureWidgetsView events={ events } /> }
+                <>
+                    <FurnitureWidgetsView events={ events } />
+                    <ChatWidgetsView />
+                </> }
         </div>
     );
 }
diff --git a/src/views/room/widgets/Widgets.scss b/src/views/room/widgets/Widgets.scss
index 91839885..dfbccd40 100644
--- a/src/views/room/widgets/Widgets.scss
+++ b/src/views/room/widgets/Widgets.scss
@@ -1 +1,2 @@
+@import './chat/ChatWidgetsView';
 @import './furniture/FurnitureWidgets';
diff --git a/src/views/room/widgets/chat/ChatWidgetsView.scss b/src/views/room/widgets/chat/ChatWidgetsView.scss
new file mode 100644
index 00000000..e59bacd8
--- /dev/null
+++ b/src/views/room/widgets/chat/ChatWidgetsView.scss
@@ -0,0 +1 @@
+@import './form/ChatFormWidgetView';
diff --git a/src/views/room/widgets/chat/ChatWidgetsView.tsx b/src/views/room/widgets/chat/ChatWidgetsView.tsx
new file mode 100644
index 00000000..9b9e966c
--- /dev/null
+++ b/src/views/room/widgets/chat/ChatWidgetsView.tsx
@@ -0,0 +1,15 @@
+import { ChatWidgetsViewProps } from './ChatWidgetsView.types';
+import { ChatFormWidgetView } from './form/ChatFormWidgetView';
+import { ChatMessagesWidgetView } from './messages/ChatMessagesWidgetView';
+
+export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <>
+            <ChatMessagesWidgetView />
+            <ChatFormWidgetView />
+        </>
+    );
+}
diff --git a/src/views/room/widgets/chat/ChatWidgetsView.types.ts b/src/views/room/widgets/chat/ChatWidgetsView.types.ts
new file mode 100644
index 00000000..afb43ce7
--- /dev/null
+++ b/src/views/room/widgets/chat/ChatWidgetsView.types.ts
@@ -0,0 +1,3 @@
+
+export interface ChatWidgetsViewProps
+{}
diff --git a/src/views/room/widgets/chat/form/ChatFormWidgetView.scss b/src/views/room/widgets/chat/form/ChatFormWidgetView.scss
new file mode 100644
index 00000000..73c2afca
--- /dev/null
+++ b/src/views/room/widgets/chat/form/ChatFormWidgetView.scss
@@ -0,0 +1,16 @@
+.nitro-chat-form-input {
+    display: inline-grid;
+    vertical-align: top;
+    align-items: center;
+    position: relative;
+    height: 100%;
+    padding:0 10px;
+
+    input {
+        width: auto;
+        height: 45px;
+        border-radius: 10px;
+        border: 1px solid rgb(0, 0, 0);
+        background: #EDEDED;
+    }
+}
diff --git a/src/views/room/widgets/chat/form/ChatFormWidgetView.tsx b/src/views/room/widgets/chat/form/ChatFormWidgetView.tsx
new file mode 100644
index 00000000..025dd1fa
--- /dev/null
+++ b/src/views/room/widgets/chat/form/ChatFormWidgetView.tsx
@@ -0,0 +1,15 @@
+import { LocalizeText } from '../../../../../utils/LocalizeText';
+import { ChatFormWidgetViewProps } from './ChatFormWidgetView.types';
+
+export function ChatFormWidgetView(props: ChatFormWidgetViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <div className="nitro-chat-form fixed-bottom mb-4 d-flex justify-content-center">
+            <div className="nitro-chat-form-input">
+                <input type="text" className="form-control" placeholder={ LocalizeText('widgets.chatinput.default') } />
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx b/src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx
new file mode 100644
index 00000000..955e50de
--- /dev/null
+++ b/src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx
@@ -0,0 +1,2 @@
+export interface ChatFormWidgetViewProps
+{}
diff --git a/src/views/room/widgets/chat/messages/ChatMessagesWidgetView.tsx b/src/views/room/widgets/chat/messages/ChatMessagesWidgetView.tsx
new file mode 100644
index 00000000..ac9c52d4
--- /dev/null
+++ b/src/views/room/widgets/chat/messages/ChatMessagesWidgetView.tsx
@@ -0,0 +1,10 @@
+import { ChatMessagesWidgetViewProps } from './ChatMessagesWidgetView.types';
+
+export function ChatMessagesWidgetView(props: ChatMessagesWidgetViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <></>
+    );
+}
diff --git a/src/views/room/widgets/chat/messages/ChatMessagesWidgetView.types.ts b/src/views/room/widgets/chat/messages/ChatMessagesWidgetView.types.ts
new file mode 100644
index 00000000..17bcbbca
--- /dev/null
+++ b/src/views/room/widgets/chat/messages/ChatMessagesWidgetView.types.ts
@@ -0,0 +1,2 @@
+export interface ChatMessagesWidgetViewProps
+{}
diff --git a/src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.tsx b/src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.tsx
new file mode 100644
index 00000000..6bb59b84
--- /dev/null
+++ b/src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.tsx
@@ -0,0 +1,10 @@
+import { ChatMessageWidgetViewProps } from './ChatMessageWidgetView.types';
+
+export function ChatMessageWidgetView(props: ChatMessageWidgetViewProps): JSX.Element
+{
+    const {} = props;
+
+    return (
+        <></>
+    );
+}
diff --git a/src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.types.ts b/src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.types.ts
new file mode 100644
index 00000000..357642e9
--- /dev/null
+++ b/src/views/room/widgets/chat/messages/message/ChatMessageWidgetView.types.ts
@@ -0,0 +1,2 @@
+export interface ChatMessageWidgetViewProps
+{}