nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update purse

Browse Source
This commit is contained in:
Bill 2021-04-15 23:44:54 -04:00
parent 08d0c76b90
commit bc93c0ac0f
5 changed files with 17 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@ -116,11 +116,11 @@ export function App(): JSX.Element
if(!WebGL.isWebGLAvailable()) if(!WebGL.isWebGLAvailable())
{ {
dispatchMainEvent(new NitroEvent(Nitro.WEBGL_UNAVAILABLE)); dispatchMainEvent(new NitroEvent(Nitro.WEBGL_UNAVAILABLE));
return;
} }
else
{
Nitro.instance.core.configuration.init(); Nitro.instance.core.configuration.init();
}
return ( return (
<div> <div>

11
src/views/purse/PurseView.tsx
View File

@ -1,6 +1,5 @@
import { Map } from 'immutable'; import { Map } from 'immutable';
import { UserCreditsEvent, UserCurrencyEvent, UserCurrencyUpdateEvent } from 'nitro-renderer'; import { Nitro, UserCreditsEvent, UserCurrencyComposer, 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 { useEffect, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event';
import { FadeTransition } from '../../transitions/FadeTransition'; import { FadeTransition } from '../../transitions/FadeTransition';
@ -50,12 +49,16 @@ export function PurseView(props: PurseViewProps): JSX.Element
SendMessageHook(new UserCurrencyComposer()); SendMessageHook(new UserCurrencyComposer());
}, []); }, []);
const displayedCurrencies = Nitro.instance.getConfiguration<number[]>('system.currency.types', []);
return ( return (
<FadeTransition inProp={ isReady } timeout={ 300 }> <FadeTransition inProp={ isReady } timeout={ 300 }>
<div className="grid-container mb-1"> <div className="nitro-purse position-relative mb-1">
<div className="grid-items grid-2"> <div className="row px-0 mx-0">
{ currencies && currencies.entrySeq().map(([ key, value ]) => { currencies && currencies.entrySeq().map(([ key, value ]) =>
{ {
if(displayedCurrencies.indexOf(parseInt(key)) === -1) return null;
return <CurrencyView key={ key } type={ parseInt(key) } amount={ value } /> return <CurrencyView key={ key } type={ parseInt(key) } amount={ value } />
}) } }) }
</div> </div>

24
src/views/purse/currency/CurrencyView.scss
View File

@ -1,31 +1,9 @@
.purse-item { .nitro-purse-item {
flex: 46%; flex: 46%;
margin-bottom: 3px;
padding: 0.23rem;
margin-right: 3px; margin-right: 3px;
&:nth-child(2n), &:nth-child(2n),
&:last-child { &:last-child {
margin-right: 0; 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%;
}
}
} }

7
src/views/purse/currency/CurrencyView.tsx
View File

@ -1,3 +1,4 @@
import { CurrencyIcon } from '../../../utils/currency-icon/CurrencyIcon';
import { CurrencyViewProps } from './CurrencyView.types'; import { CurrencyViewProps } from './CurrencyView.types';
export function CurrencyView(props: CurrencyViewProps): JSX.Element export function CurrencyView(props: CurrencyViewProps): JSX.Element
@ -5,9 +6,9 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element
const { type = -1, amount = 0 } = props; const { type = -1, amount = 0 } = props;
return ( return (
<div className="d-flex item-detail bg-primary rounded border border-black shadow p-1"> <div className="d-flex bg-primary rounded shadow border border-black mb-1 p-1 nitro-purse-item">
<div className="flex-grow-1 item-value">{ amount }</div> <div className="d-flex flex-grow-1 align-items-center justify-content-end detail-value">{ amount }</div>
<div className="item-icon p-1 rounded bg-secondary">{ type }</div> <div className="bg-secondary rounded ml-1"><CurrencyIcon type={ type } /></div>
</div> </div>
); );
} }

1
src/views/right-side/RightSideView.scss
View File

@ -2,5 +2,6 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
width: 200px;
z-index: $rightside-zindex; z-index: $rightside-zindex;
} }