Purse Fix

public/ui-config.json.example

@@ -106,11 +106,10 @@
     "avatareditor.show.clubitems.dimmed": true,
     "avatareditor.show.clubitems.first": true,
     "chat.history.max.items": 100,
-    "system.currency.types": [
-        -1,
-        0,
-        5
-    ],
+	"currency.display.number.short": false,
+    "currency.asset.icon.url": "${images.url}/wallet/%type%.png",
+    "currency.seasonal.color": "blue",
+    "system.currency.types": [ -1, 0, 5 ],
     "catalog.links": {
         "hc.buy_hc": "habbo_club",
         "hc.hc_gifts": "club_gifts",
@@ -128,9 +127,6 @@
         "enabled": false,
         "sound": "sound_respect_received"
     },
-    "currency.display.number.short": false,
-    "currency.asset.icon.url": "${images.url}/wallet/%type%.png",
-    "currency.seasonal.color": "bronze",
     "catalog.asset.url": "${image.library.url}catalogue",
     "catalog.asset.image.url": "${catalog.asset.url}/%name%.gif",
     "catalog.asset.icon.url": "${catalog.asset.url}/icon_%name%.png",

src/components/purse/PurseView.scss

@@ -45,10 +45,87 @@
     }
 
     .nitro-purse-seasonal-currency {
-        background-color: #212131;
-        box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
-        margin-bottom: 6px;
-        margin-top: -6px;
+
+        height: 30px;
+		background-color: rgba($dark, 0.95);
+
+        .seasonal-padding {
+            padding: 7px;
+        }
+
+        .seasonal-bold {
+            padding-right: 3px;
+        }
+
+        .seasonal-amount {
+            padding-top: 7px;
+            padding-bottom: 7px;
+            padding-right: 3px;
+            width: 90px;
+        }
+
+        .nitro-seasonal-box {
+            border-image-slice: 6 6 6 6 fill;
+            border-image-width: 6px 6px 6px 6px;
+            top: 0px;
+            right: 0px;
+            height: 100%;
+        }
+
+        &.purple {
+
+            .nitro-seasonal-box{
+                border-image-source: url(@/assets/images/purse/seasonal_bg_purple.png);
+            }
+
+            .seasonal-bold {
+                color: #b17fbe;
+            }
+        }
+
+        &.bronze {
+
+            .nitro-seasonal-box{
+                border-image-source: url(@/assets/images/purse/seasonal_bg_bronze.png);
+            }
+
+            .seasonal-bold {
+                color: #d4943c;
+            }
+        }
+
+        &.pink {
+
+            .nitro-seasonal-box{
+                border-image-source: url(@/assets/images/purse/seasonal_bg_pink.png);
+            }
+
+            .seasonal-bold {
+                color: #d89ba8;
+            }
+        }
+
+        &.blue {
+
+            .nitro-seasonal-box{
+                border-image-source: url(@/assets/images/purse/seasonal_bg_blue.png);
+            }
+
+            .seasonal-bold {
+                color: #95c3e5;
+            }
+        }
+
+        &.red {
+
+            .nitro-seasonal-box{
+                border-image-source: url(@/assets/images/purse/seasonal_bg_red.png);
+            }
+
+            .seasonal-bold {
+                color: #ff0004;
+            }
+        }
     }
 }
 .topcurrencygen{

src/components/purse/PurseView.tsx

@@ -48,9 +48,12 @@ export const PurseView: FC<{}> = props =>
 
         for(const type of types)
         {
-            if ((limit > -1) && (count === limit)) break;
-			elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />)
-			count++;
+            if((limit > -1) && (count === limit)) break;
+
+            if(seasonal) elements.push(<SeasonalView key={ type } type={ type } amount={ purse.activityPoints.get(type) } />);
+            else elements.push(<CurrencyView key={ type } type={ type } amount={ purse.activityPoints.get(type) } short={ currencyDisplayNumberShort } />);
+
+            count++;
         }
 
         return elements;
@@ -84,4 +87,4 @@ export const PurseView: FC<{}> = props =>
             { getCurrencyElements(2, -1, true) }
         </Column>
     );
-}
+}

src/components/purse/views/SeasonalView.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LocalizeFormattedNumber, LocalizeText } from '../../../api';
+import { GetConfiguration, LocalizeFormattedNumber, LocalizeText } from '../../../api';
 import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
 
 interface SeasonalViewProps
@@ -13,12 +13,15 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
     const { type = -1, amount = -1 } = props;
 
     return (
-        <Flex fullWidth justifyContent="between" className="nitro-purse-seasonal-currency p-2 rounded">
-            <Text variant="white">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
-            <Flex gap={ 1 }>
-                <Text variant="white">{ LocalizeFormattedNumber(amount) }</Text>
-                <LayoutCurrencyIcon type={ type } />
-            </Flex>
+        <Flex fullWidth justifyContent="between" className={ 'nitro-purse-seasonal-currency nitro-notification ' + GetConfiguration<boolean>('currency.seasonal.color') }>
+            <Flex fullWidth>
+                <Text bold truncate fullWidth variant="white" className="seasonal-padding seasonal-bold">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
+                <Text bold truncate variant="white" className="seasonal-amount text-end" title={ amount > 99999 ? LocalizeFormattedNumber(amount) : '' }>{ amount > 99999 ? '99 999' : LocalizeFormattedNumber(amount) }</Text>
+                <Flex className="nitro-seasonal-box seasonal-padding">
+                    <LayoutCurrencyIcon type={ type } />
+                </Flex>        
+            </Flex>            
         </Flex>
+
     );
 }