Merge remote-tracking branch 'origin/dev' into feature/user-profile

This commit is contained in:
Dank074 2021-08-12 02:23:16 -05:00
commit d29af07bfe
4 changed files with 53 additions and 13 deletions

View File

@ -1,6 +1,5 @@
import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer'; import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { GetNitroInstance, InitializeRoomInstanceRenderingCanvas } from '../../api'; import { GetNitroInstance, InitializeRoomInstanceRenderingCanvas } from '../../api';
import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent'; import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent';
import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent'; import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
@ -21,6 +20,7 @@ export const RoomView: FC<RoomViewProps> = props =>
const [ roomCanvas, setRoomCanvas ] = useState<HTMLCanvasElement>(null); const [ roomCanvas, setRoomCanvas ] = useState<HTMLCanvasElement>(null);
const [ canvasId, setCanvasId ] = useState(-1); const [ canvasId, setCanvasId ] = useState(-1);
const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null); const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
const elementRef = useRef<HTMLDivElement>();
useEffect(() => useEffect(() =>
{ {
@ -111,6 +111,8 @@ export const RoomView: FC<RoomViewProps> = props =>
GetNitroInstance().render(); GetNitroInstance().render();
} }
if(elementRef && elementRef.current) elementRef.current.appendChild(canvas);
setRoomCanvas(canvas); setRoomCanvas(canvas);
setCanvasId(canvasId); setCanvasId(canvasId);
}, [ roomSession ]); }, [ roomSession ]);
@ -119,15 +121,12 @@ export const RoomView: FC<RoomViewProps> = props =>
return ( return (
<RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }> <RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
<div className="nitro-room w-100 h-100"> <div ref={ elementRef } id="room-view" className="nitro-room-container" />
<div id="room-view" className="nitro-room-container"></div>
{ roomCanvas && createPortal(null, document.getElementById('room-view').appendChild(roomCanvas)) }
{ widgetHandler && { widgetHandler &&
<> <>
<RoomColorView /> <RoomColorView />
<RoomWidgetsView /> <RoomWidgetsView />
</> } </> }
</div>
</RoomContextProvider> </RoomContextProvider>
); );
} }

View File

@ -80,8 +80,8 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
const deltaY = (location.y - maxStack); const deltaY = (location.y - maxStack);
let x = (location.x - (elementRef.current.offsetWidth / 2)); let x = Math.round(location.x - (elementRef.current.offsetWidth / 2));
let y = (deltaY + offset); let y = Math.round(deltaY + offset);
const maxLeft = ((GetNitroInstance().width - elementRef.current.offsetWidth) - SPACE_AROUND_EDGES); const maxLeft = ((GetNitroInstance().width - elementRef.current.offsetWidth) - SPACE_AROUND_EDGES);
const maxTop = ((GetNitroInstance().height - elementRef.current.offsetHeight) - SPACE_AROUND_EDGES); const maxTop = ((GetNitroInstance().height - elementRef.current.offsetHeight) - SPACE_AROUND_EDGES);

View File

@ -0,0 +1,34 @@
import { FriendlyTime } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { FriendlyTimeViewProps } from './FriendlyTimeView.types';
export const FriendlyTimeView: FC<FriendlyTimeViewProps> = props =>
{
const { seconds = 0, isShort = false, ...rest } = props;
const [ updateId, setUpdateId ] = useState(-1);
const getStartSeconds = useMemo(() =>
{
return (Math.round(new Date().getSeconds()) - seconds);
}, [ seconds ]);
const getFriendlyTime = useCallback(() =>
{
const value = (Math.round(new Date().getSeconds()) - getStartSeconds);
if(isShort) return FriendlyTime.format(value);
return FriendlyTime.format(value);
}, [ getStartSeconds, isShort ]);
useEffect(() =>
{
const interval = setInterval(() => setUpdateId(prevValue => (prevValue + 1)), 10000);
return () => clearInterval(interval);
}, []);
return (
<div { ...rest }>{ getFriendlyTime() }</div>
);
}

View File

@ -0,0 +1,7 @@
import { DetailsHTMLAttributes } from 'react';
export interface FriendlyTimeViewProps extends DetailsHTMLAttributes<HTMLDivElement>
{
seconds: number;
isShort?: boolean;
}