Add purse

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,

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 ]);

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<unknown[]>): void
+{
+    Nitro.instance.communication.connection.send(event);
+}

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 './main/MainView.scss';
-@import './toolbar//ToolbarView.scss';
+@import './purse/PurseView.scss';
+@import './right-side/RightSideView.scss';
+@import './toolbar/ToolbarView.scss';

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 (
         <div>
             <HotelView />
+            <RightSideView />
             <FadeTransition inProp={ isReady } timeout={ 300 }>
                 <ToolbarView />
             </FadeTransition>

src/views/purse/PurseView.scss

@@ -0,0 +1 @@
+@import './currency/CurrencyView.scss';

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 (
+        <FadeTransition inProp={ isReady } timeout={ 300 }>
+            <div className="grid-container mb-1">
+                <div className="grid-items grid-2">
+                    { currencies && currencies.entrySeq().map(([ key, value ]) =>
+                        {
+                            return <CurrencyView key={ key } type={ parseInt(key) } amount={ value } />
+                        }) }
+                </div>
+            </div>
+        </FadeTransition>
+    );
+}

src/views/purse/PurseView.types.ts

@@ -0,0 +1,4 @@
+export interface PurseViewProps
+{
+    
+}

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%;
+        }
+    }
+}

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 (
+        <div className="d-flex item-detail bg-primary rounded border border-black shadow p-1">
+            <div className="flex-grow-1 item-value">{ amount }</div>
+            <div className="item-icon p-1 rounded bg-secondary">{ type }</div>
+        </div>
+    );
+}

src/views/purse/currency/CurrencyView.types.ts

@@ -0,0 +1,5 @@
+export interface CurrencyViewProps
+{
+    type: number;
+    amount: number;
+}

src/views/right-side/RightSideView.scss

@@ -0,0 +1,6 @@
+.nitro-right-side {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: $rightside-zindex;
+}

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 (
+        <div className="nitro-right-side">
+            <div className="d-flex flex-column">
+                <PurseView />
+            </div>
+        </div>
+    );
+}

src/views/right-side/RightSideView.types.ts

@@ -0,0 +1,4 @@
+export interface RightSideProps
+{
+    
+}