From bc0c1b05627c3697f32ea607fd05784c2873abbb Mon Sep 17 00:00:00 2001 From: dank074 Date: Mon, 15 Nov 2021 21:12:05 -0600 Subject: [PATCH 1/9] create widget handler --- .../events/RoomWidgetWordQuizUpdateEvent.ts | 110 ++++++++++++++++++ .../widgets/handlers/WordQuizWidgetHandler.ts | 75 ++++++++++++ src/views/room/RoomView.tsx | 2 + src/views/room/widgets/RoomWidgetsView.tsx | 2 + .../widgets/word-quiz/WordQuizWidgetView.tsx | 6 + 5 files changed, 195 insertions(+) create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetWordQuizUpdateEvent.ts create mode 100644 src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts create mode 100644 src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx diff --git a/src/api/nitro/room/widgets/events/RoomWidgetWordQuizUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetWordQuizUpdateEvent.ts new file mode 100644 index 00000000..3652881c --- /dev/null +++ b/src/api/nitro/room/widgets/events/RoomWidgetWordQuizUpdateEvent.ts @@ -0,0 +1,110 @@ +import { IQuestion } from '@nitrots/nitro-renderer'; +import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent'; + +export class RoomWidgetWordQuizUpdateEvent extends RoomWidgetUpdateEvent +{ + public static readonly NEW_QUESTION = 'RWPUW_NEW_QUESTION'; + public static readonly QUESTION_FINISHED = 'RWPUW_QUESION_FINSIHED'; + public static readonly QUESTION_ANSWERED = 'RWPUW_QUESTION_ANSWERED'; + + private _id: number = -1; + private _pollType: string = null; + private _pollId: number = -1; + private _questionId: number = -1; + private _duration: number = -1; + private _question: IQuestion = null; + private _userId: number = -1; + private _value: string; + private _answerCounts: Map; + + constructor(type: string, id: number) + { + super(type); + this._id = id; + } + + public get id(): number + { + return this._id; + } + + public get pollType(): string + { + return this._pollType; + } + + public set pollType(k: string) + { + this._pollType = k; + } + + public get pollId(): number + { + return this._pollId; + } + + public set pollId(k: number) + { + this._pollId = k; + } + + public get questionId(): number + { + return this._questionId; + } + + public set questionId(k: number) + { + this._questionId = k; + } + + public get duration(): number + { + return this._duration; + } + + public set duration(k: number) + { + this._duration = k; + } + + public get question(): IQuestion + { + return this._question; + } + + public set question(k: IQuestion) + { + this._question = k; + } + + public get userId(): number + { + return this._userId; + } + + public set userId(k: number) + { + this._userId = k; + } + + public get value(): string + { + return this._value; + } + + public set value(k: string) + { + this._value = k; + } + + public get answerCounts(): Map + { + return this._answerCounts; + } + + public set answerCounts(k: Map) + { + this._answerCounts = k; + } +} diff --git a/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts new file mode 100644 index 00000000..c65632ee --- /dev/null +++ b/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts @@ -0,0 +1,75 @@ +import { AvatarAction, NitroEvent, RoomSessionWordQuizEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer'; +import { RoomWidgetHandler } from '.'; +import { GetRoomEngine } from '../../GetRoomEngine'; +import { RoomWidgetUpdateEvent } from '../events'; +import { RoomWidgetWordQuizUpdateEvent } from '../events/RoomWidgetWordQuizUpdateEvent'; +import { RoomWidgetMessage } from '../messages'; + +export class WordQuizWidgetHandler extends RoomWidgetHandler +{ + public processEvent(event: NitroEvent): void + { + const roomQuizEvent = (event as RoomSessionWordQuizEvent); + let widgetEvent: RoomWidgetWordQuizUpdateEvent; + + switch(event.type) + { + case RoomSessionWordQuizEvent.ANSWERED: + const roomId = this.container.roomSession.roomId; + const userData = this.container.roomSession.userDataManager.getUserData(roomQuizEvent.userId); + if(!userData) return; + widgetEvent = new RoomWidgetWordQuizUpdateEvent(RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED, roomQuizEvent.id); + widgetEvent.value = roomQuizEvent.value; + widgetEvent.userId = roomQuizEvent.userId; + widgetEvent.answerCounts = roomQuizEvent.answerCounts; + + if(widgetEvent.value === '0') + { + GetRoomEngine().updateRoomObjectUserGesture(roomId, userData.roomIndex, AvatarAction.getGestureId(AvatarAction.GESTURE_SAD)); + } + else + { + GetRoomEngine().updateRoomObjectUserGesture(roomId, userData.roomIndex, AvatarAction.getGestureId(AvatarAction.GESTURE_SMILE)); + } + break; + case RoomSessionWordQuizEvent.FINISHED: + widgetEvent = new RoomWidgetWordQuizUpdateEvent(RoomWidgetWordQuizUpdateEvent.QUESTION_FINISHED, roomQuizEvent.id); + widgetEvent.pollId = roomQuizEvent.pollId; + widgetEvent.questionId = roomQuizEvent.questionId; + widgetEvent.answerCounts = roomQuizEvent.answerCounts; + break; + case RoomSessionWordQuizEvent.QUESTION: + widgetEvent = new RoomWidgetWordQuizUpdateEvent(RoomWidgetWordQuizUpdateEvent.NEW_QUESTION, roomQuizEvent.id); + widgetEvent.question = roomQuizEvent.question; + widgetEvent.duration = roomQuizEvent.duration; + widgetEvent.pollType = roomQuizEvent.pollType; + widgetEvent.questionId = roomQuizEvent.questionId; + widgetEvent.pollId = roomQuizEvent.pollId; + break; + } + + if(!widgetEvent) return; + + this.container.eventDispatcher.dispatchEvent(widgetEvent); + } + + public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent + { + return null; + } + + public get type(): string + { + return RoomWidgetEnum.WORD_QUIZZ; + } + + public get eventTypes(): string[] + { + return [RoomSessionWordQuizEvent.ANSWERED, RoomSessionWordQuizEvent.FINISHED, RoomSessionWordQuizEvent.QUESTION]; + } + + public get messageTypes(): string[] + { + return []; + } +} diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index b885b48c..1118a685 100644 --- a/src/views/room/RoomView.tsx +++ b/src/views/room/RoomView.tsx @@ -2,6 +2,7 @@ import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector import { FC, useEffect, useRef, useState } from 'react'; import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api'; import { FurnitureYoutubeDisplayWidgetHandler } from '../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler'; +import { WordQuizWidgetHandler } from '../../api/nitro/room/widgets/handlers/WordQuizWidgetHandler'; import { RoomContextProvider } from './context/RoomContext'; import { RoomColorView } from './RoomColorView'; import { RoomViewProps } from './RoomView.types'; @@ -37,6 +38,7 @@ export const RoomView: FC = props => widgetHandlerManager.registerHandler(new RoomWidgetChatHandler()); widgetHandlerManager.registerHandler(new UserChooserWidgetHandler()); widgetHandlerManager.registerHandler(new DoorbellWidgetHandler()); + widgetHandlerManager.registerHandler(new WordQuizWidgetHandler()); widgetHandlerManager.registerHandler(new FurniChooserWidgetHandler()); widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler()); diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index 3fd67cdc..0a94e885 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/src/views/room/widgets/RoomWidgetsView.tsx @@ -16,6 +16,7 @@ import { InfoStandWidgetView } from './infostand/InfoStandWidgetView'; import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView'; import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView'; import { RoomWidgetViewProps } from './RoomWidgets.types'; +import { WordQuizWidgetView } from './word-quiz/WordQuizWidgetView'; export const RoomWidgetsView: FC = props => { const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext(); @@ -349,6 +350,7 @@ export const RoomWidgetsView: FC = props => + ); } diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx new file mode 100644 index 00000000..13f54726 --- /dev/null +++ b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx @@ -0,0 +1,6 @@ +import { FC } from 'react'; + +export const WordQuizWidgetView: FC<{}> = props => +{ + return null; +} From b7c978c7860d27043757dcb0bb260a573fa5f04c Mon Sep 17 00:00:00 2001 From: dank074 Date: Tue, 16 Nov 2021 01:03:59 -0600 Subject: [PATCH 2/9] add another handler --- .../events/RoomWidgetPollUpdateEvent.ts | 110 ++++++++++++++++++ .../widgets/handlers/PollWidgetHandler.ts | 76 ++++++++++++ .../widgets/messages/RoomWidgetPollMessage.ts | 44 +++++++ src/views/room/RoomView.tsx | 2 + src/views/room/widgets/RoomWidgets.scss | 1 + .../widgets/word-quiz/WordQuizWidgetView.scss | 12 ++ .../widgets/word-quiz/WordQuizWidgetView.tsx | 44 ++++++- .../widgets/word-quiz/common/VoteValue.ts | 2 + .../word-quiz/views/question/QuestionView.tsx | 14 +++ .../views/question/QuestionView.types.ts | 7 ++ 10 files changed, 310 insertions(+), 2 deletions(-) create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetPollUpdateEvent.ts create mode 100644 src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetPollMessage.ts create mode 100644 src/views/room/widgets/word-quiz/WordQuizWidgetView.scss create mode 100644 src/views/room/widgets/word-quiz/common/VoteValue.ts create mode 100644 src/views/room/widgets/word-quiz/views/question/QuestionView.tsx create mode 100644 src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts diff --git a/src/api/nitro/room/widgets/events/RoomWidgetPollUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetPollUpdateEvent.ts new file mode 100644 index 00000000..58e8d644 --- /dev/null +++ b/src/api/nitro/room/widgets/events/RoomWidgetPollUpdateEvent.ts @@ -0,0 +1,110 @@ +import { PollQuestion } from '@nitrots/nitro-renderer'; +import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent'; + +export class RoomWidgetPollUpdateEvent extends RoomWidgetUpdateEvent +{ + public static readonly OFFER = 'RWPUW_OFFER'; + public static readonly ERROR = 'RWPUW_ERROR'; + public static readonly CONTENT = 'RWPUW_CONTENT'; + + private _id = -1; + private _summary: string; + private _headline: string; + private _numQuestions = 0; + private _startMessage = ''; + private _endMessage = ''; + private _questionArray: PollQuestion[] = null; + private _pollType = ''; + private _npsPoll = false; + + constructor(type: string, id: number) + { + super(type); + this._id = id; + } + + public get id(): number + { + return this._id; + } + + public get summary(): string + { + return this._summary; + } + + public set summary(k: string) + { + this._summary = k; + } + + public get headline(): string + { + return this._headline; + } + + public set headline(k: string) + { + this._headline = k; + } + + public get numQuestions(): number + { + return this._numQuestions; + } + + public set numQuestions(k: number) + { + this._numQuestions = k; + } + + public get startMessage(): string + { + return this._startMessage; + } + + public set startMessage(k: string) + { + this._startMessage = k; + } + + public get endMessage(): string + { + return this._endMessage; + } + + public set endMessage(k: string) + { + this._endMessage = k; + } + + public get questionArray(): PollQuestion[] + { + return this._questionArray; + } + + public set questionArray(k: PollQuestion[]) + { + this._questionArray = k; + } + + public get pollType(): string + { + return this._pollType; + } + + public set pollType(k: string) + { + this._pollType = k; + } + + public get npsPoll(): boolean + { + return this._npsPoll; + } + + public set npsPoll(k: boolean) + { + this._npsPoll = k; + } +} diff --git a/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts new file mode 100644 index 00000000..df4d67b7 --- /dev/null +++ b/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts @@ -0,0 +1,76 @@ +import { NitroEvent, RoomSessionPollEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer'; +import { RoomWidgetPollUpdateEvent } from '../events/RoomWidgetPollUpdateEvent'; +import { RoomWidgetUpdateEvent } from '../events/RoomWidgetUpdateEvent'; +import { RoomWidgetMessage } from '../messages/RoomWidgetMessage'; +import { RoomWidgetPollMessage } from '../messages/RoomWidgetPollMessage'; +import { RoomWidgetHandler } from './RoomWidgetHandler'; + +export class PollWidgetHandler extends RoomWidgetHandler +{ + public processEvent(event: NitroEvent): void + { + const pollEvent = (event as RoomSessionPollEvent); + + let widgetEvent: RoomWidgetPollUpdateEvent; + + switch(event.type) + { + case RoomSessionPollEvent.OFFER: + widgetEvent = new RoomWidgetPollUpdateEvent(RoomWidgetPollUpdateEvent.OFFER, pollEvent.id); + widgetEvent.summary = pollEvent.summary; + widgetEvent.headline = pollEvent.headline; + break; + case RoomSessionPollEvent.ERROR: + widgetEvent = new RoomWidgetPollUpdateEvent(RoomWidgetPollUpdateEvent.ERROR, pollEvent.id); + widgetEvent.summary = pollEvent.summary; + widgetEvent.headline = pollEvent.headline; + break; + case RoomSessionPollEvent.CONTENT: + widgetEvent = new RoomWidgetPollUpdateEvent(RoomWidgetPollUpdateEvent.CONTENT, pollEvent.id); + widgetEvent.startMessage = pollEvent.startMessage; + widgetEvent.endMessage = pollEvent.endMessage; + widgetEvent.numQuestions = pollEvent.numQuestions; + widgetEvent.questionArray = pollEvent.questionArray; + widgetEvent.npsPoll = pollEvent.npsPoll; + break; + } + + if(!widgetEvent) return; + + this.container.eventDispatcher.dispatchEvent(widgetEvent); + } + + public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent + { + const pollMessage = (message as RoomWidgetPollMessage); + + switch(message.type) + { + case RoomWidgetPollMessage.START: + this.container.roomSession.sendPollStartMessage(pollMessage.id); + break; + case RoomWidgetPollMessage.REJECT: + this.container.roomSession.sendPollRejectMessage(pollMessage.id); + break; + case RoomWidgetPollMessage.ANSWER: + this.container.roomSession.sendPollAnswerMessage(pollMessage.id, pollMessage.questionId, pollMessage.answers); + break; + } + return null; + } + + public get type(): string + { + return RoomWidgetEnum.ROOM_POLL; + } + + public get eventTypes(): string[] + { + return [RoomSessionPollEvent.OFFER, RoomSessionPollEvent.ERROR, RoomSessionPollEvent.CONTENT]; + } + + public get messageTypes(): string[] + { + return [RoomWidgetPollMessage.ANSWER, RoomWidgetPollMessage.REJECT, RoomWidgetPollMessage.START]; + } +} diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetPollMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetPollMessage.ts new file mode 100644 index 00000000..a74d97bf --- /dev/null +++ b/src/api/nitro/room/widgets/messages/RoomWidgetPollMessage.ts @@ -0,0 +1,44 @@ +import { RoomWidgetMessage } from './RoomWidgetMessage'; + +export class RoomWidgetPollMessage extends RoomWidgetMessage +{ + public static readonly START = 'RWPM_START'; + public static readonly REJECT = 'RWPM_REJECT'; + public static readonly ANSWER = 'RWPM_ANSWER'; + + private _id = -1; + private _questionId = 0; + private _answers: string[] = null; + + constructor(type: string, id: number) + { + super(type); + + this._id = id; + } + + public get id(): number + { + return this._id; + } + + public get questionId(): number + { + return this._questionId; + } + + public set questionId(k: number) + { + this._questionId = k; + } + + public get answers(): string[] + { + return this._answers; + } + + public set answers(k: string[]) + { + this._answers = k; + } +} diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index 1118a685..eecff624 100644 --- a/src/views/room/RoomView.tsx +++ b/src/views/room/RoomView.tsx @@ -2,6 +2,7 @@ import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector import { FC, useEffect, useRef, useState } from 'react'; import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api'; import { FurnitureYoutubeDisplayWidgetHandler } from '../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler'; +import { PollWidgetHandler } from '../../api/nitro/room/widgets/handlers/PollWidgetHandler'; import { WordQuizWidgetHandler } from '../../api/nitro/room/widgets/handlers/WordQuizWidgetHandler'; import { RoomContextProvider } from './context/RoomContext'; import { RoomColorView } from './RoomColorView'; @@ -39,6 +40,7 @@ export const RoomView: FC = props => widgetHandlerManager.registerHandler(new UserChooserWidgetHandler()); widgetHandlerManager.registerHandler(new DoorbellWidgetHandler()); widgetHandlerManager.registerHandler(new WordQuizWidgetHandler()); + widgetHandlerManager.registerHandler(new PollWidgetHandler()); widgetHandlerManager.registerHandler(new FurniChooserWidgetHandler()); widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler()); diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss index 4cac258a..6c2a2f2b 100644 --- a/src/views/room/widgets/RoomWidgets.scss +++ b/src/views/room/widgets/RoomWidgets.scss @@ -8,3 +8,4 @@ @import './object-location/ObjectLocationView'; @import './room-tools/RoomToolsWidgetView'; @import './choosers/ChooserWidgetView'; +@import './word-quiz/WordQuizWidgetView'; diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss b/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss new file mode 100644 index 00000000..d4291278 --- /dev/null +++ b/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss @@ -0,0 +1,12 @@ +.word-quiz-question-container { + position: absolute; + top: 10px; + left: 0px; + .wordquiz-question { + font-size: large; + background: rgba($dark, 0.90); + //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; + } +} diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx index 13f54726..a529f409 100644 --- a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx +++ b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx @@ -1,6 +1,46 @@ -import { FC } from 'react'; +import { IQuestion } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { RoomWidgetWordQuizUpdateEvent } from '../../../../api/nitro/room/widgets/events/RoomWidgetWordQuizUpdateEvent'; +import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks'; +import { useRoomContext } from '../../context/RoomContext'; +import { QuestionView } from './views/question/QuestionView'; export const WordQuizWidgetView: FC<{}> = props => { - return null; + const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); + const [pollId, setPollId ] = useState(-1); + const [question, setQuestion] = useState(null); + const [ answerSent, setAnswerSent ] = useState(false); + + const onRoomWidgetWordQuizUpdateEvent = useCallback((event: RoomWidgetWordQuizUpdateEvent) => + { + switch(event.type) + { + case RoomWidgetWordQuizUpdateEvent.NEW_QUESTION: + BatchUpdates(() => + { + setPollId(event.id); + setQuestion(event.question); + setAnswerSent(false); + }); + //this._showSignCounters = new Dictionary(); + //this.showNewQuestion(this._question, k.duration); + break; + } + }, []); + + const vote = useCallback((vote: string) => + { + + }, []); + + CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.NEW_QUESTION, eventDispatcher, onRoomWidgetWordQuizUpdateEvent); + CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED, eventDispatcher, onRoomWidgetWordQuizUpdateEvent); + CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.QUESTION_FINISHED, eventDispatcher, onRoomWidgetWordQuizUpdateEvent); + + return ( + <> + {question && } + + ); } diff --git a/src/views/room/widgets/word-quiz/common/VoteValue.ts b/src/views/room/widgets/word-quiz/common/VoteValue.ts new file mode 100644 index 00000000..ef84aaff --- /dev/null +++ b/src/views/room/widgets/word-quiz/common/VoteValue.ts @@ -0,0 +1,2 @@ +export const VALUE_KEY_DISLIKE = '0'; +export const VALUE_KEY_LIKE = '1'; diff --git a/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx b/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx new file mode 100644 index 00000000..13bbf225 --- /dev/null +++ b/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx @@ -0,0 +1,14 @@ +import { FC } from 'react'; +import { QuestionViewProps } from './QuestionView.types'; + +export const QuestionView:FC = props => +{ + const { question = null, canVote = null } = props; + + return ( +
+
{question}
+
+ + ) +} diff --git a/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts b/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts new file mode 100644 index 00000000..09fda7b4 --- /dev/null +++ b/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts @@ -0,0 +1,7 @@ + +export interface QuestionViewProps +{ + question: string; + canVote: boolean; + vote(value: string): void; +} From 1e8476032460c56db9f1010b86fda6ce4b6f4e5b Mon Sep 17 00:00:00 2001 From: dank074 Date: Wed, 17 Nov 2021 00:09:47 -0600 Subject: [PATCH 3/9] finished logic --- .../widgets/handlers/PollWidgetHandler.ts | 1 - .../widgets/handlers/WordQuizWidgetHandler.ts | 1 - .../wordquiz-widget/thumbs-down-small.png | Bin 0 -> 145 bytes .../wordquiz-widget/thumbs-down.png | Bin 0 -> 182 bytes .../wordquiz-widget/thumbs-up-small.png | Bin 0 -> 135 bytes .../wordquiz-widget/thumbs-up.png | Bin 0 -> 174 bytes src/views/room/widgets/RoomWidgetsView.tsx | 8 +- .../widgets/word-quiz/WordQuizWidgetView.scss | 43 ++++- .../widgets/word-quiz/WordQuizWidgetView.tsx | 153 ++++++++++++++++-- .../widgets/word-quiz/common/VoteValue.ts | 6 + .../word-quiz/views/question/QuestionView.tsx | 18 ++- .../views/question/QuestionView.types.ts | 2 + .../widgets/word-quiz/views/vote/VoteView.tsx | 16 ++ .../word-quiz/views/vote/VoteView.types.ts | 5 + 14 files changed, 222 insertions(+), 31 deletions(-) create mode 100644 src/assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png create mode 100644 src/assets/images/room-widgets/wordquiz-widget/thumbs-down.png create mode 100644 src/assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png create mode 100644 src/assets/images/room-widgets/wordquiz-widget/thumbs-up.png create mode 100644 src/views/room/widgets/word-quiz/views/vote/VoteView.tsx create mode 100644 src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts diff --git a/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts index df4d67b7..0d1b0457 100644 --- a/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts +++ b/src/api/nitro/room/widgets/handlers/PollWidgetHandler.ts @@ -43,7 +43,6 @@ export class PollWidgetHandler extends RoomWidgetHandler public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent { const pollMessage = (message as RoomWidgetPollMessage); - switch(message.type) { case RoomWidgetPollMessage.START: diff --git a/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts index c65632ee..df24b06e 100644 --- a/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts +++ b/src/api/nitro/room/widgets/handlers/WordQuizWidgetHandler.ts @@ -11,7 +11,6 @@ export class WordQuizWidgetHandler extends RoomWidgetHandler { const roomQuizEvent = (event as RoomSessionWordQuizEvent); let widgetEvent: RoomWidgetWordQuizUpdateEvent; - switch(event.type) { case RoomSessionWordQuizEvent.ANSWERED: diff --git a/src/assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png b/src/assets/images/room-widgets/wordquiz-widget/thumbs-down-small.png new file mode 100644 index 0000000000000000000000000000000000000000..78e51cfe5666ccc5fe46dcd7976f615d19eab56b GIT binary patch literal 145 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4f5uPrNAr-gYPIcsBP~c$s?*H$9 zZdkj6i$Tur7G^ow5`Hd;Ee-EoTf{t%3P-w%zGj`@S-x*>Vfq>2*}a+NP7@R&Lzig! sFNyP+%$9WF=#@-=yCb|#^S2#h&~MqhAozyaL!ccDp00i_>zopr00L$)8~^|S literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/wordquiz-widget/thumbs-down.png b/src/assets/images/room-widgets/wordquiz-widget/thumbs-down.png new file mode 100644 index 0000000000000000000000000000000000000000..fd320c51d72f0debe17f9537d132ec4de35bf815 GIT binary patch literal 182 zcmeAS@N?(olHy`uVBq!ia0vp^@<6P_!3HFkdog(dsaj7L$B>F!Z?9bBYf#{5O}y9n zz20n9x0&0EGbb0S{y*j`US~PiMJ+NW|82kxr`Fv+B;%QntL{+KYvB5RZqC;?8;co3 zcluQ5JW=caG8r!IE7jJKC2Yu=J)QJ hqVly?g7yYi8Nao2ZhvIZ@C@h>22WQ%mvv4FO#s~;NumG% literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png b/src/assets/images/room-widgets/wordquiz-widget/thumbs-up-small.png new file mode 100644 index 0000000000000000000000000000000000000000..b93111f0cc078bd21ac90ce83f59ce4663474d53 GIT binary patch literal 135 zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fex5FlAr-fh6BLC0v@@|~G0&3r zDLwo$$zUt5x!UOu|5KP|N%~wU@Zvp|-f74ad^KU#&Wab3Hd4o&EqXL{^;hH>T$#?2 iEs<F!Z>KwQF(~pde^&qh zf7`pzl&z;$ a8+P{toZC}5t{w$CfWgz%&t;ucLK6V707rlT literal 0 HcmV?d00001 diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index 0a94e885..4f205b1d 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/src/views/room/widgets/RoomWidgetsView.tsx @@ -1,4 +1,4 @@ -import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineRoomAdEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer'; +import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineRoomAdEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPollEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomSessionWordQuizEvent, RoomZoomEvent } from '@nitrots/nitro-renderer'; import { FC, useCallback } from 'react'; import { CanManipulateFurniture, GetRoomEngine, GetSessionDataManager, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetUpdateRoomEngineEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../api'; import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events'; @@ -269,6 +269,12 @@ export const RoomWidgetsView: FC = props => useRoomSessionManagerEvent(RoomSessionFriendRequestEvent.RSFRE_FRIEND_REQUEST, onRoomSessionEvent); useRoomSessionManagerEvent(RoomSessionPresentEvent.RSPE_PRESENT_OPENED, onRoomSessionEvent); useRoomSessionManagerEvent(RoomSessionPetInfoUpdateEvent.PET_INFO, onRoomSessionEvent); + useRoomSessionManagerEvent(RoomSessionWordQuizEvent.ANSWERED, onRoomSessionEvent); + useRoomSessionManagerEvent(RoomSessionWordQuizEvent.FINISHED, onRoomSessionEvent); + useRoomSessionManagerEvent(RoomSessionWordQuizEvent.QUESTION, onRoomSessionEvent); + useRoomSessionManagerEvent(RoomSessionPollEvent.OFFER, onRoomSessionEvent); + useRoomSessionManagerEvent(RoomSessionPollEvent.ERROR, onRoomSessionEvent); + useRoomSessionManagerEvent(RoomSessionPollEvent.CONTENT, onRoomSessionEvent); const onRoomSessionErrorMessageEvent = useCallback((event: RoomSessionErrorMessageEvent) => { diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss b/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss index d4291278..5889d925 100644 --- a/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss +++ b/src/views/room/widgets/word-quiz/WordQuizWidgetView.scss @@ -1,12 +1,39 @@ -.word-quiz-question-container { +.wordquiz-question { position: absolute; top: 10px; - left: 0px; - .wordquiz-question { - font-size: large; - background: rgba($dark, 0.90); - //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; + 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; +} diff --git a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx index a529f409..af258d59 100644 --- a/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx +++ b/src/views/room/widgets/word-quiz/WordQuizWidgetView.tsx @@ -1,17 +1,32 @@ import { IQuestion } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import { RoomWidgetWordQuizUpdateEvent } from '../../../../api/nitro/room/widgets/events/RoomWidgetWordQuizUpdateEvent'; +import { RoomWidgetPollMessage } from '../../../../api/nitro/room/widgets/messages/RoomWidgetPollMessage'; 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'; + +const DEFAULT_DISPLAY_DELAY = 4000; +const SIGN_FADE_DELAY = 3; export const WordQuizWidgetView: FC<{}> = props => { - const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); - const [pollId, setPollId ] = useState(-1); + const { eventDispatcher = null, widgetHandler = null, roomSession = null } = useRoomContext(); + const [pollId, setPollId] = useState(-1); const [question, setQuestion] = useState(null); - const [ answerSent, setAnswerSent ] = useState(false); - + const [answerSent, setAnswerSent] = useState(false); + const [questionClearTimeout, setQuestionClearTimeout] = useState(null); + const [answerCounts, setAnswerCounts] = useState>(new Map()); + const [userAnswers, setUserAnswers] = useState>(new Map()); + + const clearQuestion = useCallback(() => + { + setPollId(-1); + setQuestion(null); + }, []); + const onRoomWidgetWordQuizUpdateEvent = useCallback((event: RoomWidgetWordQuizUpdateEvent) => { switch(event.type) @@ -22,25 +37,131 @@ export const WordQuizWidgetView: FC<{}> = props => setPollId(event.id); setQuestion(event.question); setAnswerSent(false); + setAnswerCounts(new Map()); + setUserAnswers(new Map()); + if(questionClearTimeout) clearTimeout(questionClearTimeout); }); - //this._showSignCounters = new Dictionary(); - //this.showNewQuestion(this._question, k.duration); + + if(event.duration > 0) + { + const delay = event.duration < 1000 ? DEFAULT_DISPLAY_DELAY : event.duration; + setQuestionClearTimeout(prevValue => + { + if(prevValue) clearTimeout(prevValue); + + return setTimeout((clearQuestion as TimerHandler), delay); + }) + } + break; + case RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED: + const userData = roomSession.userDataManager.getUserData(event.userId); + if(!userData) return; + + setAnswerCounts(event.answerCounts); + + if(!userAnswers.has(userData.roomIndex)) + { + const answersCopy = new Map(userAnswers); + answersCopy.set(userData.roomIndex, { value: event.value, secondsLeft: SIGN_FADE_DELAY }); + setUserAnswers(answersCopy); + } + break; + case RoomWidgetWordQuizUpdateEvent.QUESTION_FINISHED: + if(question && question.id === event.questionId) + { + BatchUpdates(() => + { + setAnswerCounts(event.answerCounts); + setAnswerSent(true); + setQuestionClearTimeout(prevValue => + { + if(prevValue) clearTimeout(prevValue); + + return setTimeout((clearQuestion as TimerHandler), DEFAULT_DISPLAY_DELAY); + }); + }) + } + setUserAnswers(new Map()); break; } - }, []); - - const vote = useCallback((vote: string) => - { - - }, []); + }, [clearQuestion, question, questionClearTimeout, roomSession.userDataManager, userAnswers]); CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.NEW_QUESTION, eventDispatcher, onRoomWidgetWordQuizUpdateEvent); CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.QUESTION_ANSWERED, eventDispatcher, onRoomWidgetWordQuizUpdateEvent); CreateEventDispatcherHook(RoomWidgetWordQuizUpdateEvent.QUESTION_FINISHED, eventDispatcher, onRoomWidgetWordQuizUpdateEvent); + const vote = useCallback((vote: string) => + { + 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]); + + const checkSignFade = useCallback(() => + { + setUserAnswers(prev => + { + const copy = new Map(prev); + const keysToRemove: number[] = []; + copy.forEach((value, key) => + { + value.secondsLeft--; + + if(value.secondsLeft <= 0) + { + keysToRemove.push(key); + } + }); + + keysToRemove.forEach(key => copy.delete(key)); + + return copy; + }) + + }, []); + + useEffect(() => + { + const interval = setInterval(() => + { + checkSignFade(); + }, 1000) + + return () => + { + clearInterval(interval); + } + }, [checkSignFade]); + + useEffect(() => + { + return () => + { + setQuestionClearTimeout(prev => + { + if(prev) clearTimeout(prev); + + return null; + }); + } + }, []); + return ( - <> - {question && } - + <> + {question && + + } + {userAnswers && + Array.from(userAnswers.entries()).map(([key, value], index) => + { + return + }) + } + ); } diff --git a/src/views/room/widgets/word-quiz/common/VoteValue.ts b/src/views/room/widgets/word-quiz/common/VoteValue.ts index ef84aaff..ecf4336e 100644 --- a/src/views/room/widgets/word-quiz/common/VoteValue.ts +++ b/src/views/room/widgets/word-quiz/common/VoteValue.ts @@ -1,2 +1,8 @@ export const VALUE_KEY_DISLIKE = '0'; export const VALUE_KEY_LIKE = '1'; + +export interface VoteValue +{ + value: string; + secondsLeft: number; +} diff --git a/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx b/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx index 13bbf225..2d2b5d17 100644 --- a/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx +++ b/src/views/room/widgets/word-quiz/views/question/QuestionView.tsx @@ -1,14 +1,24 @@ import { FC } from 'react'; +import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from '../../common/VoteValue'; import { QuestionViewProps } from './QuestionView.types'; export const QuestionView:FC = props => { - const { question = null, canVote = null } = props; + const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props; return ( -
-
{question}
+
+
+ { !canVote && } +
{question}
+ { !canVote && } +
+ {canVote && +
+ + +
+ }
- ) } diff --git a/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts b/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts index 09fda7b4..fde51dba 100644 --- a/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts +++ b/src/views/room/widgets/word-quiz/views/question/QuestionView.types.ts @@ -4,4 +4,6 @@ export interface QuestionViewProps question: string; canVote: boolean; vote(value: string): void; + noVotes: number; + yesVotes: number; } diff --git a/src/views/room/widgets/word-quiz/views/vote/VoteView.tsx b/src/views/room/widgets/word-quiz/views/vote/VoteView.tsx new file mode 100644 index 00000000..bee02143 --- /dev/null +++ b/src/views/room/widgets/word-quiz/views/vote/VoteView.tsx @@ -0,0 +1,16 @@ +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 = props => +{ + const { userIndex = null , vote = null } = props; + + return ( + + + + ) +} diff --git a/src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts b/src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts new file mode 100644 index 00000000..17062cc6 --- /dev/null +++ b/src/views/room/widgets/word-quiz/views/vote/VoteView.types.ts @@ -0,0 +1,5 @@ +export interface VoteViewProps +{ + userIndex: number; + vote: string; +} From a5fcea1cd7afbfd2051fdd3845fe52542ddd4770 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 16:38:36 -0500 Subject: [PATCH 4/9] Layout accordion updates --- src/assets/styles/utils.scss | 4 ++ .../accordion/NitroCardAccordionContext.tsx | 21 +++++++ .../accordion/NitroCardAccordionView.scss | 5 ++ .../card/accordion/NitroCardAccordionView.tsx | 29 ++++++++-- .../accordion/NitroCardAccordionView.types.ts | 6 +- .../set/NitroCardAccordionSetView.scss | 7 ++- .../set/NitroCardAccordionSetView.tsx | 58 ++++++++++++++++++- 7 files changed, 120 insertions(+), 10 deletions(-) create mode 100644 src/layout/card/accordion/NitroCardAccordionContext.tsx diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss index e0ccc5d4..e90775c4 100644 --- a/src/assets/styles/utils.scss +++ b/src/assets/styles/utils.scss @@ -70,3 +70,7 @@ ul { .grayscale { filter: grayscale(1); } + +.flex-none { + flex: none; +} diff --git a/src/layout/card/accordion/NitroCardAccordionContext.tsx b/src/layout/card/accordion/NitroCardAccordionContext.tsx new file mode 100644 index 00000000..61377d54 --- /dev/null +++ b/src/layout/card/accordion/NitroCardAccordionContext.tsx @@ -0,0 +1,21 @@ +import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react'; + +export interface INitroCardAccordionContext +{ + closers: Function[]; + setClosers: Dispatch>; + closeAll: () => void; +} + +const NitroCardAccordionContext = createContext({ + closers: null, + setClosers: null, + closeAll: null +}); + +export const NitroCardAccordionContextProvider: FC> = props => +{ + return ; +} + +export const useNitroCardAccordionContext = () => useContext(NitroCardAccordionContext); diff --git a/src/layout/card/accordion/NitroCardAccordionView.scss b/src/layout/card/accordion/NitroCardAccordionView.scss index 417a6cc6..906aa63f 100644 --- a/src/layout/card/accordion/NitroCardAccordionView.scss +++ b/src/layout/card/accordion/NitroCardAccordionView.scss @@ -1 +1,6 @@ +.nitro-card-accordion { + display: flex; + height: 100%; +} + @import "./set/NitroCardAccordionSetView"; diff --git a/src/layout/card/accordion/NitroCardAccordionView.tsx b/src/layout/card/accordion/NitroCardAccordionView.tsx index 40a68384..8088a8c7 100644 --- a/src/layout/card/accordion/NitroCardAccordionView.tsx +++ b/src/layout/card/accordion/NitroCardAccordionView.tsx @@ -1,13 +1,32 @@ -import { FC } from 'react'; +import { FC, useCallback, useMemo, useState } from 'react'; +import { NitroLayoutFlexColumn } from '../..'; +import { NitroCardAccordionContextProvider } from './NitroCardAccordionContext'; import { NitroCardAccordionViewProps } from './NitroCardAccordionView.types'; export const NitroCardAccordionView: FC = props => { - const { className = '' } = props; + const { className = '', children = null, ...rest } = props; + const [ closers, setClosers ] = useState([]); + + const getClassName = useMemo(() => + { + let newClassName = 'nitro-card-accordion text-black'; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className ]); + + const closeAll = useCallback(() => + { + for(const closer of closers) closer(); + }, [ closers ]); return ( -
- { props.children } -
+ + + { children } + + ); } diff --git a/src/layout/card/accordion/NitroCardAccordionView.types.ts b/src/layout/card/accordion/NitroCardAccordionView.types.ts index 73b8bbe3..fe87b21a 100644 --- a/src/layout/card/accordion/NitroCardAccordionView.types.ts +++ b/src/layout/card/accordion/NitroCardAccordionView.types.ts @@ -1,4 +1,6 @@ -export interface NitroCardAccordionViewProps +import { NitroLayoutFlexColumnProps } from '../..'; + +export interface NitroCardAccordionViewProps extends NitroLayoutFlexColumnProps { - className?: string; + } diff --git a/src/layout/card/accordion/set/NitroCardAccordionSetView.scss b/src/layout/card/accordion/set/NitroCardAccordionSetView.scss index 24324967..6380fe23 100644 --- a/src/layout/card/accordion/set/NitroCardAccordionSetView.scss +++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.scss @@ -1,9 +1,14 @@ .nitro-card-accordion-set { + + &.active { + height: 100%; + background: rgba($white, 0.5); + } + .nitro-card-accordion-set-header { border-bottom: 1px solid rgba($black, 0.2); } .nitro-card-accordion-set-content { - background: rgba($white, 0.5); } } diff --git a/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx b/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx index dcc513ea..94958c02 100644 --- a/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx +++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.tsx @@ -1,13 +1,15 @@ import classNames from 'classnames'; -import { FC, useEffect, useMemo, useState } from 'react'; +import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { NitroLayoutFlex } from '../../..'; import { NitroLayoutBase } from '../../../base'; +import { useNitroCardAccordionContext } from '../NitroCardAccordionContext'; import { NitroCardAccordionSetViewProps } from './NitroCardAccordionSetView.types'; export const NitroCardAccordionSetView: FC = props => { const { headerText = '', isExpanded = false, className = '', children = null, ...rest } = props; const [ isOpen, setIsOpen ] = useState(false); + const { setClosers = null, closeAll = null } = useNitroCardAccordionContext(); const getClassName = useMemo(() => { @@ -20,14 +22,66 @@ export const NitroCardAccordionSetView: FC = pro return newClassName; }, [ className, isOpen ]); + const onClick = useCallback(() => + { + closeAll(); + + setIsOpen(prevValue => !prevValue); + // if(isOpen) + // { + // closeAll(); + // } + // else + // { + // BatchUpdates(() => + // { + // closeAll(); + // setIsOpen(true); + // }); + // } + }, [ closeAll ]); + + const close = useCallback(() => + { + setIsOpen(false); + }, []); + useEffect(() => { setIsOpen(isExpanded); }, [ isExpanded ]); + useEffect(() => + { + const closeFunction = close; + + setClosers(prevValue => + { + const newClosers = [ ...prevValue ]; + + newClosers.push(closeFunction); + + return newClosers; + }); + + return () => + { + setClosers(prevValue => + { + const newClosers = [ ...prevValue ]; + + const index = newClosers.indexOf(closeFunction); + + if(index >= 0) newClosers.splice(index, 1); + + return newClosers; + }); + } + }, [ close, setClosers ]); + return ( - setIsOpen(!isOpen) }> +
{ headerText }
From 67270ee093ea0d19b45e12ebfcd931de2e9fb59b Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 17 Nov 2021 23:34:33 -0500 Subject: [PATCH 5/9] Update avatar editor --- .../avatar-editor-spritesheet.png | Bin 0 -> 23260 bytes src/assets/images/avatareditor/hc-icon.png | Bin 1670 -> 0 bytes src/views/avatar-editor/AvatarEditorView.scss | 219 +++++++++++++++++- .../AvatarEditorFigurePreviewView.tsx | 6 +- .../AvatarEditorFigureSetItemView.tsx | 4 +- .../views/model/AvatarEditorModelView.tsx | 6 +- 6 files changed, 223 insertions(+), 12 deletions(-) create mode 100644 src/assets/images/avatareditor/avatar-editor-spritesheet.png delete mode 100644 src/assets/images/avatareditor/hc-icon.png diff --git a/src/assets/images/avatareditor/avatar-editor-spritesheet.png b/src/assets/images/avatareditor/avatar-editor-spritesheet.png new file mode 100644 index 0000000000000000000000000000000000000000..0c91ca0ffcadfaae58d61fef73811a40b4488faa GIT binary patch literal 23260 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 - + - rotateFigure(figureData.direction + 1) } /> - rotateFigure(figureData.direction - 1) } /> +
rotateFigure(figureData.direction + 1) } /> +
rotateFigure(figureData.direction - 1) } /> ); diff --git a/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx b/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx index 16ab3ef7..ca4a85f1 100644 --- a/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx +++ b/src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx @@ -26,8 +26,8 @@ export const AvatarEditorFigureSetItemView: FC onClick(partItem) }> { partItem.isHC && } - { partItem.isClear && } - { partItem.isSellable && } + { partItem.isClear &&
} + { partItem.isSellable &&
} ); } diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx index 1fe1a562..cb6e3b4d 100644 --- a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx +++ b/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx @@ -52,10 +52,10 @@ export const AvatarEditorModelView: FC = props => { model.canSetGender && <> setGender(FigureData.MALE) }> - +
setGender(FigureData.FEMALE) }> - +
} { !model.canSetGender && model.categories && (model.categories.size > 0) && Array.from(model.categories.keys()).map(name => @@ -64,7 +64,7 @@ export const AvatarEditorModelView: FC = props => return ( selectCategory(name) }> - +
); })} From bbcf8bae96d39c17f9094e74d24b49795c0d30f3 Mon Sep 17 00:00:00 2001 From: Bill Date: Thu, 18 Nov 2021 03:39:19 -0500 Subject: [PATCH 6/9] Update icons --- .../friendlist/icons/icon_new_message.png | Bin 177 -> 0 bytes .../images/friends/friends-spritesheet.png | Bin 0 -> 3494 bytes .../accept.png => friends/icon-accept.png} | Bin src/assets/images/friends/icon-add.png | Bin 0 -> 205 bytes .../bobba.png => friends/icon-bobba.png} | Bin .../icon_chat.png => friends/icon-chat.png} | Bin .../{icons/deny.png => friends/icon-deny.png} | Bin .../icon-follow.png} | Bin .../icon-friendbar-chat.png} | Bin .../icon-friendbar-visit.png} | Bin .../heart.png => friends/icon-heart.png} | Bin .../images/friends/icon-new-message.png | Bin 0 -> 219 bytes .../icon-none.png} | Bin .../icon-profile-sm-hover.png} | Bin .../icon-profile-sm.png} | Bin .../profile.png => friends/icon-profile.png} | Bin .../smile.png => friends/icon-smile.png} | Bin .../icon-warning.png} | Bin src/assets/styles/icons.scss | 263 ------------------ src/assets/styles/utils.scss | 4 + 20 files changed, 4 insertions(+), 263 deletions(-) delete mode 100644 src/assets/images/friendlist/icons/icon_new_message.png create mode 100644 src/assets/images/friends/friends-spritesheet.png rename src/assets/images/{icons/accept.png => friends/icon-accept.png} (100%) create mode 100644 src/assets/images/friends/icon-add.png rename src/assets/images/{profile/icons/bobba.png => friends/icon-bobba.png} (100%) rename src/assets/images/{friendlist/icons/icon_chat.png => friends/icon-chat.png} (100%) rename src/assets/images/{icons/deny.png => friends/icon-deny.png} (100%) rename src/assets/images/{friendlist/icons/icon_follow.png => friends/icon-follow.png} (100%) rename src/assets/images/{toolbar/icons/friend-bar/chat.png => friends/icon-friendbar-chat.png} (100%) rename src/assets/images/{toolbar/icons/friend-bar/visit.png => friends/icon-friendbar-visit.png} (100%) rename src/assets/images/{profile/icons/heart.png => friends/icon-heart.png} (100%) create mode 100644 src/assets/images/friends/icon-new-message.png rename src/assets/images/{friendlist/icons/icon_relationship_none.png => friends/icon-none.png} (100%) rename src/assets/images/{icons/user-profile-hover.png => friends/icon-profile-sm-hover.png} (100%) rename src/assets/images/{icons/user-profile.png => friends/icon-profile-sm.png} (100%) rename src/assets/images/{toolbar/icons/friend-bar/profile.png => friends/icon-profile.png} (100%) rename src/assets/images/{profile/icons/smile.png => friends/icon-smile.png} (100%) rename src/assets/images/{friendlist/icons/icon_warning.png => friends/icon-warning.png} (100%) diff --git a/src/assets/images/friendlist/icons/icon_new_message.png b/src/assets/images/friendlist/icons/icon_new_message.png deleted file mode 100644 index f7a31fa00dc9ba26150a1722162be85e55cfaa45..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^d_XL~!3HGNrubO_sR~aQ#}Es_vlAS-8Vqzopr090#4fdBvi diff --git a/src/assets/images/friends/friends-spritesheet.png b/src/assets/images/friends/friends-spritesheet.png new file mode 100644 index 0000000000000000000000000000000000000000..aa72325dbd012f8af61c098fd6cb3f0dd0fcd1fc GIT binary patch literal 3494 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 U=O{OcDF6Tf07*qoM6N<$f)M<&NB{r; literal 0 HcmV?d00001 diff --git a/src/assets/images/icons/accept.png b/src/assets/images/friends/icon-accept.png similarity index 100% rename from src/assets/images/icons/accept.png rename to src/assets/images/friends/icon-accept.png diff --git a/src/assets/images/friends/icon-add.png b/src/assets/images/friends/icon-add.png new file mode 100644 index 0000000000000000000000000000000000000000..d570c8f58f11f08f72462be974bd48fbcf029cf4 GIT binary patch literal 205 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~q!3-pCt=%sRq!^2X+?^QKos)S9a|ZZ?xB_YE8$f~~_`5!cVlD~t3;zF~;rc0Fpjrmb0*}aI1_r*vAk26? ze??0#jxr!{#lz+A1LHJYD@<);T3K0RY{KI$!_* literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/icons/bobba.png b/src/assets/images/friends/icon-bobba.png similarity index 100% rename from src/assets/images/profile/icons/bobba.png rename to src/assets/images/friends/icon-bobba.png diff --git a/src/assets/images/friendlist/icons/icon_chat.png b/src/assets/images/friends/icon-chat.png similarity index 100% rename from src/assets/images/friendlist/icons/icon_chat.png rename to src/assets/images/friends/icon-chat.png diff --git a/src/assets/images/icons/deny.png b/src/assets/images/friends/icon-deny.png similarity index 100% rename from src/assets/images/icons/deny.png rename to src/assets/images/friends/icon-deny.png diff --git a/src/assets/images/friendlist/icons/icon_follow.png b/src/assets/images/friends/icon-follow.png similarity index 100% rename from src/assets/images/friendlist/icons/icon_follow.png rename to src/assets/images/friends/icon-follow.png diff --git a/src/assets/images/toolbar/icons/friend-bar/chat.png b/src/assets/images/friends/icon-friendbar-chat.png similarity index 100% rename from src/assets/images/toolbar/icons/friend-bar/chat.png rename to src/assets/images/friends/icon-friendbar-chat.png diff --git a/src/assets/images/toolbar/icons/friend-bar/visit.png b/src/assets/images/friends/icon-friendbar-visit.png similarity index 100% rename from src/assets/images/toolbar/icons/friend-bar/visit.png rename to src/assets/images/friends/icon-friendbar-visit.png diff --git a/src/assets/images/profile/icons/heart.png b/src/assets/images/friends/icon-heart.png similarity index 100% rename from src/assets/images/profile/icons/heart.png rename to src/assets/images/friends/icon-heart.png diff --git a/src/assets/images/friends/icon-new-message.png b/src/assets/images/friends/icon-new-message.png new file mode 100644 index 0000000000000000000000000000000000000000..46d23f5a29640cf90cb3a5a5436ed9eda89d8be8 GIT binary patch literal 219 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh3?wzC-F*zC7>k44ofy`glX(f`u%tWsIx;Y9 z?C1WI$O`0(2Ka=yT3A^82Lfxuo3cV%C51kI{0NkpI*mUGNU@g$`2~Yy|Nm!@@@94e z3UL;AL>2=rISj&#$MaXD00nJ4T^vIs!l(8*@-ZlI91ckMU%x52<;dc14wsKMv+Yh; z!>#w}-lZkGzf2Rnl(Ov0&mI4d?rdQ6xwmXmHnU9Z6Go?wV|Lqt<}i4=`njxgN@xNA D{W(nH literal 0 HcmV?d00001 diff --git a/src/assets/images/friendlist/icons/icon_relationship_none.png b/src/assets/images/friends/icon-none.png similarity index 100% rename from src/assets/images/friendlist/icons/icon_relationship_none.png rename to src/assets/images/friends/icon-none.png diff --git a/src/assets/images/icons/user-profile-hover.png b/src/assets/images/friends/icon-profile-sm-hover.png similarity index 100% rename from src/assets/images/icons/user-profile-hover.png rename to src/assets/images/friends/icon-profile-sm-hover.png diff --git a/src/assets/images/icons/user-profile.png b/src/assets/images/friends/icon-profile-sm.png similarity index 100% rename from src/assets/images/icons/user-profile.png rename to src/assets/images/friends/icon-profile-sm.png diff --git a/src/assets/images/toolbar/icons/friend-bar/profile.png b/src/assets/images/friends/icon-profile.png similarity index 100% rename from src/assets/images/toolbar/icons/friend-bar/profile.png rename to src/assets/images/friends/icon-profile.png diff --git a/src/assets/images/profile/icons/smile.png b/src/assets/images/friends/icon-smile.png similarity index 100% rename from src/assets/images/profile/icons/smile.png rename to src/assets/images/friends/icon-smile.png diff --git a/src/assets/images/friendlist/icons/icon_warning.png b/src/assets/images/friends/icon-warning.png similarity index 100% rename from src/assets/images/friendlist/icons/icon_warning.png rename to src/assets/images/friends/icon-warning.png diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 87fd77ce..a53d7b2b 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -159,18 +159,6 @@ } } - &.icon-deny { - background: url("../images/icons/deny.png"); - width: 13px; - height: 14px; - } - - &.icon-accept { - background: url("../images/icons/accept.png"); - width: 13px; - height: 14px; - } - &.icon-wired-trigger { background-image: url("../images/wired/icon_trigger.png"); width: 13px; @@ -189,176 +177,6 @@ height: 14px; } - &.arrow-left-icon { - background-image: url("../images/avatareditor/arrow-left-icon.png"); - width: 28px; - height: 21px; - } - - &.arrow-right-icon { - background-image: url("../images/avatareditor/arrow-right-icon.png"); - width: 28px; - height: 21px; - } - - &.clear-icon { - background-image: url("../images/avatareditor/clear-icon.png"); - width: 27px; - height: 27px; - } - - &.ca-icon { - background-image: url("../images/avatareditor/ca-icon.png"); - width: 25px; - height: 25px; - - &.selected { - background-image: url("../images/avatareditor/ca-selected-icon.png"); - } - } - - &.cc-icon { - background-image: url("../images/avatareditor/cc-icon.png"); - width: 31px; - height: 29px; - - &.selected { - background-image: url("../images/avatareditor/cc-selected-icon.png"); - } - } - - &.ch-icon { - background-image: url("../images/avatareditor/ch-icon.png"); - width: 29px; - height: 24px; - - &.selected { - background-image: url("../images/avatareditor/ch-selected-icon.png"); - } - } - - &.cp-icon { - background-image: url("../images/avatareditor/cp-icon.png"); - width: 30px; - height: 24px; - - &.selected { - background-image: url("../images/avatareditor/cp-selected-icon.png"); - } - } - - &.ea-icon { - background-image: url("../images/avatareditor/ea-icon.png"); - width: 35px; - height: 16px; - - &.selected { - background-image: url("../images/avatareditor/ea-selected-icon.png"); - } - } - - &.fa-icon { - background-image: url("../images/avatareditor/fa-icon.png"); - width: 27px; - height: 20px; - - &.selected { - background-image: url("../images/avatareditor/fa-selected-icon.png"); - } - } - - &.female-icon { - background-image: url("../images/avatareditor/female-icon.png"); - width: 18px; - height: 27px; - - &.selected { - background-image: url("../images/avatareditor/female-selected-icon.png"); - } - } - - &.ha-icon { - background-image: url("../images/avatareditor/ha-icon.png"); - width: 25px; - height: 22px; - - &.selected { - background-image: url("../images/avatareditor/ha-selected-icon.png"); - } - } - - &.he-icon { - background-image: url("../images/avatareditor/he-icon.png"); - width: 31px; - height: 27px; - - &.selected { - background-image: url("../images/avatareditor/he-selected-icon.png"); - } - } - - &.hr-icon { - background-image: url("../images/avatareditor/hr-icon.png"); - width: 29px; - height: 25px; - - &.selected { - background-image: url("../images/avatareditor/hr-selected-icon.png"); - } - } - - &.lg-icon { - background-image: url("../images/avatareditor/lg-icon.png"); - width: 19px; - height: 20px; - - &.selected { - background-image: url("../images/avatareditor/lg-selected-icon.png"); - } - } - - &.loading-icon { - background-image: url("../images/icons/loading-icon.png"); - width: 17px; - height: 21px; - } - - &.male-icon { - background-image: url("../images/avatareditor/male-icon.png"); - width: 21px; - height: 21px; - - &.selected { - background-image: url("../images/avatareditor/male-selected-icon.png"); - } - } - - &.sh-icon { - background-image: url("../images/avatareditor/sh-icon.png"); - width: 37px; - height: 10px; - - &.selected { - background-image: url("../images/avatareditor/sh-selected-icon.png"); - } - } - - &.wa-icon { - background-image: url("../images/avatareditor/wa-icon.png"); - width: 36px; - height: 18px; - - &.selected { - background-image: url("../images/avatareditor/wa-selected-icon.png"); - } - } - - &.sellable-icon { - background-image: url("../images/avatareditor/sellable-icon.png"); - width: 17px; - height: 15px; - } - &.chatstyles-icon { background-image: url("../images/chat/styles-icon.png"); width: 17px; @@ -491,12 +309,6 @@ height: 15px; } - &.icon-fb-profile { - background: url("../images/toolbar/icons/friend-bar/profile.png"); - width: 21px; - height: 21px; - } - &.icon-camera-colormatrix { background: url("../images/icons/camera-colormatrix.png"); width: 32px; @@ -509,34 +321,6 @@ height: 21px; } - &.icon-user-profile { - background: url("../images/icons/user-profile.png"); - width: 13px; - height: 11px; - - &:hover { - background: url("../images/icons/user-profile-hover.png"); - } - } - - &.icon-fb-profile { - background: url("../images/toolbar/icons/friend-bar/profile.png"); - width: 21px; - height: 21px; - } - - &.icon-fb-chat { - background: url("../images/toolbar/icons/friend-bar/chat.png"); - width: 20px; - height: 21px; - } - - &.icon-fb-visit { - background: url("../images/toolbar/icons/friend-bar/visit.png"); - width: 21px; - height: 21px; - } - &.icon-pf-online { background: url("../images/profile/icons/online.gif"); width: 40px; @@ -555,30 +339,6 @@ height: 10px; } - &.icon-relationship-none { - background: url("../images/friendlist/icons/icon_relationship_none.png"); - width: 16px; - height: 14px; - } - - &.icon-relationship-heart { - background: url("../images/profile/icons/heart.png"); - width: 16px; - height: 14px; - } - - &.icon-relationship-bobba { - background: url("../images/profile/icons/bobba.png"); - width: 16px; - height: 14px; - } - - &.icon-relationship-smile { - background: url("../images/profile/icons/smile.png"); - width: 16px; - height: 14px; - } - &.icon-group-type-0 { background: url("../images/groups/icons/grouptype_icon_0.png"); width: 16px; @@ -681,18 +441,6 @@ height: 11px; } - &.icon-friendlist-follow { - background: url("../images/friendlist/icons/icon_follow.png"); - width: 16px; - height: 14px; - } - - &.icon-friendlist-chat { - background: url("../images/friendlist/icons/icon_chat.png"); - width: 17px; - height: 16px; - } - &.icon-youtube-next { background: url("../images/room-widgets/youtube-widget/next.png"); width: 21px; @@ -704,17 +452,6 @@ width: 21px; height: 16px; } - &.icon-friendlist-warning { - background: url("../images/friendlist/icons/icon_warning.png"); - width: 23px; - height: 21px; - } - - &.icon-friendlist-new-message { - background: url("../images/friendlist/icons/icon_new_message.png"); - width: 14px; - height: 16px; - } &.icon-hc-banner { background: url("../images/catalog/hc_big.png"); diff --git a/src/assets/styles/utils.scss b/src/assets/styles/utils.scss index e90775c4..0d186c72 100644 --- a/src/assets/styles/utils.scss +++ b/src/assets/styles/utils.scss @@ -74,3 +74,7 @@ ul { .flex-none { flex: none; } + +.z-index-1 { + z-index: 1; +} From 91ff5d4c666a9918d4ef28ade94c6245479c4f56 Mon Sep 17 00:00:00 2001 From: Bill Date: Thu, 18 Nov 2021 03:39:49 -0500 Subject: [PATCH 7/9] Update layout --- src/layout/base/NitroLayoutBase.tsx | 4 +-- src/layout/base/NitroLayoutBase.types.ts | 3 ++- .../set/NitroCardAccordionSetView.scss | 4 +-- src/layout/common/NitroLayoutVariant.type.ts | 2 +- src/layout/index.ts | 1 + .../user-profile-icon/UserProfileIconView.tsx | 26 +++++++++++++++++++ .../UserProfileIconView.types.ts | 7 +++++ src/layout/user-profile-icon/index.ts | 2 ++ src/views/chat-history/ChatHistoryView.scss | 19 +++++--------- .../user-profile-icon/UserProfileIconView.tsx | 12 --------- .../UserProfileIconView.types.ts | 5 ---- 11 files changed, 49 insertions(+), 36 deletions(-) create mode 100644 src/layout/user-profile-icon/UserProfileIconView.tsx create mode 100644 src/layout/user-profile-icon/UserProfileIconView.types.ts create mode 100644 src/layout/user-profile-icon/index.ts delete mode 100644 src/views/shared/user-profile-icon/UserProfileIconView.tsx delete mode 100644 src/views/shared/user-profile-icon/UserProfileIconView.types.ts diff --git a/src/layout/base/NitroLayoutBase.tsx b/src/layout/base/NitroLayoutBase.tsx index 7007a972..e3f01587 100644 --- a/src/layout/base/NitroLayoutBase.tsx +++ b/src/layout/base/NitroLayoutBase.tsx @@ -3,7 +3,7 @@ import { NitroLayoutBaseProps } from './NitroLayoutBase.types'; export const NitroLayoutBase: FC = props => { - const { className = '', overflow = null, position = null, gap = null, children = null, ...rest } = props; + const { className = '', overflow = null, position = null, gap = null, ref = null, innerRef = null, children = null, ...rest } = props; const getClassName = useMemo(() => { @@ -21,7 +21,7 @@ export const NitroLayoutBase: FC = props => }, [ className, overflow, position, gap ]); return ( -
+
{ children }
); diff --git a/src/layout/base/NitroLayoutBase.types.ts b/src/layout/base/NitroLayoutBase.types.ts index 846ddaf2..2366835f 100644 --- a/src/layout/base/NitroLayoutBase.types.ts +++ b/src/layout/base/NitroLayoutBase.types.ts @@ -1,8 +1,9 @@ -import { DetailedHTMLProps, HTMLAttributes } from 'react'; +import { DetailedHTMLProps, HTMLAttributes, LegacyRef } from 'react'; import { NitroLayoutOverflow, NitroLayoutPosition, NitroLayoutSpacing } from '../common'; export interface NitroLayoutBaseProps extends DetailedHTMLProps, HTMLDivElement> { + innerRef?: LegacyRef; overflow?: NitroLayoutOverflow; position?: NitroLayoutPosition; gap?: NitroLayoutSpacing; diff --git a/src/layout/card/accordion/set/NitroCardAccordionSetView.scss b/src/layout/card/accordion/set/NitroCardAccordionSetView.scss index 6380fe23..70c3be5c 100644 --- a/src/layout/card/accordion/set/NitroCardAccordionSetView.scss +++ b/src/layout/card/accordion/set/NitroCardAccordionSetView.scss @@ -3,12 +3,10 @@ &.active { height: 100%; background: rgba($white, 0.5); + border-bottom: 1px solid rgba($black, 0.2); } .nitro-card-accordion-set-header { border-bottom: 1px solid rgba($black, 0.2); } - - .nitro-card-accordion-set-content { - } } diff --git a/src/layout/common/NitroLayoutVariant.type.ts b/src/layout/common/NitroLayoutVariant.type.ts index cf973357..9593fd85 100644 --- a/src/layout/common/NitroLayoutVariant.type.ts +++ b/src/layout/common/NitroLayoutVariant.type.ts @@ -1 +1 @@ -export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary'; +export type NitroLayoutVariant = 'primary' | 'success' | 'danger' | 'secondary' | 'link' | 'black'; diff --git a/src/layout/index.ts b/src/layout/index.ts index 2d721551..df1d8eff 100644 --- a/src/layout/index.ts +++ b/src/layout/index.ts @@ -14,3 +14,4 @@ export * from './notification-alert'; export * from './notification-bubble'; export * from './transitions'; export * from './trophy'; +export * from './user-profile-icon'; diff --git a/src/layout/user-profile-icon/UserProfileIconView.tsx b/src/layout/user-profile-icon/UserProfileIconView.tsx new file mode 100644 index 00000000..d532570b --- /dev/null +++ b/src/layout/user-profile-icon/UserProfileIconView.tsx @@ -0,0 +1,26 @@ +import { FC, useMemo } from 'react'; +import { GetUserProfile } from '../../api'; +import { NitroLayoutBase } from '../base'; +import { UserProfileIconViewProps } from './UserProfileIconView.types'; + +export const UserProfileIconView: FC = props => +{ + const { userId = 0, userName = null } = props; + + const { className = '', children = null, ...rest } = props; + + const getClassName = useMemo(() => + { + let newClassName = 'nitro-friends-spritesheet icon-profile-sm me-1 cursor-pointer'; + + if(className && className.length) newClassName += ` ${ className }`; + + return newClassName; + }, [ className ]); + + return ( + GetUserProfile(userId) }> + { children } + + ); +} diff --git a/src/layout/user-profile-icon/UserProfileIconView.types.ts b/src/layout/user-profile-icon/UserProfileIconView.types.ts new file mode 100644 index 00000000..8f8702dd --- /dev/null +++ b/src/layout/user-profile-icon/UserProfileIconView.types.ts @@ -0,0 +1,7 @@ +import { NitroLayoutBaseProps } from '../base'; + +export interface UserProfileIconViewProps extends NitroLayoutBaseProps +{ + userId?: number; + userName?: string; +} diff --git a/src/layout/user-profile-icon/index.ts b/src/layout/user-profile-icon/index.ts new file mode 100644 index 00000000..cdc2fff5 --- /dev/null +++ b/src/layout/user-profile-icon/index.ts @@ -0,0 +1,2 @@ +export * from './UserProfileIconView'; +export * from './UserProfileIconView.types'; diff --git a/src/views/chat-history/ChatHistoryView.scss b/src/views/chat-history/ChatHistoryView.scss index d103ad8c..9f8e6385 100644 --- a/src/views/chat-history/ChatHistoryView.scss +++ b/src/views/chat-history/ChatHistoryView.scss @@ -1,18 +1,13 @@ -.nitro-chat-history -{ - width: 300px; +.nitro-chat-history { + width: $chat-history-width; + height: $chat-history-height; - .chat-history-content - { - - .chat-history-container - { + .chat-history-content { + .chat-history-container { min-height: 200px; - .chat-history-list - { - .chathistory-entry - { + .chat-history-list { + .chathistory-entry { .light { background-color: #121f27; } diff --git a/src/views/shared/user-profile-icon/UserProfileIconView.tsx b/src/views/shared/user-profile-icon/UserProfileIconView.tsx deleted file mode 100644 index 23225082..00000000 --- a/src/views/shared/user-profile-icon/UserProfileIconView.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { FC } from 'react'; -import { GetUserProfile } from '../../../api'; -import { UserProfileIconViewProps } from './UserProfileIconView.types'; - -export const UserProfileIconView: FC = props => -{ - const { userId = 0, userName = null } = props; - - return (<> - GetUserProfile(userId) } /> - ); -} diff --git a/src/views/shared/user-profile-icon/UserProfileIconView.types.ts b/src/views/shared/user-profile-icon/UserProfileIconView.types.ts deleted file mode 100644 index 1662dfa8..00000000 --- a/src/views/shared/user-profile-icon/UserProfileIconView.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface UserProfileIconViewProps -{ - userId?: number; - userName?: string; -} From 2c04e7e0752de64cac72306f64b21478727187df Mon Sep 17 00:00:00 2001 From: Bill Date: Thu, 18 Nov 2021 03:40:51 -0500 Subject: [PATCH 8/9] Update friends --- src/views/friends/FriendsView.scss | 89 +++++++++++++++++++ src/views/friends/FriendsView.tsx | 2 +- src/views/friends/context/FriendsContext.tsx | 2 + .../friends/context/FriendsContext.type.ts | 2 + .../friend-bar-item/FriendBarItemView.tsx | 8 +- .../views/friend-bar/FriendBarView.tsx | 12 +-- .../FriendsGroupItemView.tsx | 31 ++++--- .../views/friends-list/FriendsListView.tsx | 8 +- .../FriendsRequestItemView.tsx | 14 +-- .../friends-search/FriendsSearchView.tsx | 80 +++++++++++++++++ .../FriendsMessengerThreadGroup.tsx | 32 +++---- .../views/messenger/FriendsMessengerView.tsx | 54 ++++++----- .../request-item/FriendsRequestItemView.tsx | 4 +- 13 files changed, 264 insertions(+), 74 deletions(-) create mode 100644 src/views/friends/views/friends-search/FriendsSearchView.tsx diff --git a/src/views/friends/FriendsView.scss b/src/views/friends/FriendsView.scss index 35888832..6bfa3033 100644 --- a/src/views/friends/FriendsView.scss +++ b/src/views/friends/FriendsView.scss @@ -1,6 +1,95 @@ +.nitro-friends-spritesheet { + background: url('../../assets/images/friends/friends-spritesheet.png') transparent no-repeat; + + &.icon-friendbar-visit { + width: 21px; height: 21px; + background-position: -38px -5px; + } + + &.icon-heart { + width: 16px; height: 14px; + background-position: -5px -67px; + } + + &.icon-new-message { + width: 14px; height: 14px; + background-position: -96px -53px; + } + + &.icon-none { + width: 16px; height: 14px; + background-position: -31px -67px; + } + + &.icon-profile { + width: 21px; height: 21px; + background-position: -5px -36px; + } + + &.icon-profile-sm { + width: 13px; height: 11px; + background-position: -51px -91px; + + &:hover { + width: 13px; height: 11px; + background-position: -74px -91px; + } + } + + &.icon-smile { + width: 16px; height: 14px; + background-position: -57px -67px; + } + + &.icon-warning { + width: 23px; height: 21px; + background-position: -5px -5px; + } + + &.icon-accept { + width: 13px; height: 14px; + background-position: -5px -91px; + } + + &.icon-add { + width: 16px; height: 15px; + background-position: -69px -31px; + } + + &.icon-bobba { + width: 16px; height: 14px; + background-position: -96px -5px; + } + + &.icon-chat { + width: 17px; height: 16px; + background-position: -69px -5px; + } + + &.icon-deny { + width: 13px; height: 14px; + background-position: -28px -91px; + } + + &.icon-follow { + width: 16px; height: 14px; + background-position: -96px -29px; + } + + &.icon-friendbar-chat { + width: 20px; height: 21px; + background-position: -36px -36px; + } +} + .nitro-friends { width: $friends-list-width; height: $friends-list-height; + + .search-input { + border: 0; + border-bottom: 1px solid rgba($black, 0.2); + } } @import "./views/friend-bar/FriendBarView"; diff --git a/src/views/friends/FriendsView.tsx b/src/views/friends/FriendsView.tsx index fedb706f..768698c2 100644 --- a/src/views/friends/FriendsView.tsx +++ b/src/views/friends/FriendsView.tsx @@ -344,7 +344,7 @@ export const FriendsView: FC<{}> = props => }, [ requests ]); return ( - + { isReady && createPortal(, document.getElementById('toolbar-friend-bar-container')) } { isVisible && diff --git a/src/views/friends/context/FriendsContext.tsx b/src/views/friends/context/FriendsContext.tsx index a93a2f43..a86f130d 100644 --- a/src/views/friends/context/FriendsContext.tsx +++ b/src/views/friends/context/FriendsContext.tsx @@ -5,6 +5,8 @@ const FriendsContext = createContext({ friends: null, requests: null, settings: null, + canRequestFriend: null, + requestFriend: null, acceptFriend: null, declineFriend: null }); diff --git a/src/views/friends/context/FriendsContext.type.ts b/src/views/friends/context/FriendsContext.type.ts index 2eaf79a9..772372d3 100644 --- a/src/views/friends/context/FriendsContext.type.ts +++ b/src/views/friends/context/FriendsContext.type.ts @@ -8,6 +8,8 @@ export interface IFriendsContext friends: MessengerFriend[]; requests: MessengerRequest[]; settings: MessengerSettings; + canRequestFriend: (userId: number) => boolean; + requestFriend: (userId: number, userName: string) => void; acceptFriend: (userId: number) => void; declineFriend: (userId: number, declineAll?: boolean) => void; } diff --git a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx index 36079517..045edf63 100644 --- a/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx +++ b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx @@ -2,6 +2,7 @@ import { FollowFriendMessageComposer, MouseEventType } from '@nitrots/nitro-rend import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { GetUserProfile, LocalizeText, OpenMessengerChat } from '../../../../api'; import { SendMessageHook } from '../../../../hooks/messages'; +import { NitroLayoutBase } from '../../../../layout/base'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { FriendBarItemViewProps } from './FriendBarItemView.types'; @@ -63,9 +64,10 @@ export const FriendBarItemView: FC = props =>
{ friend.name }
{ isVisible &&
- - { friend.followingAllowed && } - GetUserProfile(friend.id) } className="icon icon-fb-profile cursor-pointer" /> + + { friend.followingAllowed && + } + GetUserProfile(friend.id) } />
}
); diff --git a/src/views/friends/views/friend-bar/FriendBarView.tsx b/src/views/friends/views/friend-bar/FriendBarView.tsx index a0347c94..aaff2555 100644 --- a/src/views/friends/views/friend-bar/FriendBarView.tsx +++ b/src/views/friends/views/friend-bar/FriendBarView.tsx @@ -1,4 +1,6 @@ import { FC, useMemo, useState } from 'react'; +import { NitroLayoutButton, NitroLayoutFlex } from '../../../../layout'; +import { NitroLayoutBase } from '../../../../layout/base'; import { FriendBarItemView } from '../friend-bar-item/FriendBarItemView'; import { FriendBarViewProps } from './FriendBarView.types'; @@ -24,10 +26,10 @@ export const FriendBarView: FC = props => }, [ maxDisplayCount, indexOffset, onlineFriends ]); return ( -
- + + setIndexOffset(indexOffset - 1) }> + + { Array.from(Array(maxDisplayCount), (e, i) => { return ; @@ -35,6 +37,6 @@ export const FriendBarView: FC = props => -
+ ); } diff --git a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx index 60b2066a..1c7b2932 100644 --- a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx +++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx @@ -2,7 +2,8 @@ import { FollowFriendMessageComposer, SetRelationshipStatusComposer } from '@nit import { FC, useCallback, useState } from 'react'; import { LocalizeText, OpenMessengerChat } from '../../../../api'; import { SendMessageHook } from '../../../../hooks'; -import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView'; +import { NitroLayoutFlex, UserProfileIconView } from '../../../../layout'; +import { NitroLayoutBase } from '../../../../layout/base'; import { MessengerFriend } from '../../common/MessengerFriend'; import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types'; @@ -52,19 +53,23 @@ export const FriendsGroupItemView: FC = props =>
{ friend.name }
-
- { !isExpanded && <> - { friend.followingAllowed && } - { friend.online && } - setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } /> + + { !isExpanded && + <> + { friend.followingAllowed && + } + { friend.online && + } + setIsExpanded(true) } title={ LocalizeText('infostand.link.relationship') } /> } - { isExpanded && <> - updateRelationship(MessengerFriend.RELATIONSHIP_HEART) } /> - updateRelationship(MessengerFriend.RELATIONSHIP_SMILE) } /> - updateRelationship(MessengerFriend.RELATIONSHIP_BOBBA) } /> - updateRelationship(MessengerFriend.RELATIONSHIP_NONE) } /> - } -
+ { isExpanded && + <> + updateRelationship(MessengerFriend.RELATIONSHIP_HEART) } /> + updateRelationship(MessengerFriend.RELATIONSHIP_SMILE) } /> + updateRelationship(MessengerFriend.RELATIONSHIP_BOBBA) } /> + updateRelationship(MessengerFriend.RELATIONSHIP_NONE) } /> + } +
); } diff --git a/src/views/friends/views/friends-list/FriendsListView.tsx b/src/views/friends/views/friends-list/FriendsListView.tsx index f706d334..fcf0c9c5 100644 --- a/src/views/friends/views/friends-list/FriendsListView.tsx +++ b/src/views/friends/views/friends-list/FriendsListView.tsx @@ -3,6 +3,7 @@ import { LocalizeText } from '../../../../api'; import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout'; import { FriendsGroupView } from '../friends-group/FriendsGroupView'; import { FriendsRequestView } from '../friends-request/FriendsRequestView'; +import { FriendsSearchView } from '../friends-search/FriendsSearchView'; import { FriendsListViewProps } from './FriendsListView.types'; const MODE_FRIENDS: number = 0; @@ -15,7 +16,7 @@ export const FriendsListView: FC = props => const [ mode, setMode ] = useState(0); return ( - + setMode(MODE_FRIENDS) }> @@ -34,13 +35,10 @@ export const FriendsListView: FC = props => - - } { (mode === MODE_SEARCH) && - <> - } + } ); diff --git a/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx index e0929968..f5ae26d9 100644 --- a/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx +++ b/src/views/friends/views/friends-request-item/FriendsRequestItemView.tsx @@ -1,6 +1,6 @@ import { FC } from 'react'; -import { NitroCardAccordionItemView } from '../../../../layout'; -import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView'; +import { NitroCardAccordionItemView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout'; +import { NitroLayoutBase } from '../../../../layout/base'; import { useFriendsContext } from '../../context/FriendsContext'; import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types'; @@ -14,11 +14,11 @@ export const FriendsRequestItemView: FC = props => return ( -
{ request.name }
-
- acceptFriend(request.requesterUserId) } /> - declineFriend(request.requesterUserId) } /> -
+ { request.name } + + acceptFriend(request.requesterUserId) } /> + declineFriend(request.requesterUserId) } /> + ); }; diff --git a/src/views/friends/views/friends-search/FriendsSearchView.tsx b/src/views/friends/views/friends-search/FriendsSearchView.tsx new file mode 100644 index 00000000..891038ba --- /dev/null +++ b/src/views/friends/views/friends-search/FriendsSearchView.tsx @@ -0,0 +1,80 @@ +import { HabboSearchComposer, HabboSearchResultData, HabboSearchResultEvent } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { LocalizeText, OpenMessengerChat } from '../../../../api'; +import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../hooks'; +import { NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionView, NitroLayoutFlex, UserProfileIconView } from '../../../../layout'; +import { NitroLayoutBase } from '../../../../layout/base'; +import { useFriendsContext } from '../../context/FriendsContext'; + +export const FriendsSearchView: FC<{}> = props => +{ + const [ searchValue, setSearchValue ] = useState(''); + const [ friendResults, setFriendResults ] = useState([]); + const [ otherResults, setOtherResults ] = useState([]); + const { canRequestFriend = null, requestFriend = null } = useFriendsContext(); + + const onHabboSearchResultEvent = useCallback((event: HabboSearchResultEvent) => + { + const parser = event.getParser(); + + BatchUpdates(() => + { + setFriendResults(parser.friends); + setOtherResults(parser.others); + }); + }, []); + + CreateMessageHook(HabboSearchResultEvent, onHabboSearchResultEvent); + + useEffect(() => + { + if(!searchValue || !searchValue.length) return; + + const timeout = setTimeout(() => + { + if(!searchValue || !searchValue.length) return; + + SendMessageHook(new HabboSearchComposer(searchValue)); + }, 500); + + return () => clearTimeout(timeout); + }, [ searchValue ]); + + return ( + <> + setSearchValue(event.target.value) } /> + + + { (friendResults.length > 0) && friendResults.map(result => + { + return ( + + + { result.avatarName } + + { result.isAvatarOnline && + OpenMessengerChat(result.avatarId) } title={ LocalizeText('friendlist.tip.im') } /> } + + + ); + }) } + + + { (otherResults.length > 0) && otherResults.map(result => + { + return ( + + + { result.avatarName } + + { canRequestFriend(result.avatarId) && + requestFriend(result.avatarId, result.avatarName) } title={ LocalizeText('friendlist.tip.addfriend') } /> } + + + ); + }) } + + + + ); +} diff --git a/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx index b0d30ea7..47ce9415 100644 --- a/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx +++ b/src/views/friends/views/messenger-thread-group/FriendsMessengerThreadGroup.tsx @@ -1,5 +1,7 @@ import { FC } from 'react'; import { GetSessionDataManager } from '../../../../api'; +import { NitroLayoutFlex } from '../../../../layout'; +import { NitroLayoutBase } from '../../../../layout/base'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { MessengerThreadChat } from '../../common/MessengerThreadChat'; import { FriendsMessengerThreadGroupProps } from './FriendsMessengerThreadGroup.types'; @@ -17,13 +19,13 @@ export const FriendsMessengerThreadGroup: FC = { group.chats.map((chat, index) => { return ( -
+ { chat.type === MessengerThreadChat.SECURITY_NOTIFICATION && -
- -
{ chat.message }
-
} -
+ + + { chat.message } + } + ); }) }
@@ -31,18 +33,18 @@ export const FriendsMessengerThreadGroup: FC = } return ( -
+ { (group.userId > 0) && -
+ -
} -
- { group.chats.map((chat, index) =>
{ chat.message }
) } -
+ } + + { group.chats.map((chat, index) => { chat.message }) } + { (group.userId === 0) && -
+ -
} -
+ } + ); } diff --git a/src/views/friends/views/messenger/FriendsMessengerView.tsx b/src/views/friends/views/messenger/FriendsMessengerView.tsx index 115d7d55..7faec597 100644 --- a/src/views/friends/views/messenger/FriendsMessengerView.tsx +++ b/src/views/friends/views/messenger/FriendsMessengerView.tsx @@ -3,7 +3,8 @@ import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } import { AddEventLinkTracker, GetUserProfile, LocalizeText, RemoveLinkEventTracker } from '../../../../api'; import { FriendsMessengerIconEvent } from '../../../../events'; import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex } from '../../../../layout'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout'; +import { NitroLayoutBase } from '../../../../layout/base'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { MessengerThread } from '../../common/MessengerThread'; import { MessengerThreadChat } from '../../common/MessengerThreadChat'; @@ -232,7 +233,7 @@ export const FriendsMessengerView: FC<{}> = props => if(!isVisible) return null; return ( - + setIsVisible(false) } /> @@ -241,8 +242,9 @@ export const FriendsMessengerView: FC<{}> = props => const messageThreadIndex = messageThreads.indexOf(thread); return ( -
setActiveThreadIndex(messageThreadIndex) }> - { thread.unread && } +
setActiveThreadIndex(messageThreadIndex) }> + { thread.unread && + }
); @@ -250,32 +252,38 @@ export const FriendsMessengerView: FC<{}> = props => { (activeThreadIndex >= 0) && -
+ { LocalizeText('messenger.window.separator', [ 'FRIEND_NAME' ], [ messageThreads[activeThreadIndex].participant.name ]) } -
} + }
{ (activeThreadIndex >= 0) && <> -
-
- - -
- - -
-
+ + + + + + + + + + + { LocalizeText('messenger.window.button.report') } + + closeThread(activeThreadIndex) }> + + + + -
-
+ + setMessageText(event.target.value) } onKeyDown={ onKeyDown } /> - -
+ + { LocalizeText('widgets.chatinput.say') } + + } diff --git a/src/views/friends/views/request-item/FriendsRequestItemView.tsx b/src/views/friends/views/request-item/FriendsRequestItemView.tsx index f25c42f9..50c7d243 100644 --- a/src/views/friends/views/request-item/FriendsRequestItemView.tsx +++ b/src/views/friends/views/request-item/FriendsRequestItemView.tsx @@ -1,7 +1,7 @@ import { AcceptFriendMessageComposer, DeclineFriendMessageComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback } from 'react'; -import { SendMessageHook } from '../../../../hooks/messages/message-event'; -import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView'; +import { SendMessageHook } from '../../../../hooks'; +import { UserProfileIconView } from '../../../../layout'; import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types'; export const FriendsRequestItemView: FC = props => From 6b4e8a3d68ac9c4f28b77a09c84b96df84422e2b Mon Sep 17 00:00:00 2001 From: Bill Date: Thu, 18 Nov 2021 03:41:17 -0500 Subject: [PATCH 9/9] Update UserProfileIconView --- .../views/widgets/hall-of-fame-item/HallOfFameItemView.tsx | 2 +- src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx | 3 +-- .../views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx | 2 +- .../infostand/views/furni/InfoStandWidgetFurniView.tsx | 2 +- .../widgets/infostand/views/pet/InfoStandWidgetPetView.tsx | 2 +- .../views/rentable-bot/InfoStandWidgetRentableBotView.tsx | 4 ++-- .../widgets/infostand/views/user/InfoStandWidgetUserView.tsx | 2 +- 7 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx index 431a6f6d..2aef86fe 100644 --- a/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx +++ b/src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { LocalizeText } from '../../../../../api'; +import { UserProfileIconView } from '../../../../../layout'; import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView'; -import { UserProfileIconView } from '../../../../shared/user-profile-icon/UserProfileIconView'; import { HallOfFameItemViewProps } from './HallOfFameItemView.types'; export const HallOfFameItemView: FC = props => diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx index f0a9ab42..92c9712f 100644 --- a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx @@ -7,9 +7,8 @@ import { FloorplanEditorEvent } from '../../../../events/floorplan-editor/Floorp import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail'; import { dispatchUiEvent } from '../../../../hooks/events'; import { SendMessageHook } from '../../../../hooks/messages'; -import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView, UserProfileIconView } from '../../../../layout'; import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; -import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView'; import { useNavigatorContext } from '../../context/NavigatorContext'; import { NavigatorActions } from '../../reducers/NavigatorReducer'; import { NavigatorRoomInfoViewProps } from './NavigatorRoomInfoView.types'; diff --git a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx index f91a328f..e4c633be 100644 --- a/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx +++ b/src/views/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx @@ -2,7 +2,7 @@ import { RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsC import { FC, useCallback, useMemo } from 'react'; import { LocalizeText } from '../../../../../../api'; import { SendMessageHook } from '../../../../../../hooks'; -import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; +import { UserProfileIconView } from '../../../../../../layout'; import { NavigatorRoomSettingsRightsTabViewProps } from './NavigatorRoomSettingsRightsTabView.types'; export const NavigatorRoomSettingsRightsTabView: FC = props => diff --git a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx index 1c918dc6..e885a059 100644 --- a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx +++ b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx @@ -2,10 +2,10 @@ import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, Roo import { FC, useCallback, useEffect, useState } from 'react'; import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage } from '../../../../../../api'; import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks'; +import { UserProfileIconView } from '../../../../../../layout'; import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView'; import { LimitedEditionCompactPlateView } from '../../../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView'; import { RarityLevelView } from '../../../../../shared/rarity-level/RarityLevelView'; -import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; import { useRoomContext } from '../../../../context/RoomContext'; import { InfoStandBaseView } from '../base/InfoStandBaseView'; import { InfoStandWidgetFurniViewProps } from './InfoStandWidgetFurniView.types'; diff --git a/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx b/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx index 0de4f613..a2482ced 100644 --- a/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx +++ b/src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { LocalizeText } from '../../../../../../api'; +import { UserProfileIconView } from '../../../../../../layout'; import { PetImageView } from '../../../../../shared/pet-image/PetImageView'; -import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; import { InfoStandBaseView } from '../base/InfoStandBaseView'; import { InfoStandWidgetPetViewProps } from './InfoStandWidgetPetView.types'; diff --git a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx index af4a2566..e4214850 100644 --- a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx +++ b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx @@ -1,10 +1,10 @@ import { BotRemoveComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useMemo } from 'react'; import { LocalizeText } from '../../../../../../api'; -import { SendMessageHook } from '../../../../../../hooks/messages'; +import { SendMessageHook } from '../../../../../../hooks'; +import { UserProfileIconView } from '../../../../../../layout'; import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView'; import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView'; -import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; import { BotSkillsEnum } from '../../../avatar-info/common/BotSkillsEnum'; import { InfoStandBaseView } from '../base/InfoStandBaseView'; import { InfoStandWidgetRentableBotViewProps } from './InfoStandWidgetRentableBotView.types'; diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx index c2560891..5228d30b 100644 --- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx +++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx @@ -4,9 +4,9 @@ import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api'; import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks'; import { CreateEventDispatcherHook } from '../../../../../../hooks/events'; +import { UserProfileIconView } from '../../../../../../layout'; import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView'; import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView'; -import { UserProfileIconView } from '../../../../../shared/user-profile-icon/UserProfileIconView'; import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView'; import { useRoomContext } from '../../../../context/RoomContext'; import { InfoStandWidgetUserViewProps } from './InfoStandWidgetUserView.types';