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

More scale issue fixes

Browse Source
This commit is contained in:
Bill 2022-04-06 16:11:42 -04:00
parent bed388f134
commit a5a73ba1fb
5 changed files with 208 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/api/nitro/room/widgets/handlers/RoomWidgetChatHandler.ts
View File

@ -1,6 +1,7 @@
import { AvatarFigurePartType, AvatarScaleType, AvatarSetType, IAvatarImageListener, INitroPoint, IVector3D, NitroEvent, NitroPoint, PetFigureData, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomSessionChatEvent, RoomUserData, RoomWidgetEnum, SystemChatStyleEnum, TextureUtils, Vector3d } from '@nitrots/nitro-renderer'; import { AvatarFigurePartType, AvatarScaleType, AvatarSetType, IAvatarImageListener, NitroEvent, PetFigureData, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomSessionChatEvent, RoomUserData, RoomWidgetEnum, SystemChatStyleEnum, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
import { GetAvatarRenderManager, GetConfigurationManager, GetRoomEngine, PlaySound } from '../../../..'; import { GetAvatarRenderManager, GetConfigurationManager, GetRoomEngine, PlaySound } from '../../../..';
import { LocalizeText } from '../../../../utils/LocalizeText'; import { LocalizeText } from '../../../../utils/LocalizeText';
import { GetRoomObjectScreenLocation } from '../../GetRoomObjectScreenLocation';
import { RoomWidgetUpdateChatEvent, RoomWidgetUpdateEvent } from '../events'; import { RoomWidgetUpdateChatEvent, RoomWidgetUpdateEvent } from '../events';
import { RoomWidgetMessage } from '../messages'; import { RoomWidgetMessage } from '../messages';
import { RoomWidgetHandler } from './RoomWidgetHandler'; import { RoomWidgetHandler } from './RoomWidgetHandler';
@ -21,7 +22,7 @@ export class RoomWidgetChatHandler extends RoomWidgetHandler implements IAvatarI
const roomObject = GetRoomEngine().getRoomObject(chatEvent.session.roomId, chatEvent.objectId, RoomObjectCategory.UNIT); const roomObject = GetRoomEngine().getRoomObject(chatEvent.session.roomId, chatEvent.objectId, RoomObjectCategory.UNIT);
const objectLocation = roomObject ? roomObject.getLocation() : new Vector3d(); const objectLocation = roomObject ? roomObject.getLocation() : new Vector3d();
const bubbleLocation = this.getBubbleLocation(chatEvent.session.roomId, objectLocation); const bubbleLocation = GetRoomObjectScreenLocation(chatEvent.session.roomId, roomObject?.id, RoomObjectCategory.UNIT);
const userData = roomObject ? this.container.roomSession.userDataManager.getUserDataByIndex(chatEvent.objectId) : new RoomUserData(-1); const userData = roomObject ? this.container.roomSession.userDataManager.getUserDataByIndex(chatEvent.objectId) : new RoomUserData(-1);
let username = ''; let username = '';
@ -125,36 +126,6 @@ export class RoomWidgetChatHandler extends RoomWidgetHandler implements IAvatarI
return null; return null;
} }
private getBubbleLocation(roomId: number, userLocation: IVector3D, canvasId = 1): INitroPoint
{
const geometry = GetRoomEngine().getRoomInstanceGeometry(roomId, canvasId);
const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomId, canvasId);
let x = ((document.body.offsetWidth * scale) / 2);
let y = ((document.body.offsetHeight * scale) / 2);
if(geometry && userLocation)
{
const screenPoint = geometry.getScreenPoint(userLocation);
if(screenPoint)
{
x = (x + (screenPoint.x * scale));
y = (y + (screenPoint.y * scale));
const offsetPoint = GetRoomEngine().getRoomInstanceRenderingCanvasOffset(roomId, canvasId);
if(offsetPoint)
{
x = (x + offsetPoint.x);
y = (y + offsetPoint.y);
}
}
}
return new NitroPoint(x, y);
}
public getUserImage(figure: string): string public getUserImage(figure: string): string
{ {
let existing = this._avatarImageCache.get(figure); let existing = this._avatarImageCache.get(figure);

18
src/components/room/RoomColorView.tsx
View File

@ -26,8 +26,6 @@ export const RoomColorView: FC<{}> = props =>
else else
{ {
roomBackground.tint = newColor; roomBackground.tint = newColor;
roomBackground.width = GetNitroInstance().width;
roomBackground.height = GetNitroInstance().height;
roomBackground.visible = true; roomBackground.visible = true;
} }
}, [ roomBackground ]); }, [ roomBackground ]);
@ -97,8 +95,6 @@ export const RoomColorView: FC<{}> = props =>
if(!roomBackground) return; if(!roomBackground) return;
roomBackground.tint = originalRoomBackgroundColor; roomBackground.tint = originalRoomBackgroundColor;
roomBackground.width = GetNitroInstance().width;
roomBackground.height = GetNitroInstance().height;
roomBackground.visible = true; roomBackground.visible = true;
return; return;
@ -113,7 +109,7 @@ export const RoomColorView: FC<{}> = props =>
{ {
if(!roomSession) return; if(!roomSession) return;
const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId); const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(GetRoomEngine().activeRoomId, 1);
if(!canvas) return; if(!canvas) return;
@ -122,6 +118,8 @@ export const RoomColorView: FC<{}> = props =>
const master = (canvas.master as NitroContainer); const master = (canvas.master as NitroContainer);
background.visible = false; background.visible = false;
background.width = GetNitroInstance().width;
background.height = GetNitroInstance().height;
master.addChildAt(background, 0); master.addChildAt(background, 0);
master.filters = [ filter ]; master.filters = [ filter ];
@ -129,6 +127,14 @@ export const RoomColorView: FC<{}> = props =>
setRoomBackground(background); setRoomBackground(background);
setRoomFilter(filter); setRoomFilter(filter);
const resize = (event: UIEvent) =>
{
background.width = GetNitroInstance().width;
background.height = GetNitroInstance().height;
}
window.addEventListener('resize', resize);
return () => return () =>
{ {
setRoomBackground(prevValue => setRoomBackground(prevValue =>
@ -146,6 +152,8 @@ export const RoomColorView: FC<{}> = props =>
}); });
setOriginalRoomBackgroundColor(0); setOriginalRoomBackgroundColor(0);
window.removeEventListener('resize', resize);
} }
}, [ roomSession ]); }, [ roomSession ]);

13
src/components/room/RoomView.tsx
View File

@ -88,7 +88,7 @@ export const RoomView: FC<{}> = props =>
const roomEngine = GetRoomEngine(); const roomEngine = GetRoomEngine();
const roomId = roomSession.roomId; const roomId = roomSession.roomId;
const canvasId = 1; const canvasId = 1;
const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height, RoomGeometry.SCALE_ZOOMED_IN); const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, (window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio), RoomGeometry.SCALE_ZOOMED_IN);
if((window.devicePixelRatio !== 1) && ((window.devicePixelRatio % 1) === 0)) roomEngine.setRoomInstanceRenderingCanvasScale(roomId, canvasId, window.devicePixelRatio); if((window.devicePixelRatio !== 1) && ((window.devicePixelRatio % 1) === 0)) roomEngine.setRoomInstanceRenderingCanvasScale(roomId, canvasId, window.devicePixelRatio);
@ -151,7 +151,7 @@ export const RoomView: FC<{}> = props =>
canvas.style.height = `${ (100 * window.devicePixelRatio) }%`; canvas.style.height = `${ (100 * window.devicePixelRatio) }%`;
} }
window.onresize = () => const resize = (event: UIEvent) =>
{ {
const nitroInstance = GetNitroInstance(); const nitroInstance = GetNitroInstance();
const width = (window.innerWidth * window.devicePixelRatio); const width = (window.innerWidth * window.devicePixelRatio);
@ -166,14 +166,15 @@ export const RoomView: FC<{}> = props =>
const element = elementRef.current; const element = elementRef.current;
if(!element) return; if(element) element.appendChild(canvas);
element.appendChild(canvas); window.addEventListener('resize', resize);
return () => return () =>
{ {
element.removeChild(canvas); if(element) element.removeChild(canvas);
window.onresize = null;
window.removeEventListener('resize', resize);
} }
}, []); }, []);

284
src/components/room/widgets/chat/ChatWidgetView.scss
View File

@ -16,7 +16,7 @@
.chat-mention { .chat-mention {
padding: 1px 5px; padding: 1px 5px;
font-weight: bold; font-weight: bold;
background: rgba(0, 0, 0, .2); background: rgba(0, 0, 0, 0.2);
cursor: pointer; cursor: pointer;
border-radius: 100px; border-radius: 100px;
@ -47,7 +47,7 @@
height: calc(100% - 0.5px); height: calc(100% - 0.5px);
border-radius: 7px; border-radius: 7px;
z-index: 1; z-index: 1;
background-color: #C8C8C8; background-color: #c8c8c8;
} }
.chat-bubble { .chat-bubble {
@ -55,7 +55,7 @@
z-index: 1; z-index: 1;
word-break: break-word; word-break: break-word;
max-width: 350px; max-width: 350px;
min-height: 25px; min-height: 26px;
font-size: 14px; font-size: 14px;
border-image-slice: 17 6 6 29 fill; border-image-slice: 17 6 6 29 fill;
@ -73,13 +73,15 @@
bottom: -5px; bottom: -5px;
} }
&.type-0 { // normal &.type-0 {
// normal
.message { .message {
font-weight: 400; font-weight: 400;
} }
} }
&.type-1 { // whisper &.type-1 {
// whisper
.message { .message {
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
@ -87,23 +89,24 @@
} }
} }
&.type-2 { // shout &.type-2 {
// shout
.message { .message {
font-weight: 700; font-weight: 700;
} }
} }
&.bubble-0 { &.bubble-0 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_0_transparent.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_0_transparent.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png");
bottom: -5px; bottom: -5px;
} }
} }
&.bubble-1 { &.bubble-1 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_1.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_1.png");
border-image-slice: 18 6 6 29 fill; border-image-slice: 18 6 6 29 fill;
border-image-width: 18px 6px 6px 29px; border-image-width: 18px 6px 6px 29px;
@ -118,12 +121,13 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png");
} }
} }
&.bubble-2, &.bubble-31 { &.bubble-2,
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_2.png'); &.bubble-31 {
border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_2.png");
.user-container { .user-container {
display: none; display: none;
@ -138,53 +142,53 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_2_31_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_2_31_pointer.png");
height: 7px; height: 7px;
} }
} }
&.bubble-3 { &.bubble-3 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_3.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_3.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png");
} }
} }
&.bubble-4 { &.bubble-4 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_4.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_4.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png");
} }
} }
&.bubble-5 { &.bubble-5 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_5.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_5.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png");
} }
} }
&.bubble-6 { &.bubble-6 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_6.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_6.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png");
} }
} }
&.bubble-7 { &.bubble-7 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_7.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_7.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png");
} }
} }
&.bubble-8 { &.bubble-8 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_8.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_8.png");
border-image-slice: 20 6 6 27 fill; border-image-slice: 20 6 6 27 fill;
border-image-width: 20px 6px 6px 27px; border-image-width: 20px 6px 6px 27px;
@ -195,12 +199,12 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png");
} }
} }
&.bubble-9 { &.bubble-9 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_9.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_9.png");
border-image-slice: 17 18 12 19 fill; border-image-slice: 17 18 12 19 fill;
border-image-width: 17px 18px 12px 19px; border-image-width: 17px 18px 12px 19px;
@ -211,7 +215,7 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png");
width: 7px; width: 7px;
height: 10px; height: 10px;
bottom: -6px; bottom: -6px;
@ -219,7 +223,7 @@
} }
&.bubble-10 { &.bubble-10 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_10.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_10.png");
border-image-slice: 29 18 8 37 fill; border-image-slice: 29 18 8 37 fill;
border-image-width: 29px 18px 8px 37px; border-image-width: 29px 18px 8px 37px;
@ -231,7 +235,7 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png");
width: 7px; width: 7px;
height: 8px; height: 8px;
bottom: -3px; bottom: -3px;
@ -239,80 +243,80 @@
} }
&.bubble-11 { &.bubble-11 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_11.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_11.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png");
} }
} }
&.bubble-12 { &.bubble-12 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_12.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_12.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png");
} }
} }
&.bubble-13 { &.bubble-13 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_13.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_13.png");
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png");
} }
} }
&.bubble-14 { &.bubble-14 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_14.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_14.png");
.chat-content { .chat-content {
color: #fff; color: #fff;
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png");
} }
} }
&.bubble-15 { &.bubble-15 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_15.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_15.png");
.chat-content { .chat-content {
color: #fff; color: #fff;
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png");
} }
} }
&.bubble-16 { &.bubble-16 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_16.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_16.png");
border-image-slice: 13 6 10 31 fill; border-image-slice: 13 6 10 31 fill;
border-image-width: 13px 6px 10px 31px; border-image-width: 13px 6px 10px 31px;
border-image-outset: 6px 0px 0px 0px; border-image-outset: 6px 0px 0px 0px;
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_16_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_16_pointer.png");
height: 8px; height: 8px;
} }
} }
&.bubble-17 { &.bubble-17 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_17.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_17.png");
border-image-slice: 24 6 8 35 fill; border-image-slice: 24 6 8 35 fill;
border-image-width: 24px 6px 8px 35px; border-image-width: 24px 6px 8px 35px;
border-image-outset: 9px 0px 2px 5px; border-image-outset: 9px 0px 2px 5px;
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_17_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_17_pointer.png");
} }
} }
&.bubble-18 { &.bubble-18 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_18.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_18.png");
border-image-slice: 7 16 8 16 fill; border-image-slice: 7 16 8 16 fill;
border-image-width: 7px 16px 8px 16px; border-image-width: 7px 16px 8px 16px;
@ -323,13 +327,13 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png");
height: 8px; height: 8px;
} }
} }
&.bubble-19 { &.bubble-19 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_19.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_19.png");
border-image-slice: 17 6 9 19 fill; border-image-slice: 17 6 9 19 fill;
border-image-width: 17px 6px 9px 19px; border-image-width: 17px 6px 9px 19px;
@ -340,12 +344,12 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png");
} }
} }
&.bubble-20 { &.bubble-20 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_20.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_20.png");
border-image-slice: 18 6 8 19 fill; border-image-slice: 18 6 8 19 fill;
border-image-width: 18px 6px 8px 19px; border-image-width: 18px 6px 8px 19px;
@ -356,12 +360,12 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_19_20_pointer.png");
} }
} }
&.bubble-21 { &.bubble-21 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_21.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_21.png");
border-image-slice: 20 6 12 24 fill; border-image-slice: 20 6 12 24 fill;
border-image-width: 20px 6px 12px 24px; border-image-width: 20px 6px 12px 24px;
@ -372,13 +376,13 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png");
bottom: -4px; bottom: -4px;
} }
} }
&.bubble-22 { &.bubble-22 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_22.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_22.png");
border-image-slice: 18 19 11 33 fill; border-image-slice: 18 19 11 33 fill;
border-image-width: 18px 19px 11px 33px; border-image-width: 18px 19px 11px 33px;
@ -389,24 +393,24 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png");
} }
} }
&.bubble-23 { &.bubble-23 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_23.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_23.png");
border-image-slice: 16 6 7 32 fill; border-image-slice: 16 6 7 32 fill;
border-image-width: 16px 6px 7px 32px; border-image-width: 16px 6px 7px 32px;
border-image-outset: 5px 0px 0px 3px; border-image-outset: 5px 0px 0px 3px;
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png");
} }
} }
&.bubble-24 { &.bubble-24 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_24.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_24.png");
border-image-slice: 23 8 6 40 fill; border-image-slice: 23 8 6 40 fill;
border-image-width: 23px 8px 6px 40px; border-image-width: 23px 8px 6px 40px;
@ -418,13 +422,13 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png");
bottom: -4px; bottom: -4px;
} }
} }
&.bubble-25 { &.bubble-25 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_25.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_25.png");
border-image-slice: 10 13 8 28 fill; border-image-slice: 10 13 8 28 fill;
border-image-width: 10px 13px 8px 28px; border-image-width: 10px 13px 8px 28px;
@ -435,14 +439,14 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png");
height: 9px; height: 9px;
bottom: -7px; bottom: -7px;
} }
} }
&.bubble-26 { &.bubble-26 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_26.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_26.png");
border-image-slice: 16 9 8 29 fill; border-image-slice: 16 9 8 29 fill;
border-image-width: 16px 9px 8px 29px; border-image-width: 16px 9px 8px 29px;
@ -450,18 +454,18 @@
.chat-content { .chat-content {
color: #c59432; color: #c59432;
text-shadow: 1px 1px rgba(0, 0, 0, .3); text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png");
height: 10px; height: 10px;
bottom: -6px; bottom: -6px;
} }
} }
&.bubble-27 { &.bubble-27 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_27.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_27.png");
border-image-slice: 25 6 5 36 fill; border-image-slice: 25 6 5 36 fill;
border-image-width: 25px 6px 5px 36px; border-image-width: 25px 6px 5px 36px;
@ -473,12 +477,12 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png");
} }
} }
&.bubble-28 { &.bubble-28 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_28.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_28.png");
border-image-slice: 16 7 7 27 fill; border-image-slice: 16 7 7 27 fill;
border-image-width: 16px 7px 7px 27px; border-image-width: 16px 7px 7px 27px;
@ -489,50 +493,50 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png");
} }
} }
&.bubble-29 { &.bubble-29 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_29.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_29.png");
border-image-slice: 10 7 15 31 fill; border-image-slice: 10 7 15 31 fill;
border-image-width: 10px 7px 15px 31px; border-image-width: 10px 7px 15px 31px;
border-image-outset: 2px 0px 0px 1px; border-image-outset: 2px 0px 0px 1px;
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_29_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_29_pointer.png");
bottom: -4px; bottom: -4px;
} }
} }
&.bubble-30 { &.bubble-30 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_30.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_30.png");
.user-container { .user-container {
display: none; display: none;
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_30_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_30_pointer.png");
height: 7px; height: 7px;
} }
} }
&.bubble-32 { &.bubble-32 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_32.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_32.png");
border-image-slice: 15 7 7 30 fill; border-image-slice: 15 7 7 30 fill;
border-image-width: 15px 7px 7px 30px; border-image-width: 15px 7px 7px 30px;
border-image-outset: 2px 0px 0px 0px; border-image-outset: 2px 0px 0px 0px;
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_32_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_32_pointer.png");
} }
} }
&.bubble-33 { &.bubble-33 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_33_34.png");
border-image-slice: 7 6 6 39 fill; border-image-slice: 7 6 6 39 fill;
border-image-width: 7px 6px 6px 39px; border-image-width: 7px 6px 6px 39px;
@ -547,29 +551,28 @@
} }
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 19px; width: 19px;
height: 19px; height: 19px;
left: 9px; left: 9px;
top: 2px; top: 2px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_33_extra.png");
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png");
} }
} }
&.bubble-34 { &.bubble-34 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_33_34.png");
border-image-slice: 7 6 6 39 fill; border-image-slice: 7 6 6 39 fill;
border-image-width: 7px 6px 6px 39px; border-image-width: 7px 6px 6px 39px;
border-image-outset: 2px 0px 0px 0px; border-image-outset: 2px 0px 0px 0px;
&.type-1 { &.type-1 {
.message { .message {
font-style: unset; font-style: unset;
color: inherit; color: inherit;
@ -589,22 +592,22 @@
} }
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 19px; width: 19px;
height: 19px; height: 19px;
left: 9px; left: 9px;
top: 2px; top: 2px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_34_extra.png");
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png");
} }
} }
&.bubble-35 { &.bubble-35 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_35.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_35.png");
border-image-slice: 19 6 5 29 fill; border-image-slice: 19 6 5 29 fill;
border-image-width: 19px 6px 5px 29px; border-image-width: 19px 6px 5px 29px;
@ -615,12 +618,12 @@
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png");
} }
} }
&.bubble-36 { &.bubble-36 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_36.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_36.png");
border-image-slice: 17 7 5 30 fill; border-image-slice: 17 7 5 30 fill;
border-image-width: 17px 7px 5px 30px; border-image-width: 17px 7px 5px 30px;
@ -631,34 +634,34 @@
} }
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 13px; width: 13px;
height: 18px; height: 18px;
left: 5px; left: 5px;
top: 2px; top: 2px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_36_extra.png");
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png");
} }
} }
&.bubble-37 { &.bubble-37 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_37.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_37.png");
border-image-slice: 16 6 7 32 fill; border-image-slice: 16 6 7 32 fill;
border-image-width: 16px 6px 7px 32px; border-image-width: 16px 6px 7px 32px;
border-image-outset: 5px 0px 0px 3px; border-image-outset: 5px 0px 0px 3px;
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_23_37_pointer.png");
} }
} }
&.bubble-38 { &.bubble-38 {
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_38.png'); border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_38.png");
border-image-slice: 17 7 5 30 fill; border-image-slice: 17 7 5 30 fill;
border-image-width: 17px 7px 5px 30px; border-image-width: 17px 7px 5px 30px;
@ -669,17 +672,17 @@
} }
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 19px; width: 19px;
height: 19px; height: 19px;
left: 3px; left: 3px;
top: 2px; top: 2px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_38_extra.png");
} }
.pointer { .pointer {
background: url('../../../../assets/images/chat/chatbubbles/bubble_38_pointer.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_38_pointer.png");
} }
} }
@ -721,195 +724,196 @@
background-position: center; background-position: center;
&.bubble-0 { &.bubble-0 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_0.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_0.png");
} }
&.bubble-1 { &.bubble-1 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_1.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_1.png");
height: 25px; height: 25px;
} }
&.bubble-2, &.bubble-31 { &.bubble-2,
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_2.png'); &.bubble-31 {
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_2.png");
} }
&.bubble-3 { &.bubble-3 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_3.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_3.png");
} }
&.bubble-4 { &.bubble-4 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_4.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_4.png");
} }
&.bubble-5 { &.bubble-5 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_5.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_5.png");
} }
&.bubble-6 { &.bubble-6 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_6.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_6.png");
} }
&.bubble-7 { &.bubble-7 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_7.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_7.png");
} }
&.bubble-8 { &.bubble-8 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_8.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_8.png");
} }
&.bubble-9 { &.bubble-9 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_9.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_9.png");
} }
&.bubble-10 { &.bubble-10 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_10.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_10.png");
} }
&.bubble-11 { &.bubble-11 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_11.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_11.png");
} }
&.bubble-12 { &.bubble-12 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_12.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_12.png");
} }
&.bubble-13 { &.bubble-13 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_13.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_13.png");
} }
&.bubble-14 { &.bubble-14 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_14.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_14.png");
} }
&.bubble-15 { &.bubble-15 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_15.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_15.png");
} }
&.bubble-16 { &.bubble-16 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_16.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_16.png");
} }
&.bubble-17 { &.bubble-17 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_17.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_17.png");
} }
&.bubble-18 { &.bubble-18 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_18.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_18.png");
} }
&.bubble-19 { &.bubble-19 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_19.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_19.png");
} }
&.bubble-20 { &.bubble-20 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_20.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_20.png");
} }
&.bubble-21 { &.bubble-21 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_21.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_21.png");
} }
&.bubble-22 { &.bubble-22 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_22.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_22.png");
} }
&.bubble-23 { &.bubble-23 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_23.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_23.png");
} }
&.bubble-24 { &.bubble-24 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_24.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_24.png");
} }
&.bubble-25 { &.bubble-25 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_25.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_25.png");
} }
&.bubble-26 { &.bubble-26 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_26.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_26.png");
} }
&.bubble-27 { &.bubble-27 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_27.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_27.png");
} }
&.bubble-28 { &.bubble-28 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_28.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_28.png");
} }
&.bubble-29 { &.bubble-29 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_29.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_29.png");
} }
&.bubble-30 { &.bubble-30 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_30.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_30.png");
} }
&.bubble-32 { &.bubble-32 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_32.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_32.png");
} }
&.bubble-33 { &.bubble-33 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_33_34.png");
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 19px; width: 19px;
height: 19px; height: 19px;
left: 11px; left: 11px;
top: 10px; top: 10px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_33_extra.png");
} }
} }
&.bubble-34 { &.bubble-34 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_33_34.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_33_34.png");
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 19px; width: 19px;
height: 19px; height: 19px;
left: 11px; left: 11px;
top: 10px; top: 10px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_34_extra.png");
} }
} }
&.bubble-35 { &.bubble-35 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_35.png");
} }
&.bubble-36 { &.bubble-36 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_36.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_36.png");
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 13px; width: 13px;
height: 18px; height: 18px;
left: 13px; left: 13px;
top: 10px; top: 10px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_36_extra.png");
} }
} }
&.bubble-37 { &.bubble-37 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_35.png");
} }
&.bubble-38 { &.bubble-38 {
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_38.png'); background-image: url("../../../../assets/images/chat/chatbubbles/bubble_38.png");
&::before { &::before {
content: ' '; content: " ";
position: absolute; position: absolute;
width: 19px; width: 19px;
height: 19px; height: 19px;
left: 11px; left: 11px;
top: 10px; top: 10px;
background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png'); background: url("../../../../assets/images/chat/chatbubbles/bubble_38_extra.png");
} }
} }
} }

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

@ -145,7 +145,9 @@ export const ChatWidgetView: FC<{}> = props =>
{ {
if(!chatMessages.length || (event.roomId !== roomSession.roomId)) return; if(!chatMessages.length || (event.roomId !== roomSession.roomId)) return;
chatMessages.forEach(chat => (chat.elementRef && (chat.left += event.offsetX))); const offsetX = (event.offsetX / window.devicePixelRatio);
chatMessages.forEach(chat => (chat.elementRef && (chat.left += offsetX)));
}, [ roomSession, chatMessages ]); }, [ roomSession, chatMessages ]);
UseRoomEngineEvent(RoomDragEvent.ROOM_DRAG, onRoomDragEvent); UseRoomEngineEvent(RoomDragEvent.ROOM_DRAG, onRoomDragEvent);
@ -192,10 +194,45 @@ export const ChatWidgetView: FC<{}> = props =>
UseMessageEventHook(RoomChatSettingsEvent, onRoomChatSettingsEvent); UseMessageEventHook(RoomChatSettingsEvent, onRoomChatSettingsEvent);
useEffect(() => useEffect(() =>
{
const resize = (event: UIEvent) =>
{ {
if(!elementRef || !elementRef.current) return; if(!elementRef || !elementRef.current) return;
elementRef.current.style.height = ((document.body.offsetHeight * GetConfiguration<number>('chat.viewer.height.percentage')) + 'px'); const currentHeight = elementRef.current.offsetHeight;
const newHeight = (document.body.offsetHeight * GetConfiguration<number>('chat.viewer.height.percentage'));
elementRef.current.style.height = `${ newHeight }px`;
setChatMessages(prevValue =>
{
if(prevValue)
{
prevValue.forEach(chat =>
{
if(chat.skipMovement)
{
chat.skipMovement = false;
return;
}
chat.top -= (currentHeight - newHeight);
});
}
return prevValue;
});
}
window.addEventListener('resize', resize);
resize(null);
return () =>
{
window.removeEventListener('resize', resize);
}
}, []); }, []);
const workerMessageReceived = useCallback((message: { [index: string]: any }) => const workerMessageReceived = useCallback((message: { [index: string]: any }) =>