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

fix ObjectLocationView offset

Browse Source
This commit is contained in:
dank074 2021-11-14 01:51:17 -06:00
parent 50811e4eac
commit 887ea45b0f
2 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx
View File

@ -5,17 +5,17 @@ import { useRoomEngineEvent } from '../../../../../hooks';
import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout'; import { NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
import { NitroLayoutBase } from '../../../../../layout/base'; import { NitroLayoutBase } from '../../../../../layout/base';
import { useRoomContext } from '../../../context/RoomContext'; import { useRoomContext } from '../../../context/RoomContext';
import { ContextMenuView } from '../../context-menu/ContextMenuView';
import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView'; import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
import { ContextMenuListView } from '../../context-menu/views/list/ContextMenuListView'; import { ContextMenuListView } from '../../context-menu/views/list/ContextMenuListView';
import { ObjectLocationView } from '../../object-location/ObjectLocationView';
const SCORE_TYPES = [ 'perteam', 'mostwins', 'classic' ]; const SCORE_TYPES = ['perteam', 'mostwins', 'classic'];
const CLEAR_TYPES = [ 'alltime', 'daily', 'weekly', 'monthly' ]; const CLEAR_TYPES = ['alltime', 'daily', 'weekly', 'monthly'];
export const FurnitureHighScoreView: FC<{}> = props => export const FurnitureHighScoreView: FC<{}> = props =>
{ {
const [ objectId, setObjectId ] = useState(-1); const [objectId, setObjectId] = useState(-1);
const [ stuffData, setStuffData ] = useState<HighScoreDataType>(null); const [stuffData, setStuffData] = useState<HighScoreDataType>(null);
const { roomSession = null } = useRoomContext(); const { roomSession = null } = useRoomContext();
const close = useCallback(() => const close = useCallback(() =>
@ -49,7 +49,7 @@ export const FurnitureHighScoreView: FC<{}> = props =>
close(); close();
return; return;
} }
}, [ roomSession, objectId, close ]); }, [roomSession, objectId, close]);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onRoomEngineTriggerWidgetEvent); useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onRoomEngineTriggerWidgetEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onRoomEngineTriggerWidgetEvent); useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onRoomEngineTriggerWidgetEvent);
@ -57,49 +57,52 @@ export const FurnitureHighScoreView: FC<{}> = props =>
if((objectId === -1) || !stuffData) return null; if((objectId === -1) || !stuffData) return null;
return ( return (
<ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } close={ close } fades={ false } className="nitro-widget-high-score"> <ObjectLocationView objectId={objectId} category={RoomObjectCategory.FLOOR} >
<ContextMenuHeaderView> <div className="nitro-widget-high-score nitro-context-menu">
{ LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [LocalizeText(`high.score.display.scoretype.${ SCORE_TYPES[stuffData.scoreType] }`), LocalizeText(`high.score.display.cleartype.${ CLEAR_TYPES[stuffData.clearType] }`) ]) } <ContextMenuHeaderView>
</ContextMenuHeaderView> {LocalizeText('high.score.display.caption', ['scoretype', 'cleartype'], [LocalizeText(`high.score.display.scoretype.${SCORE_TYPES[stuffData.scoreType]}`), LocalizeText(`high.score.display.cleartype.${CLEAR_TYPES[stuffData.clearType]}`)])}
<ContextMenuListView> </ContextMenuHeaderView>
<NitroLayoutGrid> <ContextMenuListView>
<NitroLayoutGridColumn size={ 6 }> <NitroLayoutGrid>
<NitroLayoutBase className="text-center fw-bold"> <NitroLayoutGridColumn size={6}>
{ LocalizeText('high.score.display.users.header') } <NitroLayoutBase className="text-center fw-bold">
</NitroLayoutBase> {LocalizeText('high.score.display.users.header')}
</NitroLayoutGridColumn> </NitroLayoutBase>
<NitroLayoutGridColumn size={ 6 }> </NitroLayoutGridColumn>
<NitroLayoutBase className="text-center fw-bold"> <NitroLayoutGridColumn size={6}>
{ LocalizeText('high.score.display.score.header') } <NitroLayoutBase className="text-center fw-bold">
</NitroLayoutBase> {LocalizeText('high.score.display.score.header')}
</NitroLayoutGridColumn> </NitroLayoutBase>
</NitroLayoutGrid> </NitroLayoutGridColumn>
<hr className="m-0 my-1" /> </NitroLayoutGrid>
<NitroLayoutGrid overflow="hidden"> <hr className="m-0 my-1" />
<NitroLayoutGridColumn size={ 6 }> <NitroLayoutGrid overflow="hidden">
{ stuffData.entries.map((entry, index) => <NitroLayoutGridColumn size={6}>
{stuffData.entries.map((entry, index) =>
{ {
return ( return (
<NitroLayoutBase key={ index } className="text-center"> <NitroLayoutBase key={index} className="text-center">
{ entry.users.join(', ') } {entry.users.join(', ')}
</NitroLayoutBase> </NitroLayoutBase>
); );
}) })
} }
</NitroLayoutGridColumn> </NitroLayoutGridColumn>
<NitroLayoutGridColumn size={ 6 }> <NitroLayoutGridColumn size={6}>
{ stuffData.entries.map((entry, index) => {stuffData.entries.map((entry, index) =>
{ {
return ( return (
<NitroLayoutBase key={ index } className="text-center"> <NitroLayoutBase key={index} className="text-center">
{ entry.score } {entry.score}
</NitroLayoutBase> </NitroLayoutBase>
); );
}) })
} }
</NitroLayoutGridColumn> </NitroLayoutGridColumn>
</NitroLayoutGrid> </NitroLayoutGrid>
</ContextMenuListView> </ContextMenuListView>
</ContextMenuView> </div>
</ObjectLocationView>
); );
} }

2
src/views/room/widgets/object-location/ObjectLocationView.tsx
View File

@ -50,7 +50,7 @@ export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
}, [ updatePosition, noFollow ]); }, [ updatePosition, noFollow ]);
return ( return (
<div ref={ elementRef } className={ 'object-location position-absolute ' + (pos.x > -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } }> <div ref={ elementRef } className={ 'object-location position-absolute ' + ( (pos.x + elementRef.current.offsetWidth )> -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } }>
{ children } { children }
</div> </div>
); );