nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Started chats

Browse Source
This commit is contained in:
robbis95 2024-04-17 18:57:56 +02:00
parent 69e90bd1d3
commit 6ee4a7ee78
7 changed files with 898 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

853
src/chats.css Normal file
View File

@ -0,0 +1,853 @@
.bubble-container {
transition: top 0.2s ease 0s;
.chat-bubble {
border-image-slice: 17 6 6 29 fill;
border-image-width: 17px 6px 6px 29px;
border-image-outset: 2px 0px 0px 0px;
border-image-repeat: repeat repeat;
&.type-0 {
// normal
.message {
font-weight: 400;
}
}
&.type-1 {
// whisper
.message {
font-weight: 400;
font-style: italic;
color: #595959;
}
}
&.type-2 {
// shout
.message {
font-weight: 700;
}
}
&.bubble-0 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_0_transparent.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
bottom: -5px;
}
}
&.bubble-1 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_1.png');
border-image-slice: 18 6 6 29 fill;
border-image-width: 18px 6px 6px 29px;
border-image-outset: 3px 0px 0px 0px;
.user-container {
display: none;
}
.username {
display: none;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
}
}
&.bubble-2,
&.bubble-31 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_2.png');
.user-container {
display: none;
}
.username {
color: rgba($white, 1);
}
.message {
color: rgba($white, 1) !important;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
height: 7px;
}
}
&.bubble-3 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_3.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_3_pointer.png');
}
}
&.bubble-4 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_4.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_4_pointer.png');
}
}
&.bubble-5 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_5.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_5_pointer.png');
}
}
&.bubble-6 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_6.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_6_pointer.png');
}
}
&.bubble-7 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_7.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_7_pointer.png');
}
}
&.bubble-8 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_8.png');
border-image-slice: 20 6 6 27 fill;
border-image-width: 20px 6px 6px 27px;
border-image-outset: 5px 0px 0px 0px;
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_8_pointer.png');
}
}
&.bubble-9 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_9.png');
border-image-slice: 17 18 12 19 fill;
border-image-width: 17px 18px 12px 19px;
border-image-outset: 7px 7px 0px 9px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_9_pointer.png');
width: 7px;
height: 10px;
bottom: -6px;
}
}
&.bubble-10 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_10.png');
border-image-slice: 29 18 8 37 fill;
border-image-width: 29px 18px 8px 37px;
border-image-outset: 12px 7px 1px 5px;
.chat-content {
margin-left: 24px;
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_10_pointer.png');
width: 7px;
height: 8px;
bottom: -3px;
}
}
&.bubble-11 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_11.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_11_pointer.png');
}
}
&.bubble-12 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_12.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_12_pointer.png');
}
}
&.bubble-13 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_13.png');
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_13_pointer.png');
}
}
&.bubble-14 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_14.png');
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_14_pointer.png');
}
}
&.bubble-15 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_15.png');
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_15_pointer.png');
}
}
&.bubble-16 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_16.png');
border-image-slice: 13 6 10 31 fill;
border-image-width: 13px 6px 10px 31px;
border-image-outset: 6px 0px 0px 0px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_16_pointer.png');
height: 8px;
}
}
&.bubble-17 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_17.png');
border-image-slice: 24 6 8 35 fill;
border-image-width: 24px 6px 8px 35px;
border-image-outset: 9px 0px 2px 5px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_17_pointer.png');
}
}
&.bubble-18 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_18.png');
border-image-slice: 7 16 8 16 fill;
border-image-width: 7px 16px 8px 16px;
border-image-outset: 3px 10px 2px 11px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_18_pointer.png');
height: 8px;
}
}
&.bubble-19 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_19.png');
border-image-slice: 17 6 9 19 fill;
border-image-width: 17px 6px 9px 19px;
border-image-outset: 5px 0px 0px 8px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
}
}
&.bubble-20 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_20.png');
border-image-slice: 18 6 8 19 fill;
border-image-width: 18px 6px 8px 19px;
border-image-outset: 5px 0px 0px 8px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
}
}
&.bubble-21 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_21.png');
border-image-slice: 20 6 12 24 fill;
border-image-width: 20px 6px 12px 24px;
border-image-outset: 13px 2px 1px 3px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_21_pointer.png');
bottom: -4px;
}
}
&.bubble-22 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_22.png');
border-image-slice: 18 19 11 33 fill;
border-image-width: 18px 19px 11px 33px;
border-image-outset: 7px 1px 1px 5px;
.chat-content {
margin-left: 20px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_22_pointer.png');
}
}
&.bubble-23 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_23.png');
border-image-slice: 16 6 7 32 fill;
border-image-width: 16px 6px 7px 32px;
border-image-outset: 5px 0px 0px 3px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
}
}
&.bubble-24 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_24.png');
border-image-slice: 23 8 6 40 fill;
border-image-width: 23px 8px 6px 40px;
border-image-outset: 6px 0px 0px 6px;
.chat-content {
margin-left: 30px;
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_24_pointer.png');
bottom: -4px;
}
}
&.bubble-25 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_25.png');
border-image-slice: 10 13 8 28 fill;
border-image-width: 10px 13px 8px 28px;
border-image-outset: 6px 3px 2px 0px;
.chat-content {
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_25_pointer.png');
height: 9px;
bottom: -7px;
}
}
&.bubble-26 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_26.png');
border-image-slice: 16 9 8 29 fill;
border-image-width: 16px 9px 8px 29px;
border-image-outset: 2px 2px 2px 0px;
.chat-content {
color: #c59432;
text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_26_pointer.png');
height: 10px;
bottom: -6px;
}
}
&.bubble-27 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_27.png');
border-image-slice: 25 6 5 36 fill;
border-image-width: 25px 6px 5px 36px;
border-image-outset: 8px 0px 0px 5px;
.chat-content {
margin-left: 30px;
color: #fff;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_27_pointer.png');
}
}
&.bubble-28 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_28.png');
border-image-slice: 16 7 7 27 fill;
border-image-width: 16px 7px 7px 27px;
border-image-outset: 3px 0px 0px 0px;
.chat-content {
margin-left: 25px;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_28_pointer.png');
}
}
&.bubble-29 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_29.png');
border-image-slice: 10 7 15 31 fill;
border-image-width: 10px 7px 15px 31px;
border-image-outset: 2px 0px 0px 1px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_29_pointer.png');
bottom: -4px;
}
}
&.bubble-30 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_30.png');
.user-container {
display: none;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_30_pointer.png');
height: 7px;
}
}
&.bubble-32 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_32.png');
border-image-slice: 15 7 7 30 fill;
border-image-width: 15px 7px 7px 30px;
border-image-outset: 2px 0px 0px 0px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_32_pointer.png');
}
}
&.bubble-33 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
border-image-slice: 7 6 6 39 fill;
border-image-width: 7px 6px 6px 39px;
border-image-outset: 2px 0px 0px 0px;
.user-container {
display: none;
}
.chat-content {
margin-left: 35px;
}
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 9px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
}
}
&.bubble-34 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
border-image-slice: 7 6 6 39 fill;
border-image-width: 7px 6px 6px 39px;
border-image-outset: 2px 0px 0px 0px;
&.type-1 {
.message {
font-style: unset;
color: inherit;
}
}
.user-container {
display: none;
}
.username {
display: none;
}
.chat-content {
margin-left: 35px;
}
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 9px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
}
}
&.bubble-35 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_35.png');
border-image-slice: 19 6 5 29 fill;
border-image-width: 19px 6px 5px 29px;
border-image-outset: 4px 0px 0px 0px;
.user-container {
display: none;
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_35_pointer.png');
}
}
&.bubble-36 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_36.png');
border-image-slice: 17 7 5 30 fill;
border-image-width: 17px 7px 5px 30px;
border-image-outset: 2px 0px 0px 0px;
.user-container {
display: none;
}
&::before {
content: ' ';
position: absolute;
width: 13px;
height: 18px;
left: 5px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_36_pointer.png');
}
}
&.bubble-37 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_37.png');
border-image-slice: 16 6 7 32 fill;
border-image-width: 16px 6px 7px 32px;
border-image-outset: 5px 0px 0px 3px;
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
}
}
&.bubble-38 {
border-image-source: url('@/assets/images/chat/chatbubbles/bubble_38.png');
border-image-slice: 17 7 5 30 fill;
border-image-width: 17px 7px 5px 30px;
border-image-outset: 2px 0px 0px 0px;
.user-container {
display: none;
}
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 3px;
top: 2px;
background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
}
.pointer {
background: url('@/assets/images/chat/chatbubbles/bubble_38_pointer.png');
}
}
.user-container {
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
max-height: 24px;
overflow: hidden;
.user-image {
position: absolute;
top: -15px;
left: -9.25px;
width: 45px;
height: 65px;
background-repeat: no-repeat;
background-position: center;
transform: scale(0.5);
overflow: hidden;
image-rendering: initial;
}
}
.chat-content {
padding: 5px 6px 5px 4px;
margin-left: 27px;
line-height: 1;
color: $black;
min-height: 25px;
}
}
}
.chat-bubble-icon {
background-repeat: no-repeat;
background-position: center;
&.bubble-0 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_0.png');
}
&.bubble-1 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_1.png');
height: 25px;
}
&.bubble-2,
&.bubble-31 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_2.png');
}
&.bubble-3 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_3.png');
}
&.bubble-4 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_4.png');
}
&.bubble-5 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_5.png');
}
&.bubble-6 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_6.png');
}
&.bubble-7 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_7.png');
}
&.bubble-8 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_8.png');
}
&.bubble-9 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_9.png');
}
&.bubble-10 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_10.png');
}
&.bubble-11 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_11.png');
}
&.bubble-12 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_12.png');
}
&.bubble-13 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_13.png');
}
&.bubble-14 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_14.png');
}
&.bubble-15 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_15.png');
}
&.bubble-16 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_16.png');
}
&.bubble-17 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_17.png');
}
&.bubble-18 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_18.png');
}
&.bubble-19 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_19.png');
}
&.bubble-20 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_20.png');
}
&.bubble-21 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_21.png');
}
&.bubble-22 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_22.png');
}
&.bubble-23 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_23.png');
}
&.bubble-24 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_24.png');
}
&.bubble-25 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_25.png');
}
&.bubble-26 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_26.png');
}
&.bubble-27 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_27.png');
}
&.bubble-28 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_28.png');
}
&.bubble-29 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_29.png');
}
&.bubble-30 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_30.png');
}
&.bubble-32 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_32.png');
}
&.bubble-33 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 11px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png');
}
}
&.bubble-34 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 11px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
}
}
&.bubble-35 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png');
}
&.bubble-36 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_36.png');
&::before {
content: ' ';
position: absolute;
width: 13px;
height: 18px;
left: 13px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png');
}
}
&.bubble-37 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png');
}
&.bubble-38 {
background-image: url('@/assets/images/chat/chatbubbles/bubble_38.png');
&::before {
content: ' ';
position: absolute;
width: 19px;
height: 19px;
left: 11px;
top: 10px;
background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
}
}
}

2
src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx
View File

@ -44,7 +44,7 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
return (
<>
<div className="icon chatstyles-icon cursor-pointer" onClick={ toggleSelector } />
<div className="cursor-pointer nitro-icon chatstyles-icon" onClick={ toggleSelector } />
<Overlay placement="top" show={ selectorVisible } target={ target }>
<Popover className="nitro-chat-style-selector-container image-rendering-pixelated">
<NitroCardContentView className="bg-transparent" overflow="hidden">

6
src/components/room/widgets/chat-input/ChatInputView.tsx
View File

@ -235,10 +235,10 @@ export const ChatInputView: FC<{}> = props =>
return (
createPortal(
<div className="nitro-chat-input-container">
<div className="input-sizer items-center">
<div className="nitro-chat-input-container flex justify-center items-center relative h-10 border-2 border-black bg-gray-200 pr-2.5 w-full overflow-hidden rounded-lg">
<div className="items-center input-sizer">
{ !floodBlocked &&
<input ref={ inputRef } className="chat-input" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
<input ref={ inputRef } className="bg-transparent border-none" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
{ floodBlocked &&
<Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
</div>

70
src/components/room/widgets/chat/ChatWidgetMessageView.tsx
View File

@ -9,48 +9,50 @@ interface ChatWidgetMessageViewProps
bubbleWidth?: number;
}
export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
chat = null,
makeRoom = null,
bubbleWidth = RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL
}) =>
{
const { chat = null, makeRoom = null, bubbleWidth = RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL } = props;
const [ isVisible, setIsVisible ] = useState(false);
const [ isReady, setIsReady ] = useState<boolean>(false);
const elementRef = useRef<HTMLDivElement>();
const [ isReady, setIsReady ] = useState(false);
const elementRef = useRef<HTMLDivElement>(null);
const getBubbleWidth = useMemo(() =>
const getBubbleWidth = useMemo(() =>
{
switch(bubbleWidth)
switch(bubbleWidth)
{
case RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL:
return 350;
return 'w-350';
case RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN:
return 240;
return 'w-240';
case RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE:
return 2000;
return 'w-2000';
default:
return 'w-350';
}
}, [ bubbleWidth ]);
useEffect(() =>
useEffect(() =>
{
setIsVisible(false);
const element = elementRef.current;
if(!element) return;
const width = element.offsetWidth;
const height = element.offsetHeight;
const { offsetWidth: width, offsetHeight: height } = element;
chat.width = width;
chat.height = height;
chat.elementRef = element;
let left = chat.left;
let top = chat.top;
let { left, top } = chat;
if(!left && !top)
if(!left && !top)
{
left = (chat.location.x - (width / 2));
top = (element.parentElement.offsetHeight - height);
top = (element.parentElement!.offsetHeight - height);
chat.left = left;
chat.top = top;
@ -58,37 +60,39 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
setIsReady(true);
return () =>
return () =>
{
chat.elementRef = null;
setIsReady(false);
}
}, [ chat ]);
useEffect(() =>
useEffect(() =>
{
if(!isReady || !chat || isVisible) return;
if (!isReady || !chat || isVisible) return;
if(makeRoom) makeRoom(chat);
if (makeRoom) makeRoom(chat);
setIsVisible(true);
}, [ chat, isReady, isVisible, makeRoom ]);
return (
<div ref={ elementRef } className={ `bubble-container ${ isVisible ? 'visible' : 'invisible' }` } onClick={ event => GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT) }>
{ (chat.styleId === 0) &&
<div className="user-container-bg" style={ { backgroundColor: chat.color } } /> }
<div className={ `chat-bubble bubble-${ chat.styleId } type-${ chat.type }` } style={ { maxWidth: getBubbleWidth } }>
<div className="user-container">
{ chat.imageUrl && (chat.imageUrl.length > 0) &&
<div className="user-image" style={ { backgroundImage: `url(${ chat.imageUrl })` } } /> }
<div ref={ elementRef } className={ `bubble-container ${ isVisible ? 'visible' : 'invisible' } w-max absolute select-none pointer-events-auto` }
onClick={ () => GetRoomEngine().selectRoomObject(chat.roomId, chat.senderId, RoomObjectCategory.UNIT) }>
{ chat.styleId === 0 && (
<div className="absolute top-[-1px] left-[1px] w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-[1]" style={ { backgroundColor: chat.color } } />
) }
<div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-[1] break-words min-h-[26px] text-[14px] max-w-[350px]` }
style={ { maxWidth: getBubbleWidth } }>
<div className="user-container flex items-center justify-center h-full max-h-[24px] overflow-hidden">
{ chat.imageUrl && chat.imageUrl.length > 0 && (
<div className="user-image absolute top-[-15px] left-[-9.25px] w-[45px] h-[65px] bg-no-repeat bg-center scale-50" style={ { backgroundImage: `url(${ chat.imageUrl })` } } />
) }
</div>
<div className="chat-content">
<b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-[1] min-h-[25px]">
<b className="username" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
<span className="message" dangerouslySetInnerHTML={ { __html: `${ chat.formattedText }` } } />
</div>
<div className="pointer" />
<div className="pointer absolute left-[50%] translate-x-[-50%] w-[9px] h-[6px] bottom-[-5px]" />
</div>
</div>
);

2
src/components/room/widgets/chat/ChatWidgetView.tsx
View File

@ -155,7 +155,7 @@ export const ChatWidgetView: FC<{}> = props =>
}, [ getScrollSpeed, removeHiddenChats, setChatMessages ]);
return (
<div ref={ elementRef } className="nitro-chat-widget">
<div ref={ elementRef } className="absolute flex justify-center items-center w-full top-0 min-h-[1px] z-[var(--chat-zindex)] bg-transparent rounded-none shadow-none pointer-events-none">
{ chatMessages.map(chat => <ChatWidgetMessageView key={ chat.id } bubbleWidth={ chatSettings.weight } chat={ chat } makeRoom={ makeRoom } />) }
</div>
);

1
src/index.tsx
View File

@ -1,5 +1,6 @@
import { createRoot } from 'react-dom/client';
import { App } from './App';
import './index.css';
import './chats.css';
createRoot(document.getElementById('root')).render(<App />);

3
tailwind.config.js
View File

@ -45,7 +45,8 @@ module.exports = {
},
zIndex: {
'toolbar': '',
'loading': '100'
'loading': '100',
'chat-zindex': '20'
},
},
},