mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 15:40:51 +01:00
More scale issue fixes
This commit is contained in:
Bill
parent
bed388f134
commit
a5a73ba1fb
@ -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 { LocalizeText } from '../../../../utils/LocalizeText';
|
||||
import { GetRoomObjectScreenLocation } from '../../GetRoomObjectScreenLocation';
|
||||
import { RoomWidgetUpdateChatEvent, RoomWidgetUpdateEvent } from '../events';
|
||||
import { RoomWidgetMessage } from '../messages';
|
||||
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 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);
|
||||
|
||||
let username = '';
|
||||
@ -125,36 +126,6 @@ export class RoomWidgetChatHandler extends RoomWidgetHandler implements IAvatarI
|
||||
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
|
||||
{
|
||||
let existing = this._avatarImageCache.get(figure);
|
||||
|
||||
@ -26,8 +26,6 @@ export const RoomColorView: FC<{}> = props =>
|
||||
else
|
||||
{
|
||||
roomBackground.tint = newColor;
|
||||
roomBackground.width = GetNitroInstance().width;
|
||||
roomBackground.height = GetNitroInstance().height;
|
||||
roomBackground.visible = true;
|
||||
}
|
||||
}, [ roomBackground ]);
|
||||
@ -97,8 +95,6 @@ export const RoomColorView: FC<{}> = props =>
|
||||
if(!roomBackground) return;
|
||||
|
||||
roomBackground.tint = originalRoomBackgroundColor;
|
||||
roomBackground.width = GetNitroInstance().width;
|
||||
roomBackground.height = GetNitroInstance().height;
|
||||
roomBackground.visible = true;
|
||||
|
||||
return;
|
||||
@ -113,7 +109,7 @@ export const RoomColorView: FC<{}> = props =>
|
||||
{
|
||||
if(!roomSession) return;
|
||||
|
||||
const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId);
|
||||
const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(GetRoomEngine().activeRoomId, 1);
|
||||
|
||||
if(!canvas) return;
|
||||
|
||||
@ -122,6 +118,8 @@ export const RoomColorView: FC<{}> = props =>
|
||||
const master = (canvas.master as NitroContainer);
|
||||
|
||||
background.visible = false;
|
||||
background.width = GetNitroInstance().width;
|
||||
background.height = GetNitroInstance().height;
|
||||
|
||||
master.addChildAt(background, 0);
|
||||
master.filters = [ filter ];
|
||||
@ -129,6 +127,14 @@ export const RoomColorView: FC<{}> = props =>
|
||||
setRoomBackground(background);
|
||||
setRoomFilter(filter);
|
||||
|
||||
const resize = (event: UIEvent) =>
|
||||
{
|
||||
background.width = GetNitroInstance().width;
|
||||
background.height = GetNitroInstance().height;
|
||||
}
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
return () =>
|
||||
{
|
||||
setRoomBackground(prevValue =>
|
||||
@ -146,6 +152,8 @@ export const RoomColorView: FC<{}> = props =>
|
||||
});
|
||||
|
||||
setOriginalRoomBackgroundColor(0);
|
||||
|
||||
window.removeEventListener('resize', resize);
|
||||
}
|
||||
}, [ roomSession ]);
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@ export const RoomView: FC<{}> = props =>
|
||||
const roomEngine = GetRoomEngine();
|
||||
const roomId = roomSession.roomId;
|
||||
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);
|
||||
|
||||
@ -151,7 +151,7 @@ export const RoomView: FC<{}> = props =>
|
||||
canvas.style.height = `${ (100 * window.devicePixelRatio) }%`;
|
||||
}
|
||||
|
||||
window.onresize = () =>
|
||||
const resize = (event: UIEvent) =>
|
||||
{
|
||||
const nitroInstance = GetNitroInstance();
|
||||
const width = (window.innerWidth * window.devicePixelRatio);
|
||||
@ -166,14 +166,15 @@ export const RoomView: FC<{}> = props =>
|
||||
|
||||
const element = elementRef.current;
|
||||
|
||||
if(!element) return;
|
||||
if(element) element.appendChild(canvas);
|
||||
|
||||
element.appendChild(canvas);
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
return () =>
|
||||
{
|
||||
element.removeChild(canvas);
|
||||
window.onresize = null;
|
||||
if(element) element.removeChild(canvas);
|
||||
|
||||
window.removeEventListener('resize', resize);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
.chat-mention {
|
||||
padding: 1px 5px;
|
||||
font-weight: bold;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
cursor: pointer;
|
||||
border-radius: 100px;
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
// animation-duration: 0.2s;
|
||||
// -webkit-animation-fill-mode: both;
|
||||
// animation-fill-mode: both;
|
||||
// -webkit-animation-name: bounceIn;
|
||||
// -webkit-animation-name: bounceIn;
|
||||
// animation-name: bounceIn;
|
||||
|
||||
.user-container-bg {
|
||||
@ -47,7 +47,7 @@
|
||||
height: calc(100% - 0.5px);
|
||||
border-radius: 7px;
|
||||
z-index: 1;
|
||||
background-color: #C8C8C8;
|
||||
background-color: #c8c8c8;
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
@ -55,7 +55,7 @@
|
||||
z-index: 1;
|
||||
word-break: break-word;
|
||||
max-width: 350px;
|
||||
min-height: 25px;
|
||||
min-height: 26px;
|
||||
font-size: 14px;
|
||||
|
||||
border-image-slice: 17 6 6 29 fill;
|
||||
@ -73,13 +73,15 @@
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
&.type-0 { // normal
|
||||
&.type-0 {
|
||||
// normal
|
||||
.message {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&.type-1 { // whisper
|
||||
&.type-1 {
|
||||
// whisper
|
||||
.message {
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
@ -87,23 +89,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 { // shout
|
||||
&.type-2 {
|
||||
// shout
|
||||
.message {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
&.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-width: 18px 6px 6px 29px;
|
||||
@ -118,12 +121,13 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
border-image-source: url('../../../../assets/images/chat/chatbubbles/bubble_2.png');
|
||||
&.bubble-2,
|
||||
&.bubble-31 {
|
||||
border-image-source: url("../../../../assets/images/chat/chatbubbles/bubble_2.png");
|
||||
|
||||
.user-container {
|
||||
display: none;
|
||||
@ -138,53 +142,53 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_3_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_4_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_5_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_6_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_7_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_8.png");
|
||||
|
||||
border-image-slice: 20 6 6 27 fill;
|
||||
border-image-width: 20px 6px 6px 27px;
|
||||
@ -195,12 +199,12 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_8_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_9.png");
|
||||
|
||||
border-image-slice: 17 18 12 19 fill;
|
||||
border-image-width: 17px 18px 12px 19px;
|
||||
@ -211,7 +215,7 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_9_pointer.png");
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
bottom: -6px;
|
||||
@ -219,7 +223,7 @@
|
||||
}
|
||||
|
||||
&.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-width: 29px 18px 8px 37px;
|
||||
@ -231,7 +235,7 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_10_pointer.png");
|
||||
width: 7px;
|
||||
height: 8px;
|
||||
bottom: -3px;
|
||||
@ -239,80 +243,80 @@
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_11_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_12_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_13_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_14_pointer.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_15_pointer.png');
|
||||
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-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');
|
||||
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-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');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_18.png");
|
||||
|
||||
border-image-slice: 7 16 8 16 fill;
|
||||
border-image-width: 7px 16px 8px 16px;
|
||||
@ -323,13 +327,13 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_18_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_19.png");
|
||||
|
||||
border-image-slice: 17 6 9 19 fill;
|
||||
border-image-width: 17px 6px 9px 19px;
|
||||
@ -340,12 +344,12 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
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-width: 18px 6px 8px 19px;
|
||||
@ -356,12 +360,12 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
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-width: 20px 6px 12px 24px;
|
||||
@ -372,13 +376,13 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_21_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_22.png");
|
||||
|
||||
border-image-slice: 18 19 11 33 fill;
|
||||
border-image-width: 18px 19px 11px 33px;
|
||||
@ -389,24 +393,24 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_22_pointer.png');
|
||||
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-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');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_24.png");
|
||||
|
||||
border-image-slice: 23 8 6 40 fill;
|
||||
border-image-width: 23px 8px 6px 40px;
|
||||
@ -418,13 +422,13 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_24_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_25.png");
|
||||
|
||||
border-image-slice: 10 13 8 28 fill;
|
||||
border-image-width: 10px 13px 8px 28px;
|
||||
@ -435,14 +439,14 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_25_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_26.png");
|
||||
|
||||
border-image-slice: 16 9 8 29 fill;
|
||||
border-image-width: 16px 9px 8px 29px;
|
||||
@ -450,18 +454,18 @@
|
||||
|
||||
.chat-content {
|
||||
color: #c59432;
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, .3);
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_26_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_27.png");
|
||||
|
||||
border-image-slice: 25 6 5 36 fill;
|
||||
border-image-width: 25px 6px 5px 36px;
|
||||
@ -473,12 +477,12 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_27_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_28.png");
|
||||
|
||||
border-image-slice: 16 7 7 27 fill;
|
||||
border-image-width: 16px 7px 7px 27px;
|
||||
@ -489,50 +493,50 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_28_pointer.png');
|
||||
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-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');
|
||||
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');
|
||||
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');
|
||||
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-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');
|
||||
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-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;
|
||||
@ -547,29 +551,28 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 9px;
|
||||
top: 2px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_33_extra.png");
|
||||
}
|
||||
|
||||
.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 {
|
||||
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-width: 7px 6px 6px 39px;
|
||||
border-image-outset: 2px 0px 0px 0px;
|
||||
|
||||
&.type-1 {
|
||||
|
||||
.message {
|
||||
font-style: unset;
|
||||
color: inherit;
|
||||
@ -589,22 +592,22 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 9px;
|
||||
top: 2px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_34_extra.png");
|
||||
}
|
||||
|
||||
.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 {
|
||||
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-width: 19px 6px 5px 29px;
|
||||
@ -615,12 +618,12 @@
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_35_pointer.png');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_36.png");
|
||||
|
||||
border-image-slice: 17 7 5 30 fill;
|
||||
border-image-width: 17px 7px 5px 30px;
|
||||
@ -631,34 +634,34 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_36_extra.png");
|
||||
}
|
||||
|
||||
.pointer {
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_36_pointer.png');
|
||||
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-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');
|
||||
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-source: url("../../../../assets/images/chat/chatbubbles/bubble_38.png");
|
||||
|
||||
border-image-slice: 17 7 5 30 fill;
|
||||
border-image-width: 17px 7px 5px 30px;
|
||||
@ -669,17 +672,17 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 3px;
|
||||
top: 2px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_38_extra.png");
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&.bubble-0 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_0.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_0.png");
|
||||
}
|
||||
|
||||
&.bubble-1 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_1.png');
|
||||
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-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');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_3.png");
|
||||
}
|
||||
|
||||
&.bubble-4 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_4.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_4.png");
|
||||
}
|
||||
|
||||
&.bubble-5 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_5.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_5.png");
|
||||
}
|
||||
|
||||
&.bubble-6 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_6.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_6.png");
|
||||
}
|
||||
|
||||
&.bubble-7 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_7.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_7.png");
|
||||
}
|
||||
|
||||
&.bubble-8 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_8.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_8.png");
|
||||
}
|
||||
|
||||
&.bubble-9 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_9.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_9.png");
|
||||
}
|
||||
|
||||
&.bubble-10 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_10.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_10.png");
|
||||
}
|
||||
|
||||
&.bubble-11 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_11.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_11.png");
|
||||
}
|
||||
|
||||
&.bubble-12 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_12.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_12.png");
|
||||
}
|
||||
|
||||
&.bubble-13 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_13.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_13.png");
|
||||
}
|
||||
|
||||
&.bubble-14 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_14.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_14.png");
|
||||
}
|
||||
|
||||
&.bubble-15 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_15.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_15.png");
|
||||
}
|
||||
|
||||
&.bubble-16 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_16.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_16.png");
|
||||
}
|
||||
|
||||
&.bubble-17 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_17.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_17.png");
|
||||
}
|
||||
|
||||
&.bubble-18 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_18.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_18.png");
|
||||
}
|
||||
|
||||
&.bubble-19 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_19.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_19.png");
|
||||
}
|
||||
|
||||
&.bubble-20 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_20.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_20.png");
|
||||
}
|
||||
|
||||
&.bubble-21 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_21.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_21.png");
|
||||
}
|
||||
|
||||
&.bubble-22 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_22.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_22.png");
|
||||
}
|
||||
|
||||
&.bubble-23 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_23.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_23.png");
|
||||
}
|
||||
|
||||
&.bubble-24 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_24.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_24.png");
|
||||
}
|
||||
|
||||
&.bubble-25 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_25.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_25.png");
|
||||
}
|
||||
|
||||
&.bubble-26 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_26.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_26.png");
|
||||
}
|
||||
|
||||
&.bubble-27 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_27.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_27.png");
|
||||
}
|
||||
|
||||
&.bubble-28 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_28.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_28.png");
|
||||
}
|
||||
|
||||
&.bubble-29 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_29.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_29.png");
|
||||
}
|
||||
|
||||
&.bubble-30 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_30.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_30.png");
|
||||
}
|
||||
|
||||
&.bubble-32 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_32.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_32.png");
|
||||
}
|
||||
|
||||
&.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 {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 11px;
|
||||
top: 10px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_33_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_33_extra.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 11px;
|
||||
top: 10px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_34_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_34_extra.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-35 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_35.png");
|
||||
}
|
||||
|
||||
&.bubble-36 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_36.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_36.png");
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 18px;
|
||||
left: 13px;
|
||||
top: 10px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_36_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_36_extra.png");
|
||||
}
|
||||
}
|
||||
|
||||
&.bubble-37 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_35.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_35.png");
|
||||
}
|
||||
|
||||
&.bubble-38 {
|
||||
background-image: url('../../../../assets/images/chat/chatbubbles/bubble_38.png');
|
||||
background-image: url("../../../../assets/images/chat/chatbubbles/bubble_38.png");
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 11px;
|
||||
top: 10px;
|
||||
background: url('../../../../assets/images/chat/chatbubbles/bubble_38_extra.png');
|
||||
background: url("../../../../assets/images/chat/chatbubbles/bubble_38_extra.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,7 +145,9 @@ export const ChatWidgetView: FC<{}> = props =>
|
||||
{
|
||||
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 ]);
|
||||
|
||||
UseRoomEngineEvent(RoomDragEvent.ROOM_DRAG, onRoomDragEvent);
|
||||
@ -193,9 +195,44 @@ export const ChatWidgetView: FC<{}> = props =>
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!elementRef || !elementRef.current) return;
|
||||
const resize = (event: UIEvent) =>
|
||||
{
|
||||
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 }) =>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user