Merge branch 'dev' into feature/hotelview
3
.vscode/settings.json
vendored
@ -6,7 +6,8 @@
|
||||
"typescript.format.placeOpenBraceOnNewLineForFunctions": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": true,
|
||||
"source.organizeImports": true,
|
||||
"source.fixAll.sortJSON": false,
|
||||
"source.organizeImports": true
|
||||
},
|
||||
"emmet.showExpandedAbbreviation": "never",
|
||||
"git.ignoreLimitWarning": true,
|
||||
|
3844
package-lock.json
generated
27
package.json
@ -3,29 +3,16 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/node": "^12.20.16",
|
||||
"@types/react": "^17.0.14",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"animate.css": "^4.1.1",
|
||||
"@nitrots/nitro-renderer": "file:../nitro-renderer",
|
||||
"classnames": "^2.3.1",
|
||||
"immutable": "^4.0.0-rc.14",
|
||||
"nitro-renderer": "file:../nitro-renderer",
|
||||
"node-sass": "^5.0.0",
|
||||
"rc-slider": "^9.7.2",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "^2.0.0-alpha.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-google-recaptcha": "^2.1.0",
|
||||
"react-input-autosize": "^3.0.0",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-slider": "^1.3.1",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"react-virtualized": "^9.22.3",
|
||||
"typescript": "^4.3.5",
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
@ -60,7 +47,15 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/node": "^12.20.19",
|
||||
"@types/react": "^17.0.15",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-slider": "^1.3.1",
|
||||
"@types/react-transition-group": "^4.4.2"
|
||||
"@types/react-transition-group": "^4.4.2",
|
||||
"@types/react-virtualized": "^9.21.13"
|
||||
}
|
||||
}
|
||||
|
@ -18,7 +18,7 @@
|
||||
<div id="root" class="w-100 h-100"></div>
|
||||
<script>
|
||||
var NitroConfig = {
|
||||
configurationUrl: '/configuration.json',
|
||||
configurationUrls: [ '/renderer-config.json', '/ui-config.json' ],
|
||||
sso: (new URLSearchParams(window.location.search).get('sso') || null)
|
||||
};
|
||||
</script>
|
||||
|
118
public/renderer-config.json
Normal file
@ -0,0 +1,118 @@
|
||||
{
|
||||
"socket.url": "wss://ws.nitrots.co:2096",
|
||||
"asset.url": "https://nitro.nitrots.co",
|
||||
"image.library.url": "https://swf.nitrots.co/c_images/",
|
||||
"hof.furni.url": "https://swf.nitrots.co/dcr/hof_furni",
|
||||
"images.url": "${asset.url}/images",
|
||||
"gamedata.url": "${asset.url}/gamedata",
|
||||
"sounds.url": "${asset.url}/sounds",
|
||||
"external.texts.url": "${gamedata.url}/json/ExternalTexts.json",
|
||||
"external.samples.url": "${hof.furni.url}/mp3/sound_machine_sample_%sample%.mp3",
|
||||
"furnidata.url": "${gamedata.url}/json/FurnitureData.json",
|
||||
"productdata.url": "${gamedata.url}/json/ProductData.json",
|
||||
"avatar.actions.url": "${gamedata.url}/json/HabboAvatarActions.json",
|
||||
"avatar.figuredata.url": "${gamedata.url}/json/FigureData.json",
|
||||
"avatar.figuremap.url": "${gamedata.url}/json/FigureMap.json",
|
||||
"avatar.effectmap.url": "${gamedata.url}/json/EffectMap.json",
|
||||
"avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro",
|
||||
"avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro",
|
||||
"furni.asset.url": "${asset.url}/bundled/furniture/%libname%.nitro",
|
||||
"furni.asset.icon.url": "${hof.furni.url}/icons/%libname%%param%_icon.png",
|
||||
"pet.asset.url": "${asset.url}/bundled/pet/%libname%.nitro",
|
||||
"room.asset.url": "${asset.url}/room/%libname%/%libname%.json",
|
||||
"badge.asset.url": "${image.library.url}album1584/%badgename%.gif",
|
||||
"badge.asset.group.url": "${asset.url}/group-badge/%badgedata%",
|
||||
"furni.rotation.bounce.steps": 20,
|
||||
"furni.rotation.bounce.height": 0.0625,
|
||||
"system.animation.fps": 24,
|
||||
"system.limits.fps": false,
|
||||
"system.dispatcher.log": false,
|
||||
"system.packet.log": false,
|
||||
"system.pong.manually": true,
|
||||
"system.pong.interval.ms": 20000,
|
||||
"avatar.mandatory.libraries": [
|
||||
"bd:1",
|
||||
"li:0"
|
||||
],
|
||||
"avatar.mandatory.effect.libraries": [
|
||||
"dance.1",
|
||||
"dance.2",
|
||||
"dance.3",
|
||||
"dance.4"
|
||||
],
|
||||
"avatar.default.figuredata": {"palettes":[{"id":1,"colors":[{"id":99999,"index":1001,"club":0,"selectable":false,"hexCode":"DDDDDD"},{"id":99998,"index":1001,"club":0,"selectable":false,"hexCode":"FAFAFA"}]},{"id":3,"colors":[{"id":10001,"index":1001,"club":0,"selectable":false,"hexCode":"EEEEEE"},{"id":10002,"index":1002,"club":0,"selectable":false,"hexCode":"FA3831"},{"id":10003,"index":1003,"club":0,"selectable":false,"hexCode":"FD92A0"},{"id":10004,"index":1004,"club":0,"selectable":false,"hexCode":"2AC7D2"},{"id":10005,"index":1005,"club":0,"selectable":false,"hexCode":"35332C"},{"id":10006,"index":1006,"club":0,"selectable":false,"hexCode":"EFFF92"},{"id":10007,"index":1007,"club":0,"selectable":false,"hexCode":"C6FF98"},{"id":10008,"index":1008,"club":0,"selectable":false,"hexCode":"FF925A"},{"id":10009,"index":1009,"club":0,"selectable":false,"hexCode":"9D597E"},{"id":10010,"index":1010,"club":0,"selectable":false,"hexCode":"B6F3FF"},{"id":10011,"index":1011,"club":0,"selectable":false,"hexCode":"6DFF33"},{"id":10012,"index":1012,"club":0,"selectable":false,"hexCode":"3378C9"},{"id":10013,"index":1013,"club":0,"selectable":false,"hexCode":"FFB631"},{"id":10014,"index":1014,"club":0,"selectable":false,"hexCode":"DFA1E9"},{"id":10015,"index":1015,"club":0,"selectable":false,"hexCode":"F9FB32"},{"id":10016,"index":1016,"club":0,"selectable":false,"hexCode":"CAAF8F"},{"id":10017,"index":1017,"club":0,"selectable":false,"hexCode":"C5C6C5"},{"id":10018,"index":1018,"club":0,"selectable":false,"hexCode":"47623D"},{"id":10019,"index":1019,"club":0,"selectable":false,"hexCode":"8A8361"},{"id":10020,"index":1020,"club":0,"selectable":false,"hexCode":"FF8C33"},{"id":10021,"index":1021,"club":0,"selectable":false,"hexCode":"54C627"},{"id":10022,"index":1022,"club":0,"selectable":false,"hexCode":"1E6C99"},{"id":10023,"index":1023,"club":0,"selectable":false,"hexCode":"984F88"},{"id":10024,"index":1024,"club":0,"selectable":false,"hexCode":"77C8FF"},{"id":10025,"index":1025,"club":0,"selectable":false,"hexCode":"FFC08E"},{"id":10026,"index":1026,"club":0,"selectable":false,"hexCode":"3C4B87"},{"id":10027,"index":1027,"club":0,"selectable":false,"hexCode":"7C2C47"},{"id":10028,"index":1028,"club":0,"selectable":false,"hexCode":"D7FFE3"},{"id":10029,"index":1029,"club":0,"selectable":false,"hexCode":"8F3F1C"},{"id":10030,"index":1030,"club":0,"selectable":false,"hexCode":"FF6393"},{"id":10031,"index":1031,"club":0,"selectable":false,"hexCode":"1F9B79"},{"id":10032,"index":1032,"club":0,"selectable":false,"hexCode":"FDFF33"}]}],"setTypes":[{"type":"hd","paletteId":1,"mandatory_f_0":true,"mandatory_f_1":true,"mandatory_m_0":true,"mandatory_m_1":true,"sets":[{"id":99999,"gender":"U","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":1,"type":"bd","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"hd","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"lh","colorable":true,"index":0,"colorindex":1},{"id":1,"type":"rh","colorable":true,"index":0,"colorindex":1}]}]},{"type":"bds","paletteId":1,"mandatory_f_0":false,"mandatory_f_1":false,"mandatory_m_0":false,"mandatory_m_1":false,"sets":[{"id":10001,"gender":"U","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10001,"type":"bds","colorable":true,"index":0,"colorindex":1},{"id":10001,"type":"lhs","colorable":true,"index":0,"colorindex":1},{"id":10001,"type":"rhs","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"bd"},{"partType":"rh"},{"partType":"lh"}]}]},{"type":"ss","paletteId":3,"mandatory_f_0":false,"mandatory_f_1":false,"mandatory_m_0":false,"mandatory_m_1":false,"sets":[{"id":10010,"gender":"F","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10001,"type":"ss","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"ch"},{"partType":"lg"},{"partType":"ca"},{"partType":"wa"},{"partType":"sh"},{"partType":"ls"},{"partType":"rs"},{"partType":"lc"},{"partType":"rc"},{"partType":"cc"},{"partType":"cp"}]},{"id":10011,"gender":"M","club":0,"colorable":true,"selectable":false,"preselectable":false,"sellable":false,"parts":[{"id":10002,"type":"ss","colorable":true,"index":0,"colorindex":1}],"hiddenLayers":[{"partType":"ch"},{"partType":"lg"},{"partType":"ca"},{"partType":"wa"},{"partType":"sh"},{"partType":"ls"},{"partType":"rs"},{"partType":"lc"},{"partType":"rc"},{"partType":"cc"},{"partType":"cp"}]}]}]},
|
||||
"avatar.default.actions": {
|
||||
"actions": [
|
||||
{
|
||||
"id": "Default",
|
||||
"state": "std",
|
||||
"precedence": 1000,
|
||||
"main": true,
|
||||
"isDefault": true,
|
||||
"geometryType": "vertical",
|
||||
"activePartSet": "figure",
|
||||
"assetPartDefinition": "std"
|
||||
}
|
||||
]
|
||||
},
|
||||
"pet.types": [
|
||||
"dog",
|
||||
"cat",
|
||||
"croco",
|
||||
"terrier",
|
||||
"bear",
|
||||
"pig",
|
||||
"lion",
|
||||
"rhino",
|
||||
"spider",
|
||||
"turtle",
|
||||
"chicken",
|
||||
"frog",
|
||||
"dragon",
|
||||
"monster",
|
||||
"monkey",
|
||||
"horse",
|
||||
"monsterplant",
|
||||
"bunnyeaster",
|
||||
"bunnyevil",
|
||||
"bunnydepressed",
|
||||
"bunnylove",
|
||||
"pigeongood",
|
||||
"pigeonevil",
|
||||
"demonmonkey",
|
||||
"bearbaby",
|
||||
"terrierbaby",
|
||||
"gnome",
|
||||
"gnome",
|
||||
"kittenbaby",
|
||||
"puppybaby",
|
||||
"pigletbaby",
|
||||
"haloompa",
|
||||
"fools",
|
||||
"pterosaur",
|
||||
"velociraptor",
|
||||
"cow",
|
||||
"LeetPen",
|
||||
"bbwibb",
|
||||
"elephants"
|
||||
],
|
||||
"preload.assets.urls": [
|
||||
"${images.url}/additions/user_blowkiss.png",
|
||||
"${images.url}/additions/user_idle_left_1.png",
|
||||
"${images.url}/additions/user_idle_left_2.png",
|
||||
"${images.url}/additions/user_idle_right_1.png",
|
||||
"${images.url}/additions/user_idle_right_2.png",
|
||||
"${images.url}/additions/user_muted.png",
|
||||
"${images.url}/additions/user_muted_small.png",
|
||||
"${images.url}/additions/user_typing.png",
|
||||
"${images.url}/additions/number_1.png",
|
||||
"${images.url}/additions/number_2.png",
|
||||
"${images.url}/additions/number_3.png",
|
||||
"${images.url}/additions/number_4.png",
|
||||
"${images.url}/additions/number_5.png",
|
||||
"${images.url}/additions/pet_experience_bubble.png",
|
||||
"${images.url}/loading_icon.png",
|
||||
"${images.url}/clear_icon.png",
|
||||
"${images.url}/big_arrow.png"
|
||||
]
|
||||
}
|
24
src/App.tsx
@ -1,11 +1,10 @@
|
||||
import { ConfigurationEvent, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, RoomEngineEvent, WebGL } from 'nitro-renderer';
|
||||
import { ConfigurationEvent, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
|
||||
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';
|
||||
import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
|
||||
import { AuthView } from './views/auth/AuthView';
|
||||
import { LoadingView } from './views/loading/LoadingView';
|
||||
import { MainView } from './views/main/MainView';
|
||||
|
||||
@ -13,13 +12,16 @@ export const App: FC<{}> = props =>
|
||||
{
|
||||
const [ isReady, setIsReady ] = useState(false);
|
||||
const [ isError, setIsError ] = useState(false);
|
||||
const [ isAuth, setIsAuth ] = useState(false);
|
||||
const [ message, setMessage ] = useState('Getting Ready');
|
||||
|
||||
//@ts-ignore
|
||||
if(!NitroConfig) throw new Error('NitroConfig is not defined!');
|
||||
|
||||
if(!GetNitroInstance()) Nitro.bootstrap();
|
||||
if(!GetNitroInstance())
|
||||
{
|
||||
NitroVersion.UI_VERSION = '2.0.0';
|
||||
Nitro.bootstrap();
|
||||
}
|
||||
|
||||
const getPreloadAssetUrls = useCallback(() =>
|
||||
{
|
||||
@ -58,17 +60,8 @@ export const App: FC<{}> = props =>
|
||||
case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKING:
|
||||
return;
|
||||
case NitroCommunicationDemoEvent.CONNECTION_HANDSHAKE_FAILED:
|
||||
const authEnabled = (GetConfiguration('auth.system.enabled') as boolean);
|
||||
|
||||
if(authEnabled)
|
||||
{
|
||||
setIsAuth(true);
|
||||
}
|
||||
else
|
||||
{
|
||||
setIsError(true);
|
||||
setMessage('Handshake Failed');
|
||||
}
|
||||
return;
|
||||
case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
|
||||
setMessage('Finishing Up');
|
||||
@ -132,9 +125,8 @@ export const App: FC<{}> = props =>
|
||||
|
||||
return (
|
||||
<div className="nitro-app">
|
||||
{ (!isReady || isError) && !isAuth && <LoadingView isError={ isError } message={ message } /> }
|
||||
{ (isReady && !isError && !isAuth) && <MainView /> }
|
||||
{ isAuth && <AuthView /> }
|
||||
{ (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
|
||||
{ (isReady && !isError) && <MainView /> }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IConfigurationManager } from 'nitro-renderer';
|
||||
import { IConfigurationManager } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroCore } from './GetNitroCore';
|
||||
|
||||
export function GetConfigurationManager(): IConfigurationManager
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { INitroCore } from 'nitro-renderer';
|
||||
import { INitroCore } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../nitro';
|
||||
|
||||
export function GetNitroCore(): INitroCore
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { RoomInfoComposer } from 'nitro-renderer';
|
||||
import { RoomInfoComposer } from '@nitrots/nitro-renderer';
|
||||
import { SendMessageHook } from '../../hooks/messages/message-event';
|
||||
|
||||
export function TryVisitRoom(roomId: number): void
|
||||
|
@ -1,6 +0,0 @@
|
||||
import { GetRoomSessionManager } from '../nitro';
|
||||
|
||||
export function VisitRoom(roomId: number, password: string = null): void
|
||||
{
|
||||
GetRoomSessionManager().createSession(roomId, password);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { ILinkEventTracker } from 'nitro-renderer';
|
||||
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from './GetNitroInstance';
|
||||
|
||||
export function AddEventLinkTracker(tracker: ILinkEventTracker): void
|
||||
|
6
src/api/nitro/CreateLinkEvent.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { GetNitroInstance } from './GetNitroInstance';
|
||||
|
||||
export function CreateLinkEvent(link: string): void
|
||||
{
|
||||
GetNitroInstance().createLinkEvent(link);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { INitroCommunicationManager } from 'nitro-renderer';
|
||||
import { INitroCommunicationManager } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from './GetNitroInstance';
|
||||
|
||||
export function GetCommunication(): INitroCommunicationManager
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IConnection } from 'nitro-renderer';
|
||||
import { IConnection } from '@nitrots/nitro-renderer';
|
||||
import { GetCommunication } from './GetCommunication';
|
||||
|
||||
export function GetConnection(): IConnection
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { INitro, Nitro } from 'nitro-renderer';
|
||||
import { INitro, Nitro } from '@nitrots/nitro-renderer';
|
||||
|
||||
export function GetNitroInstance(): INitro
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { ILinkEventTracker } from 'nitro-renderer';
|
||||
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from './GetNitroInstance';
|
||||
|
||||
export function RemoveLinkEventTracker(tracker: ILinkEventTracker): void
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IPalette } from 'nitro-renderer';
|
||||
import { IPalette } from '@nitrots/nitro-renderer';
|
||||
import { GetAvatarRenderManager } from './GetAvatarRenderManager';
|
||||
|
||||
export function GetAvatarPalette(paletteId: number): IPalette
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IAvatarRenderManager } from 'nitro-renderer';
|
||||
import { IAvatarRenderManager } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../GetNitroInstance';
|
||||
|
||||
export function GetAvatarRenderManager(): IAvatarRenderManager
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { ISetType } from 'nitro-renderer';
|
||||
import { ISetType } from '@nitrots/nitro-renderer';
|
||||
import { GetAvatarRenderManager } from './GetAvatarRenderManager';
|
||||
|
||||
export function GetAvatarSetType(setType: string): ISetType
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomCameraWidgetManager } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetManager';
|
||||
import { IRoomCameraWidgetManager } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../GetNitroInstance';
|
||||
|
||||
export function GetRoomCameraWidgetManager(): IRoomCameraWidgetManager
|
||||
|
@ -1,6 +1,7 @@
|
||||
export * from './AddLinkEventTracker';
|
||||
export * from './avatar';
|
||||
export * from './camera';
|
||||
export * from './CreateLinkEvent';
|
||||
export * from './GetCommunication';
|
||||
export * from './GetConfiguration';
|
||||
export * from './GetConnection';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { MouseEventType } from 'nitro-renderer';
|
||||
import { MouseEventType } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomEngine } from './GetRoomEngine';
|
||||
import { SetActiveRoomId } from './SetActiveRoomId';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { MouseEventType, TouchEventType } from 'nitro-renderer';
|
||||
import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomEngine } from './GetRoomEngine';
|
||||
|
||||
let didMouseMove = false;
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomObjectController, RoomObjectCategory } from 'nitro-renderer';
|
||||
import { IRoomObjectController, RoomObjectCategory } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomSession, GetSessionDataManager } from '../session';
|
||||
import { GetRoomEngine } from './GetRoomEngine';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomEngine } from 'nitro-renderer';
|
||||
import { IRoomEngine } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../GetNitroInstance';
|
||||
|
||||
export function GetRoomEngine(): IRoomEngine
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroRectangle } from 'nitro-renderer';
|
||||
import { NitroRectangle } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomEngine } from './GetRoomEngine';
|
||||
|
||||
export function GetRoomObjectBounds(roomId: number, objectId: number, category: number, canvasId = 1): NitroRectangle
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { RoomEngineObjectEvent, RoomObjectVariable } from 'nitro-renderer';
|
||||
import { RoomEngineObjectEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from '../..';
|
||||
import { GetRoomEngine } from './GetRoomEngine';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomSession, RoomControllerLevel } from 'nitro-renderer';
|
||||
import { IRoomSession, RoomControllerLevel } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from '../..';
|
||||
import { GetRoomEngine } from '../room/GetRoomEngine';
|
||||
import { IsOwnerOfFurniture } from './IsOwnerOfFurniture';
|
||||
|
6
src/api/nitro/session/CreateRoomSession.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { GetRoomSessionManager } from './GetRoomSessionManager';
|
||||
|
||||
export function CreateRoomSession(roomId: number, password: string = null): void
|
||||
{
|
||||
GetRoomSessionManager().createSession(roomId, password);
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { AvatarAction, RoomObjectVariable } from 'nitro-renderer';
|
||||
import { AvatarAction, RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetOwnRoomObject } from '../room';
|
||||
|
||||
export function GetCanStandUp(): string
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { RoomObjectVariable } from 'nitro-renderer';
|
||||
import { RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetOwnRoomObject } from '../room';
|
||||
|
||||
export function GetCanUseExpression(): boolean
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { CatalogProductOfferData, FurnitureType, IFurnitureData } from 'nitro-renderer';
|
||||
import { CatalogProductOfferData, FurnitureType, IFurnitureData } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from './GetSessionDataManager';
|
||||
|
||||
export function GetFurnitureDataForProductOffer(offer: CatalogProductOfferData): IFurnitureData
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IFurnitureData, RoomObjectCategory, RoomObjectVariable } from 'nitro-renderer';
|
||||
import { IFurnitureData, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomEngine } from '../room';
|
||||
import { GetSessionDataManager } from './GetSessionDataManager';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { AvatarAction, RoomObjectVariable } from 'nitro-renderer';
|
||||
import { AvatarAction, RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetOwnRoomObject } from '../room';
|
||||
|
||||
export function GetOwnPosture(): string
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IProductData } from 'nitro-renderer';
|
||||
import { IProductData } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from './GetSessionDataManager';
|
||||
|
||||
export function GetProductDataForLocalization(localizationId: string): IProductData
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomSession } from 'nitro-renderer';
|
||||
import { IRoomSession } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomSessionManager } from './GetRoomSessionManager';
|
||||
|
||||
export function GetRoomSession(): IRoomSession
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomSessionManager } from 'nitro-renderer';
|
||||
import { IRoomSessionManager } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../GetNitroInstance';
|
||||
|
||||
export function GetRoomSessionManager(): IRoomSessionManager
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { ISessionDataManager } from 'nitro-renderer';
|
||||
import { ISessionDataManager } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../GetNitroInstance';
|
||||
|
||||
export function GetSessionDataManager(): ISessionDataManager
|
||||
|
7
src/api/nitro/session/GoToDesktop.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { DesktopViewComposer } from '@nitrots/nitro-renderer';
|
||||
import { SendMessageHook } from '../../../hooks';
|
||||
|
||||
export function GoToDesktop(): void
|
||||
{
|
||||
SendMessageHook(new DesktopViewComposer());
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { HabboClubLevelEnum } from 'nitro-renderer';
|
||||
import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from './GetSessionDataManager';
|
||||
|
||||
export function HasHabboClub(): boolean
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { HabboClubLevelEnum } from 'nitro-renderer';
|
||||
import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from './GetSessionDataManager';
|
||||
|
||||
export function HasHabboVip(): boolean
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomObject, RoomObjectVariable } from 'nitro-renderer';
|
||||
import { IRoomObject, RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from '../../../api';
|
||||
|
||||
export function IsOwnerOfFurniture(roomObject: IRoomObject): boolean
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { RoomObjectVariable } from 'nitro-renderer';
|
||||
import { RoomObjectVariable } from '@nitrots/nitro-renderer';
|
||||
import { GetOwnRoomObject } from '../room';
|
||||
|
||||
export function IsRidingHorse(): boolean
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IRoomSession } from 'nitro-renderer';
|
||||
import { IRoomSession } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomSessionManager } from './GetRoomSessionManager';
|
||||
|
||||
export function StartRoomSession(session: IRoomSession): void
|
||||
|
@ -1,4 +1,5 @@
|
||||
export * from './CanManipulateFurniture';
|
||||
export * from './CreateRoomSession';
|
||||
export * from './GetCanStandUp';
|
||||
export * from './GetCanUseExpression';
|
||||
export * from './GetClubMemberLevel';
|
||||
@ -9,6 +10,7 @@ export * from './GetProductDataForLocalization';
|
||||
export * from './GetRoomSession';
|
||||
export * from './GetRoomSessionManager';
|
||||
export * from './GetSessionDataManager';
|
||||
export * from './GoToDesktop';
|
||||
export * from './HasHabboClub';
|
||||
export * from './HasHabboVip';
|
||||
export * from './IsOwnerOfFurniture';
|
||||
|
BIN
src/assets/images/room-widgets/camera-widget/btn.png
Normal file
After Width: | Height: | Size: 830 B |
BIN
src/assets/images/room-widgets/camera-widget/btn_down.png
Normal file
After Width: | Height: | Size: 1000 B |
BIN
src/assets/images/room-widgets/camera-widget/btn_hi.png
Normal file
After Width: | Height: | Size: 935 B |
BIN
src/assets/images/room-widgets/camera-widget/cam_bg.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/room-widgets/camera-widget/viewfinder.png
Normal file
After Width: | Height: | Size: 959 B |
@ -83,6 +83,8 @@ $oslo-gray: #8F9297 !default;
|
||||
$gainsboro: #d9d9d9 !default;
|
||||
$ghost: #c8cad0 !default;
|
||||
$gray-chateau: #a3a7b1 !default;
|
||||
$gable-green: #1C323F !default;
|
||||
$william: #3d5f6e !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
|
@ -476,13 +476,13 @@
|
||||
&.icon-camera-colormatrix {
|
||||
background: url('../images/icons/camera-colormatrix.png');
|
||||
width: 32px;
|
||||
height: 14px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
&.icon-camera-composite {
|
||||
background: url('../images/icons/camera-composite.png');
|
||||
width: 32px;
|
||||
height: 14px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
&.icon-user-profile {
|
||||
|
@ -1,5 +1,6 @@
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class AchievementsUIEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class AvatarEditorEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class CatalogEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { CatalogPurchaseData } from 'nitro-renderer';
|
||||
import { CatalogPurchaseData } from '@nitrots/nitro-renderer';
|
||||
import { CatalogEvent } from './CatalogEvent';
|
||||
|
||||
export class CatalogPurchasedEvent extends CatalogEvent
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class FriendListEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class InventoryBadgesRequestEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class InventoryBadgesUpdatedEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class InventoryEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class UnseenItemTrackerUpdateEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class ModToolsEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class NavigatorEvent extends NitroEvent
|
||||
{
|
||||
|
27
src/events/navigator/UpdateDoorStateEvent.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { NitroEvent, RoomDataParser } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class UpdateDoorStateEvent extends NitroEvent
|
||||
{
|
||||
public static START_DOORBELL: string = 'UDSE_START_DOORBELL';
|
||||
public static START_PASSWORD: string = 'UDSE_START_PASSWORD';
|
||||
public static STATE_PENDING_SERVER: string = 'UDSE_STATE_PENDING_SERVER';
|
||||
public static UPDATE_STATE: string = 'UDSE_UPDATE_STATE';
|
||||
public static STATE_WAITING: string = 'UDSE_STATE_WAITING';
|
||||
public static STATE_NO_ANSWER: string = 'UDSE_STATE_NO_ANSWER';
|
||||
public static STATE_WRONG_PASSWORD: string = 'UDSE_STATE_WRONG_PASSWORD';
|
||||
public static STATE_ACCEPTED: string = 'UDSE_STATE_ACCEPTED';
|
||||
|
||||
private _roomData: RoomDataParser
|
||||
|
||||
constructor(type: string, roomData: RoomDataParser = null)
|
||||
{
|
||||
super(type);
|
||||
|
||||
this._roomData = roomData;
|
||||
}
|
||||
|
||||
public get roomData(): RoomDataParser
|
||||
{
|
||||
return this._roomData;
|
||||
}
|
||||
}
|
@ -1 +1,2 @@
|
||||
export * from './NavigatorEvent';
|
||||
export * from './UpdateDoorStateEvent';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroNotification } from '../../views/notification-center/utils/Notification';
|
||||
import { NitroNotification } from '../../views/notification-center/common/Notification';
|
||||
import { NotificationCenterEvent } from './NotificationCenterEvent';
|
||||
|
||||
export class NotificationCenterAddNotificationEvent extends NotificationCenterEvent
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class NotificationCenterAlertEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class NotificationCenterEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1 +1,2 @@
|
||||
export * from './camera';
|
||||
export * from './thumbnail';
|
||||
|
8
src/events/user-settings/UserSettingsUIEvent.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class UserSettingsUIEvent extends NitroEvent
|
||||
{
|
||||
public static SHOW_USER_SETTINGS: string = 'NE_SHOW_USER_SETTINGS';
|
||||
public static HIDE_USER_SETTINGS: string = 'NE_HIDE_USER_SETTINGS';
|
||||
public static TOGGLE_USER_SETTINGS: string = 'NE_TOGGLE_USER_SETTINGS';
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
|
||||
export class WiredEvent extends NitroEvent
|
||||
{
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetCommunication } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetConfigurationManager } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IEventDispatcher, NitroEvent } from 'nitro-renderer';
|
||||
import { IEventDispatcher, NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export function CreateEventDispatcherHook(type: string, eventDispatcher: IEventDispatcher, handler: (event: NitroEvent) => void): void
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetAvatarRenderManager } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetNitroInstance } from '../../../api';
|
||||
import { CreateEventDispatcherHook, DispatchEventHook } from '../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomEngine } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomSessionManager } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NitroEvent } from 'nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { GetSessionDataManager } from '../../../../api';
|
||||
import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { EventDispatcher, IEventDispatcher, NitroEvent } from 'nitro-renderer';
|
||||
import { EventDispatcher, IEventDispatcher, NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { CreateEventDispatcherHook, DispatchEventHook } from '../event-dispatcher.base';
|
||||
|
||||
const uiEventDispatcher: IEventDispatcher = new EventDispatcher();
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { IMessageComposer, IMessageEvent, MessageEvent } from 'nitro-renderer';
|
||||
import { IMessageComposer, IMessageEvent, MessageEvent } from '@nitrots/nitro-renderer';
|
||||
import { useEffect } from 'react';
|
||||
import { GetCommunication, GetConnection } from '../../api';
|
||||
|
||||
|
@ -1,6 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed:wght@300;400;500&display=swap');
|
||||
@import '../node_modules/animate.css/animate.css';
|
||||
@import '../node_modules/rc-slider/assets/index.css';
|
||||
@import './assets/styles';
|
||||
|
||||
html,
|
||||
|
@ -25,3 +25,4 @@
|
||||
@import './card/NitroCardView';
|
||||
@import './draggable-window/DraggableWindow';
|
||||
@import './loading-spinner/LoadingSpinnerView';
|
||||
@import './trophy/NitroLayoutTrophyView';
|
||||
|
@ -5,12 +5,12 @@ import { NitroCardViewProps } from './NitroCardView.types';
|
||||
|
||||
export const NitroCardView: FC<NitroCardViewProps> = props =>
|
||||
{
|
||||
const { className = '', disableDrag = false, simple = false, theme = 'primary', children = null } = props;
|
||||
const { className = '', simple = false, theme = 'primary', children = null, ...rest } = props;
|
||||
|
||||
return (
|
||||
<NitroCardContextProvider value={ { theme, simple } }>
|
||||
<div className="nitro-card-responsive">
|
||||
<DraggableWindow handle=".drag-handler" disableDrag= { disableDrag }>
|
||||
<DraggableWindow { ...rest }>
|
||||
<div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
|
||||
{ children }
|
||||
</div>
|
||||
|
@ -1,7 +1,8 @@
|
||||
export interface NitroCardViewProps
|
||||
import { DraggableWindowProps } from '../draggable-window';
|
||||
|
||||
export interface NitroCardViewProps extends DraggableWindowProps
|
||||
{
|
||||
className?: string;
|
||||
disableDrag?: boolean;
|
||||
simple?: boolean;
|
||||
theme?: string;
|
||||
}
|
||||
|
@ -1,7 +1,6 @@
|
||||
.content-area {
|
||||
padding-top: $container-padding-x;
|
||||
padding-bottom: $container-padding-x;
|
||||
resize: vertical;
|
||||
overflow: auto;
|
||||
|
||||
&.simple {
|
||||
|
@ -4,11 +4,11 @@ import { NitroCardContentViewProps } from './NitroCardContextView.types';
|
||||
|
||||
export const NitroCardContentView: FC<NitroCardContentViewProps> = props =>
|
||||
{
|
||||
const { className = null, children = null } = props;
|
||||
const { children = null, className = '', ...rest } = props;
|
||||
const { simple = false } = useNitroCardContext();
|
||||
|
||||
return (
|
||||
<div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` }>
|
||||
<div className={ `container-fluid bg-light content-area ${ (simple ? 'simple' : '') } ${ className || '' }` } { ...rest }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
|
@ -1,4 +1,5 @@
|
||||
export interface NitroCardContentViewProps
|
||||
{
|
||||
className?: string;
|
||||
}
|
||||
import { DetailsHTMLAttributes } from 'react';
|
||||
|
||||
|
||||
export interface NitroCardContentViewProps extends DetailsHTMLAttributes<HTMLDivElement>
|
||||
{}
|
||||
|
@ -1,19 +1,27 @@
|
||||
import { FC, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import Draggable from 'react-draggable';
|
||||
import { DraggableWindowProps } from './DraggableWindow.types';
|
||||
import { MouseEventType } from '@nitrots/nitro-renderer';
|
||||
import { FC, Key, MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { DraggableWindowPosition, DraggableWindowProps } from './DraggableWindow.types';
|
||||
|
||||
const currentWindows: HTMLDivElement[] = [];
|
||||
const CURRENT_WINDOWS: HTMLElement[] = [];
|
||||
const POS_MEMORY: Map<Key, { x: number, y: number }> = new Map();
|
||||
const BOUNDS_THRESHOLD_TOP: number = 0;
|
||||
const BOUNDS_THRESHOLD_LEFT: number = 0;
|
||||
|
||||
export const DraggableWindow: FC<DraggableWindowProps> = props =>
|
||||
{
|
||||
const { disableDrag = false, noCenter = false, handle = '.drag-handler', draggableOptions = {}, children = null } = props;
|
||||
const { uniqueKey = null, handleSelector = '.drag-handler', position = DraggableWindowPosition.CENTER, disableDrag = false, children = null } = props;
|
||||
const [ delta, setDelta ] = useState<{ x: number, y: number }>(null);
|
||||
const [ offset, setOffset ] = useState<{ x: number, y: number }>(null);
|
||||
const [ start, setStart ] = useState<{ x: number, y: number }>({ x: 0, y: 0 });
|
||||
const [ isDragging, setIsDragging ] = useState(false);
|
||||
const [ dragHandler, setDragHandler ] = useState<HTMLElement>(null);
|
||||
const elementRef = useRef<HTMLDivElement>();
|
||||
|
||||
const bringToTop = useCallback(() =>
|
||||
{
|
||||
let zIndex = 400;
|
||||
|
||||
for(const existingWindow of currentWindows)
|
||||
for(const existingWindow of CURRENT_WINDOWS)
|
||||
{
|
||||
zIndex += 1;
|
||||
|
||||
@ -21,69 +29,170 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onMouseDown = useCallback((event: MouseEvent) =>
|
||||
const onMouseDown = useCallback((event: ReactMouseEvent) =>
|
||||
{
|
||||
const index = currentWindows.indexOf(elementRef.current);
|
||||
const index = CURRENT_WINDOWS.indexOf(elementRef.current);
|
||||
|
||||
if(index === -1)
|
||||
{
|
||||
currentWindows.push(elementRef.current);
|
||||
CURRENT_WINDOWS.push(elementRef.current);
|
||||
}
|
||||
|
||||
else if(index === (currentWindows.length - 1)) return;
|
||||
else if(index === (CURRENT_WINDOWS.length - 1)) return;
|
||||
|
||||
else if(index >= 0)
|
||||
{
|
||||
currentWindows.splice(index, 1);
|
||||
CURRENT_WINDOWS.splice(index, 1);
|
||||
|
||||
currentWindows.push(elementRef.current);
|
||||
CURRENT_WINDOWS.push(elementRef.current);
|
||||
}
|
||||
|
||||
bringToTop();
|
||||
}, [ bringToTop ]);
|
||||
|
||||
const onDragMouseDown = useCallback((event: MouseEvent) =>
|
||||
{
|
||||
setStart({ x: event.clientX, y: event.clientY });
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const onDragMouseMove = useCallback((event: MouseEvent) =>
|
||||
{
|
||||
setDelta({ x: (event.clientX - start.x), y: (event.clientY - start.y) });
|
||||
}, [ start ]);
|
||||
|
||||
const onDragMouseUp = useCallback((event: MouseEvent) =>
|
||||
{
|
||||
if(!elementRef.current || !dragHandler) return;
|
||||
|
||||
let offsetX = (offset.x + delta.x);
|
||||
let offsetY = (offset.y + delta.y);
|
||||
|
||||
const left = elementRef.current.offsetLeft + offsetX;
|
||||
const top = elementRef.current.offsetTop + offsetY;
|
||||
|
||||
if(top < BOUNDS_THRESHOLD_TOP)
|
||||
{
|
||||
offsetY = -elementRef.current.offsetTop;
|
||||
}
|
||||
|
||||
else if((top + dragHandler.offsetHeight) >= (document.body.offsetHeight - BOUNDS_THRESHOLD_TOP))
|
||||
{
|
||||
offsetY = (document.body.offsetHeight - elementRef.current.offsetHeight) - elementRef.current.offsetTop;
|
||||
}
|
||||
|
||||
if((left + elementRef.current.offsetWidth) < BOUNDS_THRESHOLD_LEFT)
|
||||
{
|
||||
offsetX = -elementRef.current.offsetLeft;
|
||||
}
|
||||
|
||||
else if(left >= (document.body.offsetWidth - BOUNDS_THRESHOLD_LEFT))
|
||||
{
|
||||
offsetX = (document.body.offsetWidth - elementRef.current.offsetWidth) - elementRef.current.offsetLeft;
|
||||
}
|
||||
|
||||
setDelta({ x: 0, y: 0 });
|
||||
setOffset({ x: offsetX, y: offsetY });
|
||||
setIsDragging(false);
|
||||
|
||||
if(uniqueKey !== null) POS_MEMORY.set(uniqueKey, { x: offsetX, y: offsetY });
|
||||
}, [ dragHandler, delta, offset, uniqueKey ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!elementRef) return;
|
||||
const element = (elementRef.current as HTMLElement);
|
||||
|
||||
const element = elementRef.current;
|
||||
if(!element) return;
|
||||
|
||||
currentWindows.push(element);
|
||||
CURRENT_WINDOWS.push(element);
|
||||
|
||||
bringToTop();
|
||||
|
||||
if(!noCenter)
|
||||
if(!disableDrag)
|
||||
{
|
||||
const left = ((document.body.clientWidth / 2) - (element.clientWidth / 2));
|
||||
const top = ((document.body.clientHeight / 2) - (element.clientHeight / 2));
|
||||
const handle = (element.querySelector(handleSelector) as HTMLElement);
|
||||
|
||||
element.style.left = `${ left }px`;
|
||||
element.style.top = `${ top }px`;
|
||||
}
|
||||
else
|
||||
{
|
||||
element.style.left = `0px`;
|
||||
element.style.top = `0px`;
|
||||
if(handle) setDragHandler(handle);
|
||||
}
|
||||
|
||||
element.style.visibility = 'visible';
|
||||
let offsetX = 0;
|
||||
let offsetY = 0;
|
||||
|
||||
switch(position)
|
||||
{
|
||||
case DraggableWindowPosition.TOP_CENTER:
|
||||
element.style.top = '50px';
|
||||
element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`;
|
||||
break;
|
||||
case DraggableWindowPosition.CENTER:
|
||||
element.style.top = `calc(50vh - ${ (element.offsetHeight / 2) }px)`;
|
||||
element.style.left = `calc(50vw - ${ (element.offsetWidth / 2) }px)`;
|
||||
break;
|
||||
}
|
||||
|
||||
if(uniqueKey !== null)
|
||||
{
|
||||
const memory = POS_MEMORY.get(uniqueKey);
|
||||
|
||||
if(memory)
|
||||
{
|
||||
offsetX = memory.x;
|
||||
offsetY = memory.y;
|
||||
}
|
||||
}
|
||||
|
||||
setDelta({ x: 0, y: 0});
|
||||
setOffset({ x: offsetX, y: offsetY });
|
||||
|
||||
return () =>
|
||||
{
|
||||
const index = currentWindows.indexOf(element);
|
||||
const index = CURRENT_WINDOWS.indexOf(element);
|
||||
|
||||
if(index >= 0) currentWindows.splice(index, 1);
|
||||
if(index >= 0) CURRENT_WINDOWS.splice(index, 1);
|
||||
}
|
||||
}, [ elementRef, noCenter, bringToTop ]);
|
||||
}, [ handleSelector, position, uniqueKey, disableDrag, bringToTop ]);
|
||||
|
||||
const getWindowContent = useMemo(() =>
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!offset && !delta) return;
|
||||
|
||||
const element = (elementRef.current as HTMLElement);
|
||||
|
||||
if(!element) return;
|
||||
|
||||
element.style.transform = `translate(${ offset.x + delta.x }px, ${ offset.y + delta.y }px)`;
|
||||
element.style.visibility = 'visible';
|
||||
}, [ offset, delta ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!dragHandler) return;
|
||||
|
||||
dragHandler.addEventListener(MouseEventType.MOUSE_DOWN, onDragMouseDown);
|
||||
|
||||
return () =>
|
||||
{
|
||||
dragHandler.removeEventListener(MouseEventType.MOUSE_DOWN, onDragMouseDown);
|
||||
}
|
||||
}, [ dragHandler, onDragMouseDown ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!isDragging) return;
|
||||
|
||||
document.addEventListener(MouseEventType.MOUSE_UP, onDragMouseUp);
|
||||
document.addEventListener(MouseEventType.MOUSE_MOVE, onDragMouseMove);
|
||||
|
||||
return () =>
|
||||
{
|
||||
document.removeEventListener(MouseEventType.MOUSE_UP, onDragMouseUp);
|
||||
document.removeEventListener(MouseEventType.MOUSE_MOVE, onDragMouseMove);
|
||||
}
|
||||
}, [ isDragging, onDragMouseUp, onDragMouseMove ]);
|
||||
|
||||
return (
|
||||
<div ref={ elementRef } className="position-absolute draggable-window" onMouseDownCapture={ onMouseDown }>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}, [ children, onMouseDown ]);
|
||||
|
||||
return disableDrag ? getWindowContent : <Draggable handle={ handle } { ...draggableOptions }>{ getWindowContent }</Draggable>;
|
||||
}
|
||||
|
@ -1,11 +1,16 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { DraggableProps } from 'react-draggable';
|
||||
import { Key } from 'react';
|
||||
|
||||
export interface DraggableWindowProps
|
||||
{
|
||||
handle: string;
|
||||
draggableOptions?: Partial<DraggableProps>;
|
||||
uniqueKey?: Key;
|
||||
handleSelector?: string;
|
||||
position?: string;
|
||||
disableDrag?: boolean;
|
||||
noCenter?: boolean;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export class DraggableWindowPosition
|
||||
{
|
||||
public static CENTER: string = 'DWP_CENTER';
|
||||
public static TOP_CENTER: string = 'DWP_TOP_CENTER';
|
||||
public static NOTHING: string = 'DWP_NOTHING';
|
||||
}
|
||||
|
@ -1,4 +1,6 @@
|
||||
export * from './card';
|
||||
export * from './draggable-window';
|
||||
export * from './loading-spinner';
|
||||
export * from './mini-camera';
|
||||
export * from './transitions';
|
||||
export * from './trophy';
|
||||
|
38
src/layout/mini-camera/NitroLayoutMiniCameraView.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { NitroRectangle } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useRef } from 'react';
|
||||
import { GetRoomEngine } from '../../api';
|
||||
import { LocalizeText } from '../../utils';
|
||||
import { DraggableWindow } from '../draggable-window';
|
||||
import { NitroLayoutMiniCameraViewProps } from './NitroLayoutMiniCameraView.types';
|
||||
|
||||
export const NitroLayoutMiniCameraView: FC<NitroLayoutMiniCameraViewProps> = props =>
|
||||
{
|
||||
const { roomId = -1, textureReceiver = null, onClose = null } = props;
|
||||
const elementRef = useRef<HTMLDivElement>();
|
||||
|
||||
const getCameraBounds = useCallback(() =>
|
||||
{
|
||||
if(!elementRef || !elementRef.current) return null;
|
||||
|
||||
const frameBounds = elementRef.current.getBoundingClientRect();
|
||||
|
||||
return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
|
||||
}, []);
|
||||
|
||||
const takePicture = useCallback(() =>
|
||||
{
|
||||
textureReceiver(GetRoomEngine().createTextureFromRoom(roomId, 1, getCameraBounds()));
|
||||
}, [ roomId, getCameraBounds, textureReceiver ]);
|
||||
|
||||
return (
|
||||
<DraggableWindow handleSelector=".nitro-room-thumbnail-camera">
|
||||
<div className="nitro-room-thumbnail-camera px-2">
|
||||
<div ref={ elementRef } className={ 'camera-frame' } />
|
||||
<div className="d-flex align-items-end h-100 pb-2">
|
||||
<button className="btn btn-sm btn-danger w-100 mb-1 me-2" onClick={ onClose }>{ LocalizeText('cancel') }</button>
|
||||
<button className="btn btn-sm btn-success w-100 mb-1" onClick={ takePicture }>{ LocalizeText('navigator.thumbeditor.save') }</button>
|
||||
</div>
|
||||
</div>
|
||||
</DraggableWindow>
|
||||
);
|
||||
};
|
@ -0,0 +1,8 @@
|
||||
import { NitroRenderTexture } from '@nitrots/nitro-renderer';
|
||||
|
||||
export interface NitroLayoutMiniCameraViewProps
|
||||
{
|
||||
roomId: number;
|
||||
textureReceiver: (texture: NitroRenderTexture) => void;
|
||||
onClose: () => void;
|
||||
}
|
2
src/layout/mini-camera/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './NitroLayoutMiniCameraView';
|
||||
export * from './NitroLayoutMiniCameraView.types';
|
@ -1,4 +1,4 @@
|
||||
.nitro-trophy {
|
||||
.nitro-layout-trophy {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
height: 173px;
|
||||
@ -7,7 +7,7 @@
|
||||
color: black;
|
||||
|
||||
background-position: 0px 0px;
|
||||
background-image: url('../../../../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
|
||||
background-image: url('../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
|
||||
|
||||
&.trophy-2 {
|
||||
background-position: 0px 173px;
|
||||
@ -37,6 +37,7 @@
|
||||
height: 110px;
|
||||
margin-top: 3px;
|
||||
margin-left: 23px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.trophy-footer {
|