diff --git a/public/configuration.json b/public/configuration.json index 848496e5..631cb7cd 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -54,7 +54,7 @@ "chat.history.max.items": 100, "animation.fps": 24, "limits.fps": true, - "system.dispatcher.log": true, + "system.dispatcher.log": false, "system.currency.types": [ -1, 0, diff --git a/src/hooks/events/event-dispatcher.base.tsx b/src/hooks/events/event-dispatcher.base.tsx index d18c25c4..26802485 100644 --- a/src/hooks/events/event-dispatcher.base.tsx +++ b/src/hooks/events/event-dispatcher.base.tsx @@ -12,14 +12,10 @@ export function CreateEventDispatcherHook(type: string, eventDispatcher: IEventD useEffect(() => { - console.log('register', type); - eventDispatcher.addEventListener(type, handlerRef.current); return () => { - console.log('unregister', type); - eventDispatcher.removeEventListener(type, handlerRef.current); } }, [ type, eventDispatcher, handler ]); diff --git a/src/hooks/messages/message-event.tsx b/src/hooks/messages/message-event.tsx index 9f1d4110..b1d1b947 100644 --- a/src/hooks/messages/message-event.tsx +++ b/src/hooks/messages/message-event.tsx @@ -1,8 +1,8 @@ -import { IMessageEvent } from 'nitro-renderer'; +import { IMessageComposer, IMessageEvent } from 'nitro-renderer'; import { Nitro } from 'nitro-renderer/src/nitro/Nitro'; import { useEffect } from 'react'; -export function CreateMessageHook(event: IMessageEvent) +export function CreateMessageHook(event: IMessageEvent): void { useEffect(() => { @@ -14,3 +14,8 @@ export function CreateMessageHook(event: IMessageEvent) } }); } + +export function SendMessageHook(event: IMessageComposer): void +{ + Nitro.instance.communication.connection.send(event); +} diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 23cf1ea0..1817fce1 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -1,5 +1,7 @@ @import './avatar-image/AvatarImage.scss'; @import './hotel-view/HotelView.scss'; @import './loading/LoadingView.scss'; -@import './main//MainView.scss'; -@import './toolbar//ToolbarView.scss'; +@import './main/MainView.scss'; +@import './purse/PurseView.scss'; +@import './right-side/RightSideView.scss'; +@import './toolbar/ToolbarView.scss'; diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index d076dfe2..c5da9484 100644 --- a/src/views/main/MainView.tsx +++ b/src/views/main/MainView.tsx @@ -4,6 +4,7 @@ import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-ev import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event'; import { FadeTransition } from '../../transitions/FadeTransition'; import { HotelView } from '../hotel-view/HotelView'; +import { RightSideView } from '../right-side/RightSideView'; import { ToolbarView } from '../toolbar/ToolbarView'; import { MainViewProps } from './MainView.types'; @@ -110,6 +111,7 @@ export function MainView(props: MainViewProps): JSX.Element return (
+ diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss new file mode 100644 index 00000000..7d2866f3 --- /dev/null +++ b/src/views/purse/PurseView.scss @@ -0,0 +1 @@ +@import './currency/CurrencyView.scss'; diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx new file mode 100644 index 00000000..20801686 --- /dev/null +++ b/src/views/purse/PurseView.tsx @@ -0,0 +1,65 @@ +import { Map } from 'immutable'; +import { UserCreditsEvent, UserCurrencyEvent, UserCurrencyUpdateEvent } from 'nitro-renderer'; +import { UserCurrencyComposer } from 'nitro-renderer/src/nitro/communication/messages/outgoing/user/inventory/currency/UserCurrencyComposer'; +import { useEffect, useState } from 'react'; +import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; +import { FadeTransition } from '../../transitions/FadeTransition'; +import { CurrencyView } from './currency/CurrencyView'; +import { PurseViewProps } from './PurseView.types'; + +export function PurseView(props: PurseViewProps): JSX.Element +{ + const [ currencies, setCurrencies ] = useState(Map({ '-1': 0 })); + const [ isReady, setIsReady ] = useState(false); + + const onUserCreditsEvent = (event: UserCreditsEvent) => + { + const parser = event.getParser(); + + setCurrencies(currencies.set('-1', parseFloat(parser.credits))); + }; + + const onUserCurrencyEvent = (event: UserCurrencyEvent) => + { + const parser = event.getParser(); + + const map = {}; + + for(const [ key, value ] of parser.currencies.entries()) + { + map[key.toString()] = value; + } + + setCurrencies(currencies.merge(map)); + setIsReady(true); + }; + + const onUserCurrencyUpdateEvent = (event: UserCurrencyUpdateEvent) => + { + const parser = event.getParser(); + + setCurrencies(currencies.set(parser.type.toString(), parser.amount)); + }; + + CreateMessageHook(new UserCreditsEvent(onUserCreditsEvent)); + CreateMessageHook(new UserCurrencyEvent(onUserCurrencyEvent)); + CreateMessageHook(new UserCurrencyUpdateEvent(onUserCurrencyUpdateEvent)); + + useEffect(() => + { + SendMessageHook(new UserCurrencyComposer()); + }, []); + + return ( + +
+
+ { currencies && currencies.entrySeq().map(([ key, value ]) => + { + return + }) } +
+
+
+ ); +} diff --git a/src/views/purse/PurseView.types.ts b/src/views/purse/PurseView.types.ts new file mode 100644 index 00000000..c6fdd024 --- /dev/null +++ b/src/views/purse/PurseView.types.ts @@ -0,0 +1,4 @@ +export interface PurseViewProps +{ + +} diff --git a/src/views/purse/currency/CurrencyView.scss b/src/views/purse/currency/CurrencyView.scss new file mode 100644 index 00000000..796a402a --- /dev/null +++ b/src/views/purse/currency/CurrencyView.scss @@ -0,0 +1,31 @@ +.purse-item { + flex: 46%; + margin-bottom: 3px; + padding: 0.23rem; + margin-right: 3px; + + &:nth-child(2n), + &:last-child { + margin-right: 0; + } + + .item-value { + font-size: $font-size-sm; + padding: 2px 5px; + } + + .item-icon { + position: relative; + width: 25px; + height: 25px; + border-radius: $card-border-radius; + + .currency-icon { + position: absolute; + background-position: center; + background-repeat: no-repeat; + width: 100%; + height: 100%; + } + } +} diff --git a/src/views/purse/currency/CurrencyView.tsx b/src/views/purse/currency/CurrencyView.tsx new file mode 100644 index 00000000..04c6a310 --- /dev/null +++ b/src/views/purse/currency/CurrencyView.tsx @@ -0,0 +1,13 @@ +import { CurrencyViewProps } from './CurrencyView.types'; + +export function CurrencyView(props: CurrencyViewProps): JSX.Element +{ + const { type = -1, amount = 0 } = props; + + return ( +
+
{ amount }
+
{ type }
+
+ ); +} diff --git a/src/views/purse/currency/CurrencyView.types.ts b/src/views/purse/currency/CurrencyView.types.ts new file mode 100644 index 00000000..0ff2718e --- /dev/null +++ b/src/views/purse/currency/CurrencyView.types.ts @@ -0,0 +1,5 @@ +export interface CurrencyViewProps +{ + type: number; + amount: number; +} diff --git a/src/views/right-side/RightSideView.scss b/src/views/right-side/RightSideView.scss new file mode 100644 index 00000000..74d6bd35 --- /dev/null +++ b/src/views/right-side/RightSideView.scss @@ -0,0 +1,6 @@ +.nitro-right-side { + position: absolute; + top: 10px; + right: 10px; + z-index: $rightside-zindex; +} diff --git a/src/views/right-side/RightSideView.tsx b/src/views/right-side/RightSideView.tsx new file mode 100644 index 00000000..1b807952 --- /dev/null +++ b/src/views/right-side/RightSideView.tsx @@ -0,0 +1,13 @@ +import { PurseView } from '../purse/PurseView'; +import { RightSideProps } from './RightSideView.types'; + +export function RightSideView(props: RightSideProps): JSX.Element +{ + return ( +
+
+ +
+
+ ); +} diff --git a/src/views/right-side/RightSideView.types.ts b/src/views/right-side/RightSideView.types.ts new file mode 100644 index 00000000..25427597 --- /dev/null +++ b/src/views/right-side/RightSideView.types.ts @@ -0,0 +1,4 @@ +export interface RightSideProps +{ + +}