From d403816265b032c409e21bce238cb2d941f55527 Mon Sep 17 00:00:00 2001 From: DuckieTM Date: Tue, 11 Mar 2025 22:30:51 +0100 Subject: [PATCH] :up: Room-Tool --- src/common/card/NitroCardView.scss | 6 +- .../draggable-window/DraggableWindow.tsx | 1 + .../views/alert-layouts/GetAlertLayout.tsx | 9 +- .../room-tools/RoomToolsWidgetView.tsx | 4 +- src/css/NitroCardView.css | 248 ++++++++ src/css/room/ChatHistoryView.css | 4 + src/css/room/RoomWidgets.css | 174 ++++++ src/css/widgets/FurnitureWidgets.css | 554 ++++++++++++++++++ src/index.tsx | 6 + 9 files changed, 997 insertions(+), 9 deletions(-) create mode 100644 src/css/NitroCardView.css create mode 100644 src/css/room/ChatHistoryView.css create mode 100644 src/css/room/RoomWidgets.css create mode 100644 src/css/widgets/FurnitureWidgets.css diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss index a552182..ea56900 100644 --- a/src/common/card/NitroCardView.scss +++ b/src/common/card/NitroCardView.scss @@ -1,5 +1,5 @@ -$nitro-card-header-height: 33px; -$nitro-card-tabs-height: 33px; +$nitro-card-header-height: 133px; +$nitro-card-tabs-height: 133px; .nitro-card { resize: both; @@ -71,7 +71,7 @@ $nitro-card-tabs-height: 33px; } .nitro-card-tabs { - background-color: $secondary; + background-color: #FFFFFF; .nav-item { padding: $nav-link-padding-y $nav-link-padding-x; diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx index fa9763d..37f1e2c 100644 --- a/src/common/draggable-window/DraggableWindow.tsx +++ b/src/common/draggable-window/DraggableWindow.tsx @@ -5,6 +5,7 @@ import { GetLocalStorage, SetLocalStorage, WindowSaveOptions } from '../../api'; import { DraggableWindowPosition } from './DraggableWindowPosition'; const CURRENT_WINDOWS: HTMLElement[] = []; +const POS_MEMORY: Map = new Map(); const BOUNDS_THRESHOLD_TOP: number = 0; const BOUNDS_THRESHOLD_LEFT: number = 0; diff --git a/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx b/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx index 268bf64..e19da0f 100644 --- a/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx +++ b/src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx @@ -7,15 +7,16 @@ export const GetAlertLayout = (item: NotificationAlertItem, onClose: () => void) { if(!item) return null; - const props = { key: item.id, item, onClose }; + const key = item.id; + const props = { item, onClose }; switch(item.alertType) { case NotificationAlertType.NITRO: - return ; + return ; case NotificationAlertType.SEARCH: - return ; + return ; default: - return ; + return ; } }; diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index 9b65104..cc0c6a4 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -72,10 +72,10 @@ export const RoomToolsWidgetView: FC<{}> = props => }, [ roomName, roomOwner, roomTags ]); return ( -
+
handleToolClick('settings') } /> -
handleToolClick('zoom') } /> +
handleToolClick('zoom') } />
handleToolClick('chat_history') } /> { navigatorData.canRate &&
handleToolClick('like_room') } /> } diff --git a/src/css/NitroCardView.css b/src/css/NitroCardView.css new file mode 100644 index 0000000..40e6ec8 --- /dev/null +++ b/src/css/NitroCardView.css @@ -0,0 +1,248 @@ +$nitro-card-header-height: 133px; +$nitro-card-tabs-height: 133px; + +.nitro-card { + resize: both; + + @include media-breakpoint-down(lg) { + max-width: 100vw !important; + max-height: 100vh !important; + } + + &.theme-primary { + border: $border-width solid $border-color; + + .nitro-card-header { + min-height: 33px; + max-height: 33px; + background: $primary; + + .nitro-card-header-text { + color: $white; + text-shadow: 0px 4px 4px rgba($black, 0.25); + @include font-size($h4-font-size); + } + + .nitro-card-header-close { + cursor: pointer; + padding: 2px 2px; + line-height: 1; + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + + &:hover { + filter: brightness(1.2); + } + + &:active { + filter: brightness(0.8); + } + } + + .nitro-card-header-report-camera { + cursor: pointer; + padding: 1px 3px; + line-height: 1; + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + + &:hover { + filter: brightness(1.2); + } + + &:active { + filter: brightness(0.8); + } + } + } + + .nitro-card-tabs { + background-color: $secondary; + + .nav-item { + padding: $nav-link-padding-y $nav-link-padding-x; + background-color: $muted; + color: $black; + z-index: 1; + margin-bottom: -1px; + + &.active { + background-color: $light; + border-color: $border-color $border-color $light !important; + border-bottom: 1px solid black; + + &:before { + background: $white; + } + } + + &:before { + content: ''; + position: absolute; + width: 93%; + height: 3px; + border-radius: 0.25rem; + top: 1.5px; + left: 0; + right: 0; + margin: auto; + background: #c2c9d1; + z-index: 1; + } + } + } + + .content-area { + background-color: $light; + } + } + + &.theme-primary-slim { + border: $border-width solid $border-color; + + .nitro-card-header { + position: relative; + min-height: 28px; + max-height: 28px; + background: repeating-linear-gradient($tertiary, $tertiary 50%, $quaternary 50%, $quaternary 100%); + border-bottom: 2px solid darken($quaternary, 5); + box-shadow: 0 2px white; + width: 100%; + margin: 0; + padding-top:2px; + + &:before { + position: absolute; + content: ' '; + top: 0; + left: 0; + width: 100%; + height: 2px; + background-color: rgba($white, 0.3); + } + + .nitro-card-header-text { + color: $white; + text-shadow: 0px 4px 4px rgba($black, 0.25); + @include font-size($h5-font-size); + min-height: 21px; + } + + .nitro-card-header-close { + cursor: pointer; + padding: 0px 2px; + line-height: 1; + @include font-size($h7-font-size); + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + + &:hover { + filter: brightness(1.2); + } + + &:active { + filter: brightness(0.8); + } + } + + .nitro-card-header-report-camera { + cursor: pointer; + padding: 0px 2px; + margin-right: 4px; + line-height: 1; + @include font-size($h7-font-size); + border-radius: $border-radius; + box-shadow: 0 0 0 1.6px $white; + border: 2px solid #921911; + background: repeating-linear-gradient( + rgba(245, 80, 65, 1), + rgba(245, 80, 65, 1) 50%, + rgba(194, 48, 39, 1) 50%, + rgba(194, 48, 39, 1) 100% + ); + + &:hover { + filter: brightness(1.2); + } + + &:active { + filter: brightness(0.8); + } + } + } + + .nitro-card-tabs { + background-color: $secondary; + } + + .content-area { + background-color: $light; + } + } +} + +.content-area { + height: 100%; + padding-top: $container-padding-x; + padding-bottom: $container-padding-x; + overflow: auto; + + &.theme-dark { + background-color: #1C323F !important; + } +} + +@include media-breakpoint-down(lg) { + .content-area { + height: 100% !important; + min-height: auto !important; + max-height: 100% !important; + } +} + +.nitro-card-header { + position: relative; + height: 100%; +} + +.nitro-card-tabs { + height: 100%; + min-height: $nitro-card-tabs-height; + max-height: $nitro-card-tabs-height; + border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; +} + +.nitro-card-accordion-set { + + &.active { + height: 100%; + overflow: hidden; + background: rgba($white, 0.5); + border-bottom: 1px solid rgba($black, 0.2); + } + + .nitro-card-accordion-set-header { + border-bottom: 1px solid rgba($black, 0.2); + } +} diff --git a/src/css/room/ChatHistoryView.css b/src/css/room/ChatHistoryView.css new file mode 100644 index 0000000..f4bf763 --- /dev/null +++ b/src/css/room/ChatHistoryView.css @@ -0,0 +1,4 @@ +.nitro-chat-history { + width: 300px; + height: 200px; +} diff --git a/src/css/room/RoomWidgets.css b/src/css/room/RoomWidgets.css new file mode 100644 index 0000000..462645d --- /dev/null +++ b/src/css/room/RoomWidgets.css @@ -0,0 +1,174 @@ +.nitro-room-tools-container { + position: absolute; + bottom: 75px; + left: 10px; + + .nitro-room-tools { + background: #212131; + box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; + transition: all .2s ease; + z-index: 71; + margin-left: -20px; + + .list-group-item { + background: transparent; + padding: 3px 0px; + color: #FFF; + border-color: rgba(#000, 0.3); + cursor: pointer; + + &:hover { + text-decoration: underline; + } + + &:first-child { + padding-top: 8px; + } + + &:last-child { + border-bottom: none; + padding-bottom: 8px; + } + + .tools-item { + .icon { + width: 22px; + background-repeat: no-repeat; + background-position: center; + } + + &:hover { + text-decoration: underline; + } + } + } + } + + .nitro-room-history { + background: #212131; + box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); + transition: all .2s ease; + width: 150px; + overflow: hidden; + z-index: 3; + } + + .nitro-room-tools-info { + background: #212131; + box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); + transition: all .2s ease; + max-width: 250px; + } +} + +.nitro-room-tools-history { + position: absolute; + left: calc(100% - 2px); + margin-left: 2px; + height: 5%; +} + +.wordquiz-question { + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + font-size: large; + background: rgba(#000, 0.95); + box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); + border-radius: $border-radius; + transition: all 0.2s ease; + z-index: 21; + + .question { + max-width: 300px; + } +} + +.word-quiz-dislike { + background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-down.png'); + width: 31px; + height: 34px; +} + +.word-quiz-like { + background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-up.png'); + width: 31px; + height: 34px; +} + +.word-quiz-dislike-sm { + background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png'); + width: 22px; + height: 22px; +} + +.word-quiz-like-sm { + background: url('@/assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png'); + height: 22px; + width: 22px; +} + +.nitro-widget-doorbell { + width: 300px; + height: 200px; +} + +.toggle-roomtool { + min-height: 95px; + width: 20px; + margin-left: -5px; + padding-left: 10px; + z-index: 72; +} + +.room-tool-item { + height: 20px; + cursor: pointer; +} + +.margin-icons { + margin-top: -14px; +} + +.margin-button-history { + margin-left: 4px; + margin-right: 4px; +} + +.text-no-promote { + font-size: 15px; +} + +.icon-style { + margin-top: 1px; + margin-left: 4px; +} + +.arrow-right-style { + margin-right: 4px; +} + +.tags { + background-color: #1B2834; + color: #1A75A6; + font-size: 10px; + + &:hover { + color: #419AD2; + } +} + +/* +@import './avatar-info/AvatarInfoWidgetView'; +@import './chat/ChatWidgetView'; +@import './chat-input/ChatInputView'; +@import './choosers/ChooserWidgetView'; +@import './context-menu/ContextMenu'; +@import './friend-request/FriendRequestDialogView'; +@import './furniture/FurnitureWidgets'; +@import './mysterybox/MysteryBoxExtensionView'; +@import './pet-package/PetPackageWidgetView'; +*/ \ No newline at end of file diff --git a/src/css/widgets/FurnitureWidgets.css b/src/css/widgets/FurnitureWidgets.css new file mode 100644 index 0000000..54ba0e5 --- /dev/null +++ b/src/css/widgets/FurnitureWidgets.css @@ -0,0 +1,554 @@ +.nitro-room-widgets { + pointer-events: none; +} + +.nitro-widget-custom-stack-height { + width: 275px; + height: 220px; +} + +.nitro-room-widget-toner { + width: 190px; +} + +.nitro-room-widget-dimmer { + width: 275px; + + .dimmer-banner { + width: 56px; + height: 79px; + background: url('@/assets/images/room-widgets/dimmer-widget/dimmer_banner.png') + center no-repeat; + } + + .color-swatch { + height: 30px; + border: 2px solid #FFF; + box-shadow: inset 3px 3px rgba(0, 0, 0, 0.2); + + &.active { + box-shadow: none; + } + } +} + +.nitro-widget-crafting { + width: 500px; + height: 300px; +} + +.nitro-widget-exchange-credit { + width: 375px; + height: 150px; + + .exchange-image { + background-image: url('@/assets/images/room-widgets/exchange-credit/exchange-credit-image.png'); + width: 103px; + height: 103px; + } +} + +.nitro-external-image-widget { + .picture-preview { + width: 320px; + height: 320px; + } + + .picture-preview-buttons { + display: flex; + align-items: center; + justify-content: space-between; + color: gray; + } + + .picture-preview-buttons-previous, + .picture-preview-buttons-next { + color: #222; + background-color: white; + padding: 10px; + border-radius: 50%; + } +} + +.nitro-gift-opening { + width: 340px; + resize: none; +} + +.nitro-mannequin { + width: 300px; + + .mannequin-preview { + display: flex; + justify-content: center; + align-items: center; + width: 83px; + height: 130px; + background-image: url('@/assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png'); + overflow: hidden; + + .avatar-image { + background-position: unset; + top: -8px; + } + } +} + +.nitro-stickie { + position: relative; + width: 185px; + height: 178px; + top: 25px; + left: 25px; + padding: 1px; + pointer-events: all; + + .stickie-header { + width: 183px; + height: 18px; + padding: 0 7px; + + .header-trash, + .header-close { + cursor: pointer; + } + + .stickie-color { + width: 10px; + height: 10px; + cursor: pointer; + } + } + + .stickie-context { + width: 183px; + height: 145px; + padding: 2px 7px; + font-size: 12px; + color: #000; + + .context-text { + width: 100%; + height: 100%; + padding: 0; + overflow-wrap: break-word; + white-space: break-spaces; + overflow-y: auto; + } + + textarea { + background: transparent; + border: 0; + outline: none; + box-shadow: none; + resize: none; + font-style: italic; + + &:active { + border: 0; + outline: none; + box-shadow: none; + } + } + } +} + +.nitro-stickie-image { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-spritesheet.png'); + + &.stickie-blue, + &.stickie-yellow, + &.stickie-green, + &.stickie-pink { + width: 185px; + height: 178px; + } + + &.stickie-blue { + background-position: -2px -2px; + } + + &.stickie-yellow { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-yellow.png'); + //background-position: -191px -184px; + } + + &.stickie-green { + background-position: -191px -2px; + } + + &.stickie-pink { + background-position: -2px -184px; + } + + &.stickie-christmas { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-christmas.png'); + } + + &.stickie-shakesp { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-shakesp.png'); + } + + &.stickie-dreams { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-dreams.png'); + } + + &.stickie-heart { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-heart.png'); + } + + &.stickie-juninas { + background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-juninas.png'); + } + + &.stickie-close { + width: 10px; + height: 10px; + background-position: -2px -366px; + } + + &.stickie-trash { + width: 9px; + height: 10px; + background-position: -16px -366px; + } +} + +.nitro-engraving-lock { + width: 300px; + + .engraving-lock-stage-1 { + width: 31px; + height: 39px; + background-position: -380px -43px; + background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png'); + } + + .engraving-lock-stage-2 { + width: 36px; + height: 43px; + background-position: -375px 0px; + background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png'); + } +} + +.nitro-engraving-lock-view { + width: 375px; + height: 210px; + background-position: 0px 0px; + background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png'); + + color: #622e54; + font-weight: bold; + font-size: 16px; + text-shadow: 0px 1px white; + + &.engraving-lock-3 { + background-position: 0px -210px; + color: #614110; + } + + &.engraving-lock-4 { + background-position: 0px -420px; + color: #f1dcc8; + text-shadow: 0px 2px rgba(0, 0, 0, 0.4); + + .engraving-lock-avatar { + margin-bottom: 10px; + } + } + + .engraving-lock-close { + position: absolute; + cursor: pointer; + width: 15px; + height: 15px; + top: 34px; + right: 27px; + } + + .engraving-lock-avatar { + width: 70px; + height: 120px; + + div { + position: absolute; + margin-top: -5px; + } + + &:nth-child(1) { + div { + margin-left: -10px; + } + } + + &:nth-child(2) { + div { + margin-left: -15px; + } + } + } +} + +.nitro-widget-high-score { + width: 280px; + max-width: 280px; + height: 320px; + + border-radius: 0.3rem; + border: solid 1px #000; + + .header { + border-image-source: none !important; + background-color: #40403e; + border-radius: 0.3rem 0.3rem 0 0; + } + + .align-right { + text-align: right; + } + + .section-border { + border: solid 1px #8c8a88; + } + + .high-score-content { + height: 100%; + background-color: #000; + border-radius: 0.3rem; + } + + .score-footer { + color: #9a9896; + font-weight: bold; + } +} + +.youtube-tv-widget { + width: 600px; + height: 380px; + + .youtube-video-container { + .empty-video { + background-color: black; + color: white; + width: 100%; + height: 100%; + text-align: center; + } + + .youtubeContainer { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + margin-bottom: 50px; + } + + .youtubeContainer iframe { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + } + } + + .playlist-container { + overflow-y: auto; + margin-right: -10px; + color: black; + height: 100%; + + .playlist-controls { + width: 100%; + .icon { + margin-right: 10px; + margin-bottom: 10px; + } + } + + .playlist-grid { + height: 100%; + width: 100%; + } + } +} + +.nitro-playlist-editor-widget { + width: 625px; + height: 440px; + + img.my-music { + position: absolute; + top: -4px; + left: -4px; + z-index: 0; + } + + img.playlist-img { + position: absolute; + top: -4px; + left: 0; + z-index: 0; + } + + img.get-more, + img.add-songs { + position: absolute; + bottom: 0; + left: 0; + z-index: 0; + } + + .playlist-bottom { + z-index: 3; + } + + .move-disk { + width: 22px; + height: 18px; + background-image: url('@/assets/images/room-widgets/playlist-editor/move.png'); + } + + .disk-2, + .disk-image { + background-blend-mode: multiply; + } + + .disk-2 { + width: 38px; + height: 38px; + background-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png'); + background-position: center; + background-repeat: no-repeat; + + &.playing-song { + background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png'); + } + + &.selected-song { + background-image: url('@/assets/images/room-widgets/playlist-editor/move.png'); + transform: scaleX(-1); + } + + &:not(.playing-song):not(.selected-song) { + -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png'); + mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png'); + } + } + + .pause-song { + width: 18px; + height: 20px; + background-image: url('@/assets/images/room-widgets/playlist-editor/pause.png'); + } + + .pause-btn { + width: 16px; + height: 16px; + + background-image: url('@/assets/images/room-widgets/playlist-editor/pause-btn.png'); + } + + .music-note { + width: 38px; + height: 38px; + background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png'); + } + + .preview-song { + width: 16px; + height: 16px; + background-image: url('@/assets/images/room-widgets/playlist-editor/preview.png'); + } + + .layout-grid-item { + min-height: 95px; + min-width: 95px; + position: relative; + + .disk-image { + background: url('@/assets/images/room-widgets/playlist-editor/disk_image.png'); + -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png'); + mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png'); + height: 76px; + width: 76px; + } + } +} + +.nitro-mysterybox-dialog { + width: 375px; + height: 210px; + + .prize-container { + height: 80px; + width: 81px; + background-image: url('@/assets/images/prize/prize_background.png'); + background-repeat: no-repeat; + background-position: center; + } +} + +.nitro-mysterytrophy-dialog +{ + .mysterytrophy-dialog-top + { + width: 400px; + height: 120px; + border-radius: 2px; + background-color: #0E3F52; + + .mysterytrophy-image + { + width: 80px; + height: 84px; + position: relative; + background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png'); + background-repeat: no-repeat; + } + + .mysterytrophy-text-big + { + font-size: 16px; + } + } + + .mysterytrophy-dialog-bottom + { + display: flex; + justify-content: center; + width: 400px; + height: 120px; + border-radius: 2px; + background-color: #E9E9E1; + + .input-mysterytrophy-dialog + { + width: 380px; + border: 1px solid black; + + .input-mysterytrophy + { + width: 350px; + border: 0; + outline: 0; + } + + .mysterytrophy-pencil-image + { + width: 16px; + height: 16px; + position: relative; + background-image: url('@/assets/images/infostand/pencil-icon.png'); + background-repeat: no-repeat; + } + } + + .text-decoration + { + text-decoration: underline; + } + } +} diff --git a/src/index.tsx b/src/index.tsx index 942b40e..49f01a4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,13 @@ import { App } from './App'; import './css/chats.css'; import './css/index.css'; import './css/loading.css'; +import './css/NitroCardView.css'; import './css/NotificationCenterView.css'; import './css/PurseView.css'; +import './css/room/ChatHistoryView.css'; +import './css/room/RoomWidgets.css'; + +import './css/widgets/FurnitureWidgets.css'; + createRoot(document.getElementById('root')).render();