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

More widget updates

Browse Source
This commit is contained in:
Bill 2022-02-26 00:23:11 -05:00
parent 34bfd96c4f
commit 06bc3f238e
23 changed files with 346 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/views/room/widgets/RoomWidgets.scss
View File

@ -1,3 +1,99 @@
.nitro-room-tools-container {
position: absolute;
bottom: $toolbar-height + 65px;
left: 0;
.nitro-room-tools {
background: rgba($dark,.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
transition: all .2s ease;
z-index: 2;
.list-group-item {
background: transparent;
padding: 3px 0px;
color: $white;
border-color: rgba($black, 0.3);
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:first-child {
padding-top: 8px;
}
&:last-child {
border-bottom: none;
padding-bottom: 8px;
}
.tools-item {
.icon {
width: 22px;
background-repeat: no-repeat;
background-position: center;
}
&:hover {
text-decoration: underline;
}
}
}
}
.nitro-room-tools-info {
background: rgba($dark,.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
transition: all .2s ease;
pointer-events: none;
max-width: 250px;
}
}
.wordquiz-question {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: large;
background: rgba($dark, 0.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
border-radius: $border-radius;
transition: all 0.2s ease;
.question {
max-width: 300px;
}
}
.word-quiz-dislike {
background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-down.png");
width: 31px;
height: 34px;
}
.word-quiz-like {
background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-up.png");
width: 31px;
height: 34px;
}
.word-quiz-dislike-sm {
background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png");
width: 22px;
height: 22px;
}
.word-quiz-like-sm {
background: url("../../../assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png");
height: 22px;
width: 22px;
}
@import './avatar-info/AvatarInfoWidgetView';
@import './chat/ChatWidgetView';
@import './chat-input/ChatInputView';
@ -6,6 +102,3 @@
@import './friend-request/FriendRequestDialogView';
@import './furniture/FurnitureWidgets';
@import './infostand/InfoStandWidgetView';
@import './object-location/ObjectLocationView';
@import './room-tools/RoomToolsWidgetView';
@import './word-quiz/WordQuizWidgetView';

10
src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss
View File

@ -20,14 +20,4 @@
background: url('../../../../assets/images/room-widgets/furni-context-menu/monsterplant-preview.png') no-repeat center;
}
}
.mannequin-preview {
display: flex;
justify-content: center;
align-items: center;
width: 83px;
height: 130px;
background-image: url('../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
overflow: hidden;
}
}

14
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -50,9 +50,21 @@
}
.nitro-mannequin {
}
.mannequin-preview {
display: flex;
justify-content: center;
align-items: center;
width: 83px;
height: 130px;
background-image: url('../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
overflow: hidden;
}
@import './friend-furni/FurnitureFriendFurniView';
@import './manipulation-menu/FurnitureManipulationMenuView';
@import './mannequin/FurnitureMannequinView';
@import './stickie/FurnitureStickieView';
@import './high-score/FurnitureHighScoreView';
@import './youtube-tv/FurnitureYoutubeDisplayView';

23
src/views/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx Normal file
View File

@ -0,0 +1,23 @@
import { FC } from 'react';
import { Base } from '../../../../../common';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { CurrencyIcon } from '../../../../shared/currency-icon/CurrencyIcon';
interface FurnitureMannequinPreviewViewProps
{
figure: string;
clubLevel: number;
}
export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProps> = props =>
{
const { figure = null, clubLevel = 0 } = props;
return (
<Base position="relative" className="mannequin-preview">
<AvatarImageView figure={ figure } direction={ 2 } />
{ (clubLevel > 0) &&
<CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
</Base>
);
}

9
src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.scss
View File

@ -1,9 +0,0 @@
.nitro-mannequin {
width: 350px;
.mannequin-preview {
width: 83px;
height: 130px;
background-image: url('../../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
}
}

62
src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
View File

@ -1,16 +1,17 @@
import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, HabboClubLevelEnum, IAvatarFigureContainer, RoomControllerLevel } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
import { GetAvatarRenderManager, GetSessionDataManager, LocalizeText, RoomWidgetUpdateMannequinEvent } from '../../../../../api';
import { Base } from '../../../../../common';
import { Button } from '../../../../../common/Button';
import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { CurrencyIcon } from '../../../../shared/currency-icon/CurrencyIcon';
import { useRoomContext } from '../../../context/RoomContext';
import { FurnitureMannequinPreviewView } from './views/preview/FurnitureMannequinPreviewView';
const MODE_NONE: number = -1;
const MODE_CONTROLLER: number = 0;
@ -143,8 +144,11 @@ export const FurnitureMannequinView: FC<{}> = props =>
transformAsMannequinFigure(figureContainer);
setRenderedFigure(figureContainer.getFigureString());
setRenderedClubLevel(clubLevel);
BatchUpdates(() =>
{
setRenderedFigure(figureContainer.getFigureString());
setRenderedClubLevel(clubLevel);
});
break;
}
case MODE_UPDATE: {
@ -152,16 +156,22 @@ export const FurnitureMannequinView: FC<{}> = props =>
transformAsMannequinFigure(figureContainer);
setRenderedFigure(figureContainer.getFigureString());
setRenderedClubLevel(GetAvatarRenderManager().getFigureClubLevel(figureContainer, GetSessionDataManager().gender, MANNEQUIN_CLOTHING_PART_TYPES));
BatchUpdates(() =>
{
setRenderedFigure(figureContainer.getFigureString());
setRenderedClubLevel(GetAvatarRenderManager().getFigureClubLevel(figureContainer, GetSessionDataManager().gender, MANNEQUIN_CLOTHING_PART_TYPES));
});
break;
}
case MODE_PEER:
case MODE_NO_CLUB: {
const figureContainer = getMergedFigureContainer(GetSessionDataManager().figure, figure);
setRenderedFigure(figureContainer.getFigureString());
setRenderedClubLevel(clubLevel);
BatchUpdates(() =>
{
setRenderedFigure(figureContainer.getFigureString());
setRenderedClubLevel(clubLevel);
});
break;
}
}
@ -170,18 +180,22 @@ export const FurnitureMannequinView: FC<{}> = props =>
if(mode === MODE_NONE) return null;
return (
<NitroCardView className="nitro-mannequin" simple={ true }>
<NitroCardView className="nitro-mannequin" simple>
<NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => setMode(MODE_NONE) } />
<NitroCardContentView>
<Grid>
<Column center size={ 4 } overflow="hidden">
<FurnitureMannequinPreviewView figure={ renderedFigure } clubLevel={ renderedClubLevel } />
<NitroCardContentView center>
<Flex gap={ 2 } overflow="hidden">
<Column>
<Base position="relative" className="mannequin-preview">
<AvatarImageView figure={ renderedFigure } direction={ 2 } />
{ (clubLevel > 0) &&
<CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
</Base>
</Column>
<Column size={ 8 } justifyContent="between" overflow="hidden">
<Column justifyContent="between" overflow="auto">
{ (mode === MODE_CONTROLLER) &&
<>
<input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
<Column gap={ 1 } overflow="auto">
<Column gap={ 1 }>
<Button variant="success" onClick={ event => setMode(MODE_UPDATE) }>
{ LocalizeText('mannequin.widget.style') }
</Button>
@ -192,9 +206,9 @@ export const FurnitureMannequinView: FC<{}> = props =>
</> }
{ (mode === MODE_UPDATE) &&
<>
<Column gap={ 1 } overflow="auto">
<Text fontWeight="bold">{ name }</Text>
<Text>{ LocalizeText('mannequin.widget.savetext') }</Text>
<Column gap={ 1 }>
<Text bold>{ name }</Text>
<Text wrap>{ LocalizeText('mannequin.widget.savetext') }</Text>
</Column>
<Flex alignItems="center" justifyContent="between">
<Text underline pointer onClick={ event => setMode(MODE_CONTROLLER) }>
@ -207,18 +221,20 @@ export const FurnitureMannequinView: FC<{}> = props =>
</> }
{ (mode === MODE_PEER) &&
<>
<Column gap={ 1 } overflow="auto">
<Text fontWeight="bold">{ name }</Text>
<Column gap={ 1 }>
<Text bold>{ name }</Text>
<Text>{ LocalizeText('mannequin.widget.weartext') }</Text>
</Column>
<Button variant="success" onClick={ event => processAction(ACTION_WEAR) }>
{ LocalizeText('mannequin.widget.wear') }
</Button>
</> }
{ (mode === MODE_NO_CLUB) && <Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text> }
{ (mode === MODE_WRONG_GENDER) && <Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
{ (mode === MODE_NO_CLUB) &&
<Text>{ LocalizeText('mannequin.widget.clubnotification') }</Text> }
{ (mode === MODE_WRONG_GENDER) &&
<Text>{ LocalizeText('mannequin.widget.wronggender') }</Text> }
</Column>
</Grid>
</Flex>
</NitroCardContentView>
</NitroCardView>
);

17
src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.tsx
View File

@ -1,17 +0,0 @@
import { FC } from 'react';
import { NitroLayoutBase } from '../../../../../../../layout/base';
import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
import { CurrencyIcon } from '../../../../../../shared/currency-icon/CurrencyIcon';
import { FurnitureMannequinPreviewViewProps } from './FurnitureMannequinPreviewView.types';
export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProps> = props =>
{
const { figure = null, clubLevel = 0 } = props;
return (
<NitroLayoutBase className="mannequin-preview" position="relative">
<AvatarImageView figure={ figure } direction={ 2 } />
{ (clubLevel > 0) && <CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
</NitroLayoutBase>
);
}

5
src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.types.ts
View File

@ -1,5 +0,0 @@
export interface FurnitureMannequinPreviewViewProps
{
figure: string;
clubLevel: number;
}

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

@ -1,2 +0,0 @@
.object-location {
}

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

@ -1,11 +1,17 @@
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetNitroInstance, GetRoomEngine, GetRoomSession } from '../../../../api';
import { NitroLayoutBase } from '../../../../layout/base';
import { ObjectLocationViewProps } from './ObjectLocationView.types';
import { Base, BaseProps } from '../../../../common';
interface ObjectLocationViewProps extends BaseProps<HTMLDivElement>
{
objectId: number;
category: number;
noFollow?: boolean;
}
export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
{
const { objectId = -1, category = -1, noFollow = false, children = null, ...rest } = props;
const { objectId = -1, category = -1, noFollow = false, position = 'absolute', ...rest } = props;
const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1 });
const elementRef = useRef<HTMLDivElement>();
@ -50,9 +56,5 @@ export const ObjectLocationView: FC<ObjectLocationViewProps> = props =>
}
}, [ updatePosition, noFollow ]);
return (
<NitroLayoutBase innerRef={ elementRef } className={ 'object-location position-absolute ' + ( (pos.x + (elementRef.current ? elementRef.current.offsetWidth : 0 ) )> -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } } { ...rest }>
{ children }
</NitroLayoutBase>
);
return <Base innerRef={ elementRef } position={ position } visible={ (pos.x + (elementRef.current ? elementRef.current.offsetWidth : 0)) > -1 } className="object-location" style={ { left: pos.x, top: pos.y } } { ...rest } />;
}

8
src/views/room/widgets/object-location/ObjectLocationView.types.ts
View File

@ -1,8 +0,0 @@
import { NitroLayoutBaseProps } from '../../../../layout/base';
export interface ObjectLocationViewProps extends NitroLayoutBaseProps
{
objectId: number;
category: number;
noFollow?: boolean;
}

55
src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
View File

@ -1,55 +0,0 @@
.nitro-room-tools-container {
position: absolute;
bottom: $toolbar-height + 65px;
left: 0;
.nitro-room-tools {
background: rgba($dark,.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
transition: all .2s ease;
.list-group-item {
background: transparent;
padding: 3px 0px;
color: $white;
border-color: rgba($black, 0.3);
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:first-child {
padding-top: 8px;
}
&:last-child {
border-bottom: none;
padding-bottom: 8px;
}
.tools-item {
.icon {
width: 22px;
background-repeat: no-repeat;
background-position: center;
}
&:hover {
text-decoration: underline;
}
}
}
}
.nitro-room-tools-info {
margin-left: 10px;
background: rgba($dark,.95);
box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
transition: all .2s ease;
pointer-events: none;
max-width: 250px;
}
}

45
src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -4,8 +4,10 @@ import { FC, useCallback, useEffect, useState } from 'react';
import { CreateLinkEvent, LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
import { Base, Column, Flex, Text } from '../../../../common';
import { NavigatorEvent } from '../../../../events';
import { BatchUpdates } from '../../../../hooks';
import { dispatchUiEvent } from '../../../../hooks/events';
import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
import { TransitionAnimation, TransitionAnimationTypes } from '../../../../layout';
import { useRoomContext } from '../../context/RoomContext';
export const RoomToolsWidgetView: FC<{}> = props =>
@ -13,14 +15,13 @@ export const RoomToolsWidgetView: FC<{}> = props =>
const [ isZoomedIn, setIsZoomedIn ] = useState(false);
const [ isLiked, setIsLiked ] = useState(false);
const { widgetHandler = null } = useRoomContext();
const [ roomName, setRoomName ] = useState(null);
const [ roomOwner, setRoomOwner ] = useState(null);
const [ roomTags, setRoomTags ] = useState(null);
const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
const [ isOpen, setIsOpen ] = useState(false);
const handleToolClick = useCallback((action: string) =>
const handleToolClick = (action: string) =>
{
switch(action)
{
@ -44,17 +45,18 @@ export const RoomToolsWidgetView: FC<{}> = props =>
dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
return;
}
}, [ isZoomedIn, isLiked, widgetHandler ]);
}
const onGetGuestRoomResultEvent = useCallback((event: GetGuestRoomResultEvent) =>
{
const parser = event.getParser();
if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
BatchUpdates(() =>
{
if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
});
}, [ roomName, roomOwner, roomTags ]);
CreateMessageHook(GetGuestRoomResultEvent, onGetGuestRoomResultEvent);
@ -69,26 +71,29 @@ export const RoomToolsWidgetView: FC<{}> = props =>
}, [ roomName, roomOwner, roomTags ]);
return (
<Flex className="nitro-room-tools-container">
<Flex className="nitro-room-tools-container" gap={ 2 }>
<Column center className="nitro-room-tools p-2">
<Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ 'icon ' + classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
{ !isLiked && <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
</Column>
{ isOpen &&
<Column center>
<Column className="nitro-room-tools-info rounded py-2 px-3">
<Column gap={ 1 }>
<Text variant="white" fontSize={ 4 }>{ roomName }</Text>
<Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
<Column justifyContent="center">
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 300 }>
<Column center>
<Column className="nitro-room-tools-info rounded py-2 px-3">
<Column gap={ 1 }>
<Text wrap variant="white" fontSize={ 4 }>{ roomName }</Text>
<Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
</Column>
{ roomTags && roomTags.length > 0 &&
<Flex gap={ 2 }>
{ roomTags.map((tag: string) => <Text small variant="white" className="rounded bg-primary p-1">#{ tag }</Text>) }
</Flex> }
</Column>
{ roomTags && roomTags.length > 0 &&
<div className="d-flex gap-2">
{ roomTags.map((tag: string) => <div className="rounded bg-primary text-white p-1 text-sm">#{ tag }</div>) }
</div> }
</Column>
</Column> }
</TransitionAnimation>
</Column>
</Flex>
);
}

7
src/views/room/widgets/user-location/UserLocationView.tsx
View File

@ -1,8 +1,13 @@
import { RoomObjectCategory } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { BaseProps } from '../../../../common';
import { useRoomContext } from '../../context/RoomContext';
import { ObjectLocationView } from '../object-location/ObjectLocationView';
import { UserLocationViewProps } from './UserLocationView.types';
interface UserLocationViewProps extends BaseProps<HTMLDivElement>
{
userId: number;
}
export const UserLocationView: FC<UserLocationViewProps> = props =>
{

6
src/views/room/widgets/user-location/UserLocationView.types.ts
View File

@ -1,6 +0,0 @@
import { NitroLayoutBaseProps } from '../../../../layout/base';
export interface UserLocationViewProps extends NitroLayoutBaseProps
{
userId: number;
}

44
src/views/room/widgets/word-quiz/WordQuizQuestionView.tsx Normal file
View File

@ -0,0 +1,44 @@
import { FC } from 'react';
import { Base, Column, Flex, Text } from '../../../../common';
import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from './common/VoteValue';
interface WordQuizQuestionViewProps
{
question: string;
canVote: boolean;
vote(value: string): void;
noVotes: number;
yesVotes: number;
}
export const WordQuizQuestionView: FC<WordQuizQuestionViewProps> = props =>
{
const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props;
return (
<Column gap={ 2 } className="wordquiz-question p-2">
{ !canVote &&
<Flex fullWidth alignItems="center" gap={ 2 }>
<Flex center pointer className="bg-danger rounded p-2">
<Text variant="white">{ noVotes }</Text>
</Flex>
<Text variant="white" center textBreak>{ question }</Text>
<Flex center pointer className="bg-success rounded p-2">
<Text variant="white">{ yesVotes }</Text>
</Flex>
</Flex> }
{ canVote &&
<Column>
<Text variant="white" center textBreak>{ question }</Text>
<Flex fullWidth justifyContent="center" gap={ 1 }>
<Flex center pointer className="bg-danger rounded p-1" onClick={ event => vote(VALUE_KEY_DISLIKE) }>
<Base className="word-quiz-dislike" />
</Flex>
<Flex center pointer className="bg-success rounded p-1" onClick={ event => vote(VALUE_KEY_LIKE) }>
<Base className="word-quiz-like" />
</Flex>
</Flex>
</Column> }
</Column>
);
}

24
src/views/room/widgets/word-quiz/WordQuizVoteView.tsx Normal file
View File

@ -0,0 +1,24 @@
import { RoomObjectCategory } from '@nitrots/nitro-renderer/src';
import { FC } from 'react';
import { Base, BaseProps, Flex } from '../../../../common';
import { ObjectLocationView } from '../object-location/ObjectLocationView';
import { VALUE_KEY_DISLIKE } from './common/VoteValue';
interface WordQuizVoteViewProps extends BaseProps<HTMLDivElement>
{
userIndex: number;
vote: string;
}
export const WordQuizVoteView: FC<WordQuizVoteViewProps> = props =>
{
const { userIndex = null, vote = null, ...rest } = props;
return (
<ObjectLocationView objectId={ userIndex } category={ RoomObjectCategory.UNIT } { ...rest }>
<Flex center pointer className={ `bg-${ (vote === VALUE_KEY_DISLIKE) ? 'danger' : 'success' } rounded p-1` }>
<Base className={ `word-quiz-${ (vote === VALUE_KEY_DISLIKE) ? 'dislike' : 'like' }-sm` } />
</Flex>
</ObjectLocationView>
);
}

39
src/views/room/widgets/word-quiz/WordQuizWidgetView.scss
View File

@ -1,39 +0,0 @@
.wordquiz-question {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: large;
background: rgba($dark, 0.9);
//box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
border-radius: $border-radius;
transition: all 0.2s ease;
.question {
max-width: 300px;
}
}
.word-quiz-dislike {
background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-down.png");
width: 31px;
height: 34px;
}
.word-quiz-like {
background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-up.png");
width: 31px;
height: 34px;
}
.word-quiz-dislike-sm {
background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png");
width: 22px;
height: 22px;
}
.word-quiz-like-sm {
background: url("../../../../assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png");
height: 22px;
width: 22px;
}

126
src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx
View File

@ -5,21 +5,21 @@ import { RoomWidgetPollMessage } from '../../../../api/nitro/room/widgets/messag
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
import { useRoomContext } from '../../context/RoomContext';
import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE, VoteValue } from './common/VoteValue';
import { QuestionView } from './views/question/QuestionView';
import { VoteView } from './views/vote/VoteView';
import { WordQuizQuestionView } from './WordQuizQuestionView';
import { WordQuizVoteView } from './WordQuizVoteView';
const DEFAULT_DISPLAY_DELAY = 4000;
const SIGN_FADE_DELAY = 3;
export const WordQuizWidgetView: FC<{}> = props =>
{
const [ pollId, setPollId ] = useState(-1);
const [ question, setQuestion ] = useState<IQuestion>(null);
const [ answerSent, setAnswerSent ] = useState(false);
const [ questionClearTimeout, setQuestionClearTimeout ] = useState<number>(null);
const [ answerCounts, setAnswerCounts ] = useState<Map<string, number>>(new Map());
const [ userAnswers, setUserAnswers ] = useState<Map<number, VoteValue>>(new Map());
const { eventDispatcher = null, widgetHandler = null, roomSession = null } = useRoomContext();
const [pollId, setPollId] = useState(-1);
const [question, setQuestion] = useState<IQuestion>(null);
const [answerSent, setAnswerSent] = useState(false);
const [questionClearTimeout, setQuestionClearTimeout] = useState<number>(null);
const [answerCounts, setAnswerCounts] = useState<Map<string, number>>(new Map());
const [userAnswers, setUserAnswers] = useState<Map<number, VoteValue>>(new Map());
const clearQuestion = useCallback(() =>
{
@ -39,33 +39,47 @@ export const WordQuizWidgetView: FC<{}> = props =>
setAnswerSent(false);
setAnswerCounts(new Map());
setUserAnswers(new Map());
if(questionClearTimeout) clearTimeout(questionClearTimeout);
});
if(event.duration > 0)
{
const delay = event.duration < 1000 ? DEFAULT_DISPLAY_DELAY : event.duration;
setQuestionClearTimeout(prevValue =>
{
if(prevValue) clearTimeout(prevValue);
{
if(prevValue) clearTimeout(prevValue);
return setTimeout((clearQuestion as TimerHandler), delay);
})
}
if(event.duration > 0)
{
const delay = event.duration < 1000 ? DEFAULT_DISPLAY_DELAY : event.duration;
return setTimeout(() => clearQuestion(), delay) as unknown as number;
}
return null;
});
});
break;
case RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED:
case RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED: {
const userData = roomSession.userDataManager.getUserData(event.userId);
if(!userData) return;
setAnswerCounts(event.answerCounts);
if(!userAnswers.has(userData.roomIndex))
BatchUpdates(() =>
{
const answersCopy = new Map(userAnswers);
answersCopy.set(userData.roomIndex, { value: event.value, secondsLeft: SIGN_FADE_DELAY });
setUserAnswers(answersCopy);
}
setAnswerCounts(event.answerCounts);
setUserAnswers(prevValue =>
{
if(!prevValue.has(userData.roomIndex))
{
const newValue = new Map(userAnswers);
newValue.set(userData.roomIndex, { value: event.value, secondsLeft: SIGN_FADE_DELAY });
return newValue;
}
return prevValue;
});
});
break;
}
case RoomWidgetWordQuizUpdateEvent.QUESTION_FINISHED:
if(question && question.id === event.questionId)
{
@ -73,18 +87,20 @@ export const WordQuizWidgetView: FC<{}> = props =>
{
setAnswerCounts(event.answerCounts);
setAnswerSent(true);
setQuestionClearTimeout(prevValue =>
{
if(prevValue) clearTimeout(prevValue);
return setTimeout((clearQuestion as TimerHandler), DEFAULT_DISPLAY_DELAY);
return setTimeout(() => clearQuestion(), DEFAULT_DISPLAY_DELAY) as unknown as number;
});
})
});
}
setUserAnswers(new Map());
break;
}
}, [clearQuestion, question, questionClearTimeout, roomSession.userDataManager, userAnswers]);
}, [ question, roomSession.userDataManager, userAnswers, clearQuestion ]);
CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.NEW_QUESTION, eventDispatcher, onRoomWidgetWordQuizUpdateEvent);
CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED, eventDispatcher, onRoomWidgetWordQuizUpdateEvent);
@ -95,49 +111,44 @@ export const WordQuizWidgetView: FC<{}> = props =>
if(answerSent || !question) return;
const updateMessage = new RoomWidgetPollMessage(RoomWidgetPollMessage.ANSWER, pollId);
updateMessage.questionId = question.id;
updateMessage.answers = [vote];
widgetHandler.processWidgetMessage(updateMessage);
setAnswerSent(true);
}, [answerSent, pollId, question, widgetHandler]);
widgetHandler.processWidgetMessage(updateMessage);
setAnswerSent(true);
}, [ answerSent, pollId, question, widgetHandler ]);
const checkSignFade = useCallback(() =>
{
setUserAnswers(prev =>
setUserAnswers(prevValue =>
{
const keysToRemove: number[] = [];
prev.forEach((value, key) =>
prevValue.forEach((value, key) =>
{
value.secondsLeft--;
if(value.secondsLeft <= 0)
{
keysToRemove.push(key);
}
if(value.secondsLeft <= 0) keysToRemove.push(key);
});
if(keysToRemove.length === 0) return prev;
if(keysToRemove.length === 0) return prevValue;
const copy = new Map(prevValue);
const copy = new Map(prev);
keysToRemove.forEach(key => copy.delete(key));
return copy;
})
return copy;
});
}, []);
useEffect(() =>
{
const interval = setInterval(() =>
{
checkSignFade();
}, 1000)
const interval = setInterval(() => checkSignFade(), 1000);
return () =>
{
clearInterval(interval);
}
}, [checkSignFade]);
return () => clearInterval(interval);
}, [ checkSignFade ]);
useEffect(() =>
{
@ -154,15 +165,10 @@ export const WordQuizWidgetView: FC<{}> = props =>
return (
<>
{question &&
<QuestionView question={question.content} canVote={!answerSent} vote={vote} noVotes={answerCounts.get(VALUE_KEY_DISLIKE) || 0} yesVotes={answerCounts.get(VALUE_KEY_LIKE) || 0} />
}
{userAnswers &&
Array.from(userAnswers.entries()).map(([key, value], index) =>
{
return <VoteView key={index} userIndex={key} vote={value.value} />
})
}
{ question &&
<WordQuizQuestionView question={question.content} canVote={!answerSent} vote={vote} noVotes={answerCounts.get(VALUE_KEY_DISLIKE) || 0} yesVotes={answerCounts.get(VALUE_KEY_LIKE) || 0} /> }
{ userAnswers &&
Array.from(userAnswers.entries()).map(([key, value], index) => <WordQuizVoteView key={index} userIndex={key} vote={value.value} />) }
</>
);
}

24
src/views/room/widgets/word-quiz/views/question/QuestionView.tsx
View File

@ -1,24 +0,0 @@
import { FC } from 'react';
import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from '../../common/VoteValue';
import { QuestionViewProps } from './QuestionView.types';
export const QuestionView:FC<QuestionViewProps> = props =>
{
const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props;
return (
<div className="wordquiz-question p-2 d-flex flex-column gap-2">
<div className="w-100 d-flex align-items-center gap-2">
{ !canVote && <button className="btn btn-danger btn-sm">{noVotes}</button> }
<div className="question text-center text-break">{question}</div>
{ !canVote && <button className="btn btn-success btn-sm">{yesVotes}</button> }
</div>
{canVote &&
<div className="w-100 d-flex justify-content-center gap-2">
<button className="btn btn-danger btn-sm"><div className="word-quiz-dislike" onClick={ () => vote(VALUE_KEY_DISLIKE) }/></button>
<button className="btn btn-success btn-sm"><div className="word-quiz-like" onClick={ () => vote(VALUE_KEY_LIKE) }/></button>
</div>
}
</div>
)
}

9
src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts
View File

@ -1,9 +0,0 @@
export interface QuestionViewProps
{
question: string;
canVote: boolean;
vote(value: string): void;
noVotes: number;
yesVotes: number;
}

16
src/views/room/widgets/word-quiz/views/vote/VoteView.tsx
View File

@ -1,16 +0,0 @@
import { RoomObjectCategory } from '@nitrots/nitro-renderer/src';
import { FC } from 'react';
import { ObjectLocationView } from '../../../object-location/ObjectLocationView';
import { VALUE_KEY_DISLIKE } from '../../common/VoteValue';
import { VoteViewProps } from './VoteView.types';
export const VoteView:FC<VoteViewProps> = props =>
{
const { userIndex = null , vote = null } = props;
return (
<ObjectLocationView objectId={userIndex} category={RoomObjectCategory.UNIT}>
<button className={`btn btn-${(vote === VALUE_KEY_DISLIKE) ? 'danger' : 'success'} btn-sm px-1`}><div className={`word-quiz-${(vote === VALUE_KEY_DISLIKE) ? 'dislike' : 'like'}-sm`} /></button>
</ObjectLocationView>
)
}

5
src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts
View File

@ -1,5 +0,0 @@
export interface VoteViewProps
{
userIndex: number;
vote: string;
}