diff --git a/src/assets/images/chat/chatbubbles/bubble_200.png b/src/assets/images/chat/chatbubbles/bubble_200.png new file mode 100644 index 0000000..4bac26f Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_200.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_201.png b/src/assets/images/chat/chatbubbles/bubble_201.png new file mode 100644 index 0000000..db20e56 Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_201.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_202.png b/src/assets/images/chat/chatbubbles/bubble_202.png new file mode 100644 index 0000000..250ea9b Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_202.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_212.png b/src/assets/images/chat/chatbubbles/bubble_212.png new file mode 100644 index 0000000..b19b6de Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_212.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_220.png b/src/assets/images/chat/chatbubbles/bubble_220.png new file mode 100644 index 0000000..4bac26f Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_220.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_222.png b/src/assets/images/chat/chatbubbles/bubble_222.png new file mode 100644 index 0000000..2d89cb8 Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_222.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_224.png b/src/assets/images/chat/chatbubbles/bubble_224.png new file mode 100644 index 0000000..41ae43c Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_224.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_226.png b/src/assets/images/chat/chatbubbles/bubble_226.png new file mode 100644 index 0000000..683b80a Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_226.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_228.png b/src/assets/images/chat/chatbubbles/bubble_228.png new file mode 100644 index 0000000..a9ca914 Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_228.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_250.png b/src/assets/images/chat/chatbubbles/bubble_250.png new file mode 100644 index 0000000..ab78575 Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_250.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_251.png b/src/assets/images/chat/chatbubbles/bubble_251.png new file mode 100644 index 0000000..316ae0f Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_251.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_252.png b/src/assets/images/chat/chatbubbles/bubble_252.png new file mode 100644 index 0000000..eba1f2f Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_252.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_252_extra.png b/src/assets/images/chat/chatbubbles/bubble_252_extra.png new file mode 100644 index 0000000..043ca85 Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_252_extra.png differ diff --git a/src/assets/images/chat/chatbubbles/bubble_skull_extra.png b/src/assets/images/chat/chatbubbles/bubble_skull_extra.png new file mode 100644 index 0000000..03a55ac Binary files /dev/null and b/src/assets/images/chat/chatbubbles/bubble_skull_extra.png differ diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx index 3f9e0f4..7d1f539 100644 --- a/src/components/wired-tools/WiredCreatorToolsView.tsx +++ b/src/components/wired-tools/WiredCreatorToolsView.tsx @@ -3000,6 +3000,23 @@ export const WiredCreatorToolsView: FC<{}> = () => return; } + const selectedRoomObject = GetRoomEngine().getRoomObject(roomSession.roomId, selectedUser.roomIndex, RoomObjectCategory.UNIT); + const currentLocation = (selectedRoomObject?.getLocation() ?? new Vector3d(currentLiveState.positionX, currentLiveState.positionY, (currentLiveState.altitude / 100))); + const nextLocation = new Vector3d(nextX, nextY, currentLocation.z); + const nextDirectionVector = new Vector3d((nextDirection * 45)); + + GetRoomEngine().updateRoomObjectUserLocation( + roomSession.roomId, + selectedUser.roomIndex, + currentLocation, + nextLocation, + false, + 0, + nextDirectionVector, + (nextDirection * 45), + false, + true); + SendMessageComposer(new WiredUserInspectMoveComposer(selectedUser.roomIndex, nextX, nextY, nextDirection)); setSelectedUserLiveState({ diff --git a/src/components/wired/views/actions/WiredActionChatView.tsx b/src/components/wired/views/actions/WiredActionChatView.tsx index 8601d23..1e2a00c 100644 --- a/src/components/wired/views/actions/WiredActionChatView.tsx +++ b/src/components/wired/views/actions/WiredActionChatView.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from 'react'; +import { FC, useEffect, useMemo, useState } from 'react'; import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api'; import { Text } from '../../../../common'; import { useWired } from '../../../../hooks'; @@ -6,20 +6,26 @@ import { NitroInput } from '../../../../layout'; import { WiredActionBaseView } from './WiredActionBaseView'; import { WiredSourcesSelector } from '../WiredSourcesSelector'; +const SHOW_MESSAGE_STYLE_IDS = [ 34, 200, 201, 202, 210, 211, 212, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 250, 251, 252 ]; +const DEFAULT_SHOW_MESSAGE_STYLE_ID = 34; + export const WiredActionChatView: FC<{}> = props => { const [ message, setMessage ] = useState(''); + const [ visibilitySelection, setVisibilitySelection ] = useState(0); + const [ bubbleStyle, setBubbleStyle ] = useState(DEFAULT_SHOW_MESSAGE_STYLE_ID); const { trigger = null, setStringParam = null, setIntParams = null } = useWired(); const [ userSource, setUserSource ] = useState(() => { if(trigger?.intData?.length >= 1) return trigger.intData[0]; return 0; }); + const bubbleStyleIds = useMemo(() => SHOW_MESSAGE_STYLE_IDS, []); const save = () => { setStringParam(message); - setIntParams([ userSource ]); + setIntParams([ userSource, visibilitySelection, bubbleStyle ]); }; useEffect(() => @@ -27,6 +33,10 @@ export const WiredActionChatView: FC<{}> = props => setMessage(trigger.stringData); if(trigger.intData.length >= 1) setUserSource(trigger.intData[0]); else setUserSource(0); + if(trigger.intData.length >= 2) setVisibilitySelection(trigger.intData[1]); + else setVisibilitySelection(0); + if((trigger.intData.length >= 3) && SHOW_MESSAGE_STYLE_IDS.includes(trigger.intData[2])) setBubbleStyle(trigger.intData[2]); + else setBubbleStyle(DEFAULT_SHOW_MESSAGE_STYLE_ID); }, [ trigger ]); return ( @@ -39,6 +49,28 @@ export const WiredActionChatView: FC<{}> = props => { LocalizeText('wiredfurni.params.message') } ('wired.action.chat.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } /> +
+ { LocalizeText('wiredfurni.params.show_message.visibility_selection.title') } +
+ setVisibilitySelection(0) } /> + { LocalizeText('wiredfurni.params.show_message.visibility_selection.0') } +
+
+ setVisibilitySelection(1) } /> + { LocalizeText('wiredfurni.params.show_message.visibility_selection.1') } +
+
+
+ { LocalizeText('wiredfurni.params.show_message.style_selection.title') } +
+
+
+
+ +
+
); }; diff --git a/src/css/chat/Chats.css b/src/css/chat/Chats.css index cec2ac0..48334a5 100644 --- a/src/css/chat/Chats.css +++ b/src/css/chat/Chats.css @@ -807,6 +807,419 @@ } } + &.bubble-200, + &.bubble-201, + &.bubble-202, + &.bubble-210, + &.bubble-211, + &.bubble-212, + &.bubble-220, + &.bubble-221, + &.bubble-222, + &.bubble-223, + &.bubble-224, + &.bubble-225, + &.bubble-226, + &.bubble-227, + &.bubble-228, + &.bubble-229, + &.bubble-250, + &.bubble-251, + &.bubble-252 { + border-image: none; + border: 1px solid #000; + border-radius: 6px; + background: #dbdbdb; + overflow: visible; + + &::before { + content: ''; + position: absolute; + inset: 0 auto 0 0; + width: 35px; + border-radius: 5px 0 0 5px; + background: var(--notification-color); + box-shadow: inset -1px 0 0 var(--notification-divider); + z-index: 0; + } + + &.type-1 { + .message { + font-style: unset; + color: #000; + } + } + + .user-container { + display: none; + } + + .username { + display: none; + } + + .chat-content { + position: relative; + z-index: 1; + margin-left: 36px; + padding-left: 7px; + color: #000; + } + + .pointer { + display: none; + } + } + + &.bubble-200 { + --notification-color: #d43535; + --notification-divider: #a82424; + + &::after { + content: '!'; + position: absolute; + left: 9px; + top: 50%; + width: 16px; + height: 16px; + transform: translateY(-50%); + border-radius: 50%; + background: #fff; + color: #a82424; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 12px; + line-height: 1; + z-index: 1; + } + } + + &.bubble-201 { + --notification-color: #35ff24; + --notification-divider: #349f00; + + &::after { + content: ''; + position: absolute; + left: 8px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_34_extra.png'); + z-index: 1; + } + } + + &.bubble-202 { + --notification-color: #3879e3; + --notification-divider: #1b5ac2; + + &::after { + content: '!'; + position: absolute; + left: 9px; + top: 50%; + width: 16px; + height: 16px; + transform: translateY(-50%); + border-radius: 50%; + background: #fff; + color: #1b5ac2; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 12px; + line-height: 1; + z-index: 1; + } + } + + &.bubble-210 { + --notification-color: #d43535; + --notification-divider: #a82424; + + &::after { + content: '!'; + position: absolute; + left: 9px; + top: 50%; + width: 16px; + height: 16px; + transform: translateY(-50%); + border-radius: 50%; + background: #fff; + color: #a82424; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 12px; + line-height: 1; + z-index: 1; + } + } + + &.bubble-211 { + --notification-color: #3879e3; + --notification-divider: #1b5ac2; + + &::after { + content: 'i'; + position: absolute; + left: 9px; + top: 50%; + width: 16px; + height: 16px; + transform: translateY(-50%); + border-radius: 50%; + background: #fff; + color: #1b5ac2; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 11px; + line-height: 1; + z-index: 1; + } + } + + &.bubble-212 { + --notification-color: #e3883f; + --notification-divider: #c7691d; + + &::after { + content: ''; + position: absolute; + left: 6px; + top: 50%; + width: 22px; + height: 20px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='20' viewBox='0 0 22 20'%3E%3Cpath d='M11 2L20 18H2Z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M11 6V12' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='15' r='1.3' fill='white'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-220 { + --notification-color: #af3131; + --notification-divider: #872525; + + &::after { + content: "\2715"; + position: absolute; + left: 9px; + top: 50%; + transform: translateY(-54%); + color: #fff; + font-size: 16px; + font-weight: 700; + line-height: 1; + z-index: 1; + } + } + + &.bubble-221 { + --notification-color: #af3131; + --notification-divider: #872525; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M6 6L12 12M12 6L6 12' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-222 { + --notification-color: #009c6c; + --notification-divider: #005e42; + + &::after { + content: "\2713"; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-55%); + color: #fff; + font-size: 16px; + font-weight: 700; + line-height: 1; + z-index: 1; + } + } + + &.bubble-223 { + --notification-color: #009c6c; + --notification-divider: #005e42; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M5 9.2L7.6 11.8L13 6.4' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-224 { + --notification-color: #ab47ff; + --notification-divider: #7f00e9; + + &::after { + content: ''; + position: absolute; + left: 6px; + top: 50%; + width: 20px; + height: 20px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='10' y='10.5' text-anchor='middle' dominant-baseline='middle' font-size='15.5' font-weight='900' font-family='Arial, sans-serif' fill='white' stroke='white' stroke-width='0.55' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-225 { + --notification-color: #ab47ff; + --notification-divider: #7f00e9; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Ctext x='9' y='9.4' text-anchor='middle' dominant-baseline='middle' font-size='12.5' font-weight='900' font-family='Arial, sans-serif' fill='%23ab47ff' stroke='%23ab47ff' stroke-width='0.45' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-226 { + --notification-color: #009c6c; + --notification-divider: #005e42; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 4.5V12' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 7.4L9 4.7L11.7 7.4' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-227 { + --notification-color: #009c6c; + --notification-divider: #005e42; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M9 4.5V12' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 7.4L9 4.7L11.7 7.4' stroke='%23009c6c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-228 { + --notification-color: #af3131; + --notification-divider: #872525; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 5.8V13.2' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 10.3L9 13L11.7 10.3' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-229 { + --notification-color: #af3131; + --notification-divider: #872525; + + &::after { + content: ''; + position: absolute; + left: 7px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='white'/%3E%3Cpath d='M9 5.8V13.2' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M6.3 10.3L9 13L11.7 10.3' stroke='%23af3131' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + z-index: 1; + } + } + + &.bubble-250, + &.bubble-251 { + --notification-color: #2d2d2d; + --notification-divider: #0f0f0f; + + &::after { + content: ''; + position: absolute; + left: 8px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png'); + z-index: 1; + } + } + + &.bubble-251 { + background: #8b8b8b; + + .chat-content { + color: #fff; + } + } + + &.bubble-252 { + --notification-color: #b4b4b4; + --notification-divider: #6b6b6b; + + &::after { + content: ''; + position: absolute; + left: 8px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png'); + z-index: 1; + } + } + .user-container { z-index: 3; display: flex; @@ -1097,4 +1510,304 @@ &.bubble-53 { background-image: url('@/assets/images/chat/chatbubbles/bubble_53.png'); } + + &.bubble-200 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_200.png'); + + &::before { + content: '!'; + position: absolute; + left: 12px; + top: 10px; + width: 14px; + height: 14px; + border-radius: 50%; + background: #fff; + color: #a82424; + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: 700; + line-height: 1; + } + } + + &.bubble-201 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_201.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_34_extra.png'); + } + } + + &.bubble-202 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_202.png'); + + &::before { + content: '!'; + position: absolute; + left: 12px; + top: 10px; + width: 14px; + height: 14px; + border-radius: 50%; + background: #fff; + color: #1b5ac2; + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: 700; + line-height: 1; + } + } + + &.bubble-210 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_200.png'); + + &::before { + content: '!'; + position: absolute; + left: 12px; + top: 10px; + width: 14px; + height: 14px; + border-radius: 50%; + background: #fff; + color: #a82424; + display: flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: 700; + line-height: 1; + } + } + + &.bubble-211 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_202.png'); + + &::before { + content: 'i'; + position: absolute; + left: 12px; + top: 10px; + width: 14px; + height: 14px; + border-radius: 50%; + background: #fff; + color: #1b5ac2; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 700; + line-height: 1; + } + } + + &.bubble-212 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_212.png'); + + &::before { + content: ''; + position: absolute; + left: 9px; + top: 7px; + width: 20px; + height: 18px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'%3E%3Cpath d='M10 2L18 16H2Z' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M10 5.6V10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.4' r='1.2' fill='white'/%3E%3C/svg%3E"); + } + } + + &.bubble-220 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_220.png'); + + &::before { + content: "\2715"; + position: absolute; + left: 12px; + top: 9px; + color: #fff; + font-size: 15px; + font-weight: 700; + line-height: 1; + } + } + + &.bubble-221 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_220.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M5.3 5.3L10.7 10.7M10.7 5.3L5.3 10.7' stroke='%23af3131' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); + } + } + + &.bubble-222 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_222.png'); + + &::before { + content: "\2713"; + position: absolute; + left: 12px; + top: 8px; + color: #fff; + font-size: 15px; + font-weight: 700; + line-height: 1; + } + } + + &.bubble-223 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_222.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M4.6 8.2L7 10.6L11.6 6' stroke='%23009c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + } + } + + &.bubble-224 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_224.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 6px; + width: 20px; + height: 20px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctext x='10' y='10.5' text-anchor='middle' dominant-baseline='middle' font-size='15.5' font-weight='900' font-family='Arial, sans-serif' fill='white' stroke='white' stroke-width='0.55' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E"); + } + } + + &.bubble-225 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_224.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ctext x='8' y='8.3' text-anchor='middle' dominant-baseline='middle' font-size='11.2' font-weight='900' font-family='Arial, sans-serif' fill='%23ab47ff' stroke='%23ab47ff' stroke-width='0.4' paint-order='stroke fill'%3E%3F%3C/text%3E%3C/svg%3E"); + } + } + + &.bubble-226 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_226.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.3V10.8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.6L8 4.4L10.2 6.6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + } + } + + &.bubble-227 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_226.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M8 4.3V10.8' stroke='%23009c6c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 6.6L8 4.4L10.2 6.6' stroke='%23009c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + } + } + + &.bubble-228 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_228.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.2V11.7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 9.5L8 11.7L10.2 9.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + } + } + + &.bubble-229 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_228.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Cpath d='M8 5.2V11.7' stroke='%23af3131' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M5.8 9.5L8 11.7L10.2 9.5' stroke='%23af3131' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); + } + } + + &.bubble-250 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_250.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png'); + } + } + + &.bubble-251 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_251.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_skull_extra.png'); + } + } + + &.bubble-252 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_252.png'); + + &::before { + content: ''; + position: absolute; + left: 10px; + top: 8px; + width: 16px; + height: 16px; + background: center / contain no-repeat url('@/assets/images/chat/chatbubbles/bubble_252_extra.png'); + } + } }