Add purse

This commit is contained in:
Bill 2021-04-15 13:29:48 -04:00
parent 10373b08c8
commit bf1f357848
14 changed files with 156 additions and 9 deletions

View File

@ -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,

View File

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

View File

@ -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);
}

View File

@ -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';

View File

@ -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>

View File

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

View File

@ -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>
);
}

View File

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

View File

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

View File

@ -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>
);
}

View File

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

View File

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

View File

@ -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>
);
}

View File

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