🆙 Lets add animation in Hotelview

src/components/hotel-view/HotelView.tsx

@@ -1,5 +1,5 @@
 import { GetConfiguration } from '@nitrots/nitro-renderer';
-import { FC, useRef, useState } from 'react';
+import { FC, useRef, useState, useEffect } from 'react';
 import { GetConfigurationValue } from '../../api';
 import { RoomWidgetView } from './RoomWidgetView';
 
@@ -14,8 +14,27 @@ export const HotelView: FC<{}> = props => {
     const [scrollLeft, setScrollLeft] = useState(0);
     const [scrollTop, setScrollTop] = useState(0);
 
+    useEffect(() => {
+        if (containerRef.current) {
+            const container = containerRef.current;
+            const contentWidth = 3000;
+            const contentHeight = 1185;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight - 55;
+
+            const initialScrollLeft = (contentWidth - viewportWidth) / 2;
+            const initialScrollTop = (contentHeight - viewportHeight) / 2;
+
+            container.scrollLeft = Math.max(0, initialScrollLeft);
+            container.scrollTop = Math.max(0, initialScrollTop);
+
+            setScrollLeft(container.scrollLeft);
+            setScrollTop(container.scrollTop);
+        }
+    }, []);
+
     const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (e.button !== 0) return; // Only left mouse button
+        if (e.button !== 0) return;
         setIsDragging(true);
         setStartX(e.pageX + scrollLeft);
         setStartY(e.pageY + scrollTop);
@@ -64,10 +83,10 @@ export const HotelView: FC<{}> = props => {
                 WebkitOverflowScrolling: 'touch',
                 maxWidth: '100vw',
                 maxHeight: '100vh',
-                msOverflowStyle: 'none', // IE and Edge
-                scrollbarWidth: 'none', // Firefox
-                '::-webkit-scrollbar': { display: 'none' }, // Chrome, Safari, and newer Edge
-                cursor: 'grab' // Initial cursor state
+                msOverflowStyle: 'none',
+                scrollbarWidth: 'none',
+                '::WebkitScrollbar': { display: 'none' },
+                cursor: 'grab'
             }}
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
@@ -77,8 +96,8 @@ export const HotelView: FC<{}> = props => {
             <div 
                 className="hotelview position-relative"
                 style={{
-                    minWidth: '2600px', // 3000px width - 400px left margin
-                    minHeight: '1425px' // 1185px height + 240px top margin
+                    minWidth: '2600px',
+                    minHeight: '1425px'
                 }}
             >
                 <div className="hotelview-background w-full h-full" style={{ position: 'absolute', top: 0, left: 0 }} />

src/css/NitroCardView.css

@@ -1,6 +1,3 @@
-$nitro-card-header-height: 133px;
-$nitro-card-tabs-height: 133px;
-
 .nitro-card {
     resize: both;
 
@@ -10,25 +7,25 @@ $nitro-card-tabs-height: 133px;
     }
 
     &.theme-primary {
-        border: $border-width solid $border-color;
+        border: 1px solid #283F5D;
 
         .nitro-card-header {
             min-height: 33px;
             max-height: 33px;
-            background: $primary;
+            background: #1E7295;
 
             .nitro-card-header-text {
-                color: $white;
-                text-shadow: 0px 4px 4px rgba($black, 0.25);
-                @include font-size($h4-font-size);
+                color: #FFF;
+                text-shadow: 0px 4px 4px rgba(#000, 0.25);
+                @include font-size(1.35);
             }
 
             .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-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
                 border: 2px solid #921911;
                 background: repeating-linear-gradient(
                     rgba(245, 80, 65, 1),
@@ -50,8 +47,8 @@ $nitro-card-tabs-height: 133px;
                 cursor: pointer;
                 padding: 1px 3px;
                 line-height: 1;
-                border-radius: $border-radius;
-                box-shadow: 0 0 0 1.6px $white;
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
                 border: 2px solid #921911;
                 background: repeating-linear-gradient(
                     rgba(245, 80, 65, 1),
@@ -71,22 +68,22 @@ $nitro-card-tabs-height: 133px;
         }
 
         .nitro-card-tabs {
-            background-color: $secondary;
+            background-color: #185D79;
 
             .nav-item {
-                padding: $nav-link-padding-y $nav-link-padding-x;
-                background-color: $muted;
-                color: $black;
+                padding: .2rem .8rm;
+                background-color: #B6BEC5;
+                color: #000;
                 z-index: 1;
                 margin-bottom: -1px;
 
                 &.active {
-                    background-color: $light;
-                    border-color: $border-color $border-color $light !important;
+                    background-color: #DFDFDF;
+                    border-color: #283F5D #283F5D #DFDFDF !important;
                     border-bottom: 1px solid black;
 
                     &:before {
-                        background: $white;
+                        background: #FFF;
                     }
                 }
 
@@ -107,19 +104,19 @@ $nitro-card-tabs-height: 133px;
         }
 
         .content-area {
-            background-color: $light;
+            background-color: #DFDFDF;
         }
     }
 
     &.theme-primary-slim {
-        border: $border-width solid $border-color;
+        border: 1px solid #283F5D;
 
         .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);
+            background: repeating-linear-gradient(#2DABC2, #2DABC2 50%, #2B91A7 50%, #2B91A7 100%);
+            border-bottom: 2px solid darken(#2B91A7, 5);
             box-shadow: 0 2px white;
             width: 100%;
             margin: 0;
@@ -132,13 +129,13 @@ $nitro-card-tabs-height: 133px;
                 left: 0;
                 width: 100%;
                 height: 2px;
-                background-color: rgba($white, 0.3);
+                background-color: rgba(#FFF, 0.3);
             }
 
             .nitro-card-header-text {
-                color: $white;
-                text-shadow: 0px 4px 4px rgba($black, 0.25);
-                @include font-size($h5-font-size);
+                color: #FFF;
+                text-shadow: 0px 4px 4px rgba(#000, 0.25);
+                @include font-size (1.125);
                 min-height: 21px;
             }
 
@@ -146,9 +143,9 @@ $nitro-card-tabs-height: 133px;
                 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;
+                @include font-size(.675);
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
                 border: 2px solid #921911;
                 background: repeating-linear-gradient(
                     rgba(245, 80, 65, 1),
@@ -171,9 +168,9 @@ $nitro-card-tabs-height: 133px;
                 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;
+                @include font-size(.675);
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
                 border: 2px solid #921911;
                 background: repeating-linear-gradient(
                     rgba(245, 80, 65, 1),
@@ -193,19 +190,19 @@ $nitro-card-tabs-height: 133px;
         }
 
         .nitro-card-tabs {
-            background-color: $secondary;
+            background-color: #185D79;
         }
 
         .content-area {
-            background-color: $light;
+            background-color: #DFDFDF;
         }
     }
 }
 
 .content-area {
     height: 100%;
-    padding-top: $container-padding-x;
-    padding-bottom: $container-padding-x;
+    padding-top: 8px;
+    padding-bottom: 8px;
     overflow: auto;
 
     &.theme-dark {
@@ -228,9 +225,9 @@ $nitro-card-tabs-height: 133px;
 
 .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;
+    min-height: 133px;
+    max-height: 133px;
+    border-bottom: 1px solid #283F5D;
 }
 
 .nitro-card-accordion-set {
@@ -238,11 +235,11 @@ $nitro-card-tabs-height: 133px;
     &.active {
         height: 100%;
         overflow: hidden;
-        background: rgba($white, 0.5);
-        border-bottom: 1px solid rgba($black, 0.2);
+        background: rgba(#FFF, 0.5);
+        border-bottom: 1px solid rgba(#000, 0.2);
     }
 
     .nitro-card-accordion-set-header {
-        border-bottom: 1px solid rgba($black, 0.2);
+        border-bottom: 1px solid rgba(#000, 0.2);
     }
 }

src/css/hotelview/HotelView.scss

@@ -0,0 +1,315 @@
+.hotelview {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.hotelview-background {
+    position: relative;
+    margin-left: -400px;
+    margin-top: 240px;
+    top: 0px;
+    left: 0px;
+    height: 1185px;
+    width: 3000px;
+    pointer-events: none;
+    background-image: url(@/assets/images/hotelview/hotelview.png);
+    background-repeat: no-repeat;
+}
+
+.nitro-hotel-view {
+    display: block;
+    position: fixed;
+    width: 100%;
+    height: calc(100% - 55px);
+    background: #000;
+    color: #000;
+    box-shadow: 0px 55px 0px 0px #83cce8;
+    z-index: 0; /* Prevent stacking context interference */
+}
+
+.nitro-hotel-view-rooftop {
+    background-image: url(@/assets/images/hotelview/rooftop.gif);
+    background-repeat: no-repeat;
+    width: 120px;
+    height: 164px;
+    position: absolute;
+    top: calc(292px + 40px);
+    left: calc(1062px - 90px);
+    cursor: pointer;
+
+    .arrow {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 39px;
+        top: 15px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow {
+            display: block;
+        }
+    }
+}
+
+.nitro-hotel-view-rooftop-pool {
+    background-image: url(@/assets/images/hotelview/rooftop_pool.gif);
+    background-repeat: no-repeat;
+    width: 183px;
+    height: 164px;
+    position: absolute;
+    top: calc(512px + 40px);
+    left: calc(1324px - 200px);
+    cursor: pointer;
+
+    .arrow {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 75px;
+        top: 0px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow {
+            display: block;
+        }
+    }
+}
+
+.nitro-hotel-view-lobby {
+    background-image: url(@/assets/images/hotelview/lobby.png);
+    background-repeat: no-repeat;
+    width: 73px;
+    height: 65px;
+    position: absolute;
+    top: calc(837px + 40px);
+    left: calc(1264px - 200px);
+    cursor: pointer;
+
+    .arrow {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 75px;
+        top: 0px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow {
+            display: block;
+        }
+    }
+}
+
+.nitro-hotel-view-picnic {
+    background-image: url(@/assets/images/hotelview/picnic.gif);
+    background-repeat: no-repeat;
+    width: 575px;
+    height: 436px;
+    position: absolute;
+    top: calc(480px + 248px);
+    left: calc(889px - 412px);
+    cursor: pointer;
+
+    .arrow {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 315px;
+        top: 110px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow {
+            display: block;
+        }
+    }
+}
+
+.nitro-hotel-view-infobus {
+    background-image: url(@/assets/images/hotelview/infobus.gif);
+    background-repeat: no-repeat;
+    width: 181px;
+    height: 175px;
+    position: absolute;
+    top: calc(332px + 241px);
+    left: calc(1690px - 399px);
+    cursor: pointer;
+    z-index: 5;
+    pointer-events: auto;
+
+    .arrow-infobus {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 60px;
+        top: 5px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+        pointer-events: none;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow-infobus {
+            display: block;
+        }
+    }
+}
+
+.nitro-hotel-view-peaceful {
+    background-image: url(@/assets/images/hotelview/peacefulpark.gif);
+    background-repeat: no-repeat;
+    width: 384px;
+    height: 269px;
+    position: absolute;
+    top: calc(359px + 240px);
+    left: calc(1728px - 400px);
+    cursor: pointer;
+    z-index: 6;
+    pointer-events: none;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 10%;
+        left: 38%;
+        width: 60%; 
+        height: 65%;
+        pointer-events: auto;
+        z-index: 8;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 50%;
+        height: 50%;
+        pointer-events: auto;
+        z-index: 8;
+    }
+
+    .arrow-peaceful {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 250px;
+        top: 100px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+        pointer-events: none;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow-peaceful {
+            display: block;
+        }
+    }
+}
+
+.nitro-hotel-view-pool {
+    background-image: url(@/assets/images/hotelview/pool.gif);
+    background-repeat: no-repeat;
+    width: 433px;
+    height: 361px;
+    position: absolute;
+    top: calc(477px + 240px);
+    left: calc(1633px - 400px);
+    cursor: pointer;
+    z-index: 7;
+    pointer-events: none;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        pointer-events: auto;
+        z-index: 8;
+    }
+
+    .arrow-pool {
+        width: 30px;
+        height: 42px;
+        position: absolute;
+        background-image: url(@/assets/images/hotelview/arrow_down.png);
+        background-repeat: no-repeat;
+        left: 195px;
+        top: 250px;
+        display: none;
+        animation: MoveUpDown 1s linear infinite;
+        z-index: 9999;
+        pointer-events: none;
+    }
+
+    &:hover {
+        -webkit-filter: drop-shadow(1px 3px 20px #000000);
+        .arrow-pool {
+            display: block;
+        }
+    }
+}
+
+@keyframes MoveUpDown {
+    0%, 100% {
+        top: 1px;
+    }
+    50% {
+        top: 10px;
+    }
+}
+
+@media only screen and (min-width: 1700px) {
+    .left {
+        left: 18vw !important;
+    }
+}
+
+@media only screen and (min-width: 2000px) {
+    .left {
+        left: 23vw !important;
+    }
+}
+
+@media only screen and (min-width: 2500px) {
+    .left {
+        left: 28% !important;
+    }
+}

src/index.tsx

@@ -7,6 +7,8 @@ import './css/PurseView.css';
 
 import './css/chat/chats.css';
 
+import './css/hotelview/HotelView.scss';
+
 import './css/loading/loading.css';
 
 import './css/notification/NotificationCenterView.css';