mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆙 WiP on the hotelview
This commit is contained in:
duckietm
@@ -39,6 +39,7 @@
|
||||
"room.color.skip.transition": true,
|
||||
"room.landscapes.enabled": true,
|
||||
"room.zoom.enabled": true,
|
||||
"timezone.settings": "America/Los_Angeles",
|
||||
"avatar.mandatory.libraries": [
|
||||
"bd:1",
|
||||
"li:0"
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 442 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 286 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 64 KiB |
@@ -1,108 +1,163 @@
|
||||
import { GetConfiguration } from '@nitrots/nitro-renderer';
|
||||
import { FC, useRef, useState, useEffect } from 'react';
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { GetConfigurationValue } from '../../api';
|
||||
import { RoomWidgetView } from './RoomWidgetView';
|
||||
|
||||
export const HotelView: FC<{}> = props => {
|
||||
const backgroundColor = GetConfigurationValue('hotelview')['images']['background.colour'];
|
||||
console.log('Background color:', backgroundColor);
|
||||
/**
|
||||
* Configure via renderer-config.json: "timezone.settings": "Europe/Amsterdam"
|
||||
*/
|
||||
function getHourInTimezone(timezone: string): number
|
||||
{
|
||||
if(!timezone) return new Date().getHours();
|
||||
|
||||
try
|
||||
{
|
||||
const parts = new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: timezone,
|
||||
hour: 'numeric',
|
||||
hour12: false
|
||||
}).formatToParts(new Date());
|
||||
|
||||
const h = parts.find(p => p.type === 'hour');
|
||||
|
||||
return h ? (parseInt(h.value, 10) % 24) : new Date().getHours();
|
||||
}
|
||||
catch
|
||||
{
|
||||
return new Date().getHours();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps an hour to a named time period, matching the old UI's ranges:
|
||||
* 06-09 → morning
|
||||
* 10-16 → day
|
||||
* 17-19 → sunset
|
||||
* 20-23 → evening
|
||||
* 00-05 → night
|
||||
*/
|
||||
function getTimeOfDay(hour: number): string
|
||||
{
|
||||
if(hour > 5 && hour <= 9) return 'morning';
|
||||
if(hour > 9 && hour <= 16) return 'day';
|
||||
if(hour > 16 && hour <= 19) return 'sunset';
|
||||
if(hour > 19 && hour <= 23) return 'evening';
|
||||
|
||||
return 'night';
|
||||
}
|
||||
|
||||
const SKY_COLORS: Record<string, string> = {
|
||||
morning: '#E67451',
|
||||
sunset: '#C76E00',
|
||||
evening: '#0a0a1e',
|
||||
night: '#000000',
|
||||
};
|
||||
|
||||
export const HotelView: FC<{}> = props =>
|
||||
{
|
||||
const configBgColor = GetConfigurationValue('hotelview')['images']['background.colour'];
|
||||
|
||||
const timezone = GetConfigurationValue<string>('timezone.settings', '');
|
||||
|
||||
const timeOfDay = useMemo(() =>
|
||||
{
|
||||
const hour = getHourInTimezone(timezone);
|
||||
|
||||
return getTimeOfDay(hour);
|
||||
}, [ timezone ]);
|
||||
|
||||
/**
|
||||
const timeOfDay = 'sunset';
|
||||
For debuging the diff views
|
||||
*/
|
||||
|
||||
const skyColor = SKY_COLORS[timeOfDay] ?? configBgColor ?? '#000';
|
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [startX, setStartX] = useState(0);
|
||||
const [startY, setStartY] = useState(0);
|
||||
const [scrollLeft, setScrollLeft] = useState(0);
|
||||
const [scrollTop, setScrollTop] = useState(0);
|
||||
const [ isDragging, setIsDragging ] = useState(false);
|
||||
const [ startX, setStartX ] = useState(0);
|
||||
const [ startY, setStartY ] = useState(0);
|
||||
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;
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!containerRef.current) return;
|
||||
|
||||
const initialScrollLeft = (contentWidth - viewportWidth) / 2;
|
||||
const initialScrollTop = (contentHeight - viewportHeight) / 2;
|
||||
const container = containerRef.current;
|
||||
const contentWidth = 3000;
|
||||
const contentHeight = 1185;
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight - 55;
|
||||
|
||||
container.scrollLeft = Math.max(0, initialScrollLeft);
|
||||
container.scrollTop = Math.max(0, initialScrollTop);
|
||||
container.scrollLeft = Math.max(0, (contentWidth - viewportWidth) / 2);
|
||||
container.scrollTop = Math.max(0, (contentHeight - viewportHeight) / 2);
|
||||
|
||||
setScrollLeft(container.scrollLeft);
|
||||
setScrollTop(container.scrollTop);
|
||||
}
|
||||
setScrollLeft(container.scrollLeft);
|
||||
setScrollTop(container.scrollTop);
|
||||
}, []);
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (e.button !== 0) return;
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) =>
|
||||
{
|
||||
if(e.button !== 0) return;
|
||||
|
||||
setIsDragging(true);
|
||||
setStartX(e.pageX + scrollLeft);
|
||||
setStartY(e.pageY + scrollTop);
|
||||
if (containerRef.current) {
|
||||
containerRef.current.style.cursor = 'grabbing';
|
||||
}
|
||||
|
||||
if(containerRef.current) containerRef.current.style.cursor = 'grabbing';
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX;
|
||||
const y = e.pageY;
|
||||
const newScrollLeft = startX - x;
|
||||
const newScrollTop = startY - y;
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) =>
|
||||
{
|
||||
if(!isDragging) return;
|
||||
|
||||
if (containerRef.current) {
|
||||
e.preventDefault();
|
||||
|
||||
const newScrollLeft = startX - e.pageX;
|
||||
const newScrollTop = startY - e.pageY;
|
||||
|
||||
if(containerRef.current)
|
||||
{
|
||||
containerRef.current.scrollLeft = newScrollLeft;
|
||||
containerRef.current.scrollTop = newScrollTop;
|
||||
containerRef.current.scrollTop = newScrollTop;
|
||||
setScrollLeft(newScrollLeft);
|
||||
setScrollTop(newScrollTop);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
const handleMouseUp = () =>
|
||||
{
|
||||
setIsDragging(false);
|
||||
if (containerRef.current) {
|
||||
containerRef.current.style.cursor = 'grab';
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsDragging(false);
|
||||
if (containerRef.current) {
|
||||
containerRef.current.style.cursor = 'grab';
|
||||
}
|
||||
if(containerRef.current) containerRef.current.style.cursor = 'grab';
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="nitro-hotel-view block fixed w-full h-[calc(100%-55px)] text-[#000]"
|
||||
style={{
|
||||
...(backgroundColor ? { background: backgroundColor } : {}),
|
||||
<div
|
||||
ref={ containerRef }
|
||||
className={ `nitro-hotel-view hotel-${ timeOfDay } block fixed w-full h-[calc(100%-55px)] text-[#000]` }
|
||||
style={ {
|
||||
background: skyColor,
|
||||
overflow: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
maxWidth: '100vw',
|
||||
maxHeight: '100vh',
|
||||
msOverflowStyle: 'none',
|
||||
scrollbarWidth: 'none',
|
||||
'::WebkitScrollbar': { display: 'none' },
|
||||
cursor: 'grab'
|
||||
}}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
} }
|
||||
onMouseDown={ handleMouseDown }
|
||||
onMouseMove={ handleMouseMove }
|
||||
onMouseUp={ handleMouseUp }
|
||||
onMouseLeave={ handleMouseUp }
|
||||
>
|
||||
<div
|
||||
<div
|
||||
className="hotelview position-relative"
|
||||
style={{
|
||||
minWidth: '2600px',
|
||||
minHeight: '1425px'
|
||||
}}
|
||||
style={ { minWidth: '2600px', minHeight: '1425px' } }
|
||||
>
|
||||
<div className="hotelview-background w-full h-full" style={{ position: 'absolute', top: 0, left: 0 }} />
|
||||
<div className="hotelview-background w-full h-full" style={ { position: 'absolute', top: 0, left: 0 } } />
|
||||
<RoomWidgetView />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@@ -2,12 +2,13 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, transparent 1185px, #51841E 1185px);
|
||||
}
|
||||
|
||||
.hotelview-background {
|
||||
position: relative;
|
||||
margin-left: -400px;
|
||||
margin-top: 240px;
|
||||
margin-top: 0;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 1185px;
|
||||
@@ -24,7 +25,7 @@
|
||||
height: calc(100% - 55px);
|
||||
background: #000;
|
||||
color: #000;
|
||||
box-shadow: 0px 55px 0px 0px #83cce8;
|
||||
box-shadow: 0px 55px 0px 0px #51841E;
|
||||
z-index: 0; /* Prevent stacking context interference */
|
||||
}
|
||||
|
||||
@@ -34,7 +35,7 @@
|
||||
width: 120px;
|
||||
height: 164px;
|
||||
position: absolute;
|
||||
top: calc(292px + 40px);
|
||||
top: calc(52px + 40px);
|
||||
left: calc(1062px - 90px);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -65,7 +66,7 @@
|
||||
width: 183px;
|
||||
height: 164px;
|
||||
position: absolute;
|
||||
top: calc(512px + 40px);
|
||||
top: calc(272px + 40px);
|
||||
left: calc(1324px - 200px);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -96,7 +97,7 @@
|
||||
width: 73px;
|
||||
height: 65px;
|
||||
position: absolute;
|
||||
top: calc(837px + 40px);
|
||||
top: calc(597px + 40px);
|
||||
left: calc(1264px - 200px);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -106,7 +107,7 @@
|
||||
position: absolute;
|
||||
background-image: url(@/assets/images/hotelview/arrow_down.png);
|
||||
background-repeat: no-repeat;
|
||||
left: 75px;
|
||||
left: 19px;
|
||||
top: 0px;
|
||||
display: none;
|
||||
animation: MoveUpDown 1s linear infinite;
|
||||
@@ -127,7 +128,7 @@
|
||||
width: 575px;
|
||||
height: 436px;
|
||||
position: absolute;
|
||||
top: calc(480px + 248px);
|
||||
top: calc(240px + 248px);
|
||||
left: calc(889px - 412px);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -158,7 +159,7 @@
|
||||
width: 181px;
|
||||
height: 175px;
|
||||
position: absolute;
|
||||
top: calc(332px + 241px);
|
||||
top: calc(92px + 241px);
|
||||
left: calc(1690px - 399px);
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
@@ -192,7 +193,7 @@
|
||||
width: 384px;
|
||||
height: 269px;
|
||||
position: absolute;
|
||||
top: calc(359px + 240px);
|
||||
top: calc(119px + 240px);
|
||||
left: calc(1728px - 400px);
|
||||
cursor: pointer;
|
||||
z-index: 6;
|
||||
@@ -248,7 +249,7 @@
|
||||
width: 433px;
|
||||
height: 361px;
|
||||
position: absolute;
|
||||
top: calc(477px + 240px);
|
||||
top: calc(237px + 240px);
|
||||
left: calc(1633px - 400px);
|
||||
cursor: pointer;
|
||||
z-index: 7;
|
||||
@@ -312,4 +313,91 @@
|
||||
.left {
|
||||
left: 28% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Time-of-day overrides ────────────────────────────────────────────────
|
||||
The class hotel-{period} is stamped on .nitro-hotel-view by HotelView.tsx.
|
||||
Controlled by timezone.settings in renderer-config.json.
|
||||
Periods: morning (06-09) | day (10-16) | sunset (17-19) | evening (20-23) | night (00-05)
|
||||
─────────────────────────────────────────────────────────────────────────── */
|
||||
|
||||
/* Morning: orange-tinted building, warm sky */
|
||||
.hotel-morning {
|
||||
box-shadow: 0px 55px 0px 0px #E67451;
|
||||
}
|
||||
.hotel-morning .hotelview-background {
|
||||
background-image: url(@/assets/images/hotelview/hotelview-morning.png);
|
||||
}
|
||||
|
||||
/* Day: default — no overrides needed, base styles already use day assets */
|
||||
|
||||
/* Sunset: warm orange sky + amber-earth ground */
|
||||
.hotel-sunset {
|
||||
box-shadow: 0px 55px 0px 0px #D4651A;
|
||||
}
|
||||
.hotel-sunset .hotelview {
|
||||
background: linear-gradient(to bottom, transparent 1185px, #163635 1185px);
|
||||
}
|
||||
.hotel-sunset .hotelview-background {
|
||||
background-image: url(@/assets/images/hotelview/hotelview-sunset.png);
|
||||
}
|
||||
|
||||
/* Evening: night building, dark teal sky + ground */
|
||||
.hotel-evening {
|
||||
box-shadow: 0px 55px 0px 0px #163635;
|
||||
}
|
||||
.hotel-evening .hotelview {
|
||||
background: linear-gradient(to bottom, transparent 1185px, #163635 1185px);
|
||||
}
|
||||
.hotel-evening .hotelview-background {
|
||||
background-image: url(@/assets/images/hotelview/hotelview-night.png);
|
||||
}
|
||||
|
||||
/* Night: night building, dark teal sky + ground */
|
||||
.hotel-night {
|
||||
box-shadow: 0px 55px 0px 0px #163635;
|
||||
}
|
||||
.hotel-night .hotelview {
|
||||
background: linear-gradient(to bottom, transparent 1185px, #163635 1185px);
|
||||
}
|
||||
.hotel-night .hotelview-background {
|
||||
background-image: url(@/assets/images/hotelview/hotelview-night.png);
|
||||
}
|
||||
|
||||
/* ─── Night / Evening room-widget sprite swaps ─────────────────────────── */
|
||||
|
||||
.hotel-evening .nitro-hotel-view-rooftop,
|
||||
.hotel-night .nitro-hotel-view-rooftop {
|
||||
background-image: url(@/assets/images/hotelview/night/night-rooftop.png);
|
||||
}
|
||||
|
||||
.hotel-evening .nitro-hotel-view-rooftop-pool,
|
||||
.hotel-night .nitro-hotel-view-rooftop-pool {
|
||||
background-image: url(@/assets/images/hotelview/night/night-rooftop_pool.gif);
|
||||
}
|
||||
|
||||
.hotel-evening .nitro-hotel-view-picnic,
|
||||
.hotel-night .nitro-hotel-view-picnic {
|
||||
background-image: url(@/assets/images/hotelview/night/night-picnic.gif);
|
||||
}
|
||||
|
||||
.hotel-evening .nitro-hotel-view-infobus,
|
||||
.hotel-night .nitro-hotel-view-infobus {
|
||||
background-image: url(@/assets/images/hotelview/night/night-infobus.gif);
|
||||
}
|
||||
|
||||
.hotel-evening .nitro-hotel-view-pool,
|
||||
.hotel-night .nitro-hotel-view-pool {
|
||||
background-image: url(@/assets/images/hotelview/night/night-pool.gif);
|
||||
}
|
||||
|
||||
.hotel-evening .nitro-hotel-view-lobby,
|
||||
.hotel-night .nitro-hotel-view-lobby {
|
||||
background-image: url(@/assets/images/hotelview/night/night-lobby.png);
|
||||
}
|
||||
|
||||
.hotel-evening .nitro-hotel-view-peaceful,
|
||||
.hotel-night .nitro-hotel-view-peaceful {
|
||||
background-image: url(@/assets/images/hotelview/night/night-park.png);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user