From d271264b8719c4a3e24c36022b62f04d95c34591 Mon Sep 17 00:00:00 2001 From: Lorenzune Date: Sat, 4 Apr 2026 15:57:43 +0200 Subject: [PATCH] feat: add custom wired show message bubble styles --- .../images/chat/chatbubbles/bubble_200.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_201.png | Bin 0 -> 282 bytes .../images/chat/chatbubbles/bubble_202.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_212.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_220.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_222.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_224.png | Bin 0 -> 290 bytes .../images/chat/chatbubbles/bubble_226.png | Bin 0 -> 283 bytes .../images/chat/chatbubbles/bubble_228.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_250.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_251.png | Bin 0 -> 280 bytes .../images/chat/chatbubbles/bubble_252.png | Bin 0 -> 280 bytes .../chat/chatbubbles/bubble_252_extra.png | Bin 0 -> 531 bytes .../chat/chatbubbles/bubble_skull_extra.png | Bin 0 -> 137 bytes .../wired-tools/WiredCreatorToolsView.tsx | 17 + .../views/actions/WiredActionChatView.tsx | 36 +- src/css/chat/Chats.css | 713 ++++++++++++++++++ 17 files changed, 764 insertions(+), 2 deletions(-) create mode 100644 src/assets/images/chat/chatbubbles/bubble_200.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_201.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_202.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_212.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_220.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_222.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_224.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_226.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_228.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_250.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_251.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_252.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_252_extra.png create mode 100644 src/assets/images/chat/chatbubbles/bubble_skull_extra.png 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 0000000000000000000000000000000000000000..4bac26f30fe1ac64d01e80dbfc1c9fa844a35cfc GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0Z;Vsp$$8mD{&(-}LkQ|Ns9%P0bT0P5{O0{GTQODbA80zhIy^ z7%&9;R|tUw3p^r=85sBugD~Uq{1quc!9q_L#}Etuw^JPX4k&Q21V(@Sub($|NnopH?k*AoB)akonzevq&Q20{DOhv zV89UUUm*k%EbxddW?8eR=R!D3Gr#}Etuw^vT{9Z=wK39JeE^It!&ZJG2d zhoJ5EO8GacDG8sPFPFLN$klD9)K1I^s*2fr&Gf;X;C{y2a{u2oc319he)I0d*U01Y z^TmEYwEur(FV{VPvG3phxs@?J3w>y)uukjbH}-GS#n-)C`1RfTwSOy_cd_xMi#*q~dCSIbr zGW_|QoCz&c8K3a4&n)X)ncJ#*LLzA0jH>mS6N=~l;<)kcW4XS?jC|`8W$xG0W&Z!r z+<5=*XU=!4AJiG`$p3zQGv|!;T=I;Dp`6#`U+CvsTw{!{&;9zGd1nA$s_4Xf;Xun7 NJYD@<);T3K0RUEGX*U1> literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..b19b6dea579cb170b29764bc30a866b91a65b4d2 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0Z;6hyC$P+1s~oKc5-(|NsB{|Noz%)#${D6F}h{%M>#p#aR;M7Yq~! z1BPJ#3L%hSfk$L90|Vb75M~tB@M-`G7J9lkhFJK&o#M!MK!JlLF#6+v{k&<*#7h)c zhChFkGofWF;}ib%nPr_Tb6ZtUNCd5$QMEpELh;;R95=pwEZ4V~k#BvX%>8=0%>N&n z8}I-9%=vEhgF2%f`QNW^=A5yfOPmdKI;Vst0Qae8A^-pY literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..41ae43c9d6b158e9eb4d86d359a9f8d219149920 GIT binary patch literal 290 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(eheasfUeu0VRV`~P}|m$z@<-kJ6v25DWjeSG@Te3^-f^Z)HvVn}5Tm zNBBu{$t~+|6K*Y;pz!OGYUuVoc6&;gIs)tuGI_8(UF( z>(lA!PwQ@-mp?j>^ZjzIZ@>Pfl{TF)KAh|j_gvww{Ehgq8GjhR{}Y;c_}ww{l{Sp_ X`h0Wyp8HP(I)TB{)z4*}Q$iB}%6@nA literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..683b80a39f5d68721d25471bb1fb37b775491b31 GIT binary patch literal 283 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0Wb$P7Xty)9u^08EV5Bb~pb2|Nq2^6F}i@pW`}#6lY10UocP* z3>bp_D}+FT1s;*b3=Dh+L6~vJ#O${~!4gjw#}Etuw^tnb4k&QA1iD1;_}@8u;mb6w zNn4`t-|}D7+0k56I6ZK?>04t%$2+Mq*;VICkLdND-@N8{!+qO#=NM1^s%U=o_R@3i z-S=xV@ABLIoAh1nhyBz&{r{JrVmw)8{6!*QgUcKKH~M@M?GJCp@Bj9kRd5cUof6*+ Q3!wcBp00i_>zopr0K)=rB>(^b literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..a9ca914cf24da27e37d423221cd757f60e80aadd GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0VRdp<%nK>h0UNk9c_e|NnoUj?Re_CxGIH5B?bgDbA80zhIy^ z7%&9;R|tUw3p^r=85sBufiR<}hF1enu+Y=RF~q|E?G#780}320fzcoT>*q~dCSIbr zGW_|QoCz&c8K3a4&n)X)ncJ#*LLzA0jH>mS6N=~l;<)kcW4XS?jC|`8W$xG0W&Z!r z+<5=*XU=!4AJiG`$p3zQGv|!;T=I;Dp`6#`U+CvsTw{!{&;9zGd1nA$s_4Xf;Xun7 NJYD@<);T3K0RVILXdeIo literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..ab78575ca67c95b8e8e76f6124a2fb0db8e90701 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0UE>SC^lk|Mu%vrLql3ah3%61p~#w zfFanwLI@;S;1OBOz`%D9gc)~C%zg_LEcA4746*QkJH?UjfC2|gVD!iT`gzlqiI*s@ z41fM6XF|(V#wYyiGs`+x=C-PykO*2gqiTKTgyOlsIBtCVSgvm|Bj5T&nfvv0ng2gD zH{SpIne*N12X#g}^1ol-%sFE{mpr3kDCaf#7y9`Y*BImLbH6@k-WkA`Dmw9AIM8wi MPgg&ebxsLQ01+K##{d8T literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..316ae0f0c24649dad044631e941d4b8a5ab7d3b9 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0UE>SC^lkzq`BJ#>Qsl%9V0*ay2zIK=Hi%$hSa>vn0qb_&*dd z1p8MAfdmUYB8wRq_zr+DW7f4!PM~0+r;B5Vh5y?rj(i6cI9LLsKmOOxo3>26L~&*K z^EWvYTBb5S;a{Iw*10mbRrQ2K(7G8_>oX@5&;7-54>?^ZvkGun~={rYCk8SA;^84W`@ugSmA&$qb77+;_J^*Qs-0KQbwiTA>RmNR&| L`njxgN@xNA!UJQ6 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..eba1f2ffde3d50639ae5ae8b6ea769b49fa12874 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^_CPGg!3-oFl(q;1DaPU;cPEB*=VV?2IV|apzK#qG z8~eHcB(ehe(g8jpu0VRrmMz)Y*|%@sK6B>G|NsBz&6{`P#0jAIRr$CnK#H>@$S)Wu z4h9Ut{uM$X!2*xSVg?4j10c+pb*+;VC|Ky};uvD#|8|Na-vI>uFP#!Js}aaZbsGm%n8MFe{tOS_OV>wVn)98i8A-==`#O+ zXl}g!_cQ0a)eq{7cI1D*zL|5zdMOuA N44$rjF6*2UngB{jYxw{G literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..043ca85aa94b89cb8fbf6bf6a69c7ab5101fbc74 GIT binary patch literal 531 zcmV+u0_^>XP)aB^>EX>4U6ba`-PAVE-2F#rGvnd3@N%}XuHOjal;%1_J8 zN##-i17i~|6H60IqeKG(0}BHPFf=eQHUyGJK(;wlDA51~n3$WT0in5BvY9D}&jkQa zx)o>}E!d0z00Cb~L_t(Ijh&RSYQr!TMNdMq2TBIbg*YBMNki67p`g7>I%f!l(tpX2 zJ)fX2@Me%8w3G7#UedjrJ4wiv?Uvrf;^}hUmG$fi{c3t@lL2qcYO^iyZQQ$0w zoK7dClo(?YqqP?29Q*yg>4W(~3nGL-N*PSfIqJGbYwcl4vZ-Hq$a=kIyWO_BNhuLR zV2o)s=pL=H)`ldT%?2R^%jGgLJLfRQV68s`Cys^l;`=N z@wfe1x3E|&Mqz(SR20Rid2D|QWJ)Qt)|6#AXfBF^vMkYB`{B%b6FKJwVKLOTDQ#^<}KI^aW^sso$SJAp6RR&bYo#N%` zk;~-+Ai(15zecc(er1QVt$-E`(mA^Jr0X^cuvnu%s{ys%r%(DHPz($DFQ^N<{s2jk Vk;KTtMUMag002ovPDHLkV1l8+d|zdAY)08 zUoeBivm0qZj-IEBV@O4u?Wv8t3<^9)4&+BXTD~ZeBYmAoikFCr#<~qDy{1pST;FnM d?Dw_%E7v%me~yRDBVV9S22WQ%mvv4FO#q3QENcJ& literal 0 HcmV?d00001 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'); + } + } }