Merge branch 'dev' into more-layout-changes

This commit is contained in:
Bill 2021-12-09 00:39:18 -05:00
commit 56aae4c6bb
5 changed files with 95 additions and 9 deletions

View File

@ -9,9 +9,11 @@
overflow: scroll; overflow: scroll;
} }
.color { .arrow-button {
height: 50px;
width: 10px; @include media-breakpoint-up(md) {
display:none;
}
} }
} }

View File

@ -87,10 +87,10 @@ export class FloorplanEditor extends PixiApplicationProxy
this._tilemapRenderer.on('pointerdown', (event: PixiInteractionEventProxy) => this._tilemapRenderer.on('pointerdown', (event: PixiInteractionEventProxy) =>
{ {
if(!(event.data.originalEvent instanceof PointerEvent)) return; if(!(event.data.originalEvent instanceof PointerEvent) && !(event.data.originalEvent instanceof TouchEvent)) return;
const pointerEvent = event.data.originalEvent; const pointerEvent = event.data.originalEvent;
if(pointerEvent.button === 2) return; if((pointerEvent instanceof MouseEvent) && pointerEvent.button === 2) return;
const location = event.data.global; const location = event.data.global;

View File

@ -1,6 +1,7 @@
import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer'; import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { CreateMessageHook, SendMessageHook, UseMountEffect } from '../../../hooks'; import { CreateMessageHook, SendMessageHook, UseMountEffect } from '../../../hooks';
import { NitroLayoutFlex } from '../../../layout';
import { FloorplanEditor } from '../common/FloorplanEditor'; import { FloorplanEditor } from '../common/FloorplanEditor';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
@ -68,6 +69,29 @@ export const FloorplanCanvasView: FC<{}> = props =>
CreateMessageHook(RoomEntryTileMessageEvent, onRoomEntryTileMessageEvent); CreateMessageHook(RoomEntryTileMessageEvent, onRoomEntryTileMessageEvent);
const onClickArrowButton = useCallback((scrollDirection: string) =>
{
const element = elementRef.current;
if(!element) return;
switch(scrollDirection)
{
case 'up':
element.scrollBy({ top: -10 });
break;
case 'down':
element.scrollBy({ top: 10 });
break;
case 'left':
element.scrollBy({ left: -10 });
break;
case 'right':
element.scrollBy({ left: 10 });
break;
}
}, []);
useEffect(() => useEffect(() =>
{ {
if(entryTileReceived && occupiedTilesReceived) if(entryTileReceived && occupiedTilesReceived)
@ -75,6 +99,18 @@ export const FloorplanCanvasView: FC<{}> = props =>
}, [entryTileReceived, occupiedTilesReceived]) }, [entryTileReceived, occupiedTilesReceived])
return ( return (
<div ref={elementRef} className="editor-area" /> <>
<NitroLayoutFlex className="align-items-center justify-content-center">
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('up')}><i className="fas fa-arrow-up"/></button></div>
</NitroLayoutFlex>
<NitroLayoutFlex className="align-items-center justify-content-center">
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('left')}><i className="fas fa-arrow-left"/></button></div>
<div ref={elementRef} className="editor-area" />
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('right')}><i className="fas fa-arrow-right"/></button></div>
</NitroLayoutFlex>
<NitroLayoutFlex className="align-items-center justify-content-center">
<div className="arrow-button"><button className="btn btn-primary" onClick={() => onClickArrowButton('down')}><i className="fas fa-arrow-down"/></button></div>
</NitroLayoutFlex>
</>
); );
} }

View File

@ -1,6 +1,6 @@
import { RoomSessionEvent } from '@nitrots/nitro-renderer'; import { HabboWebTools, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useEffect, useState } from 'react';
import { GetCommunication } from '../../api'; import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout'; import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
import { AchievementsView } from '../achievements/AchievementsView'; import { AchievementsView } from '../achievements/AchievementsView';
@ -47,6 +47,32 @@ export const MainView: FC<MainViewProps> = props =>
useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent); useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent); useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
const onLinkReceived = useCallback((link: string) =>
{
const parts = link.split('/');
if(parts.length < 2) return;
switch(parts[1])
{
case 'open':
if(parts.length > 2)
{
switch(parts[2])
{
case 'credits':
//HabboWebTools.openWebPageAndMinimizeClient(this._windowManager.getProperty(ExternalVariables.WEB_SHOP_RELATIVE_URL));
break;
default: {
const name = parts[2];
HabboWebTools.openHabblet(name);
}
}
}
return;
}
}, []);
useEffect(() => useEffect(() =>
{ {
setIsReady(true); setIsReady(true);
@ -54,6 +80,17 @@ export const MainView: FC<MainViewProps> = props =>
GetCommunication().connection.onReady(); GetCommunication().connection.onReady();
}, []); }, []);
useEffect(() =>
{
const linkTracker = { linkReceived: onLinkReceived, eventUrlPrefix: 'habblet/' };
AddEventLinkTracker(linkTracker);
return () =>
{
RemoveLinkEventTracker(linkTracker);
}
}, [onLinkReceived]);
return ( return (
<div className="nitro-main"> <div className="nitro-main">
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }> <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }>

View File

@ -1,7 +1,8 @@
import { ILinkEventTracker, NavigatorInitComposer, NavigatorSearchComposer, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer'; import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react'; import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
import { AddEventLinkTracker, GoToDesktop, LocalizeText, RemoveLinkEventTracker, TryVisitRoom } from '../../api'; import { AddEventLinkTracker, GoToDesktop, LocalizeText, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
import { NavigatorEvent, UpdateDoorStateEvent } from '../../events'; import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
import { UseMountEffect } from '../../hooks';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { useUiEvent } from '../../hooks/events/ui/ui-event'; import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event'; import { SendMessageHook } from '../../hooks/messages/message-event';
@ -181,6 +182,16 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
return () => RemoveLinkEventTracker(linkTracker); return () => RemoveLinkEventTracker(linkTracker);
}, [ linkReceived]); }, [ linkReceived]);
const enterRoomWebRequest = useCallback((k: string, _arg_2:boolean=false, _arg_3:string=null) =>
{
SendMessageHook(new ConvertGlobalRoomIdMessageComposer(k));
}, []);
UseMountEffect(() =>
{
LegacyExternalInterface.addCallback(HabboWebTools.OPENROOM, enterRoomWebRequest);
});
useEffect(() => useEffect(() =>
{ {
if(!isVisible || !needsNavigatorUpdate) return; if(!isVisible || !needsNavigatorUpdate) return;