From 52e9e3208ab6fae8347c65717be758977f0ce7e6 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 00:16:09 -0300
Subject: [PATCH 01/23] Gifts

---
 src/assets/images/catalog/gift/gift_tag.png   | Bin 0 -> 795 bytes
 .../images/catalog/{ => gift}/incognito.png   | Bin
 src/events/catalog/CatalogEvent.ts            |   1 +
 src/events/catalog/CatalogInitGiftEvent.ts    |  32 +++
 src/views/catalog/CatalogView.tsx             |   2 +
 src/views/catalog/views/CatalogViews.scss     |   1 +
 .../views/gift/CatalogPageGiftView.scss       |  56 +++++
 .../views/gift/CatalogPageGiftView.tsx        | 227 ++++++++++++++++++
 .../CatalogPurchaseButtonView.tsx             |   1 -
 .../CatalogPurchaseGiftButtonView.tsx         |  11 +-
 .../shared/currency-icon/CurrencyIcon.scss    |   4 +-
 .../shared/furni-image/FurniImageView.tsx     |   2 +-
 12 files changed, 331 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/catalog/gift/gift_tag.png
 rename src/assets/images/catalog/{ => gift}/incognito.png (100%)
 create mode 100644 src/events/catalog/CatalogInitGiftEvent.ts
 create mode 100644 src/views/catalog/views/gift/CatalogPageGiftView.scss
 create mode 100644 src/views/catalog/views/gift/CatalogPageGiftView.tsx

diff --git a/src/assets/images/catalog/gift/gift_tag.png b/src/assets/images/catalog/gift/gift_tag.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c24813e196eb5af1599fc0ef74749c235c899db
GIT binary patch
literal 795
zcmeAS@N?(olHy`uVBq!ia0y~yU^D`<r*g0X$=fT+)EO9<9(lSrhE&{od&`jTkb!`!
zqrBF4dq!Q><(#stT>=ufZ^fSX*kAhak><oZxBmMXZ$2vhiX|em<is6~305h2!XC1l
zP9M(y-ahl@mR_Ej9Wx_aCdlRs8yeqMPEkrrTj{Kpls3&O<+eM|jO?-#+xjE~v@>iK
zg$)%#&eZYFyzi+{dcuW=LvnMz^S0U}Ej&f-K0q=EOulM8v)CFazekR(#peWrqOg&G
z5rkkKT6{sEdyfF!ZwPWfkU-%Z3m6#!<<9`+flM#~;}1>$t`OODH<?X@^X552=At&A
zGc7z`K<^=wM|cjou2D}p{?3s3Q@hWZBRo#7Ys^!U)G`E=68-~qoYA@C?&^Qy$eA-B
zooCj#AT#Zb@g!^u1cuWBpfHby;HL01XU>S_XPmfov@tDh^>v^wuqH3KrktPi4*GZ&
VyPaJ09GK`CJYD@<);T3K0RS|c?-c+5

literal 0
HcmV?d00001

diff --git a/src/assets/images/catalog/incognito.png b/src/assets/images/catalog/gift/incognito.png
similarity index 100%
rename from src/assets/images/catalog/incognito.png
rename to src/assets/images/catalog/gift/incognito.png
diff --git a/src/events/catalog/CatalogEvent.ts b/src/events/catalog/CatalogEvent.ts
index f6d6bf72..818289f0 100644
--- a/src/events/catalog/CatalogEvent.ts
+++ b/src/events/catalog/CatalogEvent.ts
@@ -10,5 +10,6 @@ export class CatalogEvent extends NitroEvent
     public static SOLD_OUT: string = 'CE_SOLD_OUT';
     public static APPROVE_NAME_RESULT: string = 'CE_APPROVE_NAME_RESULT';
     public static PURCHASE_APPROVED: string = 'CE_PURCHASE_APPROVED';
+    public static INIT_GIFT: string = 'CE_INIT_GIFT';
     public static CATALOG_RESET: string = 'CE_RESET';
 }
diff --git a/src/events/catalog/CatalogInitGiftEvent.ts b/src/events/catalog/CatalogInitGiftEvent.ts
new file mode 100644
index 00000000..fd9c9264
--- /dev/null
+++ b/src/events/catalog/CatalogInitGiftEvent.ts
@@ -0,0 +1,32 @@
+import { CatalogEvent } from './CatalogEvent';
+
+export class CatalogInitGiftEvent extends CatalogEvent
+{
+    private _pageId: number;
+    private _offerId: number;
+    private _extraData: string;
+
+    constructor(pageId: number, offerId: number, extraData: string)
+    {
+        super(CatalogEvent.INIT_GIFT);
+
+        this._pageId = pageId;
+        this._offerId = offerId;
+        this._extraData = extraData;
+    }
+
+    public get pageId(): number
+    {
+        return this._pageId;
+    }
+
+    public get offerId(): number
+    {
+        return this._offerId;
+    }
+
+    public get extraData(): string
+    {
+        return this._extraData;
+    }
+}
diff --git a/src/views/catalog/CatalogView.tsx b/src/views/catalog/CatalogView.tsx
index 95a2f1d9..d49b167e 100644
--- a/src/views/catalog/CatalogView.tsx
+++ b/src/views/catalog/CatalogView.tsx
@@ -10,6 +10,7 @@ import { CatalogMode, CatalogViewProps } from './CatalogView.types';
 import { BuildCatalogPageTree } from './common/CatalogUtilities';
 import { CatalogContextProvider } from './context/CatalogContext';
 import { CatalogReducer, initialCatalog } from './reducers/CatalogReducer';
+import { CatalogPageGiftView } from './views/gift/CatalogPageGiftView';
 import { ACTIVE_PAGES, CatalogNavigationView } from './views/navigation/CatalogNavigationView';
 import { CatalogPageView } from './views/page/CatalogPageView';
 
@@ -213,6 +214,7 @@ export const CatalogView: FC<CatalogViewProps> = props =>
                         </div>
                     </NitroCardContentView>
                 </NitroCardView> }
+                <CatalogPageGiftView />
         </CatalogContextProvider>
     );
 }
diff --git a/src/views/catalog/views/CatalogViews.scss b/src/views/catalog/views/CatalogViews.scss
index c8a97e7c..d5d8464b 100644
--- a/src/views/catalog/views/CatalogViews.scss
+++ b/src/views/catalog/views/CatalogViews.scss
@@ -2,3 +2,4 @@
 @import './navigation/CatalogNavigationView';
 @import './page/CatalogPageView';
 @import './search/CatalogSearchView';
+@import './gift/CatalogPageGiftView';
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.scss b/src/views/catalog/views/gift/CatalogPageGiftView.scss
new file mode 100644
index 00000000..a4a05f64
--- /dev/null
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.scss
@@ -0,0 +1,56 @@
+.nitro-catalog-gift {
+
+    .gift-tag {
+        width: 306px;
+        height: 159px;
+        background: url(../../../../assets/images/catalog/gift/gift_tag.png) center no-repeat;
+    }
+
+    .gift-face {
+        width: 65px;
+
+        .gift-incognito {
+            width: 37px;
+            height: 48px;
+            background: url(../../../../assets/images/catalog/gift/incognito.png) center no-repeat;
+        }
+
+        .gift-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 40px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                left: -25px;
+                top: -20px;
+            }
+        }
+    }
+
+    .gift-message {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        height: 90px;
+        min-height: 90px;
+        max-height: 90px;
+        border: none;
+        resize: none;
+        outline: none;
+        line-height: 17px;
+    }
+
+    .gift-preview {
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+    }
+
+    .gift-color {
+        width: 15px;
+        height: 15px;
+        border-radius: $border-radius;
+    }
+}
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.tsx b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
new file mode 100644
index 00000000..473e8785
--- /dev/null
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
@@ -0,0 +1,227 @@
+import { PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
+import classNames from 'classnames';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { GetSessionDataManager, LocalizeText } from '../../../../api';
+import { CatalogEvent } from '../../../../events';
+import { CatalogInitGiftEvent } from '../../../../events/catalog/CatalogInitGiftEvent';
+import { SendMessageHook, useUiEvent } from '../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
+import { FurniImageView } from '../../../shared/furni-image/FurniImageView';
+import { useCatalogContext } from '../../context/CatalogContext';
+
+export const CatalogPageGiftView: FC<{}> = props =>
+{
+    const { catalogState = null } = useCatalogContext();
+    const { giftConfiguration = null } = catalogState;
+
+    const [ isVisible, setIsVisible ] = useState<boolean>(false);
+    const [ pageId, setPageId ] = useState<number>(0);
+    const [ offerId, setOfferId ] = useState<number>(0);
+
+    const [ receiverName, setReceiverName ] = useState<string>('');
+    const [ showMyFace, setShowMyFace ] = useState<boolean>(true);
+    const [ message, setMessage ] = useState<string>('');
+    const [ colors, setColors ] = useState<{ id: number, color: string }[]>([]);
+    const [ selectedBoxIndex, setSelectedBoxIndex ] = useState<number>(0);
+    const [ selectedRibbonIndex, setSelectedRibbonIndex ] = useState<number>(0);
+    const [ selectedColorId, setSelectedColorId ] = useState<number>(0);
+    const [ maxBoxIndex, setMaxBoxIndex ] = useState<number>(0);
+    const [ maxRibbonIndex, setMaxRibbonIndex ] = useState<number>(0);
+
+    useEffect(() =>
+    {
+        if(!giftConfiguration) return;
+
+        setMaxBoxIndex(giftConfiguration.boxTypes.length - 1);
+        setMaxRibbonIndex(giftConfiguration.ribbonTypes.length - 1);
+
+        const newColors: { id: number, color: string }[] = [];
+
+        for(const colorId of giftConfiguration.stuffTypes)
+        {
+            const giftData = GetSessionDataManager().getFloorItemData(colorId);
+
+            if(!giftData) continue;
+
+            if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: `#${giftData.colors[0].toString(16)}` });
+        }
+
+        setSelectedColorId(newColors[0].id);
+        setColors(newColors);
+    }, [ giftConfiguration ]);
+
+    const close = useCallback(() =>
+    {
+        setIsVisible(false);
+        setPageId(0);
+        setOfferId(0);
+        setReceiverName('');
+        setShowMyFace(true);
+        setMessage('');
+        setSelectedBoxIndex(0);
+        setSelectedRibbonIndex(0);
+        setSelectedColorId(colors[0].id);
+    }, [ colors ]);
+
+    const onCatalogEvent = useCallback((event: CatalogEvent) =>
+    {
+        switch(event.type)
+        {
+            case CatalogEvent.PURCHASE_SUCCESS:
+                close();
+                return;
+            case CatalogEvent.INIT_GIFT:
+                const castedEvent = (event as CatalogInitGiftEvent);
+                close();
+
+                setPageId(castedEvent.pageId);
+                setOfferId(castedEvent.offerId);
+                setIsVisible(true);
+                return;
+        }
+    }, [ close ]);
+
+    useUiEvent(CatalogEvent.PURCHASE_SUCCESS, onCatalogEvent);
+    useUiEvent(CatalogEvent.INIT_GIFT, onCatalogEvent);
+
+    const isBoxDefault = useMemo(() =>
+    {
+        return giftConfiguration ? giftConfiguration.defaultStuffTypes.findIndex(s => s === giftConfiguration.boxTypes[selectedBoxIndex]) > -1 : true;
+    }, [ giftConfiguration, selectedBoxIndex ]);
+
+    const boxName = useMemo(() =>
+    {
+        return isBoxDefault ? 'catalog.gift_wrapping_new.box.default' : `catalog.gift_wrapping_new.box.${selectedBoxIndex}`;
+    }, [ isBoxDefault, selectedBoxIndex ]);
+
+    const ribbonName = useMemo(() =>
+    {
+        return `catalog.gift_wrapping_new.ribbon.${selectedRibbonIndex}`;
+    }, [ selectedRibbonIndex ]);
+
+    const priceText = useMemo(() =>
+    {
+        return isBoxDefault ? 'catalog.gift_wrapping_new.freeprice' : 'catalog.gift_wrapping_new.price';
+    }, [ isBoxDefault ]);
+
+    const extraData = useMemo(() =>
+    {
+        if(!giftConfiguration) return '';
+
+        return ((giftConfiguration.boxTypes[selectedBoxIndex] * 1000) + giftConfiguration.ribbonTypes[selectedRibbonIndex]).toString();
+    }, [ giftConfiguration, selectedBoxIndex, selectedRibbonIndex ]);
+
+    const isColorable = useMemo(() =>
+    {
+        if(!giftConfiguration) return false;
+        
+        const boxType = giftConfiguration.boxTypes[selectedBoxIndex];
+
+        return (boxType === 8 || (boxType >= 3 && boxType <= 6)) ? false : true;
+    }, [ giftConfiguration, selectedBoxIndex ]);
+
+    const handleAction = useCallback((action: string) =>
+    {
+        switch(action)
+        {
+            case 'prev_box':
+                setSelectedBoxIndex(value =>
+                    {
+                        return (value === 0 ? maxBoxIndex : value - 1);
+                    });
+                return;
+            case 'next_box':
+                setSelectedBoxIndex(value =>
+                    {
+                        return (value === maxBoxIndex ? 0 : value + 1);
+                    });
+                return;
+            case 'prev_ribbon':
+                setSelectedRibbonIndex(value =>
+                    {
+                        return (value === 0 ? maxRibbonIndex : value - 1);
+                    });
+                return;
+            case 'next_ribbon':
+                setSelectedRibbonIndex(value =>
+                    {
+                        return (value === maxRibbonIndex ? 0 : value + 1);
+                    });
+                return;
+            case 'buy':
+                SendMessageHook(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, !showMyFace));
+                return;
+        }
+    }, [ extraData, maxBoxIndex, maxRibbonIndex, message, offerId, pageId, receiverName, selectedBoxIndex, selectedColorId, selectedRibbonIndex, showMyFace ]);
+
+    if(!giftConfiguration || !giftConfiguration.isEnabled || !isVisible) return null;
+
+    return (
+        <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('catalog.gift_wrapping.title') } onCloseClick={ close } />
+            <NitroCardContentView className="text-black">
+                <div className="form-group">
+                    <label>{ LocalizeText('catalog.gift_wrapping.receiver') }</label>
+                    <input type="text" className="form-control form-control-sm" value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
+                </div>
+                <div className="gift-tag d-flex mt-2">
+                    <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
+                        { !showMyFace && <div className="gift-incognito"></div> }
+                        { showMyFace && <div className="gift-avatar">
+                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 2 } headOnly={ true } />
+                        </div> }
+                    </div>
+                    <div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
+                        <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => setMessage(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea>
+                        { showMyFace && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [GetSessionDataManager().userName]) }</div> }
+                    </div>
+                </div>
+                <div className="form-check mt-1">
+                    <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />
+                    <label className="form-check-label">{ LocalizeText('catalog.gift_wrapping.show_face.title') }</label>
+                </div>
+                <div className="d-flex gap-2 mt-1 align-items-center">
+                    <div className="gift-preview">
+                        { selectedColorId && <FurniImageView spriteId={ selectedColorId } type="s" extras={ extraData } /> }
+                    </div>
+                    <div className="d-flex flex-column gap-2">
+                        <div className="d-flex gap-2">
+                            <div className="btn-group">
+                                <button className="btn btn-primary" onClick={ () => handleAction('prev_box') }><i className="fas fa-chevron-left" /></button>
+                                <button className="btn btn-primary" onClick={ () => handleAction('next_box') }><i className="fas fa-chevron-right" /></button>
+                            </div>
+                            <div>
+                                <div className="fw-bold">{ LocalizeText(boxName) }</div>
+                                <div className="d-flex gap-1">{ LocalizeText(priceText, ['price'], [giftConfiguration.price.toString()]) }<CurrencyIcon type={ -1 } /></div>
+                            </div>
+                        </div>
+                        <div className="d-flex gap-2 align-items-center">
+                            <div className="btn-group">
+                                <button className="btn btn-primary" onClick={ () => handleAction('prev_ribbon') }><i className="fas fa-chevron-left" /></button>
+                                <button className="btn btn-primary" onClick={ () => handleAction('next_ribbon') }><i className="fas fa-chevron-right" /></button>
+                            </div>
+                            <div>
+                                <div className="fw-bold">{ LocalizeText(ribbonName) }</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-1">
+                    <div className="fw-bold">{ LocalizeText('catalog.gift_wrapping.pick_color') }</div>
+                    <div className="btn-group w-100">
+                        { colors.map(color =>
+                            {
+                                return <button key={ color.id } className={ 'btn btn-dark btn-sm' + classNames({ ' active': color.id === selectedColorId }) } disabled={ !isColorable } style={{ backgroundColor: color.color }} onClick={ () => setSelectedColorId(color.id) }></button>
+                            }) }
+                    </div>
+                </div>
+                <div className="d-flex justify-content-between align-items-center mt-2">
+                    <div className="text-decoration-underline cursor-pointer" onClick={ close }>{ LocalizeText('cancel') }</div>
+                    <button className="btn btn-success" onClick={ () => handleAction('buy') }>{ LocalizeText('catalog.gift_wrapping.give_gift') }</button>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};
diff --git a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
index a1f50704..acc9bafb 100644
--- a/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
+++ b/src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
@@ -36,7 +36,6 @@ export const CatalogPurchaseButtonView: FC<CatalogPurchaseButtonViewProps> = pro
 
     const purchase = useCallback(() =>
     {
-        console.log(pageId, offer.offerId, extra, quantity);
         SendMessageHook(new PurchaseFromCatalogComposer(pageId, offer.offerId, extra, quantity));
     }, [ pageId, offer, extra, quantity ]);
 
diff --git a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
index 21acd90d..34ae59d5 100644
--- a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
+++ b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
@@ -1,12 +1,19 @@
-import { FC } from 'react';
+import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../../../../api';
+import { CatalogInitGiftEvent } from '../../../../../../events/catalog/CatalogInitGiftEvent';
+import { dispatchUiEvent } from '../../../../../../hooks';
 import { CatalogPurchaseGiftButtonViewProps } from './CatalogPurchaseGiftButtonView.types';
 
 export const CatalogPurchaseGiftButtonView: FC<CatalogPurchaseGiftButtonViewProps> = props =>
 {
     const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, beforePurchase = null } = props;
     
+    const initGift = useCallback(() =>
+    {
+        dispatchUiEvent(new CatalogInitGiftEvent(pageId, offer.offerId, extra));
+    }, [ extra, offer, pageId ]);
+
     return (
-        <button type="button" className={ 'btn btn-secondary ' + className }>{ LocalizeText('catalog.purchase_confirmation.gift') }</button>
+        <button type="button" className={ 'btn btn-secondary ' + className } onClick={ initGift }>{ LocalizeText('catalog.purchase_confirmation.gift') }</button>
     );
 }
diff --git a/src/views/shared/currency-icon/CurrencyIcon.scss b/src/views/shared/currency-icon/CurrencyIcon.scss
index 4134543b..88462829 100644
--- a/src/views/shared/currency-icon/CurrencyIcon.scss
+++ b/src/views/shared/currency-icon/CurrencyIcon.scss
@@ -1,6 +1,6 @@
 .nitro-currency-icon {
     background-position: center;
     background-repeat: no-repeat;
-    width: 20px;
-    height: 20px;
+    width: 15px;
+    height: 15px;
 }
diff --git a/src/views/shared/furni-image/FurniImageView.tsx b/src/views/shared/furni-image/FurniImageView.tsx
index e73bfa84..63c006ca 100644
--- a/src/views/shared/furni-image/FurniImageView.tsx
+++ b/src/views/shared/furni-image/FurniImageView.tsx
@@ -41,7 +41,7 @@ export const FurniImageView: FC<FurniImageViewProps> = props =>
         if(imageResult)
         {
             const image = imageResult.getImage();
-
+            
             image.onload = () => setImageElement(image);
         }
     }, [ type, spriteId, direction, extras ]);

From 8fcbe144183533f8bc6b38b6a705820d8ddaf7fa Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 01:26:53 -0300
Subject: [PATCH 02/23] Gift updates

---
 .../images/{catalog => }/gift/gift_tag.png    | Bin
 .../images/{catalog => }/gift/incognito.png   | Bin
 src/layout/Layout.scss                        |   1 +
 .../gift-card/NitroLayoutGiftCardView.scss    |  41 ++++++++++++++++
 .../gift-card/NitroLayoutGiftCardView.tsx     |  25 ++++++++++
 .../NitroLayoutGiftCardView.types.ts          |   8 ++++
 src/layout/gift-card/index.ts                 |   2 +
 src/layout/index.ts                           |   1 +
 .../views/gift/CatalogPageGiftView.scss       |  44 +-----------------
 .../views/gift/CatalogPageGiftView.tsx        |  16 ++-----
 10 files changed, 82 insertions(+), 56 deletions(-)
 rename src/assets/images/{catalog => }/gift/gift_tag.png (100%)
 rename src/assets/images/{catalog => }/gift/incognito.png (100%)
 create mode 100644 src/layout/gift-card/NitroLayoutGiftCardView.scss
 create mode 100644 src/layout/gift-card/NitroLayoutGiftCardView.tsx
 create mode 100644 src/layout/gift-card/NitroLayoutGiftCardView.types.ts
 create mode 100644 src/layout/gift-card/index.ts

diff --git a/src/assets/images/catalog/gift/gift_tag.png b/src/assets/images/gift/gift_tag.png
similarity index 100%
rename from src/assets/images/catalog/gift/gift_tag.png
rename to src/assets/images/gift/gift_tag.png
diff --git a/src/assets/images/catalog/gift/incognito.png b/src/assets/images/gift/incognito.png
similarity index 100%
rename from src/assets/images/catalog/gift/incognito.png
rename to src/assets/images/gift/incognito.png
diff --git a/src/layout/Layout.scss b/src/layout/Layout.scss
index b8e28186..3b613a5f 100644
--- a/src/layout/Layout.scss
+++ b/src/layout/Layout.scss
@@ -29,3 +29,4 @@
 @import './mini-camera/NitroLayoutMiniCameraView';
 @import './notification-bubble/NotificationBubbleView';
 @import './trophy/NitroLayoutTrophyView';
+@import './gift-card/NitroLayoutGiftCardView';
diff --git a/src/layout/gift-card/NitroLayoutGiftCardView.scss b/src/layout/gift-card/NitroLayoutGiftCardView.scss
new file mode 100644
index 00000000..a2da0c9a
--- /dev/null
+++ b/src/layout/gift-card/NitroLayoutGiftCardView.scss
@@ -0,0 +1,41 @@
+.nitro-gift-card {
+    width: 306px;
+    height: 159px;
+    background: url(../../assets/images/gift/gift_tag.png) center no-repeat;
+
+    .gift-face {
+        width: 65px;
+
+        .gift-incognito {
+            width: 37px;
+            height: 48px;
+            background: url(../../assets/images/gift/incognito.png) center no-repeat;
+        }
+
+        .gift-avatar {
+            position: relative;
+            overflow: hidden;
+            width: 40px;
+            height: 50px;
+
+            .avatar-image {
+                position: absolute;
+                left: -25px;
+                top: -20px;
+            }
+        }
+    }
+
+    .gift-message {
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        height: 90px;
+        min-height: 90px;
+        max-height: 90px;
+        border: none;
+        resize: none;
+        outline: none;
+        line-height: 17px;
+    }
+}
diff --git a/src/layout/gift-card/NitroLayoutGiftCardView.tsx b/src/layout/gift-card/NitroLayoutGiftCardView.tsx
new file mode 100644
index 00000000..f9a1f3c6
--- /dev/null
+++ b/src/layout/gift-card/NitroLayoutGiftCardView.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../api';
+import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
+import { NitroLayoutGiftCardViewProps } from './NitroLayoutGiftCardView.types';
+
+export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =>
+{
+    const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
+    
+    return (
+        <div className="nitro-gift-card d-flex">
+            <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
+                { !userName && <div className="gift-incognito"></div> }
+                { figure && <div className="gift-avatar">
+                    <AvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
+                </div> }
+            </div>
+            <div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
+                { !editable && <div className="gift-message">{ message }</div> }
+                { editable && onChange && <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => onChange(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea> }
+                { userName && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [userName]) }</div> }
+            </div>
+        </div>
+    );
+};
diff --git a/src/layout/gift-card/NitroLayoutGiftCardView.types.ts b/src/layout/gift-card/NitroLayoutGiftCardView.types.ts
new file mode 100644
index 00000000..c530d65c
--- /dev/null
+++ b/src/layout/gift-card/NitroLayoutGiftCardView.types.ts
@@ -0,0 +1,8 @@
+export interface NitroLayoutGiftCardViewProps
+{
+    figure?:string;
+    userName?: string;
+    message?: string;
+    editable?: boolean;
+    onChange?: (value: string) => void;
+}
diff --git a/src/layout/gift-card/index.ts b/src/layout/gift-card/index.ts
new file mode 100644
index 00000000..73f7d035
--- /dev/null
+++ b/src/layout/gift-card/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutGiftCardView';
+export * from './NitroLayoutGiftCardView.types';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 0d843596..f02a74e0 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,5 +1,6 @@
 export * from './card';
 export * from './draggable-window';
+export * from './gift-card';
 export * from './loading-spinner';
 export * from './mini-camera';
 export * from './notification-bubble';
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.scss b/src/views/catalog/views/gift/CatalogPageGiftView.scss
index a4a05f64..9f43a086 100644
--- a/src/views/catalog/views/gift/CatalogPageGiftView.scss
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.scss
@@ -1,47 +1,5 @@
 .nitro-catalog-gift {
-
-    .gift-tag {
-        width: 306px;
-        height: 159px;
-        background: url(../../../../assets/images/catalog/gift/gift_tag.png) center no-repeat;
-    }
-
-    .gift-face {
-        width: 65px;
-
-        .gift-incognito {
-            width: 37px;
-            height: 48px;
-            background: url(../../../../assets/images/catalog/gift/incognito.png) center no-repeat;
-        }
-
-        .gift-avatar {
-            position: relative;
-            overflow: hidden;
-            width: 40px;
-            height: 50px;
-
-            .avatar-image {
-                position: absolute;
-                left: -25px;
-                top: -20px;
-            }
-        }
-    }
-
-    .gift-message {
-        width: 100%;
-        min-width: 100%;
-        max-width: 100%;
-        height: 90px;
-        min-height: 90px;
-        max-height: 90px;
-        border: none;
-        resize: none;
-        outline: none;
-        line-height: 17px;
-    }
-
+    
     .gift-preview {
         width: 80px;
         height: 80px;
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.tsx b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
index 473e8785..b795554d 100644
--- a/src/views/catalog/views/gift/CatalogPageGiftView.tsx
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
@@ -5,8 +5,7 @@ import { GetSessionDataManager, LocalizeText } from '../../../../api';
 import { CatalogEvent } from '../../../../events';
 import { CatalogInitGiftEvent } from '../../../../events/catalog/CatalogInitGiftEvent';
 import { SendMessageHook, useUiEvent } from '../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { FurniImageView } from '../../../shared/furni-image/FurniImageView';
 import { useCatalogContext } from '../../context/CatalogContext';
@@ -166,17 +165,8 @@ export const CatalogPageGiftView: FC<{}> = props =>
                     <label>{ LocalizeText('catalog.gift_wrapping.receiver') }</label>
                     <input type="text" className="form-control form-control-sm" value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
                 </div>
-                <div className="gift-tag d-flex mt-2">
-                    <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
-                        { !showMyFace && <div className="gift-incognito"></div> }
-                        { showMyFace && <div className="gift-avatar">
-                            <AvatarImageView figure={ GetSessionDataManager().figure } direction={ 2 } headOnly={ true } />
-                        </div> }
-                    </div>
-                    <div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">
-                        <textarea className="gift-message" maxLength={ 140 } value={ message } onChange={ (e) => setMessage(e.target.value) } placeholder={ LocalizeText('catalog.gift_wrapping_new.message_hint') }></textarea>
-                        { showMyFace && <div className="mt-auto text-end fst-italic">{ LocalizeText('catalog.gift_wrapping_new.message_from', ['name'], [GetSessionDataManager().userName]) }</div> }
-                    </div>
+                <div className="mt-2">
+                    <NitroLayoutGiftCardView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
                 </div>
                 <div className="form-check mt-1">
                     <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />

From eb0db7462caf4c1f9d5e29ddeccebba6e1b10d3b Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 01:29:49 -0300
Subject: [PATCH 03/23] Fix Gift Price alignment

---
 src/views/catalog/views/gift/CatalogPageGiftView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.tsx b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
index b795554d..769f81a1 100644
--- a/src/views/catalog/views/gift/CatalogPageGiftView.tsx
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
@@ -184,7 +184,7 @@ export const CatalogPageGiftView: FC<{}> = props =>
                             </div>
                             <div>
                                 <div className="fw-bold">{ LocalizeText(boxName) }</div>
-                                <div className="d-flex gap-1">{ LocalizeText(priceText, ['price'], [giftConfiguration.price.toString()]) }<CurrencyIcon type={ -1 } /></div>
+                                <div className="d-flex align-items-center gap-1">{ LocalizeText(priceText, ['price'], [giftConfiguration.price.toString()]) }<CurrencyIcon type={ -1 } /></div>
                             </div>
                         </div>
                         <div className="d-flex gap-2 align-items-center">

From b590174faf62849a50cd4faebc1131d5e8a04798 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 12 Sep 2021 00:50:05 -0400
Subject: [PATCH 04/23] FurnitureGiftOpeningView

---
 .../RoomWidgetUpdatePresentDataEvent.ts       | 116 +++++++++
 src/api/nitro/room/widgets/events/index.ts    |   1 +
 .../handlers/FurniturePresentWidgetHandler.ts | 223 ++++++++++++++++++
 .../handlers/RoomWidgetChatInputHandler.ts    |   7 +
 src/api/nitro/room/widgets/handlers/index.ts  |   1 +
 .../messages/RoomWidgetPresentOpenMessage.ts  |  20 ++
 src/api/nitro/room/widgets/messages/index.ts  |   1 +
 src/views/room/RoomView.tsx                   |  10 +-
 src/views/room/widgets/RoomWidgetsView.tsx    |  10 +-
 .../furniture/FurnitureWidgetsView.tsx        |   4 +-
 .../FurnitureGiftOpeningView.scss}            |   0
 .../gift-opening/FurnitureGiftOpeningView.tsx | 137 +++++++++++
 .../present/FurniturePresentView.tsx          |  18 --
 13 files changed, 521 insertions(+), 27 deletions(-)
 create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetUpdatePresentDataEvent.ts
 create mode 100644 src/api/nitro/room/widgets/handlers/FurniturePresentWidgetHandler.ts
 create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetPresentOpenMessage.ts
 rename src/views/room/widgets/furniture/{present/FurniturePresentView.scss => gift-opening/FurnitureGiftOpeningView.scss} (100%)
 create mode 100644 src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
 delete mode 100644 src/views/room/widgets/furniture/present/FurniturePresentView.tsx

diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdatePresentDataEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdatePresentDataEvent.ts
new file mode 100644
index 00000000..4a4567b3
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdatePresentDataEvent.ts
@@ -0,0 +1,116 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdatePresentDataEvent extends RoomWidgetUpdateEvent
+{
+    public static PACKAGEINFO: string = 'RWUPDE_PACKAGEINFO';
+    public static CONTENTS: string = 'RWUPDE_CONTENTS';
+    public static CONTENTS_CLUB: string = 'RWUPDE_CONTENTS_CLUB';
+    public static CONTENTS_FLOOR: string = 'RWUPDE_CONTENTS_FLOOR';
+    public static CONTENTS_LANDSCAPE: string = 'RWUPDE_CONTENTS_LANDSCAPE';
+    public static CONTENTS_WALLPAPER: string = 'RWUPDE_CONTENTS_WALLPAPER';
+    public static CONTENTS_IMAGE: string = 'RWUPDE_CONTENTS_IMAGE';
+
+    private _objectId: number = -1;
+    private _classId: number = 0;
+    private _itemType: string = '';
+    private _giftMessage: string = '';
+    private _imageUrl: string = null;
+    private _isController: boolean;
+    private _purchaserName: string;
+    private _purchaserFigure: string;
+    private _placedItemId: number = -1;
+    private _placedItemType: string = '';
+    private _placedInRoom: boolean;
+
+    constructor(type: string, objectId: number, giftMessage: string, isOwnerOfFurniture: boolean = false, imageUrl: string = null, purchaserName: string = null, purchaserFigure: string = null)
+    {
+        super(type);
+
+        this._objectId = objectId;
+        this._giftMessage = giftMessage;
+        this._imageUrl = imageUrl;
+        this._isController = isOwnerOfFurniture;
+        this._purchaserName = purchaserName;
+        this._purchaserFigure = purchaserFigure;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get classId(): number
+    {
+        return this._classId;
+    }
+
+    public set classId(classId: number)
+    {
+        this._classId = classId;
+    }
+
+    public get itemType(): string
+    {
+        return this._itemType;
+    }
+
+    public set itemType(type: string)
+    {
+        this._itemType = type;
+    }
+
+    public get giftMessage(): string
+    {
+        return this._giftMessage;
+    }
+
+    public get imageUrl(): string
+    {
+        return this._imageUrl;
+    }
+
+    public get isController(): boolean
+    {
+        return this._isController;
+    }
+
+    public get purchaserName(): string
+    {
+        return this._purchaserName;
+    }
+
+    public get purchaserFigure(): string
+    {
+        return this._purchaserFigure;
+    }
+
+    public get placedItemId(): number
+    {
+        return this._placedItemId;
+    }
+
+    public set placedItemId(itemId: number)
+    {
+        this._placedItemId = itemId;
+    }
+
+    public get placedInRoom(): boolean
+    {
+        return this._placedInRoom;
+    }
+
+    public set placedInRoom(flag: boolean)
+    {
+        this._placedInRoom = flag;
+    }
+
+    public get placedItemType(): string
+    {
+        return this._placedItemType;
+    }
+
+    public set placedItemType(type: string)
+    {
+        this._placedItemType = type;
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts
index cdb95870..4b4810d0 100644
--- a/src/api/nitro/room/widgets/events/index.ts
+++ b/src/api/nitro/room/widgets/events/index.ts
@@ -19,6 +19,7 @@ export * from './RoomWidgetUpdateInfostandFurniEvent';
 export * from './RoomWidgetUpdateInfostandPetEvent';
 export * from './RoomWidgetUpdateInfostandRentableBotEvent';
 export * from './RoomWidgetUpdateInfostandUserEvent';
+export * from './RoomWidgetUpdatePresentDataEvent';
 export * from './RoomWidgetUpdateRentableBotChatEvent';
 export * from './RoomWidgetUpdateRoomViewEvent';
 export * from './RoomWidgetUpdateSongEvent';
diff --git a/src/api/nitro/room/widgets/handlers/FurniturePresentWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurniturePresentWidgetHandler.ts
new file mode 100644
index 00000000..745ed868
--- /dev/null
+++ b/src/api/nitro/room/widgets/handlers/FurniturePresentWidgetHandler.ts
@@ -0,0 +1,223 @@
+import { IFurnitureData, IGetImageListener, NitroEvent, NitroRenderTexture, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomSessionPresentEvent, RoomWidgetEnum, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
+import { GetSessionDataManager, IsOwnerOfFurniture } from '../../..';
+import { GetRoomEngine, LocalizeText } from '../../../..';
+import { ProductTypeEnum } from '../../../../../views/catalog/common/ProductTypeEnum';
+import { RoomWidgetUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../events';
+import { RoomWidgetFurniToWidgetMessage, RoomWidgetPresentOpenMessage } from '../messages';
+import { RoomWidgetMessage } from '../messages/RoomWidgetMessage';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurniturePresentWidgetHandler extends RoomWidgetHandler implements IGetImageListener
+{
+    private static FLOOR: string       = 'floor';
+    private static WALLPAPER: string   = 'wallpaper';
+    private static LANDSCAPE: string   = 'landscape';
+    private static POSTER: string      = 'poster';
+
+    private _lastFurniId: number = -1;
+    private _name: string = null;
+
+    public processEvent(event: NitroEvent): void
+    {
+        switch(event.type)
+        {
+            case RoomSessionPresentEvent.RSPE_PRESENT_OPENED: {
+                const presentEvent = (event as RoomSessionPresentEvent);
+
+                let furniData: IFurnitureData = null;
+
+                if(presentEvent.itemType === ProductTypeEnum.FLOOR)
+                {
+                    furniData = GetSessionDataManager().getFloorItemData(presentEvent.classId);
+                }
+                else if(presentEvent.itemType === ProductTypeEnum.WALL)
+                {
+                    furniData = GetSessionDataManager().getWallItemData(presentEvent.classId);
+                }
+
+                let isOwnerOfFurni = false;
+
+                if(presentEvent.placedInRoom)
+                {
+                    const roomObject = GetRoomEngine().getRoomObject(this.container.roomSession.roomId, presentEvent.placedItemId, RoomObjectCategory.FLOOR);
+
+                    if(roomObject) isOwnerOfFurni = IsOwnerOfFurniture(roomObject);
+                }
+
+                let giftImage: string = null;
+                let dataUpdateEvent: RoomWidgetUpdatePresentDataEvent = null;
+
+                switch(presentEvent.itemType)
+                {
+                    case ProductTypeEnum.WALL: {
+                        if(furniData)
+                        {
+                            switch(furniData.className)
+                            {
+                                case FurniturePresentWidgetHandler.FLOOR:
+                                    dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS_FLOOR, 0, LocalizeText('inventory.furni.item.floor.name'), isOwnerOfFurni);
+                                    break;
+                                case FurniturePresentWidgetHandler.LANDSCAPE:
+                                    dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS_LANDSCAPE, 0, LocalizeText('inventory.furni.item.landscape.name'), isOwnerOfFurni);
+                                    break;
+                                case FurniturePresentWidgetHandler.WALLPAPER:
+                                    dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS_WALLPAPER, 0, LocalizeText('inventory.furni.item.wallpaper.name'), isOwnerOfFurni);
+                                    break;
+                                case FurniturePresentWidgetHandler.POSTER: {
+                                    const productCode = presentEvent.productCode;
+
+                                    let extras: string = null;
+
+                                    if(productCode.indexOf('poster') === 0) extras = productCode.replace('poster', '');
+
+                                    giftImage = GetRoomEngine().getFurnitureWallIconUrl(presentEvent.classId, extras);
+
+                                    const productData = GetSessionDataManager().getProductData(productCode);
+
+                                    if(productData) this._name = productData.name;
+                                    else if(furniData) this._name = furniData.name;
+
+                                    dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS, 0, this._name, isOwnerOfFurni, giftImage);
+
+                                    break;
+                                }
+                                default: {
+                                    giftImage = GetRoomEngine().getFurnitureWallIconUrl(presentEvent.classId);
+
+                                    if(furniData) this._name = furniData.name;
+                                    
+                                    dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS, 0, this._name, isOwnerOfFurni, giftImage);
+                                    break;
+                                }
+                            }
+                        }
+
+                        break;
+                    }
+                    case ProductTypeEnum.HABBO_CLUB:
+                        dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS_CLUB, 0, LocalizeText('widget.furni.present.hc'), false);
+                        break;
+                    default: {
+                        if(presentEvent.placedItemType === ProductTypeEnum.PET)
+                        {
+                            const petfigureString = presentEvent.petFigureString;
+
+                            if(petfigureString && petfigureString.length)
+                            {
+                                const petFigureData = new PetFigureData(petfigureString);
+
+                                const petImage = GetRoomEngine().getRoomObjectPetImage(petFigureData.typeId, petFigureData.paletteId, petFigureData.color, new Vector3d(90), 64, this, true, 0, petFigureData.customParts);
+
+                                if(petImage) giftImage = petImage.getImage().src;
+                            }
+                        }
+
+                        if(!giftImage)
+                        {
+                            const furniImage = GetRoomEngine().getFurnitureFloorImage(presentEvent.classId, new Vector3d(90), 64, this);
+
+                            if(furniImage) giftImage = furniImage.getImage().src;
+                        }
+
+                        const productData = GetSessionDataManager().getProductData(presentEvent.productCode);
+
+                        if(productData) this._name = productData.name;
+                        else this._name = furniData.name;
+
+                        if(giftImage) dataUpdateEvent = new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS, 0, this._name, isOwnerOfFurni, giftImage);
+
+                        break;
+                    }
+                }
+
+                if(dataUpdateEvent)
+                {
+                    dataUpdateEvent.classId = presentEvent.classId;
+                    dataUpdateEvent.itemType = presentEvent.itemType;
+                    dataUpdateEvent.placedItemId = presentEvent.placedItemId;
+                    dataUpdateEvent.placedInRoom = presentEvent.placedInRoom;
+                    dataUpdateEvent.placedItemType = presentEvent.placedItemType;
+
+                    this.container.eventDispatcher.dispatchEvent(dataUpdateEvent);
+                }
+
+                return;
+            }
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+            case RoomWidgetFurniToWidgetMessage.REQUEST_PRESENT: {
+                const widgetMessage = (message as RoomWidgetFurniToWidgetMessage);
+
+                const roomObject = GetRoomEngine().getRoomObject(widgetMessage.roomId, widgetMessage.objectId, widgetMessage.category);
+
+                if(!roomObject) return null;
+
+                this._lastFurniId = widgetMessage.objectId;
+
+                const giftMessage = (roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA) || '');
+                const purchaserName = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_PURCHASER_NAME);
+                const purchaserFigure = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_PURCHASER_FIGURE);
+                const typeId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_TYPE_ID);
+                const extras = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_EXTRAS);
+                const giftImage = GetRoomEngine().getFurnitureFloorImage(typeId, new Vector3d(180), 64, null, 0, extras);
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.PACKAGEINFO, widgetMessage.objectId, giftMessage, IsOwnerOfFurniture(roomObject), giftImage.getImage().src, purchaserName, purchaserFigure));
+
+                break;
+            }
+            case RoomWidgetPresentOpenMessage.OPEN_PRESENT: {
+                const openMessage = (message as RoomWidgetPresentOpenMessage);
+
+                if(openMessage.objectId !== this._lastFurniId) return null;
+
+                this.container.roomSession.openGift(openMessage.objectId);
+                
+                GetRoomEngine().changeObjectModelData(GetRoomEngine().activeRoomId, openMessage.objectId, RoomObjectCategory.FLOOR, RoomObjectVariable.FURNITURE_DISABLE_PICKING_ANIMATION, 1);
+
+                break;
+            }
+        }
+
+        return null;
+    }
+
+    public imageReady(id: number, texture: NitroRenderTexture, image: HTMLImageElement = null): void
+    {
+        let imageUrl: string = null;
+
+        if(image) imageUrl = image.src;
+        else if(texture) imageUrl = TextureUtils.generateImageUrl(texture);
+
+        this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdatePresentDataEvent(RoomWidgetUpdatePresentDataEvent.CONTENTS_IMAGE, 0, this._name, false, imageUrl));
+    }
+
+    public imageFailed(id: number): void
+    {
+        
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.FURNI_PRESENT_WIDGET;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [
+            RoomSessionPresentEvent.RSPE_PRESENT_OPENED
+        ];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetFurniToWidgetMessage.REQUEST_PRESENT,
+            RoomWidgetPresentOpenMessage.OPEN_PRESENT
+        ];
+    }
+}
diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts
index 8daf7bc0..81f5411d 100644
--- a/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts
@@ -1,4 +1,5 @@
 import { AvatarExpressionEnum, HabboClubLevelEnum, NitroEvent, RoomControllerLevel, RoomSessionChatEvent, RoomSettingsComposer, RoomWidgetEnum, RoomZoomEvent, TextureUtils } from '@nitrots/nitro-renderer';
+import { GetConfiguration, GetNitroInstance } from '../../..';
 import { GetRoomEngine, GetSessionDataManager } from '../../../..';
 import { SendMessageHook } from '../../../../../hooks/messages';
 import { RoomWidgetFloodControlEvent, RoomWidgetUpdateEvent } from '../events';
@@ -146,6 +147,12 @@ export class RoomWidgetChatInputHandler extends RoomWidgetHandler
                             }
 
                             return null;
+                        case ':togglefps': {
+                            if(GetNitroInstance().ticker.maxFPS > 0) GetNitroInstance().ticker.maxFPS = 0;
+                            else GetNitroInstance().ticker.maxFPS = GetConfiguration('system.animation.fps');
+
+                            return null;
+                        }
                         case ':client':
                         case ':nitro':
                         case ':billsonnn':
diff --git a/src/api/nitro/room/widgets/handlers/index.ts b/src/api/nitro/room/widgets/handlers/index.ts
index d787e68c..500115e7 100644
--- a/src/api/nitro/room/widgets/handlers/index.ts
+++ b/src/api/nitro/room/widgets/handlers/index.ts
@@ -3,6 +3,7 @@ export * from './FurniChooserWidgetHandler';
 export * from './FurnitureContextMenuWidgetHandler';
 export * from './FurnitureCustomStackHeightWidgetHandler';
 export * from './FurnitureExternalImageWidgetHandler';
+export * from './FurniturePresentWidgetHandler';
 export * from './IRoomWidgetHandler';
 export * from './IRoomWidgetHandlerManager';
 export * from './RoomWidgetAvatarInfoHandler';
diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetPresentOpenMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetPresentOpenMessage.ts
new file mode 100644
index 00000000..20f34f49
--- /dev/null
+++ b/src/api/nitro/room/widgets/messages/RoomWidgetPresentOpenMessage.ts
@@ -0,0 +1,20 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetPresentOpenMessage extends RoomWidgetMessage
+{
+    public static OPEN_PRESENT: string = 'RWPOM_OPEN_PRESENT';
+
+    private _objectId: number;
+
+    constructor(type: string, objectId: number)
+    {
+        super(type);
+
+        this._objectId = objectId;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+}
diff --git a/src/api/nitro/room/widgets/messages/index.ts b/src/api/nitro/room/widgets/messages/index.ts
index 732e5665..2cfcba12 100644
--- a/src/api/nitro/room/widgets/messages/index.ts
+++ b/src/api/nitro/room/widgets/messages/index.ts
@@ -9,6 +9,7 @@ export * from './RoomWidgetFurniActionMessage';
 export * from './RoomWidgetFurniToWidgetMessage';
 export * from './RoomWidgetLetUserInMessage';
 export * from './RoomWidgetMessage';
+export * from './RoomWidgetPresentOpenMessage';
 export * from './RoomWidgetRequestWidgetMessage';
 export * from './RoomWidgetRoomObjectMessage';
 export * from './RoomWidgetUseProductMessage';
diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx
index 882d7a76..c1e18a1f 100644
--- a/src/views/room/RoomView.tsx
+++ b/src/views/room/RoomView.tsx
@@ -1,6 +1,6 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureExternalImageWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
+import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
@@ -34,12 +34,14 @@ export const RoomView: FC<RoomViewProps> = props =>
         widgetHandlerManager.registerHandler(new RoomWidgetRoomToolsHandler());
         widgetHandlerManager.registerHandler(new RoomWidgetChatInputHandler());
         widgetHandlerManager.registerHandler(new RoomWidgetChatHandler());
+        widgetHandlerManager.registerHandler(new UserChooserWidgetHandler());
+        widgetHandlerManager.registerHandler(new DoorbellWidgetHandler());
+
+        widgetHandlerManager.registerHandler(new FurniChooserWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureCustomStackHeightWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
-        widgetHandlerManager.registerHandler(new FurniChooserWidgetHandler());
-        widgetHandlerManager.registerHandler(new UserChooserWidgetHandler());
-        widgetHandlerManager.registerHandler(new DoorbellWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
 
         setWidgetHandler(widgetHandlerManager);
 
diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx
index b1f3b102..2b5dee4e 100644
--- a/src/views/room/widgets/RoomWidgetsView.tsx
+++ b/src/views/room/widgets/RoomWidgetsView.tsx
@@ -1,6 +1,6 @@
 import { RoomEngineDimmerStateEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
+import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
 import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events';
 import { useRoomContext } from '../context/RoomContext';
 import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
@@ -118,6 +118,9 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
             case RoomEngineObjectEvent.MOUSE_LEAVE:
                 updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OUT, objectId, category, event.roomId);
                 break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_PRESENT:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_PRESENT, objectId, category, event.roomId));
+                break;
             case RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY:
             case RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM:
             case RoomEngineTriggerWidgetEvent.OPEN_WIDGET:
@@ -146,10 +149,11 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
     useRoomEngineEvent(RoomEngineObjectEvent.REQUEST_MANIPULATION, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineObjectEvent.MOUSE_ENTER, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineObjectEvent.MOUSE_LEAVE, onRoomEngineObjectEvent);
-    useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY, onRoomEngineObjectEvent);
-    useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.OPEN_WIDGET, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_WIDGET, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM, onRoomEngineObjectEvent);
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
     {
diff --git a/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx
index b37b0a8d..2d152199 100644
--- a/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx
+++ b/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx
@@ -7,10 +7,10 @@ import { FurnitureDimmerView } from './dimmer/FurnitureDimmerView';
 import { FurnitureExchangeCreditView } from './exchange-credit/FurnitureExchangeCreditView';
 import { FurnitureExternalImageView } from './external-image/FurnitureExternalImageView';
 import { FurnitureFriendFurniView } from './friend-furni/FurnitureFriendFurniView';
+import { FurnitureGiftOpeningView } from './gift-opening/FurnitureGiftOpeningView';
 import { FurnitureHighScoreView } from './high-score/FurnitureHighScoreView';
 import { FurnitureManipulationMenuView } from './manipulation-menu/FurnitureManipulationMenuView';
 import { FurnitureMannequinView } from './mannequin/FurnitureMannequinView';
-import { FurniturePresentView } from './present/FurniturePresentView';
 import { FurnitureStickieView } from './stickie/FurnitureStickieView';
 import { FurnitureTrophyView } from './trophy/FurnitureTrophyView';
 
@@ -23,11 +23,11 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureCustomStackHeightView />
             <FurnitureDimmerView />
             <FurnitureFriendFurniView />
+            <FurnitureGiftOpeningView />
             <FurnitureExchangeCreditView />
             <FurnitureHighScoreView />
             <FurnitureManipulationMenuView />
             <FurnitureMannequinView />
-            <FurniturePresentView />
             <FurnitureStickieView />
             <FurnitureTrophyView />
             <FurnitureBadgeDisplayView />
diff --git a/src/views/room/widgets/furniture/present/FurniturePresentView.scss b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
similarity index 100%
rename from src/views/room/widgets/furniture/present/FurniturePresentView.scss
rename to src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
new file mode 100644
index 00000000..8af7befb
--- /dev/null
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -0,0 +1,137 @@
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
+import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { useRoomContext } from '../../../context/RoomContext';
+
+export const FurnitureGiftOpeningView: FC<{}> = props =>
+{
+    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
+    const [ objectId, setObjectId ] = useState(-1);
+    const [ classId, setClassId ] = useState(-1);
+    const [ itemType, setItemType ] = useState<string>(null);
+    const [ text, setText ] = useState<string>(null);
+    const [ isOwnerOfFurniture, setIsOwnerOfFurniture ] = useState(false);
+    const [ senderName, setSenderName ] = useState<string>(null);
+    const [ senderFigure, setSenderFigure ] = useState<string>(null);
+    const [ placedItemId, setPlacedItemId ] = useState(-1);
+    const [ placedItemType, setPlacedItemType ] = useState<string>(null);
+    const [ placedInRoom, setPlacedInRoom ] = useState(false);
+    const [ imageUrl, setImageUrl ] = useState<string>(null);
+    const [ openRequested, setOpenRequested ] = useState(false);
+
+    const clearGift = useCallback(() =>
+    {
+        if(!openRequested) setObjectId(-1);
+
+        setText(null);
+        setIsOwnerOfFurniture(false);
+    }, [ openRequested ]);
+
+    const getGiftImageUrl = useCallback((name: string) =>
+    {
+        return '';
+    }, []);
+
+    const onRoomWidgetUpdatePresentDataEvent = useCallback((event: RoomWidgetUpdatePresentDataEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomWidgetUpdatePresentDataEvent.PACKAGEINFO: {
+                setOpenRequested(false);
+                setObjectId(event.objectId);
+                setText(event.giftMessage);
+                setIsOwnerOfFurniture(event.isController);
+                setSenderName(event.purchaserName);
+                setSenderFigure(event.purchaserFigure);
+                setImageUrl(event.imageUrl);
+                return;
+            }
+            case RoomWidgetUpdatePresentDataEvent.CONTENTS_FLOOR:
+            case RoomWidgetUpdatePresentDataEvent.CONTENTS_LANDSCAPE:
+            case RoomWidgetUpdatePresentDataEvent.CONTENTS_WALLPAPER: {
+                setObjectId(event.objectId);
+                setClassId(event.classId);
+                setItemType(event.itemType);
+                setText(event.giftMessage);
+                setIsOwnerOfFurniture(event.isController);
+                setPlacedItemId(event.placedItemId);
+                setPlacedItemType(event.placedItemType);
+                setPlacedInRoom(event.placedInRoom);
+
+                let imageType: string = null;
+
+                if(event.type === RoomWidgetUpdatePresentDataEvent.CONTENTS_FLOOR) imageType = 'packagecard_icon_floor';
+                else if(event.type === RoomWidgetUpdatePresentDataEvent.CONTENTS_LANDSCAPE) imageType = 'packagecard_icon_landscape';
+                else if(event.type === RoomWidgetUpdatePresentDataEvent.CONTENTS_WALLPAPER) imageType = 'packagecard_icon_wallpaper';
+
+                setImageUrl(getGiftImageUrl(imageType));
+                return;
+            }
+            case RoomWidgetUpdatePresentDataEvent.CONTENTS_CLUB: {
+                setObjectId(event.objectId);
+                setClassId(event.classId);
+                setItemType(event.itemType);
+                setText(event.giftMessage);
+                setIsOwnerOfFurniture(event.isController);
+                setImageUrl(getGiftImageUrl('packagecard_icon_hc'));
+                return;
+            }
+            case RoomWidgetUpdatePresentDataEvent.CONTENTS: {
+                if(!openRequested) return;
+
+                setObjectId(event.objectId);
+                setClassId(event.classId);
+                setItemType(event.itemType);
+                setText(event.giftMessage);
+                setIsOwnerOfFurniture(event.isController);
+                setPlacedItemId(event.placedItemId);
+                setPlacedItemType(event.placedItemType);
+                setPlacedInRoom(event.placedInRoom);
+
+                return;
+            }
+            case RoomWidgetUpdatePresentDataEvent.CONTENTS_IMAGE: {
+                if(!openRequested) return;
+
+                setImageUrl(event.imageUrl);
+            }
+        }
+    }, [ openRequested, getGiftImageUrl ]);
+
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.PACKAGEINFO, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.CONTENTS, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.CONTENTS_FLOOR, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.CONTENTS_LANDSCAPE, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.CONTENTS_WALLPAPER, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.CONTENTS_CLUB, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdatePresentDataEvent.CONTENTS_IMAGE, eventDispatcher, onRoomWidgetUpdatePresentDataEvent);
+
+    const onRoomWidgetRoomObjectUpdateEvent = useCallback((event: RoomWidgetRoomObjectUpdateEvent) =>
+    {
+        if(event.id === objectId) clearGift();
+
+        if(event.id === placedItemId)
+        {
+            if(placedInRoom) setPlacedInRoom(false);
+        }
+    }, [ objectId, placedItemId, placedInRoom, clearGift ]);
+
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomWidgetRoomObjectUpdateEvent);
+
+    const close = useCallback(() =>
+    {
+        setObjectId(-1);
+    }, []);
+
+    if(objectId === -1) return null;
+
+    return (
+        <NitroCardView className="nitro-exchange-credit" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
+            <NitroCardContentView>
+                plz
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/room/widgets/furniture/present/FurniturePresentView.tsx b/src/views/room/widgets/furniture/present/FurniturePresentView.tsx
deleted file mode 100644
index 3516185a..00000000
--- a/src/views/room/widgets/furniture/present/FurniturePresentView.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
-import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
-import { useRoomContext } from '../../../context/RoomContext';
-
-export const FurniturePresentView: FC<{}> = props =>
-{
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
-    
-    const onNitroEvent = (event: NitroEvent) =>
-    {
-        console.log(event);
-    };
-
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onNitroEvent);
-
-    return null;
-}

From c6b66944776d44a6f7e56ae903843a4dd9df9186 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 03:58:32 -0300
Subject: [PATCH 05/23] Gift Opening UI

---
 .../gift-card/NitroLayoutGiftCardView.tsx     |  2 +-
 .../views/gift/CatalogPageGiftView.tsx        |  2 +-
 .../widgets/furniture/FurnitureWidgets.scss   |  1 +
 .../FurnitureGiftOpeningView.scss             |  3 +
 .../gift-opening/FurnitureGiftOpeningView.tsx | 81 +++++++++++++++++--
 5 files changed, 81 insertions(+), 8 deletions(-)

diff --git a/src/layout/gift-card/NitroLayoutGiftCardView.tsx b/src/layout/gift-card/NitroLayoutGiftCardView.tsx
index f9a1f3c6..30a575b6 100644
--- a/src/layout/gift-card/NitroLayoutGiftCardView.tsx
+++ b/src/layout/gift-card/NitroLayoutGiftCardView.tsx
@@ -8,7 +8,7 @@ export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =
     const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
     
     return (
-        <div className="nitro-gift-card d-flex">
+        <div className="nitro-gift-card d-flex text-black">
             <div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
                 { !userName && <div className="gift-incognito"></div> }
                 { figure && <div className="gift-avatar">
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.tsx b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
index 769f81a1..3cf7f616 100644
--- a/src/views/catalog/views/gift/CatalogPageGiftView.tsx
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
@@ -150,7 +150,7 @@ export const CatalogPageGiftView: FC<{}> = props =>
                     });
                 return;
             case 'buy':
-                SendMessageHook(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, !showMyFace));
+                SendMessageHook(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, showMyFace));
                 return;
         }
     }, [ extraData, maxBoxIndex, maxRibbonIndex, message, offerId, pageId, receiverName, selectedBoxIndex, selectedColorId, selectedRibbonIndex, showMyFace ]);
diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss
index 688d0e6a..0fe453bc 100644
--- a/src/views/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/views/room/widgets/furniture/FurnitureWidgets.scss
@@ -6,3 +6,4 @@
 @import './mannequin/FurnitureMannequinView';
 @import './stickie/FurnitureStickieView';
 @import './high-score/FurnitureHighScoreView';
+@import './gift-opening/FurnitureGiftOpeningView';
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
index e69de29b..5c1630f7 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
@@ -0,0 +1,3 @@
+.nitro-gift-opening {
+    width: 340px;
+}
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
index 8af7befb..55c19667 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -1,9 +1,14 @@
-import { FC, useCallback, useState } from 'react';
-import { LocalizeText, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { CreateLinkEvent, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../../layout';
+import { ProductTypeEnum } from '../../../../catalog/common/ProductTypeEnum';
 import { useRoomContext } from '../../../context/RoomContext';
 
+const FLOOR: string = 'floor';
+const WALLPAPER: string = 'wallpaper';
+const LANDSCAPE: string = 'landscape';
+
 export const FurnitureGiftOpeningView: FC<{}> = props =>
 {
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
@@ -124,13 +129,77 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
         setObjectId(-1);
     }, []);
 
+    const isSpaces = useMemo(() =>
+    {
+        if(itemType !== ProductTypeEnum.WALL) return false;
+
+        const furniData = GetSessionDataManager().getWallItemData(classId);
+
+        if(!furniData) return false;
+
+        const className = furniData.className;
+
+        return (className === FLOOR || className === LANDSCAPE || className === WALLPAPER);
+    }, [ classId, itemType ]);
+
+    const productName = useMemo(() =>
+    {
+        if(objectId === -1) return '';
+
+        if(isSpaces)
+            return 'widget.furni.present.spaces.message_opened';
+        
+        return 'widget.furni.present.message_opened';
+    }, [ objectId, isSpaces ]);
+
+    const handleAction = useCallback((action: string) =>
+    {
+        switch(action)
+        {
+            case 'give_gift':
+                CreateLinkEvent('catalog/open');
+                return;
+            case 'open':
+                setOpenRequested(true);
+                widgetHandler.processWidgetMessage(new RoomWidgetPresentOpenMessage(RoomWidgetPresentOpenMessage.OPEN_PRESENT, objectId));
+                return;
+            case 'room':
+                return;
+            case 'inventory':
+                return;
+        }
+    }, [ widgetHandler, objectId ]);
+
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-exchange-credit" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
+        <NitroCardView className="nitro-gift-opening" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText(senderName ? 'widget.furni.present.window.title_from' : 'widget.furni.present.window.title', ['name'], [senderName]) } onCloseClick={ close } />
             <NitroCardContentView>
-                plz
+                { placedItemId === -1 && <>
+                <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
+                <div className="d-flex gap-2 mt-2">
+                    { senderName && <button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button> }
+                    <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('open') }>{ LocalizeText('widget.furni.present.open_gift') }</button>
+                </div>
+                </> }
+                { placedItemId !== -1 && <>
+                    <div className="d-flex gap-2 align-items-center">
+                        <div>
+                            <img src={ imageUrl } alt="" />
+                        </div>
+                        <div className="bg-muted rounded p-2 text-center text-black">
+                            { LocalizeText(productName, ['product'], [text]) }
+                        </div>
+                    </div>
+                    <div className="d-flex gap-2 mt-3">
+                        <button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('inventory') }>{ LocalizeText('widget.furni.present.put_in_inventory') }</button>
+                        <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('room') }>{ LocalizeText(placedItemType === FLOOR ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }</button>
+                    </div>
+                    { senderName &&  <>
+                        <button className="btn btn-primary w-100 text-nowrap mt-2" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button>
+                    </> }
+                </> }
             </NitroCardContentView>
         </NitroCardView>
     );

From abef91069534e79f5f420052ca16e352df99b7b3 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 03:59:41 -0300
Subject: [PATCH 06/23] Fix Gift Opening UI

---
 .../furniture/gift-opening/FurnitureGiftOpeningView.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
index 5c1630f7..9719609c 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
@@ -1,3 +1,3 @@
 .nitro-gift-opening {
-    width: 340px;
+    min-width: 340px;
 }

From 726d384dba3b72115c5996d03efcd2bfb346efbb Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 04:01:03 -0300
Subject: [PATCH 07/23] Fix Gift Opening UI 2

---
 .../furniture/gift-opening/FurnitureGiftOpeningView.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
index 55c19667..c510b881 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -180,7 +180,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
                 <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
                 <div className="d-flex gap-2 mt-2">
                     { senderName && <button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button> }
-                    <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('open') }>{ LocalizeText('widget.furni.present.open_gift') }</button>
+                    { isOwnerOfFurniture && <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('open') }>{ LocalizeText('widget.furni.present.open_gift') }</button> }
                 </div>
                 </> }
                 { placedItemId !== -1 && <>
@@ -194,7 +194,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
                     </div>
                     <div className="d-flex gap-2 mt-3">
                         <button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('inventory') }>{ LocalizeText('widget.furni.present.put_in_inventory') }</button>
-                        <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('room') }>{ LocalizeText(placedItemType === FLOOR ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }</button>
+                        <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('room') }>{ LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }</button>
                     </div>
                     { senderName &&  <>
                         <button className="btn btn-primary w-100 text-nowrap mt-2" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button>

From 5e7bd29e977fc24febbfcd9386dd3fecf45e5aae Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 04:01:51 -0300
Subject: [PATCH 08/23] Fix Gift Opening UI permission

---
 .../furniture/gift-opening/FurnitureGiftOpeningView.tsx     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
index c510b881..67c84ae7 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -178,10 +178,10 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
             <NitroCardContentView>
                 { placedItemId === -1 && <>
                 <NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
-                <div className="d-flex gap-2 mt-2">
+                { isOwnerOfFurniture && <div className="d-flex gap-2 mt-2">
                     { senderName && <button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button> }
-                    { isOwnerOfFurniture && <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('open') }>{ LocalizeText('widget.furni.present.open_gift') }</button> }
-                </div>
+                    <button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('open') }>{ LocalizeText('widget.furni.present.open_gift') }</button>
+                </div> }
                 </> }
                 { placedItemId !== -1 && <>
                     <div className="d-flex gap-2 align-items-center">

From cfebf3267954896af5df1ec83508d2cc06717947 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Sun, 12 Sep 2021 03:22:08 -0400
Subject: [PATCH 09/23] Fix gift place in inventory

---
 .../page/purchase/CatalogPurchaseView.tsx     |  2 +-
 .../CatalogPurchaseGiftButtonView.tsx         |  4 +--
 .../CatalogPurchaseGiftButtonView.types.ts    |  4 +--
 .../gift-opening/FurnitureGiftOpeningView.tsx | 29 ++++++++++++++++---
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx b/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
index 840f8ef2..794319aa 100644
--- a/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
+++ b/src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
@@ -71,7 +71,7 @@ export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
             </div>
             <div className="d-flex flex-column mt-1">
                 <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } disabled={ disabled } />
-                { offer.giftable && <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } /> }
+                { offer.giftable && <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } disabled={ disabled } /> }
             </div>
         </div>
     );
diff --git a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
index 34ae59d5..b55f1aba 100644
--- a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
+++ b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.tsx
@@ -6,7 +6,7 @@ import { CatalogPurchaseGiftButtonViewProps } from './CatalogPurchaseGiftButtonV
 
 export const CatalogPurchaseGiftButtonView: FC<CatalogPurchaseGiftButtonViewProps> = props =>
 {
-    const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, beforePurchase = null } = props;
+    const { className = '', offer = null, pageId = -1, extra = null, disabled = false } = props;
     
     const initGift = useCallback(() =>
     {
@@ -14,6 +14,6 @@ export const CatalogPurchaseGiftButtonView: FC<CatalogPurchaseGiftButtonViewProp
     }, [ extra, offer, pageId ]);
 
     return (
-        <button type="button" className={ 'btn btn-secondary ' + className } onClick={ initGift }>{ LocalizeText('catalog.purchase_confirmation.gift') }</button>
+        <button type="button" className={ 'btn btn-secondary ' + className } onClick={ initGift } disabled={ disabled }>{ LocalizeText('catalog.purchase_confirmation.gift') }</button>
     );
 }
diff --git a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts
index 53d4daf5..e3c3a580 100644
--- a/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts
+++ b/src/views/catalog/views/page/purchase/purchase-gift-button/CatalogPurchaseGiftButtonView.types.ts
@@ -6,7 +6,5 @@ export interface CatalogPurchaseGiftButtonViewProps
     offer: CatalogPageMessageOfferData;
     pageId: number;
     extra?: string;
-    quantity?: number;
-    isPurchaseAllowed?: boolean;
-    beforePurchase?: () => void;
+    disabled?: boolean;
 }
diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
index 67c84ae7..f0aabaf5 100644
--- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
+++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
@@ -1,5 +1,6 @@
+import { RoomObjectCategory, RoomObjectOperationType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
-import { CreateLinkEvent, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
+import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../../layout';
 import { ProductTypeEnum } from '../../../../catalog/common/ProductTypeEnum';
@@ -11,7 +12,6 @@ const LANDSCAPE: string = 'landscape';
 
 export const FurnitureGiftOpeningView: FC<{}> = props =>
 {
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ objectId, setObjectId ] = useState(-1);
     const [ classId, setClassId ] = useState(-1);
     const [ itemType, setItemType ] = useState<string>(null);
@@ -24,6 +24,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     const [ placedInRoom, setPlacedInRoom ] = useState(false);
     const [ imageUrl, setImageUrl ] = useState<string>(null);
     const [ openRequested, setOpenRequested ] = useState(false);
+    const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
 
     const clearGift = useCallback(() =>
     {
@@ -127,7 +128,12 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
     const close = useCallback(() =>
     {
         setObjectId(-1);
-    }, []);
+        setOpenRequested(false);
+        setPlacedItemId(-1);
+        setPlacedInRoom(false);
+        setText(null);
+        setIsOwnerOfFurniture(false);
+    }, [ clearGift ]);
 
     const isSpaces = useMemo(() =>
     {
@@ -166,9 +172,24 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
             case 'room':
                 return;
             case 'inventory':
+                if((placedItemId > 0) && placedInRoom)
+                {
+                    if(placedItemType === ProductTypeEnum.PET)
+                    {
+                        roomSession.pickupPet(placedItemId);
+                    }
+                    else
+                    {
+                        const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, placedItemId, RoomObjectCategory.FLOOR);
+
+                        if(roomObject) GetRoomEngine().processRoomObjectOperation(roomObject.id, RoomObjectCategory.FLOOR, RoomObjectOperationType.OBJECT_PICKUP);
+                    }
+                }
+
+                close();
                 return;
         }
-    }, [ widgetHandler, objectId ]);
+    }, [ roomSession, widgetHandler, objectId, placedInRoom, placedItemId, placedItemType, close ]);
 
     if(objectId === -1) return null;
 

From 5892902ee22278c1f83667c6e07b0129c3d29b6c Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Sun, 12 Sep 2021 16:00:34 -0300
Subject: [PATCH 10/23] Update Catalog HC Purchase layout

---
 src/assets/images/catalog/hc_banner_big.png   | Bin 0 -> 3539 bytes
 .../vip-buy/CatalogLayoutVipBuyView.scss      |   6 +
 .../vip-buy/CatalogLayoutVipBuyView.tsx       | 182 +++++++++---------
 3 files changed, 95 insertions(+), 93 deletions(-)
 create mode 100644 src/assets/images/catalog/hc_banner_big.png

diff --git a/src/assets/images/catalog/hc_banner_big.png b/src/assets/images/catalog/hc_banner_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b2c4ec39eee0ec02046d14e8de3974821068e67
GIT binary patch
literal 3539
zcmV;^4J`7BP)<h;3K|Lk000e1NJLTq002q=003DC1^@s6nUb<Z00009a7bBm000id
z000id0mpBsWB>pSg-Jv~RCwC$TuYK0xe*0+k|u(prLZTYBlIlY5zQ0Wi_t~wdysc1
z#>`q9IhywvZai~~syj4Ippd}J52~t*RXwc;Qvo$Uh2KN|kU*xpxOxAsukhbxZvB`3
zck6g(cY104wR|67_2ccwJa@eFIz8<!`E^6*FA5U99(S|G`+uO;04lTGBLLO8R|{4V
z5uO1xM`S2rC(9^M3(BgYzHb7ma{?%D&TVM^r9m<A(D>7D<>B0Ec%3v*b4i*_ssjqR
zkxH|OuqY~yTg>h33#jlsJd++mR-%W`eaYz3%A{4v&vo;GVyh=!w@_ECL*r~6TTq&3
zZu>gNKoq!0`BmoMQx2yPpD8N-*0{^zhaVC!sWSw$>sRmDe2<INcm-7c?(F8ZeL|o>
zY^3-5FsEYz=?oyD@JFB+MYVwJ+4bc*;QhOI1)S4PvB~A}Vcuj2kh7RjqUfi_F&20}
zMY$|W@*=194**n8QHD%YK*@<Gii*D-Q==Iau~L!srUOMJAHl!A)F9zKQG4kBIc%s{
zF9Y>ZC@S=iKy{9DO6vtsp~36Q1yT$HiVd8LjLH;6pJ7#|3UelJs9w|mE%L!}*++6R
zd_MX-i7B$nmQnrK37EL}4alf-{~h5F$Cu`n8w@~D#h*Xj_3r_w@Htah7yx6HIz=%>
z(0Z)|8V(vOP3q(5bzRt!)cR$zv@2sLpyJ{;o&gu;9{S5*NuV+%T^|Y$|NQx`{~S6a
z)(Zn~(!fzuoV}tbMm@;$Ev}&F@3CE2>C76~r_j>M?n(0^mSTN0K7&D2Lm-8DNA4oR
zA)vl~{n~eMghrZvrE}*AtS_H`D!;?ZNT9MN1?_>rPzi$yCHI3s9ZUc5xv<g}z^JXy
zp4&zQ6pD<r(4oz!C=w^c=NnfD;n>eJd>=6i{}EWS;BQd~rVdE0_F9os6w{)u4Gc~E
z_YWT~e|-FS`QyW1(m;W=(n5vb!ZYDntQ!iWvP89HB<BTYvbLubq8b|WBn&RDfHhPQ
z@xCKpY>?}BPiYX@9s#x?lBNkqfUW?1+q{o;zP;bX_Tvh-MJ|zM{Punu7l-Qh^*>%I
zyii&$fz8e&e~5+q_MT|$f?CE3+w0XHz~2Zg1d2))_5c#CegGv*E<6(^9pyoyjsVh^
z#D1vRXd)ylLpxv6^ZV2efktf=d&n1I4PzulMT=0Ir-i{}0}jE8vI>MEX$}(9#Acat
z5;$R!1QM|d4P5TA=yRZg01&Zq5AHUDg_IWCJr^sxr*_ZeFUdp+#G-B%Mp+2dxd(}4
z2FV`+huDWGDo!ZbI1#AO&S|G@sH8+Pu-DHdBO^$OZK>U`D2x?5&~(Ql_nr&Ve8(M7
zl9WjV5>0|l3S<%q<UO!q1O`f=T%w@(KG}B){A;`PeWWZ9^gURdvR=-^$pkmBTa-s1
z6F8d!76WZlKm(Z-J~OQdl#{^`pd&lu??GwwY=|PkWo`XpKxM1FEp`pbBn659LsA6$
z3lw({pmH!aielySVZkJ2MFF4ojEe$Q^ZE@Hn$(=SdqyGKS#8WMHv`3dRBDIMebQyJ
z+Y779cH~aCm+DFZ&HL9LP&S^<XqS!A@pihhb65r_aGmM_gV!@{P>K9`T>((%c-^xw
zF2M-pZFoLO3m9`jyy?Qhz83*1@2M<T2-!R|*~C6<3jubKa<@WVsm)Xyt*@8P*?n}*
z@H)8MH=YYD1Jt#X=I`!uyr;kJ(%fqY7h@Z&d*9ay^{EZ2OM~V1(Ut>sofP#S>!<d@
zcU0&zjg9)@&-C>(buC6wr{b#k{hxn}<-h;<Yy2B03%;HzMP0$5x>Sz$8YpQ3NU&ua
zG>+PL*6(rL_l5eFqo~uA$vQRJQkR2F6Nsw{zInL;MzF_#8UoDvtx&U@d~h+HqOOg~
zPOX(;lN<%v2^qCzc9BJuVGKhcjFnI)1Jy0edL$#{z&KTSO;Ldw&I4@QdL}2h@win$
zjj`Go%kjP)<Ai0*gS1ttlW+m*Fp+I6pqRy;!G2(EAPCINkjGL&1J*>wa;yhhX9`e!
zk~Ztr$X{+#N*k^|S$PmEZ7XAui`MgNm<O7DaIn<j!IDuX+X59J$cm!0j8cna*-x#n
zE^-zb-5L~CW1r5RtfWR1!Wk%0_h9VxaG|gb%NA1mw~E+6wqICAxw_^OgOyrO$|yF`
z)@eJcW|<3xV6*+kPy~`2ek{U#S<C!kn4*OCkb+p&wSeM#y^T@`mU(bAb_IKI<<!JR
zt?$)XPYxE3i8SdCu`N)9@H@#vOtZe+D^@^eLcViqpSg<GGpV8#N9=fapsm%lO$(EK
zlt9+(V{LzIZRpnV9@GrJ!g>Rmr!63x!g$PkaI$4&Q`svrwjEl)HT+RT`ciW-TS#8Q
z5PqX6tXHQf&Ax1rgd*9`@USlGX3<*DGgk(>KhWi2Z6lb$s3>YPYP1$Rj2pWL;ZsLn
z{V#9du%j}nH|6N+SwKk_#*j;6Y`<02S}@rmgV&<Sy*QOQh=Yw^-o9l(5z8(Hlw}zY
zfi?t?k};<DU|j1BZOAoP{rA7VL!hQ>yqoQ)DO6Mg(AxgUqpl&=FF@5Sd;K@CUc3$<
zSZ^Vq>bB4vM;fz^t9I0O)M#u#MrjYJ4OWy<pET<&1{9LMWI4Tiw@yd=Bo8Oa5<0}>
z6z!_4%QxiPKU?dKxLG=9pQm+W{wQy1y#w0@X=P#^PAI3JJZ7_OyhYFTDh4N$6SYH5
zqpqYV=|*OUs1+G$xoNEJ4?BdFXMk`+Z&iO(GkLE!(dj2HURVpIPJo6ia{@V^D~iL<
zcBOMY%iz@RT*K*Rc}ER{(X`A@702Cu%?-WPrbP>eaWaNi^d4woe#^NYclrsfRdJQr
zG74Ng;!fzOB3SeQRLBVKrS!%&VpBc53}%6%C<GbL^|IEhxpTF_I_Bmv-N=jIJuu{q
zC6Etdl9p9nJd{qK!YEfsO_*C3KMbvAaDxT%dXBq+Q<yPhvE~ZK3#`g#E?hN?bye}|
zw=vJdf=B9Z(viBnvQt+C6Fr=#n&Yl^v&ET|Rs(AJ1JJ7G(svK)$KgLtI6U17%Uqu}
zQ{UE27Se2Zb7hLJe>FD?yL+JAv75`J!_&@HPEqWuLt~zbA=l5?QQ6{qJtZf^ev7O2
zhhf&U6alz{$K>2|FKd(&9KVKnFwGWvu8e9-4<)}1JZ9a`y{K_q$Bx=fIM?GF(<zt0
zEb~BKjkb)&Dbz!hQ}dT``)`FKb@P6th?U#F<J%7wFD&gHQJ2NID2np+3$I=6#&G3(
z821X-ekwOd#QB(Zkqm%LmrlivyHNi>=shq3!v{?R^X70JtmS}eE6zCtF8OtsWuC+S
zUHu9(oUNIbxfx4r+==RpyHSJp&;7FJdVfab0?MfGB649U610TNrVz4g`S;tmcFYO{
z2<_$XiOuX7nvFWAvjdX0>iJC3q)?g?=x9ZLt^^d1s*GEV6gn2b+M7{NWpWhailE5I
zDvBOOFmmXcxb=d5D8}|=$5B9a<EkODi$_-}u$mHv9|bRgC8MU&r24?aUN(fIqZ|>6
z5fVu`P#|LrQTue4zYq0P6qei(044R2^`24Fi-e(3SpQQaLg0b2{`KaKx#BrOJjM4#
z@IK$EF#V@<32)0_rfAL_E-NBS5hO}%kwbYQaQtO5lBKv@icF`$U_uzAEOxq*1btyE
z0Pk4tT=s30Fj=C=@IEY(WIO7I`laMIIi(2Xa-hCuXC#{%`58L<LQ(3CD*?`pkv%6(
zHq<S$YpY^{3kY`^3<`}MiX^3W<G4;cmRur7s5j+17Gd8!FV)hZDWL4B)R6)tX}*$?
z!WTalB#@w$FO;^mK>(SC;0AWa`q)Pt$7z=VKx0{EEh-fJV5UhKPTh7a<cUGbm~w<x
z<Eb&SR6tgW+#U>6r3y*UOYnyN@`*d0P6ULtnQ|lo+0QelBzWWt{M0}Me&a>zwvg?I
zlGr4w$&_;vNo+7W9pj2C={vHZmxC60R%qf+XPv_ZpJDY9I8RM2P0CJ1(W6;IoRO2*
zB-u&w&CK=_K%(q7q<-^&Fe;s;MY1!JNxLhvBT-^9P;v5B!Q3lZ=0$=1!15SKyGZAc
z@+>P6wVSj3q&^Oyl_`&u0*a`H0AuXZq(%`axj7bTkt{=%W%X%b;t0-}Q&j<Im$j^w
zWJaY3!TeDob(_o|h5ciqEs+h#iHw2b-atwKQ%~LIO`yiC`&-IT4wWiUIQFzzKEO6i
zWla=8MJdOfNQBk$^pcsMA(f=^4UMF3o03&$PMMavjZ;3o&nCp|^pbE)9?6tsR96!J
zDgV$jk^!y-PMxB7E<XCaha7iB<~o)^4KAMupgQi}9ZXm%5`n&^e8DOYCr~~*?DG82
zhUXS3Dyvc>VJTiOW<aSFxc+ql^=PHQePAhY^W4r}C5|Ac-e~GJDLCs%mFMru*ZNn+
z>x}Hv-kjUbsoPk`NWLJ`UN2Df?9({6n^L#QiL=CjBJulc0!fXx(}~}$xh;~qjRUp&
zzJO}Sfm+YQ37J)2BS<Dy-5?@nb&SGqPQJL825O1%-qiVP2WiRi{tv1{pX8aMGoAnd
N002ovPDHLkV1oSFwh;gT

literal 0
HcmV?d00001

diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss
index 5aee7e7f..e2684851 100644
--- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss
+++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.scss
@@ -6,5 +6,11 @@
             height: 80px !important;
             max-height: 80px !important;
         }
+
+        .hc-banner {
+            width: 68px;
+            height: 40px;
+            background: url(../../../../../../assets/images/catalog/hc_big.png) center no-repeat;
+        }
     }
 }
diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
index 04424e33..c53ac536 100644
--- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
+++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
@@ -1,22 +1,43 @@
 import { ClubOfferData, GetClubOffersMessageComposer, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Button } from 'react-bootstrap';
 import { LocalizeText } from '../../../../../../api';
+import { CatalogEvent } from '../../../../../../events/catalog/CatalogEvent';
+import { useUiEvent } from '../../../../../../hooks';
 import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
 import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
+import { LoadingSpinnerView } from '../../../../../../layout/loading-spinner/LoadingSpinnerView';
 import { GetCurrencyAmount } from '../../../../../purse/common/CurrencyHelper';
 import { GLOBAL_PURSE } from '../../../../../purse/PurseView';
 import { CurrencyIcon } from '../../../../../shared/currency-icon/CurrencyIcon';
 import { GetCatalogPageImage } from '../../../../common/CatalogUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
+import { CatalogPurchaseState } from '../../purchase/purchase-button/CatalogPurchaseButtonView.types';
 import { CatalogLayoutVipBuyViewProps } from './CatalogLayoutVipBuyView.types';
 
 export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =>
 {
     const { catalogState = null } = useCatalogContext();
     const { pageParser = null, clubOffers = null, subscriptionInfo = null } = catalogState;
+
     const [ pendingOffer, setPendingOffer ] = useState<ClubOfferData>(null);
+    const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
+
+    const onCatalogEvent = useCallback((event: CatalogEvent) =>
+    {
+        switch(event.type)
+        {
+            case CatalogEvent.PURCHASE_SUCCESS:
+                setPurchaseState(CatalogPurchaseState.NONE);
+                return;
+            case CatalogEvent.PURCHASE_FAILED:
+                setPurchaseState(CatalogPurchaseState.FAILED);
+                return;
+        }
+    }, []);
+
+    useUiEvent(CatalogEvent.PURCHASE_SUCCESS, onCatalogEvent);
+    useUiEvent(CatalogEvent.PURCHASE_FAILED, onCatalogEvent);
 
     const getOfferText = useCallback((offer: ClubOfferData) =>
     {
@@ -77,130 +98,105 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
     {
         if(!pendingOffer) return;
 
+        setPurchaseState(CatalogPurchaseState.PURCHASE);
         SendMessageHook(new PurchaseFromCatalogComposer(pageParser.pageId, pendingOffer.offerId, null, 1));
     }, [ pendingOffer, pageParser ]);
 
     useEffect(() =>
     {
-        if(clubOffers === null)
-        {
-            SendMessageHook(new GetClubOffersMessageComposer(1));
-
-            return;
-        }
+        if(clubOffers === null) SendMessageHook(new GetClubOffersMessageComposer(1));
     }, [ clubOffers ]);
 
-    const getPurchaseButton = (offer: ClubOfferData) =>
+    const setOffer = useCallback((offer: ClubOfferData) =>
     {
-        if(!offer) return null;
+        setPurchaseState(CatalogPurchaseState.NONE);
+        setPendingOffer(offer);
+    }, []);
 
-        if(offer.priceCredits > GetCurrencyAmount(-1))
+    const getPurchaseButton = useCallback(() =>
+    {
+        if(!pendingOffer) return null;
+
+        if(pendingOffer.priceCredits > GetCurrencyAmount(-1))
         {
-            return <Button variant="danger" size="sm">{ LocalizeText('catalog.alert.notenough.title') }</Button>;
+            return <button className="btn btn-danger btn-sm w-100">{ LocalizeText('catalog.alert.notenough.title') }</button>;
         }
 
-        if(offer.priceActivityPoints > GetCurrencyAmount(offer.priceActivityPointsType))
+        if(pendingOffer.priceActivityPoints > GetCurrencyAmount(pendingOffer.priceActivityPointsType))
         {
-            return <Button variant="danger" size="sm">{ LocalizeText('catalog.alert.notenough.activitypoints.title.' + offer.priceActivityPointsType) }</Button>;
+            return <button className="btn btn-danger btn-sm w-100">{ LocalizeText('catalog.alert.notenough.activitypoints.title.' + pendingOffer.priceActivityPointsType) }</button>;
         }
 
-        return <Button variant="primary" size="sm" onClick={ event => setPendingOffer(offer) }>{ LocalizeText('buy') }</Button>;
-    }
-
-    console.log(pendingOffer)
+        switch(purchaseState)
+        {
+            case CatalogPurchaseState.CONFIRM:
+                return <button type="button" className="btn btn-warning w-100" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</button>;
+            case CatalogPurchaseState.PURCHASE:
+                return <button type="button" className="btn btn-primary w-100" disabled><LoadingSpinnerView /></button>;
+            case CatalogPurchaseState.FAILED:
+                return <button type="button" className="btn btn-danger w-100" disabled>{ LocalizeText('generic.failed') }</button>;
+            case CatalogPurchaseState.NONE:
+            default:
+                return <button type="button" className="btn btn-success w-100" onClick={ () => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</button>;
+        }
+    }, [ pendingOffer, purchaseState, purchaseSubscription ]);
 
     return (
         <>
             <div className="row h-100 nitro-catalog-layout-vip-buy">
-                <div className="col-7 h-100">
+                <div className="col-6 h-100">
                     <NitroCardGridView columns={ 1 } className="vip-buy-grid">
                         { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                             {
                                 return (
-                                    <NitroCardGridItemView key={ index } className="justify-content-between p-1">
-                                        { (pendingOffer === offer) &&
-                                            <>
-                                                <div className="d-flex flex-column text-black text-small m-1">
-                                                    <div className="d-flex align-items-center">
-                                                        <i className="icon icon-catalogue-hc_small me-1"></i>
-                                                        { getPurchaseHeader() }
-                                                    </div>
-                                                    <div className="text-black text-small">{ getPurchaseValidUntil() }</div>
-                                                    <div className="d-flex">
-                                                        { (offer.priceCredits > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceCredits }</span>
-                                                                <CurrencyIcon type={ -1 } />
-                                                            </div> }
-                                                        { (offer.priceActivityPoints > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceActivityPoints }</span>
-                                                                <CurrencyIcon type={ offer.priceActivityPointsType } />
-                                                            </div> }
-                                                    </div>
+                                    <NitroCardGridItemView key={ index } className="justify-content-between py-1 px-2 text-black" itemActive={ pendingOffer === offer } onClick={ () => setOffer(offer) }>
+                                        <div className="hc-banner"></div>
+                                            <div className="fw-bold">
+                                                <div className="text-end">{ getOfferText(offer) }</div>
+                                                <div className="d-flex gap-2 justify-content-end">
+                                                    { (offer.priceCredits > 0) &&
+                                                        <div className="d-flex align-items-center justify-content-end gap-1">
+                                                            <span className="text-black">{ offer.priceCredits }</span>
+                                                            <CurrencyIcon type={ -1 } />
+                                                        </div> }
+                                                    { (offer.priceActivityPoints > 0) &&
+                                                        <div className="d-flex align-items-center justify-content-end gap-1">
+                                                            <span className="text-black">{ offer.priceActivityPoints }</span>
+                                                            <CurrencyIcon type={ offer.priceActivityPointsType } />
+                                                        </div> }
                                                 </div>
-                                                <Button variant="primary" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>
-                                            </> }
-                                        { (pendingOffer !== offer) &&
-                                            <>
-                                                <div className="d-flex flex-column text-black text-small m-1">
-                                                    <div className="d-flex align-items-center">
-                                                        <i className="icon icon-catalogue-hc_small me-1"></i>
-                                                        { getOfferText(offer) }
-                                                    </div>
-                                                    <div className="d-flex">
-                                                        { (offer.priceCredits > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceCredits }</span>
-                                                                <CurrencyIcon type={ -1 } />
-                                                            </div> }
-                                                        { (offer.priceActivityPoints > 0) &&
-                                                            <div className="d-flex align-items-center justify-content-end">
-                                                                <span className="text-black">{ offer.priceActivityPoints }</span>
-                                                                <CurrencyIcon type={ offer.priceActivityPointsType } />
-                                                            </div> }
-                                                    </div>
-                                                </div>
-                                                { getPurchaseButton(offer) }
-                                            </> }
+                                            </div>
                                     </NitroCardGridItemView>
                                 );
                             }) }
                     </NitroCardGridView>
-                    {/* <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
-                        { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
-                            {
-                                return (
-                                    <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
-                                        <div className="position-relative border border-2 rounded catalog-offer-item">
-                                            <div className="d-flex align-items-center text-black text-small m-1">
-                                                <i className="icon icon-catalogue-hc_small me-1"></i>
-                                                { getOfferText(offer) }
-                                            </div>
-                                            <div className="d-flex">
-                                                { (offer.priceCredits > 0) &&
-                                                    <div className="d-flex align-items-center justify-content-end">
-                                                        <span className="text-black ms-1">{ offer.priceCredits }</span>
-                                                        <CurrencyIcon type={ -1 } />
-                                                    </div> }
-                                                { (offer.priceActivityPoints > 0) &&
-                                                    <div className="d-flex align-items-center justify-content-end">
-                                                        <span className="text-black ms-1">{ offer.priceActivityPoints }</span>
-                                                        <CurrencyIcon type={ offer.priceActivityPointsType } />
-                                                    </div> }
-                                            </div>
-                                            <Button variant="primary" size="sm" onClick={ event => setPendingOffer(offer) } />
-                                        </div>
-                                    </div>
-                                );
-                            }) }
-                    </div> */}
                 </div>
-                <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
+                <div className="position-relative d-flex flex-column col-6 justify-content-center align-items-center">
                     <div className="d-block mb-2">
                         <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
                     </div>
-                    <div className="fs-6 text-center text-black lh-sm overflow-hidden" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } }></div>
+                    <div className="text-center text-black small bg-muted rounded p-1" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } }></div>
+                    { pendingOffer && <div className="mt-auto w-100 text-black">
+                        <div className="d-flex gap-2 mb-2 align-items-center">
+                            <div className="w-100">
+                                <div className="fw-bold">{ getPurchaseHeader() }</div>
+                                <div className="small">{ getPurchaseValidUntil() }</div>
+                            </div>
+                            <div>
+                                { (pendingOffer.priceCredits > 0) &&
+                                    <div className="d-flex align-items-center justify-content-end gap-1">
+                                        <span className="text-black">{ pendingOffer.priceCredits }</span>
+                                        <CurrencyIcon type={ -1 } />
+                                    </div> }
+                                { (pendingOffer.priceActivityPoints > 0) &&
+                                    <div className="d-flex align-items-center justify-content-end gap-1">
+                                        <span className="text-black">{ pendingOffer.priceActivityPoints }</span>
+                                        <CurrencyIcon type={ pendingOffer.priceActivityPointsType } />
+                                    </div> }
+                            </div>
+                        </div>
+                        { getPurchaseButton() }
+                    </div>}
                 </div>
             </div>
         </>

From 35d31af30f5e7131f2ed4262246ad75af5537942 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 13 Sep 2021 12:29:04 -0400
Subject: [PATCH 11/23] Add fade animation

---
 src/App.tsx                                              | 5 ++++-
 src/views/main/MainView.tsx                              | 5 ++++-
 src/views/room-host/RoomHostView.tsx                     | 9 ++++++---
 .../room/widgets/avatar-info/AvatarInfoWidgetView.tsx    | 2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6b759d0e..ae6999e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { useConfigurationEvent } from './hooks/events/core/configuration/configu
 import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
 import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
 import { useRoomEngineEvent } from './hooks/events/nitro/room/room-engine-event';
+import { TransitionAnimation, TransitionAnimationTypes } from './layout';
 import { LoadingView } from './views/loading/LoadingView';
 import { MainView } from './views/main/MainView';
 
@@ -126,7 +127,9 @@ export const App: FC<{}> = props =>
     return (
         <div className="nitro-app">
             { (!isReady || isError) && <LoadingView isError={ isError } message={ message } /> }
-            { (isReady && !isError) && <MainView /> }
+            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady && !isError) } timeout={ 300 }>
+                <MainView />
+            </TransitionAnimation>
         </div>
     );
 }
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index a28b8f5b..c3618be1 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -2,6 +2,7 @@ import { RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { GetCommunication } from '../../api';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
+import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
@@ -50,7 +51,9 @@ export const MainView: FC<MainViewProps> = props =>
 
     return (
         <div className="nitro-main">
-            { landingViewVisible && <HotelView /> }
+            <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }>
+                <HotelView />
+            </TransitionAnimation>
             <ToolbarView isInRoom={ !landingViewVisible } />
             <ModToolsView />
             <RoomHostView />
diff --git a/src/views/room-host/RoomHostView.tsx b/src/views/room-host/RoomHostView.tsx
index 14211d80..5e1d15f6 100644
--- a/src/views/room-host/RoomHostView.tsx
+++ b/src/views/room-host/RoomHostView.tsx
@@ -3,6 +3,7 @@ import { FC, useCallback, useState } from 'react';
 import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api';
 import { useRoomEngineEvent } from '../../hooks/events/nitro/room/room-engine-event';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
+import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
 import { RoomView } from '../room/RoomView';
 
 export const RoomHostView: FC<{}> = props =>
@@ -49,8 +50,10 @@ export const RoomHostView: FC<{}> = props =>
     useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
 
     return (
-        <div className="nitro-room-host w-100 h-100">
-            <RoomView roomSession={ roomSession } />
-        </div>
+        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ !!roomSession } timeout={ 300 }>
+            <div className="nitro-room-host w-100 h-100">
+                <RoomView roomSession={ roomSession } />
+            </div>
+        </TransitionAnimation>
     );
 }
diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
index 47b29509..d949cfaa 100644
--- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
+++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
@@ -24,7 +24,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
     const [ infoStandEvent, setInfoStandEvent ] = useState<RoomWidgetUpdateInfostandEvent>(null);
     const [ isGameMode, setGameMode ] = useState(false);
     const [ isDancing, setIsDancing ] = useState(false);
-    const [ isDecorating, setIsDecorating ] = useState(GetRoomSession().isDecorating);
+    const [ isDecorating, setIsDecorating ] = useState(false);
     const [ rentableBotChatEvent, setRentableBotChatEvent ] = useState<RoomWidgetUpdateRentableBotChatEvent>(null);
 
     const removeNameBubble = useCallback((index: number) =>

From 556616ac61e8eae246df41a2d33711de362aa062 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Mon, 13 Sep 2021 17:59:36 -0300
Subject: [PATCH 12/23] Fix Group Members view

---
 .../groups/views/members/GroupMembersView.tsx | 106 +++++++++---------
 1 file changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/views/groups/views/members/GroupMembersView.tsx b/src/views/groups/views/members/GroupMembersView.tsx
index cbf08364..0ab607e9 100644
--- a/src/views/groups/views/members/GroupMembersView.tsx
+++ b/src/views/groups/views/members/GroupMembersView.tsx
@@ -115,7 +115,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
         }
 
         searchMembers(pageData.pageIndex);
-    }, [ pageData ]);
+    }, [ pageData, searchMembers ]);
 
     const acceptMembership = useCallback((member) =>
     {
@@ -124,7 +124,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
             SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
             searchMembers(pageData.pageIndex);
         }
-    }, [ pageData ]);
+    }, [ pageData, searchMembers ]);
 
     const removeMemberOrDeclineMembership = useCallback((member) =>
     {
@@ -138,66 +138,68 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
             setRemovingMemberName(member.name);
             SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
         }
-    }, [ pageData ]);
+    }, [ pageData, searchMembers ]);
 
-    if(!pageData) return null;
+    if(!groupId) return null;
 
     return (
         <NitroCardView className="nitro-group-members" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData.groupTitle ]) } onCloseClick={ onClose } />
-            <NitroCardContentView className="pb-2">
-                <div className="d-flex gap-2 align-items-center mb-2">
-                    <div className="group-badge">
-                        <BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
+            <NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData ? pageData.groupTitle : '' ]) } onCloseClick={ onClose } />
+            { pageData && <>
+                <NitroCardContentView className="pb-2">
+                    <div className="d-flex gap-2 align-items-center mb-2">
+                        <div className="group-badge">
+                            <BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
+                        </div>
+                        <div className="w-100">
+                            <input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
+                            <select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
+                                <option value="0">{ LocalizeText('group.members.search.all') }</option>
+                                <option value="1">{ LocalizeText('group.members.search.admins') }</option>
+                                <option value="2">{ LocalizeText('group.members.search.pending') }</option>
+                            </select>
+                        </div>
                     </div>
-                    <div className="w-100">
-                        <input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
-                        <select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
-                            <option value="0">{ LocalizeText('group.members.search.all') }</option>
-                            <option value="1">{ LocalizeText('group.members.search.admins') }</option>
-                            <option value="2">{ LocalizeText('group.members.search.pending') }</option>
-                        </select>
-                    </div>
-                </div>
-                <div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
-                    { pageData.result.map((member, index) =>
-                    {
-                        return (
-                            <div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
-                                <div className="list-member bg-white rounded d-flex text-black">
-                                    <div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
-                                        <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
-                                    </div>
-                                    <div className="p-1 w-100 d-flex flex-column justify-content-center">
-                                        <div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
-                                        { member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
-                                    </div>
-                                    <div className="d-flex flex-column pe-2 align-items-center justify-content-center">
-                                        <div className="d-flex align-items-center">
-                                            <i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
+                    <div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
+                        { pageData.result.map((member, index) =>
+                        {
+                            return (
+                                <div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
+                                    <div className="list-member bg-white rounded d-flex text-black">
+                                        <div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
+                                            <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
+                                        </div>
+                                        <div className="p-1 w-100 d-flex flex-column justify-content-center">
+                                            <div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
+                                            { member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
+                                        </div>
+                                        <div className="d-flex flex-column pe-2 align-items-center justify-content-center">
+                                            <div className="d-flex align-items-center">
+                                                <i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
+                                            </div>
+                                            { member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
+                                                <i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
+                                            </div> }
+                                            { member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
+                                                <i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
+                                            </div> }
                                         </div>
-                                        { member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
-                                            <i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
-                                        </div> }
-                                        { member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
-                                            <i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
-                                        </div> }
                                     </div>
                                 </div>
-                            </div>
-                        );
-                    }) }
-                </div>
-                <div className="d-flex w-100 align-items-center">
-                    <div>
-                        <button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
+                            );
+                        }) }
                     </div>
-                    <div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
-                    <div>
-                        <button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
+                    <div className="d-flex w-100 align-items-center">
+                        <div>
+                            <button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
+                        </div>
+                        <div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
+                        <div>
+                            <button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
+                        </div>
                     </div>
-                </div>
-            </NitroCardContentView>
+                </NitroCardContentView>
+            </> }
         </NitroCardView>
     );
 };

From 17a821d294151d6b05ce64150e50038c28f10d3a Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Mon, 13 Sep 2021 18:10:27 -0300
Subject: [PATCH 13/23] Fix Currency Icon + Move Friendlist icon

---
 src/views/shared/currency-icon/CurrencyIcon.scss |  4 ++--
 src/views/toolbar/ToolbarView.tsx                | 12 +++++++-----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/views/shared/currency-icon/CurrencyIcon.scss b/src/views/shared/currency-icon/CurrencyIcon.scss
index 88462829..743b94ec 100644
--- a/src/views/shared/currency-icon/CurrencyIcon.scss
+++ b/src/views/shared/currency-icon/CurrencyIcon.scss
@@ -1,6 +1,6 @@
 .nitro-currency-icon {
     background-position: center;
     background-repeat: no-repeat;
-    width: 15px;
-    height: 15px;
+    width: 18px;
+    height: 17px;
 }
diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx
index 4d017724..74b22062 100644
--- a/src/views/toolbar/ToolbarView.tsx
+++ b/src/views/toolbar/ToolbarView.tsx
@@ -178,11 +178,6 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                             { (unseenInventoryCount > 0) && (
                                 <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
                         </div>
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
-                            <i className="icon icon-friendall"></i>
-                            { (unseenFriendListCount > 0) && (
-                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
-                        </div>
                         { isInRoom && (
                             <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
                                 <i className="icon icon-camera"></i>
@@ -194,6 +189,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
                 </div>
                 <div className="d-flex toolbar-right-side">
+                    <div className="navigation-items">
+                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
+                            <i className="icon icon-friendall"></i>
+                            { (unseenFriendListCount > 0) && (
+                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
+                        </div>
+                    </div>
                     <div id="toolbar-friend-bar-container" />
                 </div>
             </div>

From 0a615dffb63d6efbdcedaf284df20e5255927855 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Mon, 13 Sep 2021 18:41:16 -0300
Subject: [PATCH 14/23] Fix GroupRoomInfo View

---
 .../views/room-information/GroupRoomInformationView.tsx   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/groups/views/room-information/GroupRoomInformationView.tsx b/src/views/groups/views/room-information/GroupRoomInformationView.tsx
index 8a66491d..af2f73ee 100644
--- a/src/views/groups/views/room-information/GroupRoomInformationView.tsx
+++ b/src/views/groups/views/room-information/GroupRoomInformationView.tsx
@@ -12,13 +12,13 @@ export const GroupRoomInformationView: FC<{}> = props =>
     const [ groupId, setGroupId ] = useState<number>(null);
     const [ groupInformation, setGroupInformation ] = useState<GroupInformationParser>(null);
     const [ isExpended, setIsExpended ] = useState<boolean>(true);
-    
+
     const onRoomInfoEvent = useCallback((event: RoomInfoEvent) =>
     {
         const parser = event.getParser();
         
         setGroupInformation(null);
-        
+
         if(parser.data.habboGroupId)
         {
             setGroupId(parser.data.habboGroupId);
@@ -33,7 +33,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
         const parser = event.getParser();
 
         if(parser.flag || groupId !== parser.id) return;
-
+        console.log(parser);
         setGroupInformation(null);
         setGroupInformation(parser);
     }, [ groupId ]);
@@ -110,7 +110,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
                 <i className={ 'fas fa-chevron-' + (isExpended ? 'up' : 'down') } />
             </div>
             { isExpended && <>
-                <div className="d-flex cursor-pointer" onClick={ () => GetGroupInformation(groupInformation.id) }>
+                <div className="d-flex cursor-pointer" onClick={ () => GetGroupInformation(groupId) }>
                     <div className="group-badge flex-shrink-0 me-1">
                         <BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
                     </div>

From ecc6f26ae9e0984a48eb1d15128a237ffc0b10ca Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Mon, 13 Sep 2021 19:54:58 -0300
Subject: [PATCH 15/23] RoomDimmer updates

---
 .../room/widgets/events/RoomDimmerPreset.ts   |  35 ++++++
 .../RoomWidgetDimmerStateUpdateEvent.ts       |  48 ++++++++
 .../events/RoomWidgetDimmerUpdateEvent.ts     |  50 ++++++++
 src/api/nitro/room/widgets/events/index.ts    |   1 +
 .../handlers/FurnitureDimmerWidgetHandler.ts  | 111 ++++++++++++++++++
 src/api/nitro/room/widgets/handlers/index.ts  |   1 +
 .../RoomWidgetDimmerChangeStateMessage.ts     |  11 ++
 .../RoomWidgetDimmerPreviewMessage.ts         |  34 ++++++
 .../RoomWidgetDimmerSavePresetMessage.ts      |  48 ++++++++
 src/api/nitro/room/widgets/messages/index.ts  |   3 +
 .../dimmer-widget/dimmer_banner.png           | Bin 0 -> 1041 bytes
 src/views/room/RoomView.tsx                   |   3 +-
 .../furniture/dimmer/FurnitureDimmerView.scss |   6 +
 .../furniture/dimmer/FurnitureDimmerView.tsx  | 104 ++++++++--------
 14 files changed, 407 insertions(+), 48 deletions(-)
 create mode 100644 src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
 create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts
 create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
 create mode 100644 src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
 create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage.ts
 create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetDimmerPreviewMessage.ts
 create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetDimmerSavePresetMessage.ts
 create mode 100644 src/assets/images/room-widgets/dimmer-widget/dimmer_banner.png

diff --git a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
new file mode 100644
index 00000000..8e695992
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
@@ -0,0 +1,35 @@
+export class RoomDimmerPreset
+{
+    private _id: number = 0;
+    private _type: number = 0;
+    private _color: number = 0;
+    private _intensity: number = 0;
+
+    constructor(id: number, type: number, color: number, intensity: number)
+    {
+        this._id = id;
+        this._type = type;
+        this._color = color;
+        this._intensity = intensity;
+    }
+
+    public get id(): number
+    {
+        return this._id;
+    }
+
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get _Str_4272(): number
+    {
+        return this._intensity;
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts
new file mode 100644
index 00000000..ae1a49b7
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts
@@ -0,0 +1,48 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetDimmerStateUpdateEvent extends RoomWidgetUpdateEvent
+{
+    public static DIMMER_STATE: string = 'RWDSUE_DIMMER_STATE';
+
+    private _state: number;
+    private _presetId: number;
+    private _effectId: number;
+    private _color: number;
+    private _brightness: number;
+
+    constructor(state: number, presetId: number, effectId: number, color: number, brightness: number)
+    {
+        super(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE);
+
+        this._state         = state;
+        this._presetId      = presetId;
+        this._effectId      = effectId;
+        this._color         = color;
+        this._brightness    = brightness;
+    }
+
+    public get state(): number
+    {
+        return this._state;
+    }
+
+    public get presetId(): number
+    {
+        return this._presetId;
+    }
+
+    public get effectId(): number
+    {
+        return this._effectId;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
new file mode 100644
index 00000000..9ff12a50
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
@@ -0,0 +1,50 @@
+import { RoomDimmerPreset } from './RoomDimmerPreset';
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
+{
+    public static PRESETS: string = 'RWDUE_PRESETS';
+    public static HIDE: string = 'RWDUE_HIDE';
+
+    private _selectedPresetId: number = 0;
+    private _presets: RoomDimmerPreset[];
+
+    constructor(type: string)
+    {
+        super(type);
+
+        this._presets = [];
+    }
+
+    public get presetCount(): number
+    {
+        return this._presets.length;
+    }
+
+    public get presets(): RoomDimmerPreset[]
+    {
+        return this._presets;
+    }
+
+    public get selectedPresetId(): number
+    {
+        return this._selectedPresetId;
+    }
+
+    public set selectedPresetId(k: number)
+    {
+        this._selectedPresetId = k;
+    }
+
+    public setPresetValues(id: number, type: number, color: number, intensity: number):void
+    {
+        const preset = new RoomDimmerPreset(id, type, color, intensity);
+
+        this._presets[(id - 1)] = preset;
+    }
+
+    public getPresetNumber(id: number): RoomDimmerPreset
+    {
+        return this._presets[id];
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts
index 4b4810d0..e70cc1ed 100644
--- a/src/api/nitro/room/widgets/events/index.ts
+++ b/src/api/nitro/room/widgets/events/index.ts
@@ -2,6 +2,7 @@ export * from './IPhotoData';
 export * from './RoomObjectItem';
 export * from './RoomWidgetAvatarInfoEvent';
 export * from './RoomWidgetChooserContentEvent';
+export * from './RoomWidgetDimmerUpdateEvent';
 export * from './RoomWidgetDoorbellEvent';
 export * from './RoomWidgetFloodControlEvent';
 export * from './RoomWidgetObjectNameEvent';
diff --git a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
new file mode 100644
index 00000000..36d6aa58
--- /dev/null
+++ b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
@@ -0,0 +1,111 @@
+import { NitroEvent, RoomControllerLevel, RoomEngineDimmerStateEvent, RoomEngineTriggerWidgetEvent, RoomSessionDimmerPresetsEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../..';
+import { GetSessionDataManager } from '../../..';
+import { RoomWidgetDimmerUpdateEvent, RoomWidgetUpdateEvent } from '../events';
+import { RoomWidgetDimmerStateUpdateEvent } from '../events/RoomWidgetDimmerStateUpdateEvent';
+import { RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetFurniToWidgetMessage, RoomWidgetMessage } from '../messages';
+import { RoomWidgetDimmerSavePresetMessage } from '../messages/RoomWidgetDimmerSavePresetMessage';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {
+        switch(event.type)
+        {
+            case RoomSessionDimmerPresetsEvent.ROOM_DIMMER_PRESETS: {
+                const presetsEvent  = (event as RoomSessionDimmerPresetsEvent);
+                const updateEvent   = new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.PRESETS);
+
+                updateEvent.selectedPresetId = presetsEvent.selectedPresetId;
+
+                let i = 0;
+
+                while(i < presetsEvent.presetCount)
+                {
+                    const preset = presetsEvent.getPreset(i);
+
+                    if(preset) updateEvent.setPresetValues(preset.id, preset.type, preset.color, preset.light);
+
+                    i++;
+                }
+
+                this.container.eventDispatcher.dispatchEvent(updateEvent);
+                return;
+            }
+            case RoomEngineDimmerStateEvent.ROOM_COLOR: {
+                const stateEvent = (event as RoomEngineDimmerStateEvent);
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
+                return;
+            }
+            case RoomEngineTriggerWidgetEvent.REMOVE_DIMMER: {
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.HIDE));
+                return;
+            }
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+            case RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER: {
+                if(this.canOpenWidget()) this.container.roomSession.requestMoodlightSettings();
+                break;
+            }
+            case RoomWidgetDimmerSavePresetMessage.SAVE_PRESET: {
+                if(this.canOpenWidget())
+                {
+                    const savePresetMessage = (message as RoomWidgetDimmerSavePresetMessage);
+                    this.container.roomSession.updateMoodlightData(savePresetMessage.presetNumber, savePresetMessage.effectTypeId, savePresetMessage.color, savePresetMessage.brightness, savePresetMessage.apply);
+                }
+                break;
+            }
+            case RoomWidgetDimmerChangeStateMessage.CHANGE_STATE: {
+                if(this.canOpenWidget()) this.container.roomSession.toggleMoodlightState();
+                break;
+            }
+            case RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET: {
+                const roomId            = this.container.roomSession.roomId;
+                const previewMessage    = (message as RoomWidgetDimmerPreviewMessage);
+
+                if(!previewMessage || !GetRoomEngine()) return null;
+
+                GetRoomEngine().updateObjectRoomColor(roomId, previewMessage.color, previewMessage.brightness, previewMessage.bgOnly);
+                break;
+            }
+        }
+
+        return null;
+    }
+
+    private canOpenWidget(): boolean
+    {
+        return (this.container.roomSession.isRoomOwner || (this.container.roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator);
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.ROOM_DIMMER;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [
+            RoomSessionDimmerPresetsEvent.ROOM_DIMMER_PRESETS,
+            RoomEngineDimmerStateEvent.ROOM_COLOR,
+            RoomEngineTriggerWidgetEvent.REMOVE_DIMMER
+        ];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER,
+            RoomWidgetDimmerSavePresetMessage.SAVE_PRESET,
+            RoomWidgetDimmerChangeStateMessage.CHANGE_STATE,
+            RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET
+        ];
+    }
+}
diff --git a/src/api/nitro/room/widgets/handlers/index.ts b/src/api/nitro/room/widgets/handlers/index.ts
index 500115e7..ebd2591f 100644
--- a/src/api/nitro/room/widgets/handlers/index.ts
+++ b/src/api/nitro/room/widgets/handlers/index.ts
@@ -2,6 +2,7 @@ export * from './DoorbellWidgetHandler';
 export * from './FurniChooserWidgetHandler';
 export * from './FurnitureContextMenuWidgetHandler';
 export * from './FurnitureCustomStackHeightWidgetHandler';
+export * from './FurnitureDimmerWidgetHandler';
 export * from './FurnitureExternalImageWidgetHandler';
 export * from './FurniturePresentWidgetHandler';
 export * from './IRoomWidgetHandler';
diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage.ts
new file mode 100644
index 00000000..de83f498
--- /dev/null
+++ b/src/api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage.ts
@@ -0,0 +1,11 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetDimmerChangeStateMessage extends RoomWidgetMessage
+{
+    public static CHANGE_STATE: string = 'RWCDSM_CHANGE_STATE';
+
+    constructor()
+    {
+        super(RoomWidgetDimmerChangeStateMessage.CHANGE_STATE);
+    }
+}
diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetDimmerPreviewMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetDimmerPreviewMessage.ts
new file mode 100644
index 00000000..39708872
--- /dev/null
+++ b/src/api/nitro/room/widgets/messages/RoomWidgetDimmerPreviewMessage.ts
@@ -0,0 +1,34 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetDimmerPreviewMessage extends RoomWidgetMessage
+{
+    public static PREVIEW_DIMMER_PRESET: string = 'RWDPM_PREVIEW_DIMMER_PRESET';
+
+    private _color: number;
+    private _brightness: number;
+    private _bgOnly: boolean;
+
+    constructor(color: number, brightness: number, bgOnly: boolean)
+    {
+        super(RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET);
+
+        this._color = color;
+        this._brightness = brightness;
+        this._bgOnly = bgOnly;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+
+    public get bgOnly(): boolean
+    {
+        return this._bgOnly;
+    }
+}
diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetDimmerSavePresetMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetDimmerSavePresetMessage.ts
new file mode 100644
index 00000000..8e7bd831
--- /dev/null
+++ b/src/api/nitro/room/widgets/messages/RoomWidgetDimmerSavePresetMessage.ts
@@ -0,0 +1,48 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetDimmerSavePresetMessage extends RoomWidgetMessage
+{
+    public static SAVE_PRESET: string = 'RWSDPM_SAVE_PRESET';
+
+    private _presetNumber: number;
+    private _effectTypeId: number;
+    private _color: number;
+    private _brightness: number;
+    private _apply: boolean;
+
+    constructor(presetNumber: number, effectTypeId: number, color: number, brightness: number, apply: boolean)
+    {
+        super(RoomWidgetDimmerSavePresetMessage.SAVE_PRESET);
+
+        this._presetNumber = presetNumber;
+        this._effectTypeId = effectTypeId;
+        this._color = color;
+        this._brightness = brightness;
+        this._apply = apply;
+    }
+
+    public get presetNumber(): number
+    {
+        return this._presetNumber;
+    }
+
+    public get effectTypeId(): number
+    {
+        return this._effectTypeId;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+
+    public get apply(): boolean
+    {
+        return this._apply;
+    }
+}
diff --git a/src/api/nitro/room/widgets/messages/index.ts b/src/api/nitro/room/widgets/messages/index.ts
index 2cfcba12..65309aad 100644
--- a/src/api/nitro/room/widgets/messages/index.ts
+++ b/src/api/nitro/room/widgets/messages/index.ts
@@ -5,6 +5,9 @@ export * from './RoomWidgetChatMessage';
 export * from './RoomWidgetChatSelectAvatarMessage';
 export * from './RoomWidgetChatTypingMessage';
 export * from './RoomWidgetDanceMessage';
+export * from './RoomWidgetDimmerChangeStateMessage';
+export * from './RoomWidgetDimmerPreviewMessage';
+export * from './RoomWidgetDimmerSavePresetMessage';
 export * from './RoomWidgetFurniActionMessage';
 export * from './RoomWidgetFurniToWidgetMessage';
 export * from './RoomWidgetLetUserInMessage';
diff --git a/src/assets/images/room-widgets/dimmer-widget/dimmer_banner.png b/src/assets/images/room-widgets/dimmer-widget/dimmer_banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdc6e9fabae522025b080149b464c349738c3014
GIT binary patch
literal 1041
zcmV+s1n&EZP)<h;3K|Lk000e1NJLTq001}u002)21^@s6zM%$Z00009a7bBm000id
z000id0mpBsWB>pI!%0LzRCwC$+&yR%K^O+$U}NJ6K@?FiO%4@<0YStcL<=RT2;vns
zX*{qqHiA})pjarVaD|0P8Y76Hs7-7IQMumI!bUr_6lJ}4j_>?-ZfECbXZB{7O?b`i
zLDqftot@j8giIw<>CeFj{z>HLtNJ+xJ9_t}NL`>QVCU(_q;AkLAoB3jm)by;K%@?h
zYJpX6)EHRRMy-KWYt$K7l|~B#V{g<OFxE!B17mBn5ReW!=0*zx&&;nM9dwM1dI8=%
zJDWVYaUjY@3j^<*Yb&8KG+G!46utrmWNeLk0lw`mjF5TINi^yWNRtgf*p8*q!oVvF
z+XU#r;*Qb5@HQvisCVFoBa0$7(2$J=1G+#%H0lL-@8T{cFbi7dH5$CZB2XWVme!yt
zl)tw6c=u9zgLzQ;dSU;j#McVL#2U<k;zZqFnsWkXHCjs`Asb)=3;@J_q6FfgYTckO
zVAEi84K~0A=pD#c0f4IwkWhOL&WO|oD8pv9tP`m`Pz9UaIW1CIpblmOG+ELp4QK<S
z<jtbk{{HntvifFOyQC2mXbanYY_EtZ@b91B0?DDJ0`p+}1aO=U@apBRKoS(s-+uMJ
zJYZg9E4}UibIGki04YG04$Qm8R#x8$Shx2mxpl%F`0K~F$piT?q{rR%Fu-x3=_G?8
zdHUobcOdQ5$0Wm>L2HCUfTSUc5LO2S4yfnP9*-Vtf%4A|_{`)2<P!%+@&<uRWpGWJ
z00BaKh!qe!#!e9#>I2A|<dY1abW9th;b{$|sGvm~#4t?Fq8T%)$s_|9Vtftq3)}?i
z708CE36LflK<Pza3+(s%31SO11s*<sDjPUJy}ma1|2o6yfI#fKzMO(u&7!VQ6%a5U
zvCqyBMIo5U%LD=-0uX%<ZEJxpP!&+daipBo2{2r;0EikzjP6BUpjki_PR{YAPAb9I
zWL%&&Kp7MbFb}E&>QGSuRZw|l+ZGlbP=*qaz%IBbf$~lI&-u29D>OQw412M$B|_V+
zwQH=P(EwGj&s(QOT%i*O>R^OZLGitFn_KY#ZD8{Asz#BhfH+Xo=CXh$LpKX(yTVYY
zK|0Vps0li2=*l<S^w@TV!ON{$9#p;tZ5riE_jv5G!r=8*&8AV4Ym@(skl*v#tS|(*
zRWpI+&91bKeYw0J4SuU;3eAHNj>lz%A;_(oDO3k5^2S?k)GN>ys)PB0dI#n~U0|+I
zdY>8$s5&55m<^Nz$A05CG&J-H<m*KIgjW8Kap*=$P5$PHdZhdVunOfNdL!y200000
LNkvXXu0mjfu7A}r

literal 0
HcmV?d00001

diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx
index c1e18a1f..9ac948a8 100644
--- a/src/views/room/RoomView.tsx
+++ b/src/views/room/RoomView.tsx
@@ -1,6 +1,6 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
+import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
@@ -42,6 +42,7 @@ export const RoomView: FC<RoomViewProps> = props =>
         widgetHandlerManager.registerHandler(new FurnitureCustomStackHeightWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
         widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurnitureDimmerWidgetHandler());
 
         setWidgetHandler(widgetHandlerManager);
 
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
index cbea044c..8cffc632 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
@@ -1,3 +1,9 @@
 .nitro-dimmer {
     width: 300px;
+
+    .dimmer-banner {
+        width: 56px;
+        height: 79px;
+        background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
+    }
 }
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index c868e9cd..d94202dc 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -1,5 +1,9 @@
+import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../../../api';
+import { GetRoomEngine, LocalizeText, RoomWidgetDimmerUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
+import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
+import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
@@ -9,72 +13,78 @@ export const FurnitureDimmerView: FC<{}> = props =>
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
 
-    // const onNitroEvent = useCallback((event: NitroEvent) =>
-    // {
-    //     switch(event.type)
-    //     {
-    //         case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
-    //             const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-
-    //             const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
-        
-    //             if(!roomObject) return;
-
-    //             const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
-
-    //             console.log('data', data);
+    const onNitroEvent = useCallback((event: NitroEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+                console.log(widgetEvent);
                 
-    //             setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category, false));
-    //             return;
-    //         }
-    //         case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-    //             const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
+                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
+        
+                if(!roomObject) return;
 
-    //             setDimmerData(prevState =>
-    //                 {
-    //                     if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
+                const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
+                
+                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category, false));
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
+                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
 
-    //                     return null;
-    //                 });
-    //             return;
-    //         }
-    //         case RoomWidgetDimmerUpdateEvent.RWDUE_PRESETS: {
-    //             const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
+                setDimmerData(prevState =>
+                    {
+                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
 
-    //             console.log(widgetEvent);
-    //             return;
-    //         }
-    //         case RoomWidgetDimmerStateUpdateEvent.RWDSUE_DIMMER_STATE: {
-    //             const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
+                        return null;
+                    });
+                return;
+            }
+            case RoomWidgetDimmerUpdateEvent.PRESETS: {
+                const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
 
-    //             console.log(widgetEvent);
-    //             return;
-    //         }
-    //     }
-    // }, []);
+                console.log(widgetEvent);
+                return;
+            }
+            case RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE: {
+                const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
 
-    // useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
-    // CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, props.events, onNitroEvent);
-    // CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.RWDUE_PRESETS, props.events, onNitroEvent);
-    // CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.RWDSUE_DIMMER_STATE, props.events, onNitroEvent);
+                console.log(widgetEvent);
+                return;
+            }
+        }
+    }, []);
+
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.PRESETS, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
 
     const processAction = useCallback((type: string, value: string = null) =>
     {
         switch(type)
         {
+            case 'toggle_state':
+                widgetHandler.processWidgetMessage(new RoomWidgetDimmerChangeStateMessage());
+                return;
             case 'close':
                 setDimmerData(null);
                 return;
         }
-    }, []);
+    }, [ widgetHandler ]);
 
     if(!dimmerData) return null;
 
     return (
-        <NitroCardView className="nitro-dimmer">
-            <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ event => processAction('close') } />
+        <NitroCardView className="nitro-dimmer" simple={ true }>
+            <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ () => processAction('close') } />
             <NitroCardContentView>
-                
+                { !dimmerData.active && <div className="d-flex flex-column gap-2 align-items-center">
+                    <div className="dimmer-banner"></div>
+                    <div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
+                    <button className="btn-success btn w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.on') }</button>
+                </div> }
             </NitroCardContentView>
         </NitroCardView>
     );

From 6d3c205436eeda159b06c1ec2c0d1eea79155254 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Tue, 14 Sep 2021 02:56:29 -0300
Subject: [PATCH 16/23] Moodlight update

---
 .../room/widgets/events/RoomDimmerPreset.ts   |  24 ++---
 .../events/RoomWidgetDimmerUpdateEvent.ts     |   4 +-
 .../handlers/FurnitureDimmerWidgetHandler.ts  |   2 +-
 src/views/room/widgets/RoomWidgetsView.tsx    |   4 +
 .../furniture/dimmer/FurnitureDimmerData.ts   |   3 +-
 .../furniture/dimmer/FurnitureDimmerView.tsx  | 102 +++++++++++++++---
 6 files changed, 106 insertions(+), 33 deletions(-)

diff --git a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
index 8e695992..cfae6512 100644
--- a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
+++ b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
@@ -1,16 +1,16 @@
 export class RoomDimmerPreset
 {
-    private _id: number = 0;
-    private _type: number = 0;
-    private _color: number = 0;
-    private _intensity: number = 0;
+    private _id: number;
+    private _bgOnly: boolean;
+    private _color: string;
+    private _brightness: number;
 
-    constructor(id: number, type: number, color: number, intensity: number)
+    constructor(id: number, bgOnly: boolean, color: string, brightness: number)
     {
         this._id = id;
-        this._type = type;
+        this._bgOnly = bgOnly;
         this._color = color;
-        this._intensity = intensity;
+        this._brightness = brightness;
     }
 
     public get id(): number
@@ -18,18 +18,18 @@ export class RoomDimmerPreset
         return this._id;
     }
 
-    public get type(): number
+    public get bgOnly(): boolean
     {
-        return this._type;
+        return this._bgOnly;
     }
 
-    public get color(): number
+    public get color(): string
     {
         return this._color;
     }
 
-    public get _Str_4272(): number
+    public get brightness(): number
     {
-        return this._intensity;
+        return this._brightness;
     }
 }
diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
index 9ff12a50..74f149b7 100644
--- a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
+++ b/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
@@ -36,9 +36,9 @@ export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
         this._selectedPresetId = k;
     }
 
-    public setPresetValues(id: number, type: number, color: number, intensity: number):void
+    public setPresetValues(id: number, bgOnly: boolean, color: string, brightness: number):void
     {
-        const preset = new RoomDimmerPreset(id, type, color, intensity);
+        const preset = new RoomDimmerPreset(id, bgOnly, color, brightness);
 
         this._presets[(id - 1)] = preset;
     }
diff --git a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
index 36d6aa58..0695304a 100644
--- a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
@@ -25,7 +25,7 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
                 {
                     const preset = presetsEvent.getPreset(i);
 
-                    if(preset) updateEvent.setPresetValues(preset.id, preset.type, preset.color, preset.light);
+                    if(preset) updateEvent.setPresetValues(preset.id, preset.bgOnly, preset.color, preset.brightness);
 
                     i++;
                 }
diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx
index 2b5dee4e..5033181f 100644
--- a/src/views/room/widgets/RoomWidgetsView.tsx
+++ b/src/views/room/widgets/RoomWidgetsView.tsx
@@ -1,6 +1,7 @@
 import { RoomEngineDimmerStateEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
+import { RoomWidgetDimmerStateUpdateEvent } from '../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
 import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events';
 import { useRoomContext } from '../context/RoomContext';
 import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
@@ -42,6 +43,9 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
                 return;
             }
             case RoomEngineDimmerStateEvent.ROOM_COLOR: {
+                const stateEvent = (event as RoomEngineDimmerStateEvent);
+
+                eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
                 return;
             }
         }
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts
index 3076cea2..0836e20f 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts
@@ -2,6 +2,5 @@ export class FurnitureDimmerData
 {
     constructor(
         public objectId: number,
-        public category: number,
-        public active: boolean) {}
+        public category: number) {}
 }
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index d94202dc..18cd0bcf 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -1,10 +1,12 @@
-import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
-import { GetRoomEngine, LocalizeText, RoomWidgetDimmerUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { RoomDimmerPreset } from '../../../../../api/nitro/room/widgets/events/RoomDimmerPreset';
 import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
 import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
 import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
 
@@ -13,21 +15,52 @@ export const FurnitureDimmerView: FC<{}> = props =>
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
 
+    const [ isActive, setIsActive ] = useState<boolean>(false);
+    const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
+    const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
+
+    const [ previewColor, setPreviewColor ] = useState<string>('#000000');
+    const [ previewBrightness, setPreviewBrightness ] = useState<number>(125);
+    const [ previewBgOnly, setPreviewBgOnly ] = useState<boolean>(false);
+
+    const previewColorInt = useMemo(() =>
+    {
+        return parseInt(previewColor.replace('#', ''), 16);
+    }, [ previewColor ]);
+
+    useEffect(() =>
+    {
+        if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
+
+        const preset = presets[selectedPresetId - 1];
+
+        if(!preset) return;
+
+        setPreviewColor(preset.color);
+        setPreviewBrightness(preset.brightness);
+        setPreviewBgOnly(preset.bgOnly);
+    }, [ selectedPresetId, presets ]);
+
+    useEffect(() =>
+    {
+        if(!widgetHandler || selectedPresetId === -1 || !isActive) return;
+        
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(previewColorInt, previewBrightness, previewBgOnly));
+    }, [ previewBgOnly, previewBrightness, previewColor ]);
+
     const onNitroEvent = useCallback((event: NitroEvent) =>
     {
         switch(event.type)
         {
             case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
                 const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-                console.log(widgetEvent);
                 
                 const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
         
                 if(!roomObject) return;
 
-                const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
-                
-                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category, false));
+                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category));
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, widgetEvent.objectId, widgetEvent.category, widgetEvent.roomId));
                 return;
             }
             case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
@@ -44,24 +77,25 @@ export const FurnitureDimmerView: FC<{}> = props =>
             case RoomWidgetDimmerUpdateEvent.PRESETS: {
                 const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
 
-                console.log(widgetEvent);
+                setPresets(widgetEvent.presets);
+                setSelectedPresetId(widgetEvent.selectedPresetId);
                 return;
             }
             case RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE: {
                 const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
 
-                console.log(widgetEvent);
+                setIsActive(widgetEvent.state === 1);
                 return;
             }
         }
-    }, []);
+    }, [ widgetHandler ]);
 
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
     CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
     CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.PRESETS, eventDispatcher, onNitroEvent);
     CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
 
-    const processAction = useCallback((type: string, value: string = null) =>
+    const processAction = useCallback((type: string) =>
     {
         switch(type)
         {
@@ -71,20 +105,56 @@ export const FurnitureDimmerView: FC<{}> = props =>
             case 'close':
                 setDimmerData(null);
                 return;
+            case 'save':
+                widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(selectedPresetId, previewBgOnly ? 2 : 1, previewColorInt, previewBrightness, true));
+                return;
         }
-    }, [ widgetHandler ]);
+    }, [ previewBgOnly, previewBrightness, previewColorInt, selectedPresetId, widgetHandler ]);
 
     if(!dimmerData) return null;
 
     return (
-        <NitroCardView className="nitro-dimmer" simple={ true }>
+        <NitroCardView className="nitro-dimmer">
             <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ () => processAction('close') } />
-            <NitroCardContentView>
-                { !dimmerData.active && <div className="d-flex flex-column gap-2 align-items-center">
+            <NitroCardContentView className="p-0">
+                { !isActive && <div className="d-flex flex-column gap-2 align-items-center p-2">
                     <div className="dimmer-banner"></div>
                     <div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
                     <button className="btn-success btn w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.on') }</button>
                 </div> }
+                { isActive && <>
+                    <NitroCardTabsView>
+                        { presets.map(preset =>
+                            {
+                                return <NitroCardTabsItemView key={ preset.id } isActive={ selectedPresetId === preset.id } onClick={ () => setSelectedPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
+                            }) }
+                    </NitroCardTabsView>
+                    <div className="p-2">
+                        <div className="form-group mb-2">
+                            <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
+                            <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } />
+                        </div>
+                        <div className="form-group mb-2">
+                            <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
+                            <ReactSlider
+                                className={ 'nitro-slider' }
+                                min={ 75 }
+                                max={ 255 }
+                                value={ previewBrightness }
+                                onChange={ newValue => setPreviewBrightness(newValue) }
+                                thumbClassName={ 'thumb degree' }
+                                renderThumb={ (props, state) => <div {...props}>{ state.valueNow - 75 }</div> } />
+                        </div>
+                        <div className="form-check mb-2">
+                            <input className="form-check-input" type="checkbox" checked={ previewBgOnly } onChange={ (e) => setPreviewBgOnly(e.target.checked) } />
+                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
+                        </div>
+                        <div className="d-flex gap-2">
+                            <button className="btn btn-danger w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.off') }</button>
+                            <button className="btn btn-success w-100" onClick={ () => processAction('save') }>{ LocalizeText('widget.dimmer.button.apply') }</button>
+                        </div>
+                    </div>
+                </> }
             </NitroCardContentView>
         </NitroCardView>
     );

From bee5513c132e66669a196c9fae065b6c39b01879 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Tue, 14 Sep 2021 16:34:13 -0300
Subject: [PATCH 17/23] Gift ReceiverNotFound handler

---
 src/events/catalog/CatalogEvent.ts            |  1 +
 .../CatalogGiftReceiverNotFoundEvent.ts       |  9 +++++++++
 src/views/catalog/CatalogMessageHandler.tsx   |  9 ++++++++-
 .../views/gift/CatalogPageGiftView.tsx        | 20 ++++++++++++++++++-
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/events/catalog/CatalogGiftReceiverNotFoundEvent.ts

diff --git a/src/events/catalog/CatalogEvent.ts b/src/events/catalog/CatalogEvent.ts
index 818289f0..f4f0f1d1 100644
--- a/src/events/catalog/CatalogEvent.ts
+++ b/src/events/catalog/CatalogEvent.ts
@@ -9,6 +9,7 @@ export class CatalogEvent extends NitroEvent
     public static PURCHASE_FAILED: string = 'CE_PURCHASE_FAILED';
     public static SOLD_OUT: string = 'CE_SOLD_OUT';
     public static APPROVE_NAME_RESULT: string = 'CE_APPROVE_NAME_RESULT';
+    public static GIFT_RECEIVER_NOT_FOUND: string = 'CE_GIFT_RECEIVER_NOT_FOUND';
     public static PURCHASE_APPROVED: string = 'CE_PURCHASE_APPROVED';
     public static INIT_GIFT: string = 'CE_INIT_GIFT';
     public static CATALOG_RESET: string = 'CE_RESET';
diff --git a/src/events/catalog/CatalogGiftReceiverNotFoundEvent.ts b/src/events/catalog/CatalogGiftReceiverNotFoundEvent.ts
new file mode 100644
index 00000000..611eaff7
--- /dev/null
+++ b/src/events/catalog/CatalogGiftReceiverNotFoundEvent.ts
@@ -0,0 +1,9 @@
+import { CatalogEvent } from './CatalogEvent';
+
+export class CatalogGiftReceiverNotFoundEvent extends CatalogEvent
+{
+    constructor()
+    {
+        super(CatalogEvent.GIFT_RECEIVER_NOT_FOUND);
+    }
+}
diff --git a/src/views/catalog/CatalogMessageHandler.tsx b/src/views/catalog/CatalogMessageHandler.tsx
index e875ddfe..89c1e6fc 100644
--- a/src/views/catalog/CatalogMessageHandler.tsx
+++ b/src/views/catalog/CatalogMessageHandler.tsx
@@ -1,7 +1,8 @@
-import { ApproveNameMessageEvent, CatalogPageMessageEvent, CatalogPagesListEvent, CatalogPublishedMessageEvent, GiftWrappingConfigurationEvent, HabboClubOffersMessageEvent, LimitedEditionSoldOutEvent, ProductOfferEvent, PurchaseErrorMessageEvent, PurchaseNotAllowedMessageEvent, PurchaseOKMessageEvent, SellablePetPalettesMessageEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
+import { ApproveNameMessageEvent, CatalogPageMessageEvent, CatalogPagesListEvent, CatalogPublishedMessageEvent, GiftReceiverNotFoundEvent, GiftWrappingConfigurationEvent, HabboClubOffersMessageEvent, LimitedEditionSoldOutEvent, ProductOfferEvent, PurchaseErrorMessageEvent, PurchaseNotAllowedMessageEvent, PurchaseOKMessageEvent, SellablePetPalettesMessageEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
 import { GuildMembershipsMessageEvent } from '@nitrots/nitro-renderer/src/nitro/communication/messages/incoming/user/GuildMembershipsMessageEvent';
 import { FC, useCallback } from 'react';
 import { CatalogNameResultEvent, CatalogPurchaseFailureEvent } from '../../events';
+import { CatalogGiftReceiverNotFoundEvent } from '../../events/catalog/CatalogGiftReceiverNotFoundEvent';
 import { CatalogPurchasedEvent } from '../../events/catalog/CatalogPurchasedEvent';
 import { CatalogPurchaseSoldOutEvent } from '../../events/catalog/CatalogPurchaseSoldOutEvent';
 import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
@@ -96,6 +97,11 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
         dispatchUiEvent(new CatalogNameResultEvent(parser.result, parser.validationInfo));
     }, []);
 
+    const onGiftReceiverNotFoundEvent = useCallback(() =>
+    {
+        dispatchUiEvent(new CatalogGiftReceiverNotFoundEvent());
+    }, []);
+
     const onHabboClubOffersMessageEvent = useCallback((event: HabboClubOffersMessageEvent) =>
     {
         const parser = event.getParser();
@@ -168,6 +174,7 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     CreateMessageHook(GuildMembershipsMessageEvent, onGuildMembershipsMessageEvent);
     CreateMessageHook(SellablePetPalettesMessageEvent, onSellablePetPalettesMessageEvent);
     CreateMessageHook(ApproveNameMessageEvent, onApproveNameMessageEvent);
+    CreateMessageHook(GiftReceiverNotFoundEvent, onGiftReceiverNotFoundEvent);
     CreateMessageHook(HabboClubOffersMessageEvent, onHabboClubOffersMessageEvent);
     CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
     CreateMessageHook(CatalogPublishedMessageEvent, onCatalogPublishedMessageEvent);
diff --git a/src/views/catalog/views/gift/CatalogPageGiftView.tsx b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
index 3cf7f616..1d7a1bf1 100644
--- a/src/views/catalog/views/gift/CatalogPageGiftView.tsx
+++ b/src/views/catalog/views/gift/CatalogPageGiftView.tsx
@@ -29,6 +29,13 @@ export const CatalogPageGiftView: FC<{}> = props =>
     const [ maxBoxIndex, setMaxBoxIndex ] = useState<number>(0);
     const [ maxRibbonIndex, setMaxRibbonIndex ] = useState<number>(0);
 
+    const [ receiverNotFound, setReceiverNotFound ] = useState<boolean>(false);
+
+    useEffect(() =>
+    {
+        setReceiverNotFound(false);
+    }, [ receiverName ]);
+
     useEffect(() =>
     {
         if(!giftConfiguration) return;
@@ -79,11 +86,15 @@ export const CatalogPageGiftView: FC<{}> = props =>
                 setOfferId(castedEvent.offerId);
                 setIsVisible(true);
                 return;
+            case CatalogEvent.GIFT_RECEIVER_NOT_FOUND:
+                setReceiverNotFound(true);
+                return;
         }
     }, [ close ]);
 
     useUiEvent(CatalogEvent.PURCHASE_SUCCESS, onCatalogEvent);
     useUiEvent(CatalogEvent.INIT_GIFT, onCatalogEvent);
+    useUiEvent(CatalogEvent.GIFT_RECEIVER_NOT_FOUND, onCatalogEvent);
 
     const isBoxDefault = useMemo(() =>
     {
@@ -150,6 +161,12 @@ export const CatalogPageGiftView: FC<{}> = props =>
                     });
                 return;
             case 'buy':
+                if(!receiverName || receiverName.length === 0)
+                {
+                    setReceiverNotFound(true);
+                    return;
+                }
+                
                 SendMessageHook(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, showMyFace));
                 return;
         }
@@ -163,7 +180,8 @@ export const CatalogPageGiftView: FC<{}> = props =>
             <NitroCardContentView className="text-black">
                 <div className="form-group">
                     <label>{ LocalizeText('catalog.gift_wrapping.receiver') }</label>
-                    <input type="text" className="form-control form-control-sm" value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
+                    <input type="text" className={ 'form-control form-control-sm' + classNames({ ' is-invalid': receiverNotFound }) } value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
+                    { receiverNotFound && <div className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</div> }
                 </div>
                 <div className="mt-2">
                     <NitroLayoutGiftCardView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />

From a55f33578eb3ff99614cee1f96efe57090f47720 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Wed, 15 Sep 2021 13:26:51 -0300
Subject: [PATCH 18/23] Dimmer and Friends stuff

---
 public/renderer-config.json                   |  1 +
 public/ui-config.json                         | 19 +-------------
 .../friend-list/FriendListContentEvent.ts     |  2 +-
 .../item/NitroCardAccordionItemView.tsx       |  9 +++++--
 .../item/NitroCardAccordionItemView.types.ts  |  1 +
 src/views/Styles.scss                         |  2 +-
 src/views/friend-list/FriendListView.scss     |  5 ----
 .../views/friends/FriendListFriendsView.tsx   | 17 -------------
 .../friends/FriendListFriendsView.types.ts    |  5 ----
 .../FriendListRequestsItemView.types.ts       |  6 -----
 .../views/requests/FriendListRequestsView.tsx | 17 -------------
 .../requests/FriendListRequestsView.types.ts  |  6 -----
 .../FriendListMessageHandler.tsx              |  0
 .../FriendListMessageHandler.types.ts         |  0
 src/views/friends/FriendsView.scss            |  5 ++++
 .../FriendsView.tsx}                          | 14 +++++------
 .../FriendsView.types.ts}                     |  3 ---
 .../common/MessengerFriend.ts                 |  0
 .../common/MessengerRequest.ts                |  0
 .../common/MessengerSettings.ts               |  0
 .../context/FriendListContext.tsx             |  0
 .../context/FriendListContext.type.ts         |  0
 .../reducers/FriendListReducer.tsx            |  0
 .../friend-bar-item/FriendBarItemView.scss    |  0
 .../friend-bar-item/FriendBarItemView.tsx     |  0
 .../FriendBarItemView.types.ts                |  0
 .../views/friend-bar/FriendBarView.scss       |  0
 .../views/friend-bar/FriendBarView.tsx        |  0
 .../views/friend-bar/FriendBarView.types.ts   |  0
 .../friend-item/FriendsListItemView.tsx}      |  4 +--
 .../friend-item/FriendsListItemView.types.ts} |  2 +-
 .../friends/views/list/FriendsListView.tsx    | 25 +++++++++++++++++++
 .../views/list/FriendsListView.types.ts       |  7 ++++++
 .../request-item/FriendsRequestItemView.tsx}  |  4 +--
 .../FriendsRequestItemView.types.ts           |  6 +++++
 src/views/main/MainView.tsx                   |  4 +--
 .../furniture/dimmer/FurnitureDimmerView.scss |  4 +++
 .../furniture/dimmer/FurnitureDimmerView.tsx  | 19 ++++++++++++--
 38 files changed, 89 insertions(+), 98 deletions(-)
 delete mode 100644 src/views/friend-list/FriendListView.scss
 delete mode 100644 src/views/friend-list/views/friends/FriendListFriendsView.tsx
 delete mode 100644 src/views/friend-list/views/friends/FriendListFriendsView.types.ts
 delete mode 100644 src/views/friend-list/views/requests-item/FriendListRequestsItemView.types.ts
 delete mode 100644 src/views/friend-list/views/requests/FriendListRequestsView.tsx
 delete mode 100644 src/views/friend-list/views/requests/FriendListRequestsView.types.ts
 rename src/views/{friend-list => friends}/FriendListMessageHandler.tsx (100%)
 rename src/views/{friend-list => friends}/FriendListMessageHandler.types.ts (100%)
 create mode 100644 src/views/friends/FriendsView.scss
 rename src/views/{friend-list/FriendListView.tsx => friends/FriendsView.tsx} (91%)
 rename src/views/{friend-list/FriendListView.types.ts => friends/FriendsView.types.ts} (85%)
 rename src/views/{friend-list => friends}/common/MessengerFriend.ts (100%)
 rename src/views/{friend-list => friends}/common/MessengerRequest.ts (100%)
 rename src/views/{friend-list => friends}/common/MessengerSettings.ts (100%)
 rename src/views/{friend-list => friends}/context/FriendListContext.tsx (100%)
 rename src/views/{friend-list => friends}/context/FriendListContext.type.ts (100%)
 rename src/views/{friend-list => friends}/reducers/FriendListReducer.tsx (100%)
 rename src/views/{friend-list => friends}/views/friend-bar-item/FriendBarItemView.scss (100%)
 rename src/views/{friend-list => friends}/views/friend-bar-item/FriendBarItemView.tsx (100%)
 rename src/views/{friend-list => friends}/views/friend-bar-item/FriendBarItemView.types.ts (100%)
 rename src/views/{friend-list => friends}/views/friend-bar/FriendBarView.scss (100%)
 rename src/views/{friend-list => friends}/views/friend-bar/FriendBarView.tsx (100%)
 rename src/views/{friend-list => friends}/views/friend-bar/FriendBarView.types.ts (100%)
 rename src/views/{friend-list/views/friends-item/FriendListFriendsItemView.tsx => friends/views/friend-item/FriendsListItemView.tsx} (94%)
 rename src/views/{friend-list/views/friends-item/FriendListFriendsItemView.types.ts => friends/views/friend-item/FriendsListItemView.types.ts} (67%)
 create mode 100644 src/views/friends/views/list/FriendsListView.tsx
 create mode 100644 src/views/friends/views/list/FriendsListView.types.ts
 rename src/views/{friend-list/views/requests-item/FriendListRequestsItemView.tsx => friends/views/request-item/FriendsRequestItemView.tsx} (87%)
 create mode 100644 src/views/friends/views/request-item/FriendsRequestItemView.types.ts

diff --git a/public/renderer-config.json b/public/renderer-config.json
index bf3a12a3..bd228c88 100644
--- a/public/renderer-config.json
+++ b/public/renderer-config.json
@@ -33,6 +33,7 @@
     "system.packet.log": false,
     "system.pong.manually": true,
     "system.pong.interval.ms": 20000,
+    "room.color.skip.transition": true,
     "avatar.mandatory.libraries": [
         "bd:1",
         "li:0"
diff --git a/public/ui-config.json b/public/ui-config.json
index 0551121f..4a51def7 100644
--- a/public/ui-config.json
+++ b/public/ui-config.json
@@ -5,24 +5,7 @@
     "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
     "url.prefix": "http://localhost:3000",
     "chat.viewer.height.percentage": 0.40,
-    "navigator.slider.enabled": true,
-    "navigator.slider.content": [
-        {
-            "title": "Games Hub",
-            "image": "https://i.imgur.com/TFoivxi.png",
-            "roomId": 2240
-        },
-        {
-            "title": "Help Desk",
-            "image": "https://i.imgur.com/GO981GC.png",
-            "roomId": 2351
-        },
-        {
-            "title": "The Lido",
-            "image": "https://i.imgur.com/NVH38bV.png",
-            "roomId": 2346
-        }
-    ],
+    "widget.dimmer.colorwheel": true,
     "hotelview": {
         "widgets": {
             "slot.1.widget": "promoarticle",
diff --git a/src/events/friend-list/FriendListContentEvent.ts b/src/events/friend-list/FriendListContentEvent.ts
index 4527d67c..a7623cbc 100644
--- a/src/events/friend-list/FriendListContentEvent.ts
+++ b/src/events/friend-list/FriendListContentEvent.ts
@@ -1,4 +1,4 @@
-import { MessengerFriend } from '../../views/friend-list/common/MessengerFriend';
+import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
 import { FriendListEvent } from './FriendListEvent';
 
 export class FriendListContentEvent extends FriendListEvent
diff --git a/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx b/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx
index acdd4e2f..e1cb135d 100644
--- a/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx
+++ b/src/layout/card/accordion/item/NitroCardAccordionItemView.tsx
@@ -1,12 +1,17 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
 
 export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
 {
-    const { className = '', headerClassName = '', contentClassName = '', headerText = '' } = props;
+    const { className = '', headerClassName = '', contentClassName = '', headerText = '', defaultState = false } = props;
 
     const [ isExpanded, setIsExpanded ] = useState(false);
 
+    useEffect(() =>
+    {
+        setIsExpanded(defaultState);
+    }, [ defaultState ]);
+
     return (
         <div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
             <div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>
diff --git a/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts b/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts
index c3290126..771ef503 100644
--- a/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts
+++ b/src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts
@@ -4,4 +4,5 @@ export interface NitroCardAccordionItemViewProps
     headerClassName?: string;
     contentClassName?: string;
     headerText: string;
+    defaultState?: boolean;
 }
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index eecc2119..4f31d9e5 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -2,7 +2,7 @@
 @import './avatar-editor/AvatarEditorView';
 @import './camera/CameraWidgetView';
 @import './catalog/CatalogView';
-@import './friend-list/FriendListView';
+@import './friends/FriendsView';
 @import './groups/GroupView';
 @import './hotel-view/HotelView';
 @import './inventory/InventoryView';
diff --git a/src/views/friend-list/FriendListView.scss b/src/views/friend-list/FriendListView.scss
deleted file mode 100644
index c4e98765..00000000
--- a/src/views/friend-list/FriendListView.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.nitro-friend-list {
-    width: 250px;
-}
-
-@import './views//friend-bar/FriendBarView';
diff --git a/src/views/friend-list/views/friends/FriendListFriendsView.tsx b/src/views/friend-list/views/friends/FriendListFriendsView.tsx
deleted file mode 100644
index 7779c50c..00000000
--- a/src/views/friend-list/views/friends/FriendListFriendsView.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { FriendListFriendsItemView } from '../friends-item/FriendListFriendsItemView';
-import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
-
-export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
-{
-    const { list = null } = props;
-
-    if(!list) return null;
-
-    return (<>
-        { list.map((friend, index) =>
-        {
-            return <FriendListFriendsItemView key={ index } friend={ friend } />
-        }) }
-    </>);
-}
diff --git a/src/views/friend-list/views/friends/FriendListFriendsView.types.ts b/src/views/friend-list/views/friends/FriendListFriendsView.types.ts
deleted file mode 100644
index b9727b9c..00000000
--- a/src/views/friend-list/views/friends/FriendListFriendsView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MessengerFriend } from './../../common/MessengerFriend';
-export interface FriendListFriendsViewProps
-{
-    list: MessengerFriend[];
-}
diff --git a/src/views/friend-list/views/requests-item/FriendListRequestsItemView.types.ts b/src/views/friend-list/views/requests-item/FriendListRequestsItemView.types.ts
deleted file mode 100644
index bfef7b6b..00000000
--- a/src/views/friend-list/views/requests-item/FriendListRequestsItemView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { MessengerRequest } from './../../common/MessengerRequest';
-
-export interface FriendListRequestsItemViewProps
-{
-    request: MessengerRequest;
-}
diff --git a/src/views/friend-list/views/requests/FriendListRequestsView.tsx b/src/views/friend-list/views/requests/FriendListRequestsView.tsx
deleted file mode 100644
index 9041f49c..00000000
--- a/src/views/friend-list/views/requests/FriendListRequestsView.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { FriendListRequestsItemView } from '../requests-item/FriendListRequestsItemView';
-import { FriendListRequestsViewProps } from './FriendListRequestsView.types';
-
-export const FriendListRequestsView: FC<FriendListRequestsViewProps> = props =>
-{
-    const { list = null } = props;
-
-    if(!list) return null;
-
-    return (<>
-        { list.map((request, index) =>
-        {
-            return <FriendListRequestsItemView key={ index } request={ request } />
-        }) }
-    </>);
-};
diff --git a/src/views/friend-list/views/requests/FriendListRequestsView.types.ts b/src/views/friend-list/views/requests/FriendListRequestsView.types.ts
deleted file mode 100644
index 4c968d8e..00000000
--- a/src/views/friend-list/views/requests/FriendListRequestsView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { MessengerRequest } from './../../common/MessengerRequest';
-
-export interface FriendListRequestsViewProps
-{
-    list: MessengerRequest[];
-}
diff --git a/src/views/friend-list/FriendListMessageHandler.tsx b/src/views/friends/FriendListMessageHandler.tsx
similarity index 100%
rename from src/views/friend-list/FriendListMessageHandler.tsx
rename to src/views/friends/FriendListMessageHandler.tsx
diff --git a/src/views/friend-list/FriendListMessageHandler.types.ts b/src/views/friends/FriendListMessageHandler.types.ts
similarity index 100%
rename from src/views/friend-list/FriendListMessageHandler.types.ts
rename to src/views/friends/FriendListMessageHandler.types.ts
diff --git a/src/views/friends/FriendsView.scss b/src/views/friends/FriendsView.scss
new file mode 100644
index 00000000..1d882087
--- /dev/null
+++ b/src/views/friends/FriendsView.scss
@@ -0,0 +1,5 @@
+.nitro-friend-list {
+    width: 250px;
+}
+
+@import './views/friend-bar/FriendBarView';
diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friends/FriendsView.tsx
similarity index 91%
rename from src/views/friend-list/FriendListView.tsx
rename to src/views/friends/FriendsView.tsx
index 06ebf3b4..6e2d74eb 100644
--- a/src/views/friend-list/FriendListView.tsx
+++ b/src/views/friends/FriendsView.tsx
@@ -11,15 +11,13 @@ import { SendMessageHook } from '../../hooks/messages/message-event';
 import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { FriendListContextProvider } from './context/FriendListContext';
 import { FriendListMessageHandler } from './FriendListMessageHandler';
-import { FriendListViewProps } from './FriendListView.types';
 import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
 import { FriendBarView } from './views/friend-bar/FriendBarView';
-import { FriendListFriendsView } from './views/friends/FriendListFriendsView';
-import { FriendListRequestsView } from './views/requests/FriendListRequestsView';
+import { FriendsListView } from './views/list/FriendsListView';
 
 const TABS: string[] = ['friendlist.friends', 'generic.search'];
 
-export const FriendListView: FC<FriendListViewProps> = props =>
+export const FriendsView: FC<{}> = props =>
 {
     const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
     const { friends = null, requests = null, settings = null } = friendListState;
@@ -120,14 +118,14 @@ export const FriendListView: FC<FriendListViewProps> = props =>
                         </NitroCardTabsView>
                         <div className="text-black">
                             { currentTab === 0 && <NitroCardAccordionView>
-                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` }>
-                                   <FriendListFriendsView list={ onlineFriends } />
+                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
+                                   <FriendsListView list={ onlineFriends } />
                                 </NitroCardAccordionItemView>
                                 <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
-                                    <FriendListFriendsView list={ offlineFriends } />
+                                    <FriendsListView list={ offlineFriends } />
                                 </NitroCardAccordionItemView>
                                 { requests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${requests.length})` }>
-                                    <FriendListRequestsView list={ requests } />
+                                    <FriendsListView list={ requests } />
                                 </NitroCardAccordionItemView> }
                             </NitroCardAccordionView> }
                         </div>
diff --git a/src/views/friend-list/FriendListView.types.ts b/src/views/friends/FriendsView.types.ts
similarity index 85%
rename from src/views/friend-list/FriendListView.types.ts
rename to src/views/friends/FriendsView.types.ts
index 9c7675de..14fa8b5c 100644
--- a/src/views/friend-list/FriendListView.types.ts
+++ b/src/views/friends/FriendsView.types.ts
@@ -1,6 +1,3 @@
-export interface FriendListViewProps
-{}
-
 export class FriendListTabs
 {
     public static readonly FRIENDS: string  = 'friendlist.friends';
diff --git a/src/views/friend-list/common/MessengerFriend.ts b/src/views/friends/common/MessengerFriend.ts
similarity index 100%
rename from src/views/friend-list/common/MessengerFriend.ts
rename to src/views/friends/common/MessengerFriend.ts
diff --git a/src/views/friend-list/common/MessengerRequest.ts b/src/views/friends/common/MessengerRequest.ts
similarity index 100%
rename from src/views/friend-list/common/MessengerRequest.ts
rename to src/views/friends/common/MessengerRequest.ts
diff --git a/src/views/friend-list/common/MessengerSettings.ts b/src/views/friends/common/MessengerSettings.ts
similarity index 100%
rename from src/views/friend-list/common/MessengerSettings.ts
rename to src/views/friends/common/MessengerSettings.ts
diff --git a/src/views/friend-list/context/FriendListContext.tsx b/src/views/friends/context/FriendListContext.tsx
similarity index 100%
rename from src/views/friend-list/context/FriendListContext.tsx
rename to src/views/friends/context/FriendListContext.tsx
diff --git a/src/views/friend-list/context/FriendListContext.type.ts b/src/views/friends/context/FriendListContext.type.ts
similarity index 100%
rename from src/views/friend-list/context/FriendListContext.type.ts
rename to src/views/friends/context/FriendListContext.type.ts
diff --git a/src/views/friend-list/reducers/FriendListReducer.tsx b/src/views/friends/reducers/FriendListReducer.tsx
similarity index 100%
rename from src/views/friend-list/reducers/FriendListReducer.tsx
rename to src/views/friends/reducers/FriendListReducer.tsx
diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss b/src/views/friends/views/friend-bar-item/FriendBarItemView.scss
similarity index 100%
rename from src/views/friend-list/views/friend-bar-item/FriendBarItemView.scss
rename to src/views/friends/views/friend-bar-item/FriendBarItemView.scss
diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
similarity index 100%
rename from src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx
rename to src/views/friends/views/friend-bar-item/FriendBarItemView.tsx
diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.types.ts b/src/views/friends/views/friend-bar-item/FriendBarItemView.types.ts
similarity index 100%
rename from src/views/friend-list/views/friend-bar-item/FriendBarItemView.types.ts
rename to src/views/friends/views/friend-bar-item/FriendBarItemView.types.ts
diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.scss b/src/views/friends/views/friend-bar/FriendBarView.scss
similarity index 100%
rename from src/views/friend-list/views/friend-bar/FriendBarView.scss
rename to src/views/friends/views/friend-bar/FriendBarView.scss
diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.tsx b/src/views/friends/views/friend-bar/FriendBarView.tsx
similarity index 100%
rename from src/views/friend-list/views/friend-bar/FriendBarView.tsx
rename to src/views/friends/views/friend-bar/FriendBarView.tsx
diff --git a/src/views/friend-list/views/friend-bar/FriendBarView.types.ts b/src/views/friends/views/friend-bar/FriendBarView.types.ts
similarity index 100%
rename from src/views/friend-list/views/friend-bar/FriendBarView.types.ts
rename to src/views/friends/views/friend-bar/FriendBarView.types.ts
diff --git a/src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx b/src/views/friends/views/friend-item/FriendsListItemView.tsx
similarity index 94%
rename from src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx
rename to src/views/friends/views/friend-item/FriendsListItemView.tsx
index 23e053de..b8d4d75a 100644
--- a/src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx
+++ b/src/views/friends/views/friend-item/FriendsListItemView.tsx
@@ -4,9 +4,9 @@ import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
 import { MessengerFriend } from '../../common/MessengerFriend';
-import { FriendListFriendsItemViewProps } from './FriendListFriendsItemView.types';
+import { FriendsListItemViewProps } from './FriendsListItemView.types';
 
-export const FriendListFriendsItemView: FC<FriendListFriendsItemViewProps> = props =>
+export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
 {
     const { friend = null } = props;
 
diff --git a/src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts b/src/views/friends/views/friend-item/FriendsListItemView.types.ts
similarity index 67%
rename from src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts
rename to src/views/friends/views/friend-item/FriendsListItemView.types.ts
index a64cbd3b..df44d3b5 100644
--- a/src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts
+++ b/src/views/friends/views/friend-item/FriendsListItemView.types.ts
@@ -1,6 +1,6 @@
 import { MessengerFriend } from '../../common/MessengerFriend';
 
-export interface FriendListFriendsItemViewProps
+export interface FriendsListItemViewProps
 {
     friend: MessengerFriend;
 }
diff --git a/src/views/friends/views/list/FriendsListView.tsx b/src/views/friends/views/list/FriendsListView.tsx
new file mode 100644
index 00000000..86ed2707
--- /dev/null
+++ b/src/views/friends/views/list/FriendsListView.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { MessengerFriend } from '../../common/MessengerFriend';
+import { MessengerRequest } from '../../common/MessengerRequest';
+import { FriendsListItemView } from '../friend-item/FriendsListItemView';
+import { FriendsRequestItemView } from '../request-item/FriendsRequestItemView';
+import { FriendsListViewProps } from './FriendsListView.types';
+
+export const FriendsListView: FC<FriendsListViewProps> = props =>
+{
+    const { list =  null } = props;
+
+    if(!list) return null;
+
+    return (<>
+        { list.map((item, index) =>
+        {
+            if(item instanceof MessengerFriend)
+                return <FriendsListItemView key={ index } friend={ item } />
+            else if(item instanceof MessengerRequest)
+                return  <FriendsRequestItemView key={ index } request={ item } />
+            else
+                return null;
+        }) }
+    </>);
+}
diff --git a/src/views/friends/views/list/FriendsListView.types.ts b/src/views/friends/views/list/FriendsListView.types.ts
new file mode 100644
index 00000000..8a4c4bc9
--- /dev/null
+++ b/src/views/friends/views/list/FriendsListView.types.ts
@@ -0,0 +1,7 @@
+import { MessengerFriend } from '../../common/MessengerFriend';
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsListViewProps
+{
+    list: MessengerFriend[] | MessengerRequest[];
+}
diff --git a/src/views/friend-list/views/requests-item/FriendListRequestsItemView.tsx b/src/views/friends/views/request-item/FriendsRequestItemView.tsx
similarity index 87%
rename from src/views/friend-list/views/requests-item/FriendListRequestsItemView.tsx
rename to src/views/friends/views/request-item/FriendsRequestItemView.tsx
index 2763162f..6138d4fe 100644
--- a/src/views/friend-list/views/requests-item/FriendListRequestsItemView.tsx
+++ b/src/views/friends/views/request-item/FriendsRequestItemView.tsx
@@ -2,9 +2,9 @@ import { AcceptFriendComposer, DeclineFriendComposer } from '@nitrots/nitro-rend
 import { FC, useCallback } from 'react';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
-import { FriendListRequestsItemViewProps } from './FriendListRequestsItemView.types';
+import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
 
-export const FriendListRequestsItemView: FC<FriendListRequestsItemViewProps> = props =>
+export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
 {
     const { request = null } = props;
 
diff --git a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
new file mode 100644
index 00000000..4f5c38d5
--- /dev/null
+++ b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsRequestItemViewProps
+{
+    request: MessengerRequest;
+}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index c3618be1..68269e58 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -7,7 +7,7 @@ import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
 import { CatalogView } from '../catalog/CatalogView';
-import { FriendListView } from '../friend-list/FriendListView';
+import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
@@ -63,7 +63,7 @@ export const MainView: FC<MainViewProps> = props =>
             <NavigatorView />
             <InventoryView />
             <CatalogView />
-            <FriendListView />
+            <FriendsView />
             <RightSideView />
             <UserSettingsView />
             <UserProfileView />
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
index 8cffc632..1e671f8d 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
@@ -6,4 +6,8 @@
         height: 79px;
         background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
     }
+
+    .color-swatch {
+        height: 30px;
+    }
 }
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index 18cd0bcf..42b9d2ab 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -1,7 +1,7 @@
 import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
-import { GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { GetConfiguration, GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
 import { RoomDimmerPreset } from '../../../../../api/nitro/room/widgets/events/RoomDimmerPreset';
 import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
 import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
@@ -10,12 +10,15 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
 
+const DEFAULT_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
+
 export const FurnitureDimmerView: FC<{}> = props =>
 {
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
 
     const [ isActive, setIsActive ] = useState<boolean>(false);
+    const [ isFreeColorMode, setIsFreeColorMode ] = useState<boolean>(false);
     const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
     const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
 
@@ -28,6 +31,11 @@ export const FurnitureDimmerView: FC<{}> = props =>
         return parseInt(previewColor.replace('#', ''), 16);
     }, [ previewColor ]);
 
+    useEffect(() =>
+    {
+        if(GetConfiguration<boolean>('widget.dimmer.colorwheel')) setIsFreeColorMode(true);
+    }, []);
+
     useEffect(() =>
     {
         if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
@@ -132,7 +140,14 @@ export const FurnitureDimmerView: FC<{}> = props =>
                     <div className="p-2">
                         <div className="form-group mb-2">
                             <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
-                            <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } />
+                            { isFreeColorMode && <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } /> }
+                            { !isFreeColorMode && <div className="d-flex gap-2">
+                                { DEFAULT_COLORS.map((color, index) =>
+                                {
+                                    return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setPreviewColor(color) } style={{ backgroundColor: color }}></div>;
+                                }) }
+                            </div> }
+                            
                         </div>
                         <div className="form-group mb-2">
                             <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>

From ae0bf4d777d7e8f561a6fedd3e4dea9ba7400850 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 15 Sep 2021 18:58:11 -0400
Subject: [PATCH 19/23] Dimmer updates

---
 .../room/widgets/events/RoomDimmerPreset.ts   |  14 +-
 ...vent.ts => RoomWidgetUpdateDimmerEvent.ts} |  10 +-
 ...ts => RoomWidgetUpdateDimmerStateEvent.ts} |   6 +-
 src/api/nitro/room/widgets/events/index.ts    |   4 +-
 .../handlers/FurnitureDimmerWidgetHandler.ts  |  25 +-
 src/api/utils/ColorUtils.ts                   |  10 +
 src/hooks/BatchUpdates.ts                     |   6 +
 src/hooks/index.ts                            |   1 +
 src/views/room/RoomColorView.tsx              |  10 +-
 src/views/room/widgets/RoomWidgetsView.tsx    |  14 +-
 .../dimmer/DimmerFurnitureWidgetPresetItem.ts |   8 +
 .../furniture/dimmer/FurnitureDimmerView.tsx  | 305 ++++++++++--------
 12 files changed, 237 insertions(+), 176 deletions(-)
 rename src/api/nitro/room/widgets/events/{RoomWidgetDimmerUpdateEvent.ts => RoomWidgetUpdateDimmerEvent.ts} (71%)
 rename src/api/nitro/room/widgets/events/{RoomWidgetDimmerStateUpdateEvent.ts => RoomWidgetUpdateDimmerStateEvent.ts} (83%)
 create mode 100644 src/hooks/BatchUpdates.ts
 create mode 100644 src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts

diff --git a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
index cfae6512..86600d58 100644
--- a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
+++ b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts
@@ -1,14 +1,14 @@
 export class RoomDimmerPreset
 {
     private _id: number;
-    private _bgOnly: boolean;
-    private _color: string;
+    private _type: number;
+    private _color: number;
     private _brightness: number;
 
-    constructor(id: number, bgOnly: boolean, color: string, brightness: number)
+    constructor(id: number, type: number, color: number, brightness: number)
     {
         this._id = id;
-        this._bgOnly = bgOnly;
+        this._type = type;
         this._color = color;
         this._brightness = brightness;
     }
@@ -18,12 +18,12 @@ export class RoomDimmerPreset
         return this._id;
     }
 
-    public get bgOnly(): boolean
+    public get type(): number
     {
-        return this._bgOnly;
+        return this._type;
     }
 
-    public get color(): string
+    public get color(): number
     {
         return this._color;
     }
diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerEvent.ts
similarity index 71%
rename from src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
rename to src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerEvent.ts
index 74f149b7..82cdb0c6 100644
--- a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts
+++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerEvent.ts
@@ -1,10 +1,10 @@
 import { RoomDimmerPreset } from './RoomDimmerPreset';
 import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
 
-export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
+export class RoomWidgetUpdateDimmerEvent extends RoomWidgetUpdateEvent
 {
-    public static PRESETS: string = 'RWDUE_PRESETS';
-    public static HIDE: string = 'RWDUE_HIDE';
+    public static PRESETS: string = 'RWUDE_PRESETS';
+    public static HIDE: string = 'RWUDE_HIDE';
 
     private _selectedPresetId: number = 0;
     private _presets: RoomDimmerPreset[];
@@ -36,9 +36,9 @@ export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
         this._selectedPresetId = k;
     }
 
-    public setPresetValues(id: number, bgOnly: boolean, color: string, brightness: number):void
+    public setPresetValues(id: number, type: number, color: number, brightness: number):void
     {
-        const preset = new RoomDimmerPreset(id, bgOnly, color, brightness);
+        const preset = new RoomDimmerPreset(id, type, color, brightness);
 
         this._presets[(id - 1)] = preset;
     }
diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts
similarity index 83%
rename from src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts
rename to src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts
index ae1a49b7..27e9fd13 100644
--- a/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts
+++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts
@@ -1,8 +1,8 @@
 import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
 
-export class RoomWidgetDimmerStateUpdateEvent extends RoomWidgetUpdateEvent
+export class RoomWidgetUpdateDimmerStateEvent extends RoomWidgetUpdateEvent
 {
-    public static DIMMER_STATE: string = 'RWDSUE_DIMMER_STATE';
+    public static DIMMER_STATE: string = 'RWUDSE_DIMMER_STATE';
 
     private _state: number;
     private _presetId: number;
@@ -12,7 +12,7 @@ export class RoomWidgetDimmerStateUpdateEvent extends RoomWidgetUpdateEvent
 
     constructor(state: number, presetId: number, effectId: number, color: number, brightness: number)
     {
-        super(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE);
+        super(RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE);
 
         this._state         = state;
         this._presetId      = presetId;
diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts
index e70cc1ed..1c214b61 100644
--- a/src/api/nitro/room/widgets/events/index.ts
+++ b/src/api/nitro/room/widgets/events/index.ts
@@ -1,8 +1,8 @@
 export * from './IPhotoData';
+export * from './RoomDimmerPreset';
 export * from './RoomObjectItem';
 export * from './RoomWidgetAvatarInfoEvent';
 export * from './RoomWidgetChooserContentEvent';
-export * from './RoomWidgetDimmerUpdateEvent';
 export * from './RoomWidgetDoorbellEvent';
 export * from './RoomWidgetFloodControlEvent';
 export * from './RoomWidgetObjectNameEvent';
@@ -13,6 +13,8 @@ export * from './RoomWidgetUpdateChatEvent';
 export * from './RoomWidgetUpdateChatInputContentEvent';
 export * from './RoomWidgetUpdateCustomStackHeightEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
+export * from './RoomWidgetUpdateDimmerEvent';
+export * from './RoomWidgetUpdateDimmerStateEvent';
 export * from './RoomWidgetUpdateEvent';
 export * from './RoomWidgetUpdateExternalImageEvent';
 export * from './RoomWidgetUpdateInfostandEvent';
diff --git a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
index 0695304a..71e35268 100644
--- a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts
@@ -1,8 +1,8 @@
 import { NitroEvent, RoomControllerLevel, RoomEngineDimmerStateEvent, RoomEngineTriggerWidgetEvent, RoomSessionDimmerPresetsEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer';
 import { GetRoomEngine } from '../..';
 import { GetSessionDataManager } from '../../..';
-import { RoomWidgetDimmerUpdateEvent, RoomWidgetUpdateEvent } from '../events';
-import { RoomWidgetDimmerStateUpdateEvent } from '../events/RoomWidgetDimmerStateUpdateEvent';
+import { RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateEvent } from '../events';
+import { RoomWidgetUpdateDimmerStateEvent } from '../events/RoomWidgetUpdateDimmerStateEvent';
 import { RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetFurniToWidgetMessage, RoomWidgetMessage } from '../messages';
 import { RoomWidgetDimmerSavePresetMessage } from '../messages/RoomWidgetDimmerSavePresetMessage';
 import { RoomWidgetHandler } from './RoomWidgetHandler';
@@ -14,8 +14,8 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
         switch(event.type)
         {
             case RoomSessionDimmerPresetsEvent.ROOM_DIMMER_PRESETS: {
-                const presetsEvent  = (event as RoomSessionDimmerPresetsEvent);
-                const updateEvent   = new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.PRESETS);
+                const presetsEvent = (event as RoomSessionDimmerPresetsEvent);
+                const updateEvent = new RoomWidgetUpdateDimmerEvent(RoomWidgetUpdateDimmerEvent.PRESETS);
 
                 updateEvent.selectedPresetId = presetsEvent.selectedPresetId;
 
@@ -25,7 +25,7 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
                 {
                     const preset = presetsEvent.getPreset(i);
 
-                    if(preset) updateEvent.setPresetValues(preset.id, preset.bgOnly, preset.color, preset.brightness);
+                    if(preset) updateEvent.setPresetValues(preset.id, preset.type, preset.color, preset.brightness);
 
                     i++;
                 }
@@ -36,11 +36,11 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
             case RoomEngineDimmerStateEvent.ROOM_COLOR: {
                 const stateEvent = (event as RoomEngineDimmerStateEvent);
 
-                this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateDimmerStateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
                 return;
             }
             case RoomEngineTriggerWidgetEvent.REMOVE_DIMMER: {
-                this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.HIDE));
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateDimmerEvent(RoomWidgetUpdateDimmerEvent.HIDE));
                 return;
             }
         }
@@ -52,27 +52,30 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
         {
             case RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER: {
                 if(this.canOpenWidget()) this.container.roomSession.requestMoodlightSettings();
+
                 break;
             }
             case RoomWidgetDimmerSavePresetMessage.SAVE_PRESET: {
                 if(this.canOpenWidget())
                 {
                     const savePresetMessage = (message as RoomWidgetDimmerSavePresetMessage);
+
                     this.container.roomSession.updateMoodlightData(savePresetMessage.presetNumber, savePresetMessage.effectTypeId, savePresetMessage.color, savePresetMessage.brightness, savePresetMessage.apply);
                 }
+
                 break;
             }
             case RoomWidgetDimmerChangeStateMessage.CHANGE_STATE: {
                 if(this.canOpenWidget()) this.container.roomSession.toggleMoodlightState();
+
                 break;
             }
             case RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET: {
-                const roomId            = this.container.roomSession.roomId;
-                const previewMessage    = (message as RoomWidgetDimmerPreviewMessage);
-
-                if(!previewMessage || !GetRoomEngine()) return null;
+                const roomId = this.container.roomSession.roomId;
+                const previewMessage = (message as RoomWidgetDimmerPreviewMessage);
 
                 GetRoomEngine().updateObjectRoomColor(roomId, previewMessage.color, previewMessage.brightness, previewMessage.bgOnly);
+                
                 break;
             }
         }
diff --git a/src/api/utils/ColorUtils.ts b/src/api/utils/ColorUtils.ts
index fade642f..ccb6e27a 100644
--- a/src/api/utils/ColorUtils.ts
+++ b/src/api/utils/ColorUtils.ts
@@ -4,4 +4,14 @@ export class ColorUtils
     {
         return ('#' + color);
     }
+
+    public static makeColorNumberHex(color: number): string
+    {
+        return ( '#' + color.toString(16));
+    }
+
+    public static convertFromHex(color: string): number
+    {
+        return parseInt(color.replace('#', ''), 16);
+    }
 }
diff --git a/src/hooks/BatchUpdates.ts b/src/hooks/BatchUpdates.ts
new file mode 100644
index 00000000..d5f2501a
--- /dev/null
+++ b/src/hooks/BatchUpdates.ts
@@ -0,0 +1,6 @@
+import { unstable_batchedUpdates } from 'react-dom';
+
+export const BatchUpdates = (callback: () => any) =>
+{
+    return unstable_batchedUpdates(callback);
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 0068322f..4a1a3914 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,3 +1,4 @@
+export * from './BatchUpdates';
 export * from './events';
 export * from './events/core';
 export * from './events/nitro';
diff --git a/src/views/room/RoomColorView.tsx b/src/views/room/RoomColorView.tsx
index b3201b7c..693e9e89 100644
--- a/src/views/room/RoomColorView.tsx
+++ b/src/views/room/RoomColorView.tsx
@@ -1,4 +1,4 @@
-import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer';
+import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineDimmerStateEvent, RoomEngineEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomViewEvent } from '../../api';
 import { UseMountEffect } from '../../hooks';
@@ -12,7 +12,7 @@ export const RoomColorView: FC<{}> = props =>
     const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
     const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
     const [ roomFilterColor, setRoomFilterColor ] = useState(-1);
-    const { roomSession = null, canvasId = -1, eventDispatcher = null } = useRoomContext();
+    const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext();
 
     const getRenderingCanvas = useCallback(() =>
     {
@@ -139,11 +139,15 @@ export const RoomColorView: FC<{}> = props =>
 
                 return;
             }
+            case RoomEngineDimmerStateEvent.ROOM_COLOR: {
+                widgetHandler.processEvent(event);
+            }
         }
-    }, [ updateRoomBackgroundColor, updateRoomFilterColor ]);
+    }, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilterColor ]);
 
     useRoomEngineEvent(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, onRoomEngineEvent);
     useRoomEngineEvent(RoomBackgroundColorEvent.ROOM_COLOR, onRoomEngineEvent);
+    useRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent);
 
     const onRoomWidgetUpdateRoomViewEvent = useCallback((event: RoomWidgetUpdateRoomViewEvent) =>
     {
diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx
index 5033181f..8f471dde 100644
--- a/src/views/room/widgets/RoomWidgetsView.tsx
+++ b/src/views/room/widgets/RoomWidgetsView.tsx
@@ -1,7 +1,6 @@
-import { RoomEngineDimmerStateEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
+import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
-import { RoomWidgetDimmerStateUpdateEvent } from '../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
 import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events';
 import { useRoomContext } from '../context/RoomContext';
 import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
@@ -42,19 +41,12 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
 
                 return;
             }
-            case RoomEngineDimmerStateEvent.ROOM_COLOR: {
-                const stateEvent = (event as RoomEngineDimmerStateEvent);
-
-                eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
-                return;
-            }
         }
     }, [ eventDispatcher ]);
 
     useRoomEngineEvent(RoomEngineEvent.NORMAL_MODE, onRoomEngineEvent);
     useRoomEngineEvent(RoomEngineEvent.GAME_MODE, onRoomEngineEvent);
     useRoomEngineEvent(RoomZoomEvent.ROOM_ZOOM, onRoomEngineEvent);
-    useRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent);
 
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {
@@ -125,6 +117,9 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
             case RoomEngineTriggerWidgetEvent.REQUEST_PRESENT:
                 widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_PRESENT, objectId, category, event.roomId));
                 break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, objectId, category, event.roomId));
+                break;
             case RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY:
             case RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM:
             case RoomEngineTriggerWidgetEvent.OPEN_WIDGET:
@@ -156,6 +151,7 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.OPEN_WIDGET, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_WIDGET, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM, onRoomEngineObjectEvent);
 
diff --git a/src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts b/src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts
new file mode 100644
index 00000000..3e8009af
--- /dev/null
+++ b/src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts
@@ -0,0 +1,8 @@
+export class DimmerFurnitureWidgetPresetItem
+{
+    constructor(
+        public id: number = 0,
+        public type: number = 0,
+        public color: number = 0,
+        public light: number = 0) {}
+}
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index 42b9d2ab..b8c84901 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -1,175 +1,206 @@
-import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
+import { NitroEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
-import { GetConfiguration, GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
-import { RoomDimmerPreset } from '../../../../../api/nitro/room/widgets/events/RoomDimmerPreset';
-import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
-import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
-import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks';
+import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
-import { FurnitureDimmerData } from './FurnitureDimmerData';
+import { DimmerFurnitureWidgetPresetItem } from './DimmerFurnitureWidgetPresetItem';
 
-const DEFAULT_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
+const AVAILABLE_COLORS: number[] = [7665141, 21495, 15161822, 15353138, 15923281, 8581961, 0];
+const HTML_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
+const MIN_BRIGHTNESS: number = 75;
+const MAX_BRIGHTNESS: number = 255;
 
 export const FurnitureDimmerView: FC<{}> = props =>
 {
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ presets, setPresets ] = useState<DimmerFurnitureWidgetPresetItem[]>([]);
+    const [ selectedPresetId, setSelectedPresetId ] = useState(0);
+    const [ dimmerState, setDimmerState ] = useState(0);
+    const [ lastDimmerState, setLastDimmerState ] = useState(0);
+    const [ effectId, setEffectId ] = useState(0);
+    const [ color, setColor ] = useState(0xFFFFFF);
+    const [ brightness, setBrightness ] = useState(0xFF);
+    const [ selectedEffectId, setSelectedEffectId ] = useState(0);
+    const [ selectedColor, setSelectedColor ] = useState(0);
+    const [ selectedBrightness, setSelectedBrightness ] = useState(0);
+    const [ needsUpdate, setNeedsUpdate ] = useState(true);
+
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
-    const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
-
-    const [ isActive, setIsActive ] = useState<boolean>(false);
-    const [ isFreeColorMode, setIsFreeColorMode ] = useState<boolean>(false);
-    const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
-    const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
-
-    const [ previewColor, setPreviewColor ] = useState<string>('#000000');
-    const [ previewBrightness, setPreviewBrightness ] = useState<number>(125);
-    const [ previewBgOnly, setPreviewBgOnly ] = useState<boolean>(false);
-
-    const previewColorInt = useMemo(() =>
-    {
-        return parseInt(previewColor.replace('#', ''), 16);
-    }, [ previewColor ]);
-
-    useEffect(() =>
-    {
-        if(GetConfiguration<boolean>('widget.dimmer.colorwheel')) setIsFreeColorMode(true);
-    }, []);
-
-    useEffect(() =>
-    {
-        if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
-
-        const preset = presets[selectedPresetId - 1];
-
-        if(!preset) return;
-
-        setPreviewColor(preset.color);
-        setPreviewBrightness(preset.brightness);
-        setPreviewBgOnly(preset.bgOnly);
-    }, [ selectedPresetId, presets ]);
-
-    useEffect(() =>
-    {
-        if(!widgetHandler || selectedPresetId === -1 || !isActive) return;
-        
-        widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(previewColorInt, previewBrightness, previewBgOnly));
-    }, [ previewBgOnly, previewBrightness, previewColor ]);
 
     const onNitroEvent = useCallback((event: NitroEvent) =>
     {
         switch(event.type)
         {
-            case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
-                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-                
-                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
-        
-                if(!roomObject) return;
+            case RoomWidgetUpdateDimmerEvent.PRESETS: {
+                const widgetEvent = (event as RoomWidgetUpdateDimmerEvent);
 
-                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category));
-                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, widgetEvent.objectId, widgetEvent.category, widgetEvent.roomId));
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
+                const presets: DimmerFurnitureWidgetPresetItem[] = [];
 
-                setDimmerData(prevState =>
-                    {
-                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
+                for(const preset of widgetEvent.presets) presets.push(new DimmerFurnitureWidgetPresetItem(preset.id, preset.type, preset.color, preset.brightness));
 
-                        return null;
-                    });
-                return;
-            }
-            case RoomWidgetDimmerUpdateEvent.PRESETS: {
-                const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
-
-                setPresets(widgetEvent.presets);
+                setPresets(presets);
                 setSelectedPresetId(widgetEvent.selectedPresetId);
+                setIsVisible(true);
                 return;
             }
-            case RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE: {
-                const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
+            case RoomWidgetUpdateDimmerEvent.HIDE: {
+                setIsVisible(false);
 
-                setIsActive(widgetEvent.state === 1);
+                return;
+            }
+            case RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE: {
+                const widgetEvent = (event as RoomWidgetUpdateDimmerStateEvent);
+
+                BatchUpdates(() =>
+                {
+                    let prevDimmerState = 0;
+
+                    setDimmerState(prevValue =>
+                        {
+                            prevDimmerState = prevValue;
+
+                            return widgetEvent.state;
+                        });
+
+                    setLastDimmerState(prevDimmerState);
+                    setSelectedPresetId(widgetEvent.presetId);
+                    setEffectId(widgetEvent.effectId);
+                    setSelectedEffectId(widgetEvent.effectId);
+                    setColor(widgetEvent.color);
+                    setSelectedColor(widgetEvent.color);
+                    setBrightness(widgetEvent.brightness);
+                    setSelectedBrightness(widgetEvent.brightness);
+                });
                 return;
             }
         }
+    }, []);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateDimmerEvent.PRESETS, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdateDimmerEvent.HIDE, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
+
+    const selectPresetId = useCallback((id: number) =>
+    {
+        const preset = presets[(id - 1)];
+
+        if(!preset) return;
+
+        setSelectedPresetId(preset.id);
+        setSelectedEffectId(preset.type);
+        setSelectedColor(preset.color);
+        setSelectedBrightness(preset.light);
+    }, [ presets ]);
+
+    const close = useCallback(() =>
+    {
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(color, brightness, (effectId === 2)));
+
+        setIsVisible(false);
+    }, [ widgetHandler, color, brightness, effectId ]);
+
+    const toggleState = useCallback(() =>
+    {
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerChangeStateMessage());
     }, [ widgetHandler ]);
 
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
-    CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.PRESETS, eventDispatcher, onNitroEvent);
-    CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
-
-    const processAction = useCallback((type: string) =>
+    const applyChanges = useCallback(() =>
     {
-        switch(type)
-        {
-            case 'toggle_state':
-                widgetHandler.processWidgetMessage(new RoomWidgetDimmerChangeStateMessage());
-                return;
-            case 'close':
-                setDimmerData(null);
-                return;
-            case 'save':
-                widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(selectedPresetId, previewBgOnly ? 2 : 1, previewColorInt, previewBrightness, true));
-                return;
-        }
-    }, [ previewBgOnly, previewBrightness, previewColorInt, selectedPresetId, widgetHandler ]);
+        if(dimmerState === 0) return;
 
-    if(!dimmerData) return null;
+        const selectedPresetIndex = (selectedPresetId - 1);
+
+        if((selectedPresetId < 1) || (selectedPresetId > presets.length)) return;
+
+        const preset = presets[selectedPresetIndex];
+
+        if(!preset || ((selectedEffectId === preset.type) && (selectedColor === preset.color) && (selectedBrightness === preset.light))) return;
+
+        setPresets(prevValue =>
+            {
+                const newValue = [ ...prevValue ];
+
+                newValue[selectedPresetIndex] = new DimmerFurnitureWidgetPresetItem(preset.id, selectedEffectId, selectedColor, selectedBrightness);
+
+                return newValue;
+            });
+
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(preset.id, selectedEffectId, selectedColor, selectedBrightness, true));
+    }, [ widgetHandler, dimmerState, selectedPresetId, presets, selectedEffectId, selectedColor, selectedBrightness ]);
+
+    const scaledBrightness = useCallback((value: number) =>
+    {
+        return ~~((((value - MIN_BRIGHTNESS) * (100 - 0)) / (MAX_BRIGHTNESS - MIN_BRIGHTNESS)) + 0);
+    }, []);
+
+    const isFreeColorMode = useMemo(() =>
+    {
+        return GetConfiguration<boolean>('widget.dimmer.colorwheel', false);
+    }, []);
+
+    useEffect(() =>
+    {
+        if((dimmerState === 0) && (lastDimmerState === 0)) return;
+
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(selectedColor, selectedBrightness, (selectedEffectId === 2)));
+    }, [ widgetHandler, dimmerState, lastDimmerState, selectedColor, selectedBrightness, selectedEffectId ]);
+
+    if(!isVisible) return null;
 
     return (
         <NitroCardView className="nitro-dimmer">
-            <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ () => processAction('close') } />
+            <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ close } />
             <NitroCardContentView className="p-0">
-                { !isActive && <div className="d-flex flex-column gap-2 align-items-center p-2">
-                    <div className="dimmer-banner"></div>
-                    <div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
-                    <button className="btn-success btn w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.on') }</button>
-                </div> }
-                { isActive && <>
-                    <NitroCardTabsView>
-                        { presets.map(preset =>
-                            {
-                                return <NitroCardTabsItemView key={ preset.id } isActive={ selectedPresetId === preset.id } onClick={ () => setSelectedPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
-                            }) }
-                    </NitroCardTabsView>
-                    <div className="p-2">
-                        <div className="form-group mb-2">
-                            <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
-                            { isFreeColorMode && <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } /> }
-                            { !isFreeColorMode && <div className="d-flex gap-2">
-                                { DEFAULT_COLORS.map((color, index) =>
+                { (dimmerState === 0) &&
+                    <div className="d-flex flex-column gap-2 align-items-center p-2">
+                        <div className="dimmer-banner"></div>
+                        <div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
+                        <button className="btn-success btn w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</button>
+                    </div> }
+                { (dimmerState === 1) &&
+                    <>
+                        <NitroCardTabsView>
+                            { presets.map(preset =>
                                 {
-                                    return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setPreviewColor(color) } style={{ backgroundColor: color }}></div>;
+                                    return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
                                 }) }
-                            </div> }
-                            
+                        </NitroCardTabsView>
+                        <div className="p-2">
+                            <div className="form-group mb-2">
+                                <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
+                                { isFreeColorMode &&
+                                    <input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
+                                { !isFreeColorMode &&
+                                    <div className="d-flex gap-2">
+                                        { AVAILABLE_COLORS.map((color, index) =>
+                                        {
+                                            return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
+                                        }) }
+                                </div> }
+                            </div>
+                            <div className="form-group mb-2">
+                                <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
+                                <ReactSlider
+                                    className={ 'nitro-slider' }
+                                    min={ MIN_BRIGHTNESS }
+                                    max={ MAX_BRIGHTNESS }
+                                    value={ selectedBrightness }
+                                    onChange={ value => setSelectedBrightness(value) }
+                                    thumbClassName={ 'thumb percent' }
+                                    renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
+                            </div>
+                            <div className="form-check mb-2">
+                                <input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
+                                <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
+                            </div>
+                            <div className="d-flex gap-2">
+                                <button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
+                                <button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
+                            </div>
                         </div>
-                        <div className="form-group mb-2">
-                            <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
-                            <ReactSlider
-                                className={ 'nitro-slider' }
-                                min={ 75 }
-                                max={ 255 }
-                                value={ previewBrightness }
-                                onChange={ newValue => setPreviewBrightness(newValue) }
-                                thumbClassName={ 'thumb degree' }
-                                renderThumb={ (props, state) => <div {...props}>{ state.valueNow - 75 }</div> } />
-                        </div>
-                        <div className="form-check mb-2">
-                            <input className="form-check-input" type="checkbox" checked={ previewBgOnly } onChange={ (e) => setPreviewBgOnly(e.target.checked) } />
-                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
-                        </div>
-                        <div className="d-flex gap-2">
-                            <button className="btn btn-danger w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.off') }</button>
-                            <button className="btn btn-success w-100" onClick={ () => processAction('save') }>{ LocalizeText('widget.dimmer.button.apply') }</button>
-                        </div>
-                    </div>
-                </> }
+                    </> }
             </NitroCardContentView>
         </NitroCardView>
     );

From 261dfa7e198827477f9725ae12f1d61bf1e93435 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 15 Sep 2021 19:00:18 -0400
Subject: [PATCH 20/23] Update config

---
 public/ui-config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/ui-config.json b/public/ui-config.json
index 4a51def7..1cf49b7a 100644
--- a/public/ui-config.json
+++ b/public/ui-config.json
@@ -5,7 +5,7 @@
     "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
     "url.prefix": "http://localhost:3000",
     "chat.viewer.height.percentage": 0.40,
-    "widget.dimmer.colorwheel": true,
+    "widget.dimmer.colorwheel": false,
     "hotelview": {
         "widgets": {
             "slot.1.widget": "promoarticle",

From 8a79d3b9da8ce14d9f88e67f8092a0f8eb4c5202 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 15 Sep 2021 19:52:01 -0400
Subject: [PATCH 21/23] Dimmer updates

---
 src/views/room/RoomColorView.tsx              |   2 -
 src/views/room/widgets/RoomWidgetsView.tsx    | 107 ++++++++++++++++--
 .../furniture/dimmer/FurnitureDimmerView.tsx  |   1 -
 3 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/src/views/room/RoomColorView.tsx b/src/views/room/RoomColorView.tsx
index 693e9e89..107ab6fe 100644
--- a/src/views/room/RoomColorView.tsx
+++ b/src/views/room/RoomColorView.tsx
@@ -11,7 +11,6 @@ export const RoomColorView: FC<{}> = props =>
     const [ roomBackgroundColor, setRoomBackgroundColor ] = useState(0);
     const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
     const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
-    const [ roomFilterColor, setRoomFilterColor ] = useState(-1);
     const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext();
 
     const getRenderingCanvas = useCallback(() =>
@@ -113,7 +112,6 @@ export const RoomColorView: FC<{}> = props =>
     {
         const newColor = ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness));
 
-        setRoomFilterColor(newColor);
         updateRoomFilter(newColor);
     }, [ updateRoomFilter ]);
 
diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx
index 8f471dde..c2c8922d 100644
--- a/src/views/room/widgets/RoomWidgetsView.tsx
+++ b/src/views/room/widgets/RoomWidgetsView.tsx
@@ -1,6 +1,6 @@
-import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
+import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineRoomAdEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
+import { CanManipulateFurniture, GetRoomEngine, GetSessionDataManager, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
 import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events';
 import { useRoomContext } from '../context/RoomContext';
 import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
@@ -48,6 +48,16 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
     useRoomEngineEvent(RoomEngineEvent.GAME_MODE, onRoomEngineEvent);
     useRoomEngineEvent(RoomZoomEvent.ROOM_ZOOM, onRoomEngineEvent);
 
+    const handleRoomAdClick = useCallback((event: RoomEngineRoomAdEvent) =>
+    {
+
+    }, []);
+
+    const handleRoomAdTooltip = useCallback((event: RoomEngineRoomAdEvent) =>
+    {
+
+    }, []);
+
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {
         if(!roomSession || !widgetHandler) return;
@@ -114,18 +124,76 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
             case RoomEngineObjectEvent.MOUSE_LEAVE:
                 updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OUT, objectId, category, event.roomId);
                 break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_CREDITFURNI:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_CREDITFURNI, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_STICKIE:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_STICKIE, objectId, category, event.roomId));
+                break;
             case RoomEngineTriggerWidgetEvent.REQUEST_PRESENT:
                 widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_PRESENT, objectId, category, event.roomId));
                 break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_TROPHY:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_TROPHY, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_TEASER:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_TEASER, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_ECOTRONBOX:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_ECOTRONBOX, objectId, category, event.roomId));
+                break;
             case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER:
                 widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, objectId, category, event.roomId));
                 break;
-            case RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY:
-            case RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM:
+            case RoomEngineTriggerWidgetEvent.REQUEST_PLACEHOLDER:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_PLACEHOLDER, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_CLOTHING_CHANGE:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_CLOTHING_CHANGE, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_PLAYLIST_EDITOR:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_PLAYLIST_EDITOR, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_ACHIEVEMENT_RESOLUTION_ENGRAVING:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_ACHIEVEMENT_RESOLUTION_ENGRAVING, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_BADGE_DISPLAY_ENGRAVING:
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_BADGE_DISPLAY_ENGRAVING, objectId, category, event.roomId));
+                break;
+            case RoomEngineTriggerWidgetEvent.REQUEST_ACHIEVEMENT_RESOLUTION_FAILED: {
+                const roomObject = GetRoomEngine().getRoomObject(event.roomId, objectId, category);
+                const ownerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
+
+                if(ownerId === GetSessionDataManager().userId)
+                {
+                    widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_ACHIEVEMENT_RESOLUTION_FAILED, objectId, category, event.roomId));
+                }
+                break;
+            }
             case RoomEngineTriggerWidgetEvent.OPEN_WIDGET:
             case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET:
+            case RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU:
+            case RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU:
+            case RoomEngineTriggerWidgetEvent.REMOVE_DIMMER:
+            case RoomEngineTriggerWidgetEvent.REQUEST_MANNEQUIN:
+            case RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY:
+            case RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM:
+            case RoomEngineTriggerWidgetEvent.REQUEST_BACKGROUND_COLOR:
+            case RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING:
+            case RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY:
+            case RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY:
+            case RoomEngineTriggerWidgetEvent.REQUEST_INTERNAL_LINK:
+            case RoomEngineTriggerWidgetEvent.REQUEST_ROOM_LINK:
                 widgetHandler.processEvent(event);
                 break;
+            case RoomEngineRoomAdEvent.FURNI_CLICK:
+            case RoomEngineRoomAdEvent.FURNI_DOUBLE_CLICK:
+                handleRoomAdClick(event);
+                break;
+            case RoomEngineRoomAdEvent.TOOLTIP_SHOW:
+            case RoomEngineRoomAdEvent.TOOLTIP_HIDE:
+                handleRoomAdTooltip(event);
+                break;
         }
 
         if(updateEvent)
@@ -136,7 +204,7 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
 
             if(dispatchEvent) widgetHandler.eventDispatcher.dispatchEvent(updateEvent);
         }
-    }, [ roomSession, widgetHandler ]);
+    }, [ roomSession, widgetHandler, handleRoomAdClick, handleRoomAdTooltip ]);
 
     useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineObjectEvent.DESELECTED, onRoomEngineObjectEvent);
@@ -148,12 +216,37 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
     useRoomEngineEvent(RoomEngineObjectEvent.REQUEST_MANIPULATION, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineObjectEvent.MOUSE_ENTER, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineObjectEvent.MOUSE_LEAVE, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_CREDITFURNI, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_STICKIE, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_TROPHY, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_TEASER, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_ECOTRONBOX, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PLACEHOLDER, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_CLOTHING_CHANGE, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PLAYLIST_EDITOR, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_ACHIEVEMENT_RESOLUTION_ENGRAVING, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_BADGE_DISPLAY_ENGRAVING, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_ACHIEVEMENT_RESOLUTION_FAILED, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.OPEN_WIDGET, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_WIDGET, onRoomEngineObjectEvent);
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REMOVE_DIMMER, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_MANNEQUIN, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY, onRoomEngineObjectEvent);
     useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_BACKGROUND_COLOR, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_INTERNAL_LINK, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_ROOM_LINK, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineRoomAdEvent.FURNI_CLICK, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineRoomAdEvent.FURNI_DOUBLE_CLICK, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineRoomAdEvent.TOOLTIP_SHOW, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineRoomAdEvent.TOOLTIP_HIDE, onRoomEngineObjectEvent);
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
     {
diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index b8c84901..2086a13c 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -25,7 +25,6 @@ export const FurnitureDimmerView: FC<{}> = props =>
     const [ selectedEffectId, setSelectedEffectId ] = useState(0);
     const [ selectedColor, setSelectedColor ] = useState(0);
     const [ selectedBrightness, setSelectedBrightness ] = useState(0);
-    const [ needsUpdate, setNeedsUpdate ] = useState(true);
 
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
 

From 915d05adb1b79feda7856dd8831f685d7a681d52 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 15 Sep 2021 20:41:56 -0400
Subject: [PATCH 22/23] Update dimmer

---
 src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
index 2086a13c..7c2022a9 100644
--- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
+++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
@@ -58,7 +58,7 @@ export const FurnitureDimmerView: FC<{}> = props =>
 
                     setDimmerState(prevValue =>
                         {
-                            prevDimmerState = prevValue;
+                            setLastDimmerState(prevValue);
 
                             return widgetEvent.state;
                         });

From 393d40ff41ed2c3fdc8a55e9bc6385c27cb3e537 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 15 Sep 2021 21:14:32 -0400
Subject: [PATCH 23/23] Update exchange

---
 .../RoomWidgetUpdateCreditFurniEvent.ts       | 34 +++++++++++
 src/api/nitro/room/widgets/events/index.ts    |  1 +
 .../handlers/FurnitureCreditWidgetHandler.ts  | 59 ++++++++++++++++++
 src/api/nitro/room/widgets/handlers/index.ts  |  1 +
 .../RoomWidgetCreditFurniRedeemMessage.ts     | 20 +++++++
 src/api/nitro/room/widgets/messages/index.ts  |  1 +
 src/views/room/RoomView.tsx                   |  3 +-
 .../FurnitureExchangeCreditData.ts            |  7 ---
 .../FurnitureExchangeCreditView.tsx           | 60 ++++++-------------
 9 files changed, 137 insertions(+), 49 deletions(-)
 create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetUpdateCreditFurniEvent.ts
 create mode 100644 src/api/nitro/room/widgets/handlers/FurnitureCreditWidgetHandler.ts
 create mode 100644 src/api/nitro/room/widgets/messages/RoomWidgetCreditFurniRedeemMessage.ts
 delete mode 100644 src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditData.ts

diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateCreditFurniEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateCreditFurniEvent.ts
new file mode 100644
index 00000000..be70172a
--- /dev/null
+++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateCreditFurniEvent.ts
@@ -0,0 +1,34 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateCreditFurniEvent extends RoomWidgetUpdateEvent
+{
+    public static CREDIT_FURNI_UPDATE: string = 'RWUCFE_CREDIT_FURNI_UPDATE';
+
+    private _objectId: number;
+    private _value: number;
+    private _furniType: string;
+
+    constructor(type: string, objectId: number, value: number, furniType: string)
+    {
+        super(type);
+
+        this._objectId = objectId;
+        this._value = value;
+        this._furniType = furniType;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get value(): number
+    {
+        return this._value;
+    }
+
+    public get furniType(): string
+    {
+        return this._furniType;
+    }
+}
diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts
index 1c214b61..f612d85b 100644
--- a/src/api/nitro/room/widgets/events/index.ts
+++ b/src/api/nitro/room/widgets/events/index.ts
@@ -11,6 +11,7 @@ export * from './RoomWidgetRoomObjectUpdateEvent';
 export * from './RoomWidgetUpdateBackgroundColorPreviewEvent';
 export * from './RoomWidgetUpdateChatEvent';
 export * from './RoomWidgetUpdateChatInputContentEvent';
+export * from './RoomWidgetUpdateCreditFurniEvent';
 export * from './RoomWidgetUpdateCustomStackHeightEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
 export * from './RoomWidgetUpdateDimmerEvent';
diff --git a/src/api/nitro/room/widgets/handlers/FurnitureCreditWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureCreditWidgetHandler.ts
new file mode 100644
index 00000000..7ab62fbb
--- /dev/null
+++ b/src/api/nitro/room/widgets/handlers/FurnitureCreditWidgetHandler.ts
@@ -0,0 +1,59 @@
+import { FurnitureExchangeComposer, NitroEvent, RoomObjectVariable, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent, RoomWidgetUpdateEvent } from '..';
+import { GetRoomEngine } from '../..';
+import { IsOwnerOfFurniture } from '../../..';
+import { RoomWidgetFurniToWidgetMessage, RoomWidgetMessage } from '../messages';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureCreditWidgetHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {
+        return;
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+            case RoomWidgetFurniToWidgetMessage.REQUEST_CREDITFURNI: {
+                const creditMessage = (message as RoomWidgetFurniToWidgetMessage);
+
+                const roomObject = GetRoomEngine().getRoomObject(creditMessage.roomId, creditMessage.objectId, creditMessage.category);
+
+                if(!roomObject || !IsOwnerOfFurniture(roomObject)) return;
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateCreditFurniEvent(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, creditMessage.objectId, roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_CREDIT_VALUE), (roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_TYPE_ID) + '_' + creditMessage.type + '_' + creditMessage.objectId)));
+
+                break;
+            }
+            case RoomWidgetCreditFurniRedeemMessage.REDEEM: {
+                const redeemMessage = (message as RoomWidgetCreditFurniRedeemMessage);
+
+                this.container.roomSession.connection.send(new FurnitureExchangeComposer(redeemMessage.objectId));
+
+                break;
+            }
+        }
+
+        return null;
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.FURNI_CREDIT_WIDGET;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetFurniToWidgetMessage.REQUEST_CREDITFURNI,
+            RoomWidgetCreditFurniRedeemMessage.REDEEM
+        ];
+    }
+}
diff --git a/src/api/nitro/room/widgets/handlers/index.ts b/src/api/nitro/room/widgets/handlers/index.ts
index ebd2591f..f2a12569 100644
--- a/src/api/nitro/room/widgets/handlers/index.ts
+++ b/src/api/nitro/room/widgets/handlers/index.ts
@@ -1,6 +1,7 @@
 export * from './DoorbellWidgetHandler';
 export * from './FurniChooserWidgetHandler';
 export * from './FurnitureContextMenuWidgetHandler';
+export * from './FurnitureCreditWidgetHandler';
 export * from './FurnitureCustomStackHeightWidgetHandler';
 export * from './FurnitureDimmerWidgetHandler';
 export * from './FurnitureExternalImageWidgetHandler';
diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetCreditFurniRedeemMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetCreditFurniRedeemMessage.ts
new file mode 100644
index 00000000..7b77fdaa
--- /dev/null
+++ b/src/api/nitro/room/widgets/messages/RoomWidgetCreditFurniRedeemMessage.ts
@@ -0,0 +1,20 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetCreditFurniRedeemMessage extends RoomWidgetMessage
+{
+    public static REDEEM: string = 'RWCFRM_REDEEM';
+
+    private _objectId: number;
+
+    constructor(type: string, objectId: number)
+    {
+        super(type);
+        
+        this._objectId = objectId;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+}
diff --git a/src/api/nitro/room/widgets/messages/index.ts b/src/api/nitro/room/widgets/messages/index.ts
index 65309aad..287a3aa6 100644
--- a/src/api/nitro/room/widgets/messages/index.ts
+++ b/src/api/nitro/room/widgets/messages/index.ts
@@ -4,6 +4,7 @@ export * from './RoomWidgetChangePostureMessage';
 export * from './RoomWidgetChatMessage';
 export * from './RoomWidgetChatSelectAvatarMessage';
 export * from './RoomWidgetChatTypingMessage';
+export * from './RoomWidgetCreditFurniRedeemMessage';
 export * from './RoomWidgetDanceMessage';
 export * from './RoomWidgetDimmerChangeStateMessage';
 export * from './RoomWidgetDimmerPreviewMessage';
diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx
index 9ac948a8..89b96ef0 100644
--- a/src/views/room/RoomView.tsx
+++ b/src/views/room/RoomView.tsx
@@ -1,6 +1,6 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
+import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
@@ -39,6 +39,7 @@ export const RoomView: FC<RoomViewProps> = props =>
 
         widgetHandlerManager.registerHandler(new FurniChooserWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurnitureCreditWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureCustomStackHeightWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
         widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditData.ts b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditData.ts
deleted file mode 100644
index eeb128b3..00000000
--- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditData.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export class FurnitureExchangeCreditData
-{
-    constructor(
-        public objectId: number,
-        public category: number,
-        public value: number) {}
-}
diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
index 43204da6..e8f6387b 100644
--- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
+++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
@@ -1,73 +1,51 @@
-import { FurnitureExchangeComposer, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetRoomEngine, GetRoomSession, IsOwnerOfFurniture, LocalizeText, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
+import { BatchUpdates } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
-import { FurnitureExchangeCreditData } from './FurnitureExchangeCreditData';
 
 export const FurnitureExchangeCreditView: FC<{}> = props =>
 {
+    const [ objectId, setObjectId ] = useState(-1);
+    const [ value, setValue ] = useState(0);
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
-    const [ exchangeCreditData, setExchangeCreditData ] = useState<FurnitureExchangeCreditData>(null);
 
-    const onNitroEvent = useCallback((event: NitroEvent) =>
+    const onRoomWidgetUpdateCreditFurniEvent = useCallback((event: RoomWidgetUpdateCreditFurniEvent) =>
     {
-        switch(event.type)
-        {
-            case RoomEngineTriggerWidgetEvent.REQUEST_CREDITFURNI: {
-                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-
-                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
-
-                if(!roomObject || !IsOwnerOfFurniture(roomObject)) return;
-
-                const value = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_CREDIT_VALUE);
-
-                setExchangeCreditData(new FurnitureExchangeCreditData(widgetEvent.objectId, widgetEvent.category, value));
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
-
-                setExchangeCreditData(prevState =>
-                    {
-                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
-
-                        return null;
-                    });
-                return;
-            }
-        }
+        setObjectId(event.objectId);
+        setValue(event.value);
     }, []);
 
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_CREDITFURNI, onNitroEvent);
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, eventDispatcher, onRoomWidgetUpdateCreditFurniEvent);
 
     const processAction = useCallback((type: string, value: string = null) =>
     {
         switch(type)
         {
             case 'close':
-                setExchangeCreditData(null);
+                BatchUpdates(() =>
+                {
+                    setObjectId(-1);
+                    setValue(0);
+                });
                 return;
             case 'redeem':
-                if(!exchangeCreditData) return null;
-                
-                GetRoomSession().connection.send(new FurnitureExchangeComposer(exchangeCreditData.objectId));
+                widgetHandler.processWidgetMessage(new RoomWidgetCreditFurniRedeemMessage(RoomWidgetCreditFurniRedeemMessage.REDEEM, objectId));
+
+                processAction('close');
                 return;
         }
-    }, [exchangeCreditData]);
+    }, [ widgetHandler, objectId ]);
 
-    if(!exchangeCreditData) return null;
+    if(objectId === -1) return null;
 
     return (
         <NitroCardView className="nitro-exchange-credit" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ event => processAction('close') } />
             <NitroCardContentView>
                 <div className="text-black mb-2">
-                    { LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ exchangeCreditData.value.toString() ]) }
+                    { LocalizeText('widgets.furniture.credit.redeem.value', [ 'value' ], [ value.toString() ]) }
                 </div>
                 <button className="btn btn-success w-100" onClick={ event => processAction('redeem') }>{ LocalizeText('catalog.redeem.dialog.button.exchange') }</button>
             </NitroCardContentView>