nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update HotelView

Browse Source
This commit is contained in:
Bill 2021-04-15 02:49:56 -04:00
parent b0bcd39166
commit b09adf5dc7
7 changed files with 128 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/configuration.json
View File

@ -45,8 +45,8 @@
"sun": "${asset.url}/images/reception/sun.png",
"drape": "${asset.url}/images/reception/drape.png",
"left": "${asset.url}/images/reception/ts.png",
"right": "${asset.url}/images/reception/us_right.png",
"right.repeat": "${asset.url}/images/reception/us_top_right.png"
"right": "${asset.url}/images/reception/US_right.png",
"right.repeat": "${asset.url}/images/reception/US_top_right.png"
},
"achievements.unseen.ignored": ["ACH_AllTimeHotelPresence"],
"avatareditor.show.clubitems.dimmed": true,
@ -54,7 +54,7 @@
"chat.history.max.items": 100,
"animation.fps": 24,
"limits.fps": true,
"system.dispatcher.log": false,
"system.dispatcher.log": true,
"system.currency.types": [
-1,
0,

2
public/index.html
View File

@ -28,7 +28,7 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="root" class="w-100 h-100"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

14
src/App.tsx
View File

@ -1,11 +1,5 @@
import { ConfigurationEvent, NitroEvent } from 'nitro-renderer';
import { NitroCommunicationDemoEvent } from 'nitro-renderer/src/nitro/communication/demo/NitroCommunicationDemoEvent';
import { LegacyExternalInterface } from 'nitro-renderer/src/nitro/externalInterface/LegacyExternalInterface';
import { NitroLocalizationEvent } from 'nitro-renderer/src/nitro/localization/NitroLocalizationEvent';
import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
import { RoomEngineEvent } from 'nitro-renderer/src/nitro/room/events/RoomEngineEvent';
import { WebGL } from 'nitro-renderer/src/nitro/utils/WebGL';
import { useState } from 'react';
import { ConfigurationEvent, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, RoomEngineEvent, WebGL } from 'nitro-renderer';
import { useCallback, useState } from 'react';
import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
@ -41,7 +35,7 @@ export function App(): JSX.Element
return urls;
}
const handler = (event: NitroEvent) =>
const handler = useCallback((event: NitroEvent) =>
{
switch(event.type)
{
@ -105,7 +99,7 @@ export function App(): JSX.Element
});
return;
}
};
}, []);
useMainEvent(Nitro.WEBGL_UNAVAILABLE, handler);
useMainEvent(Nitro.WEBGL_CONTEXT_LOST, handler);

1
src/index.scss
View File

@ -26,4 +26,5 @@ $infostand-zindex: 30;
$chat-zindex: 20;
$highscore-zindex: 19;
@import './transitions/TransitionStyles.scss';
@import './views/Styles.scss';

26
src/transitions/TransitionStyles.scss Normal file
View File

@ -0,0 +1,26 @@
@keyframes slideDown {
from {
top: -100%;
}
to {
top: 0;
}
}
@keyframes slideUp {
from {
bottom: -100%;
}
to {
bottom: 0;
}
}
@keyframes slideRight {
from {
right: -100%;
}
to {
right: 0;
}
}

76
src/views/hotel-view/HotelView.scss
View File

@ -0,0 +1,76 @@
.nitro-hotel-view {
display: block;
position: fixed;
width: 100%;
height: 100%;
background: rgba($black, 1);
.avatar-image {
bottom: 12px;
left: 63px;
position: absolute;
z-index: 1;
}
.background {
height: 100%;
width: 100%;
background-position: left;
background-repeat: repeat-y;
}
.drape {
width: 100%;
height: 100%;
left: 0px;
top: 0;
animation-iteration-count: 1;
animation-name: slideDown;
animation-duration: 1s;
z-index: 3;
background-repeat: no-repeat;
}
.sun {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
margin: auto;
background-repeat: no-repeat;
}
.left {
width: 100%;
height: 100%;
bottom: 0;
left: 0;
animation-iteration-count: 1;
animation-name: slideUp;
animation-duration: 1s;
background-repeat: no-repeat;
}
.right {
width: 100%;
height: 100%;
right: 0;
bottom: 0;
animation-iteration-count: 1;
animation-name: slideUp;
animation-duration: 1s;
background-repeat: no-repeat;
}
.right-repeat {
width: 100%;
height: 100%;
right: 0;
top: 0;
animation-iteration-count: 1;
animation-name: slideRight;
animation-duration: 1s;
background-repeat: no-repeat;
}
}

18
src/views/hotel-view/HotelView.tsx
View File

@ -1,8 +1,24 @@
import { Nitro } from 'nitro-renderer';
import { HotelViewProps } from './HotelView.types';
export function HotelView(props: HotelViewProps): JSX.Element
{
const backgroundColor = Nitro.instance.getConfiguration('hotelview.images')['background.colour'];
const background = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['background']);
const sun = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['sun']);
const drape = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['drape']);
const left = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['left']);
const rightRepeat = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right.repeat']);
const right = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
return (
<div>hotel view</div>
<div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
<div className="background position-absolute" style={ (background && background.length) ? { backgroundImage: `url(${ background })` } : {} } />
<div className="sun position-absolute" style={ (sun && sun.length) ? { backgroundImage: `url(${ sun })` } : {} } />
<div className="drape position-absolute" style={ (drape && drape.length) ? { backgroundImage: `url(${ drape })` } : {} } />
<div className="left position-absolute" style={ (left && left.length) ? { backgroundImage: `url(${ left })` } : {} } />
{/* <div className="right-repeat position-absolute" style={ (rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${ rightRepeat })` } : {} } />
<div className="right position-absolute" style={ (right && right.length) ? { backgroundImage: `url(${ right })` } : {} } /> */}
</div>
);
}