Merge pull request #88 from Lorenzune/feat/wired-fixes-apr08

Feat/wired fixes apr08
2026-06-19 15:06:20 +00:00 · 2026-04-13 16:58:40 +02:00
parent 5eb94b34a4 bae6f58b10
commit 05c288b5db
601 changed files with 16048 additions and 2436 deletions
@@ -0,0 +1,729 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nitro Cards Current Snapshot</title>
+    <style>
+        :root {
+            --page-bg: #1d1f24;
+            --panel-bg: #2a2d33;
+            --panel-border: #454a54;
+            --text: #f3f4f6;
+            --muted: #b9bec9;
+            --card-border: #283f5d;
+            --card-header: #1e7295;
+            --card-body: #dfdfdf;
+            --tab-bg: #b6bec5;
+            --tab-active: #dfdfdf;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            padding: 24px;
+            background: var(--page-bg);
+            color: var(--text);
+            font-family: Arial, sans-serif;
+        }
+
+        h1,
+        h2 {
+            margin: 0 0 12px;
+        }
+
+        h1 {
+            font-size: 22px;
+        }
+
+        h2 {
+            font-size: 16px;
+        }
+
+        p {
+            margin: 0 0 16px;
+            color: var(--muted);
+        }
+
+        .layout {
+            display: grid;
+            grid-template-columns: 420px minmax(480px, 1fr);
+            gap: 24px;
+            align-items: start;
+        }
+
+        .panel {
+            background: var(--panel-bg);
+            border: 1px solid var(--panel-border);
+            border-radius: 10px;
+            padding: 16px;
+        }
+
+        .preview-stack {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .nitro-card {
+            resize: both;
+            overflow: hidden;
+            position: relative;
+            border-radius: 4px;
+            border: 1px solid var(--card-border);
+            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+            width: 100%;
+            max-width: 380px;
+        }
+
+        .nitro-card.theme-primary .nitro-card-header {
+            min-height: 33px;
+            max-height: 33px;
+            background: var(--card-header);
+        }
+
+        .nitro-card.theme-primary-slim .nitro-card-header {
+            position: relative;
+            min-height: 28px;
+            max-height: 28px;
+            background: repeating-linear-gradient(#2dabc2, #2dabc2 50%, #2b91a7 50%, #2b91a7 100%);
+            border-bottom: 2px solid #257f92;
+            box-shadow: 0 2px white;
+            width: 100%;
+            margin: 0;
+            padding-top: 2px;
+        }
+
+        .nitro-card.theme-primary-slim .nitro-card-header::before {
+            position: absolute;
+            content: " ";
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        .nitro-card.theme-primary-slim .nitro-card-header-text {
+            color: #fff;
+            text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+            font-size: 18px;
+            min-height: 21px;
+        }
+
+        .nitro-card-header {
+            position: relative;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .nitro-card-header-inner {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+        }
+
+        .nitro-card-header-text {
+            font-size: 20px;
+            color: #fff;
+            text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+            font-weight: 700;
+        }
+
+        .ubuntu-close-button {
+            position: absolute;
+            right: 8px;
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+            padding: 2px;
+            border-radius: 4px;
+            box-shadow: 0 0 0 1.6px #fff;
+            border: 2px solid #921911;
+            background: repeating-linear-gradient(
+                rgba(245, 80, 65, 1),
+                rgba(245, 80, 65, 1) 50%,
+                rgba(194, 48, 39, 1) 50%,
+                rgba(194, 48, 39, 1) 100%
+            );
+        }
+
+        .nitro-card-tabs {
+            display: flex;
+            justify-content: center;
+            gap: 2px;
+            background: #185d79;
+            min-height: 35px;
+            max-height: 35px;
+            padding: 4px 8px 0;
+            border-bottom: 1px solid var(--card-border);
+            margin-top: -1px;
+        }
+
+        .nitro-card-tabs-item {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            cursor: pointer;
+            border-top-left-radius: 6px;
+            border-top-right-radius: 6px;
+            background: var(--tab-bg);
+            padding: 4px 12px;
+            z-index: 1;
+            border-top: 1px solid var(--card-border);
+            border-left: 1px solid var(--card-border);
+            border-right: 1px solid var(--card-border);
+            color: #000;
+            min-width: 96px;
+        }
+
+        .nitro-card-tabs-item::before {
+            content: "";
+            position: absolute;
+            width: 93%;
+            height: 3px;
+            border-radius: 4px;
+            top: 1.5px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            z-index: 1;
+            background: #c2c9d1;
+        }
+
+        .nitro-card-tabs-item.active {
+            background: var(--tab-active);
+            margin-bottom: -1px;
+        }
+
+        .nitro-card-tabs-item.active::before {
+            background: white;
+        }
+
+        .nitro-card-content {
+            height: 220px;
+            padding: 8px;
+            overflow: auto;
+            background: var(--card-body);
+            color: #000;
+        }
+
+        .nitro-card-content p {
+            color: #000;
+            margin-bottom: 10px;
+        }
+
+        .code-block {
+            width: 100%;
+            min-height: 180px;
+            resize: vertical;
+            border: 1px solid #5a6170;
+            border-radius: 8px;
+            background: #14161a;
+            color: #e9edf5;
+            padding: 12px;
+            font: 12px/1.5 Consolas, monospace;
+            white-space: pre;
+            overflow: auto;
+        }
+
+        .code-section {
+            margin-bottom: 18px;
+        }
+
+        @media (max-width: 980px) {
+            .layout {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>NitroCard attuali</h1>
+    <p>Questo file contiene una preview HTML modificabile e una copia esatta del codice sorgente attuale delle card nel progetto.</p>
+
+    <div class="layout">
+        <section class="panel">
+            <h2>Preview</h2>
+            <div class="preview-stack">
+                <div class="nitro-card theme-primary">
+                    <div class="nitro-card-header">
+                        <div class="nitro-card-header-inner">
+                            <span class="nitro-card-header-text">Primary Card</span>
+                            <div class="ubuntu-close-button"></div>
+                        </div>
+                    </div>
+                    <div class="nitro-card-tabs">
+                        <div class="nitro-card-tabs-item active">Tab 1</div>
+                        <div class="nitro-card-tabs-item">Tab 2</div>
+                        <div class="nitro-card-tabs-item">Tab 3</div>
+                    </div>
+                    <div class="nitro-card-content">
+                        <p>Questo blocco riproduce la struttura visiva attuale delle NitroCard del progetto.</p>
+                        <p>Header blu, tabs grigie e content area chiara.</p>
+                    </div>
+                </div>
+
+                <div class="nitro-card theme-primary-slim">
+                    <div class="nitro-card-header">
+                        <div class="nitro-card-header-inner">
+                            <span class="nitro-card-header-text">Slim Card</span>
+                            <div class="ubuntu-close-button"></div>
+                        </div>
+                    </div>
+                    <div class="nitro-card-content" style="height: 160px;">
+                        <p>Versione slim con header a righe come nel CSS attuale.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="panel">
+            <h2>Snapshot codice attuale</h2>
+
+            <div class="code-section">
+                <div class="code-block">Nitro-V3/src/common/card/NitroCardView.tsx
+
+import { FC, useMemo, useRef } from 'react';
+import { Column, ColumnProps } from '..';
+import { DraggableWindow, DraggableWindowPosition, DraggableWindowProps } from '../draggable-window';
+import { NitroCardContextProvider } from './NitroCardContext';
+
+export interface NitroCardViewProps extends DraggableWindowProps, ColumnProps
+{
+    theme?: string;
+    isResizable?: boolean;
+}
+
+export const NitroCardView: FC&lt;NitroCardViewProps&gt; = props =&gt;
+{
+    const { theme = 'primary', uniqueKey = null, handleSelector = '.drag-handler', windowPosition = DraggableWindowPosition.CENTER, disableDrag = false, overflow = 'hidden', position = 'relative', gap = 0, classNames = [], isResizable = true, ...rest } = props;
+    const elementRef = useRef&lt;HTMLDivElement&gt;();
+
+    const getClassNames = useMemo(() =&gt;
+    {
+        const newClassNames: string[] = [ isResizable ? 'resize' : 'resize-none', 'rounded', 'shadow' ];
+
+        // Card Theme Changer
+        newClassNames.push('border border-[#283F5D]');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames, isResizable ]);
+
+    return (
+        &lt;NitroCardContextProvider value={ { theme } }&gt;
+            &lt;DraggableWindow disableDrag={ disableDrag } handleSelector={ handleSelector } uniqueKey={ uniqueKey } windowPosition={ windowPosition }&gt;
+                &lt;Column classNames={ getClassNames } gap={ gap } innerRef={ elementRef } overflow={ overflow } position={ position } { ...rest } /&gt;
+            &lt;/DraggableWindow&gt;
+        &lt;/NitroCardContextProvider&gt;
+    );
+};</div>
+            </div>
+
+            <div class="code-section">
+                <div class="code-block">Nitro-V3/src/common/card/NitroCardHeaderView.tsx
+
+import { FC, MouseEvent } from 'react';
+import { FaFlag } from 'react-icons/fa';
+import { Base, Column, ColumnProps, Flex } from '..';
+
+interface NitroCardHeaderViewProps extends ColumnProps
+{
+    headerText: string;
+    isGalleryPhoto?: boolean;
+    noCloseButton?: boolean;
+    isInfoToHabboPages?: boolean;
+    onReportPhoto?: (event: MouseEvent) =&gt; void;
+    onClickInfoHabboPages?: (event: MouseEvent) =&gt; void;
+    onCloseClick: (event: MouseEvent) =&gt; void;
+}
+
+export const NitroCardHeaderView: FC&lt;NitroCardHeaderViewProps&gt; = props =&gt;
+{
+    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, isInfoToHabboPages = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+
+
+
+    const onMouseDown = (event: MouseEvent&lt;HTMLDivElement&gt;) =&gt;
+    {
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+    };
+
+    return (
+        &lt;Column center className={ 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header' } { ...rest }&gt;
+            &lt;Flex center fullWidth&gt;
+                &lt;span className="text-xl text-white drop-shadow-lg"&gt;{ headerText }&lt;/span&gt;
+                { isGalleryPhoto &amp;&amp;
+                    &lt;Base className="inset-e-4 nitro-card-header-report-camera" position="absolute" onClick={ onReportPhoto }&gt;
+                        &lt;FaFlag className="fa-icon" /&gt;
+                    &lt;/Base&gt;
+                }
+                { isInfoToHabboPages &amp;&amp;
+                    &lt;Base className="absolute right-8 nitro-card-header-info-habbopages cursor-pointer" position="absolute" onClick={ onClickInfoHabboPages } /&gt;
+                }
+                &lt;div className="absolute flex items-center justify-center cursor-pointer right-2 p-[2px] ubuntu-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }&gt;
+                &lt;/div&gt;
+
+            &lt;/Flex&gt;
+        &lt;/Column&gt;
+    );
+};</div>
+            </div>
+
+            <div class="code-section">
+                <div class="code-block">Nitro-V3/src/common/card/NitroCardContentView.tsx
+
+import { FC, useMemo } from 'react';
+import { Column, ColumnProps } from '..';
+
+export const NitroCardContentView: FC&lt;ColumnProps&gt; = props =&gt;
+{
+    const { overflow = 'auto', classNames = [], ...rest } = props;
+
+    const getClassNames = useMemo(() =&gt;
+    {
+        // Theme Changer
+        const newClassNames: string[] = [ 'container-fluid', 'h-full p-[8px] overflow-auto', 'bg-light' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return &lt;Column classNames={ getClassNames } overflow={ overflow } { ...rest } /&gt;;
+};</div>
+            </div>
+
+            <div class="code-section">
+                <div class="code-block">Nitro-V3/src/common/card/tabs/NitroCardTabsView.tsx
+
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../..';
+
+export const NitroCardTabsView: FC&lt;FlexProps&gt; = props =&gt;
+{
+    const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =&gt;
+    {
+        const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        &lt;Flex classNames={ getClassNames } gap={ gap } justifyContent={ justifyContent } { ...rest }&gt;
+            { children }
+        &lt;/Flex&gt;
+    );
+};</div>
+            </div>
+
+            <div class="code-section">
+                <div class="code-block">Nitro-V3/src/common/card/tabs/NitroCardTabsItemView.tsx
+
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from '../../Flex';
+import { LayoutItemCountView } from '../../layout';
+
+interface NitroCardTabsItemViewProps extends FlexProps
+{
+    isActive?: boolean;
+    count?: number;
+}
+
+export const NitroCardTabsItemView: FC&lt;NitroCardTabsItemViewProps&gt; = props =&gt;
+{
+    const { isActive = false, count = 0, overflow = 'hidden', position = 'relative', pointer = true, classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =&gt;
+    {
+        const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-1 border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-1 before:bg-[#C2C9D1]',
+            isActive &amp;&amp; 'bg-card-tab-item-active -mb-px before:bg-white' ];
+
+        //if (isActive) newClassNames.push('bg-[#dfdfdf] border-b-[1px_solid_black]');
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ isActive, classNames ]);
+
+    return (
+        &lt;Flex classNames={ getClassNames } overflow={ overflow } pointer={ pointer } position={ position } { ...rest }&gt;
+            &lt;Flex center shrink&gt;
+                { children }
+            &lt;/Flex&gt;
+            { (count &gt; 0) &amp;&amp;
+                &lt;LayoutItemCountView count={ count } /&gt; }
+        &lt;/Flex&gt;
+    );
+};</div>
+            </div>
+
+            <div class="code-section">
+                <div class="code-block">Nitro-V3/src/css/nitrocard/NitroCardView.css
+
+.nitro-card {
+    resize: both;
+
+    @include media-breakpoint-down(lg) {
+        max-width: 100vw !important;
+        max-height: 100vh !important;
+    }
+
+    &amp;.theme-primary {
+        border: 1px solid #283F5D;
+
+        .nitro-card-header {
+            min-height: 33px;
+            max-height: 33px;
+            background: #1E7295;
+
+            .nitro-card-header-text {
+                color: #FFF;
+                text-shadow: 0px 4px 4px rgba(#000, 0.25);
+                @include font-size(1.35);
+            }
+
+            .nitro-card-header-close {
+                cursor: pointer;
+                padding: 2px 2px;
+                line-height: 1;
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
+
+                &amp;:hover {
+                    filter: brightness(1.2);
+                }
+
+                &amp;:active {
+                    filter: brightness(0.8);
+                }
+            }
+
+            .nitro-card-header-report-camera {
+                cursor: pointer;
+                padding: 1px 3px;
+                line-height: 1;
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
+
+                &amp;:hover {
+                    filter: brightness(1.2);
+                }
+
+                &amp;:active {
+                    filter: brightness(0.8);
+                }
+            }
+        }
+
+        .nitro-card-tabs {
+            background-color: #185D79;
+
+            .nav-item {
+                padding: .2rem .8rm;
+                background-color: #B6BEC5;
+                color: #000;
+                z-index: 1;
+                margin-bottom: -1px;
+
+                &amp;.active {
+                    background-color: #DFDFDF;
+                    border-color: #283F5D #283F5D #DFDFDF !important;
+                    border-bottom: 1px solid black;
+
+                    &amp;:before {
+                        background: #FFF;
+                    }
+                }
+
+                &amp;:before {
+                    content: '';
+                    position: absolute;
+                    width: 93%;
+                    height: 3px;
+                    border-radius: 0.25rem;
+                    top: 1.5px;
+                    left: 0;
+                    right: 0;
+                    margin: auto;
+                    background: #c2c9d1;
+                    z-index: 1;
+                }
+            }
+        }
+
+        .content-area {
+            background-color: #DFDFDF;
+        }
+    }
+
+    &amp;.theme-primary-slim {
+        border: 1px solid #283F5D;
+
+        .nitro-card-header {
+            position: relative;
+            min-height: 28px;
+            max-height: 28px;
+            background: repeating-linear-gradient(#2DABC2, #2DABC2 50%, #2B91A7 50%, #2B91A7 100%);
+            border-bottom: 2px solid darken(#2B91A7, 5);
+            box-shadow: 0 2px white;
+            width: 100%;
+            margin: 0;
+            padding-top:2px;
+
+            &amp;:before {
+                position: absolute;
+                content: ' ';
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 2px;
+                background-color: rgba(#FFF, 0.3);
+            }
+
+            .nitro-card-header-text {
+                color: #FFF;
+                text-shadow: 0px 4px 4px rgba(#000, 0.25);
+                @include font-size (1.125);
+                min-height: 21px;
+            }
+
+            .nitro-card-header-close {
+                cursor: pointer;
+                padding: 0px 2px;
+                line-height: 1;
+                @include font-size(.675);
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
+
+                &amp;:hover {
+                    filter: brightness(1.2);
+                }
+
+                &amp;:active {
+                    filter: brightness(0.8);
+                }
+            }
+
+            .nitro-card-header-report-camera {
+                cursor: pointer;
+                padding: 0px 2px;
+                margin-right: 4px;
+                line-height: 1;
+                @include font-size(.675);
+                border-radius: .25rem;
+                box-shadow: 0 0 0 1.6px #FFF;
+                border: 2px solid #921911;
+                background: repeating-linear-gradient(
+                    rgba(245, 80, 65, 1),
+                    rgba(245, 80, 65, 1) 50%,
+                    rgba(194, 48, 39, 1) 50%,
+                    rgba(194, 48, 39, 1) 100%
+                );
+
+                &amp;:hover {
+                    filter: brightness(1.2);
+                }
+
+                &amp;:active {
+                    filter: brightness(0.8);
+                }
+            }
+        }
+
+        .nitro-card-tabs {
+            background-color: #185D79;
+        }
+
+        .content-area {
+            background-color: #DFDFDF;
+        }
+    }
+}
+
+.content-area {
+    height: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    overflow: auto;
+
+    &amp;.theme-dark {
+        background-color: #1C323F !important;
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .content-area {
+        height: 100% !important;
+        min-height: auto !important;
+        max-height: 100% !important;
+    }
+}
+
+.nitro-card-header {
+    position: relative;
+    height: 100%;
+}
+
+.nitro-card-tabs {
+    height: 100%;
+    min-height: 133px;
+    max-height: 133px;
+    border-bottom: 1px solid #283F5D;
+}
+
+.nitro-card-accordion-set {
+
+    &amp;.active {
+        height: 100%;
+        overflow: hidden;
+        background: rgba(#FFF, 0.5);
+        border-bottom: 1px solid rgba(#000, 0.2);
+    }
+
+    .nitro-card-accordion-set-header {
+        border-bottom: 1px solid rgba(#000, 0.2);
+    }
+}</div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
@@ -0,0 +1,12 @@
+# Mockup Assets
+
+Questa cartella e' pronta per immagini o sprite dedicate ai mockup HTML.
+
+Uso previsto:
+- copiare qui versioni statiche di asset che vuoi testare fuori dal progetto
+- collegarle da `mockup/index.html`
+- tenere separati i file di esperimento dagli asset reali di `src/assets`
+
+Percorso base:
+- `Nitro-V3/mockup/index.html`
+- `Nitro-V3/mockup/assets/`
@@ -0,0 +1,623 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nitro V3 Mockup Lab</title>
+    <style>
+        :root {
+            --bg: #17191d;
+            --panel: #252931;
+            --panel-2: #1d2026;
+            --border: #3d4450;
+            --text: #f4f7fb;
+            --muted: #aeb6c4;
+            --card-border: #283f5d;
+            --card-header: #1e7295;
+            --card-content: #dfdfdf;
+            --toolbar: rgba(28, 28, 32, 0.95);
+            --tab: #b6bec5;
+            --tab-active: #dfdfdf;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            padding: 24px;
+            background: radial-gradient(circle at top, #222733 0%, #17191d 60%);
+            color: var(--text);
+            font-family: Arial, sans-serif;
+        }
+
+        h1, h2, h3, p {
+            margin: 0;
+        }
+
+        h1 {
+            font-size: 28px;
+            margin-bottom: 10px;
+        }
+
+        .intro {
+            color: var(--muted);
+            margin-bottom: 24px;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+            gap: 20px;
+        }
+
+        .section {
+            background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            overflow: hidden;
+        }
+
+        .section-head {
+            padding: 14px 16px;
+            border-bottom: 1px solid rgba(255,255,255,0.06);
+            background: rgba(255,255,255,0.03);
+        }
+
+        .section-head h2 {
+            font-size: 17px;
+            margin-bottom: 4px;
+        }
+
+        .section-head p {
+            font-size: 13px;
+            color: var(--muted);
+        }
+
+        .section-body {
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .stage {
+            background: #121419;
+            border: 1px solid rgba(255,255,255,0.08);
+            border-radius: 12px;
+            padding: 16px;
+            min-height: 200px;
+        }
+
+        .paths {
+            padding: 12px;
+            background: rgba(0,0,0,0.22);
+            border: 1px solid rgba(255,255,255,0.06);
+            border-radius: 10px;
+            font: 12px/1.5 Consolas, monospace;
+            color: #d5d9e1;
+            white-space: pre-wrap;
+        }
+
+        .nitro-card {
+            width: 320px;
+            border: 1px solid var(--card-border);
+            border-radius: 4px;
+            overflow: hidden;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.35);
+            resize: both;
+            background: var(--card-content);
+        }
+
+        .nitro-card-header {
+            min-height: 33px;
+            max-height: 33px;
+            background: var(--card-header);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+
+        .nitro-card-header-text {
+            color: #fff;
+            font-size: 20px;
+            text-shadow: 0 4px 4px rgba(0,0,0,.25);
+            font-weight: 700;
+        }
+
+        .ubuntu-close-button {
+            position: absolute;
+            right: 8px;
+            width: 18px;
+            height: 18px;
+            border-radius: 4px;
+            box-shadow: 0 0 0 1.6px #fff;
+            border: 2px solid #921911;
+            background: repeating-linear-gradient(
+                rgba(245, 80, 65, 1),
+                rgba(245, 80, 65, 1) 50%,
+                rgba(194, 48, 39, 1) 50%,
+                rgba(194, 48, 39, 1) 100%
+            );
+        }
+
+        .nitro-card-tabs {
+            display: flex;
+            gap: 2px;
+            justify-content: center;
+            background: #185d79;
+            padding: 4px 8px 0;
+            border-bottom: 1px solid var(--card-border);
+        }
+
+        .nitro-card-tab {
+            position: relative;
+            min-width: 90px;
+            padding: 5px 10px;
+            background: var(--tab);
+            color: #000;
+            text-align: center;
+            border-top-left-radius: 7px;
+            border-top-right-radius: 7px;
+            border-top: 1px solid var(--card-border);
+            border-left: 1px solid var(--card-border);
+            border-right: 1px solid var(--card-border);
+        }
+
+        .nitro-card-tab::before {
+            content: "";
+            position: absolute;
+            top: 1.5px;
+            left: 0;
+            right: 0;
+            width: 93%;
+            height: 3px;
+            margin: auto;
+            border-radius: 4px;
+            background: #c2c9d1;
+        }
+
+        .nitro-card-tab.active {
+            background: var(--tab-active);
+            margin-bottom: -1px;
+        }
+
+        .nitro-card-tab.active::before {
+            background: #fff;
+        }
+
+        .nitro-card-content {
+            padding: 8px;
+            min-height: 150px;
+            color: #000;
+        }
+
+        .purse {
+            width: 200px;
+            background: rgba(30, 30, 42, 0.95);
+            border-radius: 10px;
+            padding: 6px;
+            color: #fff;
+        }
+
+        .purse-grid {
+            display: grid;
+            grid-template-columns: 1fr 54px 30px;
+            gap: 6px;
+        }
+
+        .currency-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        .currency-row {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 6px;
+            border-radius: 5px;
+            color: #fff;
+        }
+
+        .currency--1 { background: #e8b125; border: 2px solid #f4d892; }
+        .currency-0 { background: #c364c1; border: 2px solid #ecb3ea; }
+        .currency-5 { background: #6bafaa; border: 2px solid #ace6e2; }
+
+        .subscription {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: #212131;
+            border: 2px solid #383853;
+            border-radius: 8px;
+            color: white;
+            font-size: 12px;
+        }
+
+        .side-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+        }
+
+        .side-button {
+            width: 30px;
+            height: 28px;
+            border-radius: 8px;
+            background: #b69b83;
+            border: 2px solid rgba(255,255,255,.5);
+        }
+
+        .seasonal {
+            margin-top: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: linear-gradient(to right, #95c3e5, transparent);
+            background-color: #212131;
+            border-radius: 8px;
+            min-height: 30px;
+            color: white;
+            padding: 0 8px;
+        }
+
+        .toolbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            min-height: 55px;
+            padding: 8px 12px;
+            background: var(--toolbar);
+            box-shadow: inset 0 5px #22222799, inset 0 -4px #12121599;
+            border-radius: 10px;
+        }
+
+        .toolbar-left, .toolbar-right {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .toolbar-icon {
+            width: 34px;
+            height: 34px;
+            border-radius: 8px;
+            background: linear-gradient(180deg, #4a535f, #2d333b);
+            border: 1px solid rgba(255,255,255,.15);
+        }
+
+        .toolbar-me {
+            width: 50px;
+            height: 45px;
+            border-radius: 10px;
+            background: linear-gradient(180deg, #8ec6ff, #4f7fb7);
+        }
+
+        .navigator {
+            width: 420px;
+            border: 1px solid var(--card-border);
+            border-radius: 4px;
+            overflow: hidden;
+            box-shadow: 0 6px 20px rgba(0,0,0,.35);
+            background: var(--card-content);
+        }
+
+        .navigator-body {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            color: #000;
+        }
+
+        .navigator-search {
+            height: 34px;
+            border: 1px solid #9ca3af;
+            background: white;
+            border-radius: 6px;
+        }
+
+        .navigator-results {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+            min-height: 140px;
+        }
+
+        .navigator-result {
+            height: 34px;
+            background: rgba(0,0,0,.06);
+            border-radius: 6px;
+        }
+
+        .navigator-footer {
+            display: flex;
+            gap: 8px;
+            border-top: 1px solid #b0b7c2;
+            padding-top: 8px;
+        }
+
+        .nav-action {
+            flex: 1;
+            height: 60px;
+            border-radius: 10px;
+            background: linear-gradient(180deg, #4c8fd7, #2e66a6);
+        }
+
+        .notification-bubble {
+            width: 240px;
+            padding: 10px;
+            background-color: #262626;
+            box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
+            color: white;
+            border-radius: .5rem;
+            font-size: 12px;
+        }
+
+        .friends-bar {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .friend-pill {
+            width: 56px;
+            height: 56px;
+            border-radius: 12px;
+            background: linear-gradient(180deg, #dadfe7, #a4afbf);
+            border: 2px solid rgba(255,255,255,.35);
+        }
+
+        .hotel-view {
+            position: relative;
+            width: 100%;
+            height: 260px;
+            overflow: hidden;
+            border-radius: 12px;
+            background: linear-gradient(to bottom, #69b4e4 0%, #9fd3f2 55%, #51841e 55%, #51841e 100%);
+        }
+
+        .hotel-slab {
+            position: absolute;
+            inset: 24px 40px 36px;
+            background: linear-gradient(180deg, #d7d1c8 0%, #b8b1a4 100%);
+            border-radius: 14px;
+            box-shadow: 0 18px 40px rgba(0,0,0,.25);
+        }
+
+        .hotel-hotspot {
+            position: absolute;
+            width: 58px;
+            height: 40px;
+            border-radius: 8px;
+            background: rgba(255,255,255,.25);
+            border: 1px dashed rgba(255,255,255,.7);
+        }
+
+        .hotel-hotspot.a { top: 30px; left: 40px; }
+        .hotel-hotspot.b { top: 98px; left: 160px; }
+        .hotel-hotspot.c { top: 150px; right: 90px; }
+
+        @media (max-width: 780px) {
+            body {
+                padding: 14px;
+            }
+
+            .grid {
+                grid-template-columns: 1fr;
+            }
+
+            .navigator,
+            .nitro-card {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>Nitro V3 Mockup Lab</h1>
+    <p class="intro">Mockup HTML standalone dei componenti principali attuali. La resa è pensata per darti una base visiva da modificare rapidamente fuori dal progetto reale.</p>
+
+    <div class="grid">
+        <section class="section">
+            <div class="section-head">
+                <h2>NitroCard</h2>
+                <p>Base card attuale con header blu, tabs grigie e content chiaro.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="nitro-card">
+                        <div class="nitro-card-header">
+                            <div class="nitro-card-header-text">Navigator</div>
+                            <div class="ubuntu-close-button"></div>
+                        </div>
+                        <div class="nitro-card-tabs">
+                            <div class="nitro-card-tab active">Hotel</div>
+                            <div class="nitro-card-tab">Rooms</div>
+                            <div class="nitro-card-tab">+</div>
+                        </div>
+                        <div class="nitro-card-content">
+                            Contenuto card attuale, usato come base da vari componenti.
+                        </div>
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/common/card/NitroCardView.tsx
+src/common/card/NitroCardHeaderView.tsx
+src/common/card/NitroCardContentView.tsx
+src/common/card/tabs/NitroCardTabsView.tsx
+src/common/card/tabs/NitroCardTabsItemView.tsx
+src/css/nitrocard/NitroCardView.css</div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="section-head">
+                <h2>Purse</h2>
+                <p>Layout attuale con currency, box HC, pulsanti laterali e seasonal sotto.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="purse">
+                        <div class="purse-grid">
+                            <div class="currency-list">
+                                <div class="currency-row currency--1">3601 ◉</div>
+                                <div class="currency-row currency-0">5365 ◎</div>
+                                <div class="currency-row currency-5">700 ◈</div>
+                            </div>
+                            <div class="subscription">
+                                <div>HC</div>
+                                <div>78 g</div>
+                            </div>
+                            <div class="side-buttons">
+                                <div class="side-button"></div>
+                                <div class="side-button"></div>
+                            </div>
+                        </div>
+                        <div class="seasonal">
+                            <span>Stagionale</span>
+                            <span>99 999</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/components/purse/PurseView.tsx
+src/components/purse/views/CurrencyView.tsx
+src/components/purse/views/SeasonalView.tsx
+src/css/purse/PurseView.css</div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="section-head">
+                <h2>Toolbar</h2>
+                <p>Barra bassa attuale con area me, icone centrali e blocco friend/message.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="toolbar">
+                        <div class="toolbar-left">
+                            <div class="toolbar-me"></div>
+                            <div class="toolbar-icon"></div>
+                            <div class="toolbar-icon"></div>
+                            <div class="toolbar-icon"></div>
+                            <div class="toolbar-icon"></div>
+                        </div>
+                        <div style="flex:1; height:34px; border-radius:8px; background:rgba(255,255,255,.07);"></div>
+                        <div class="toolbar-right">
+                            <div class="toolbar-icon"></div>
+                            <div class="toolbar-icon"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/components/toolbar/ToolbarView.tsx
+src/components/toolbar/ToolbarItemView.tsx
+src/components/toolbar/ToolbarMeView.tsx</div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="section-head">
+                <h2>Navigator</h2>
+                <p>Finestra navigator attuale con card base, search e footer actions.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="navigator">
+                        <div class="nitro-card-header">
+                            <div class="nitro-card-header-text">Navigator</div>
+                            <div class="ubuntu-close-button"></div>
+                        </div>
+                        <div class="nitro-card-tabs">
+                            <div class="nitro-card-tab active">Saved</div>
+                            <div class="nitro-card-tab">Rooms</div>
+                            <div class="nitro-card-tab">+</div>
+                        </div>
+                        <div class="navigator-body">
+                            <div class="navigator-search"></div>
+                            <div class="navigator-results">
+                                <div class="navigator-result"></div>
+                                <div class="navigator-result"></div>
+                                <div class="navigator-result"></div>
+                            </div>
+                            <div class="navigator-footer">
+                                <div class="nav-action"></div>
+                                <div class="nav-action" style="background:linear-gradient(180deg,#64a86b,#41794c);"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/components/navigator/NavigatorView.tsx
+src/components/navigator/NavigatorView.scss
+src/css/room/NavigatorRoomSettings.css</div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="section-head">
+                <h2>Notifications</h2>
+                <p>Bubble attuale con fondo scuro e inner shadow.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="notification-bubble">
+                        Hai ricevuto una nuova notifica. Questo box rappresenta lo stato attuale delle bubble notifications.
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/components/notification-center/NotificationCenterView.tsx
+src/css/notification/NotificationCenterView.css</div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="section-head">
+                <h2>Friends</h2>
+                <p>Barra amici e blocchi friend pill attuali.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="friends-bar">
+                        <div class="friend-pill"></div>
+                        <div class="friend-pill"></div>
+                        <div class="friend-pill"></div>
+                        <div class="friend-pill"></div>
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/components/friends/FriendsView.tsx
+src/css/friends/FriendsView.css</div>
+            </div>
+        </section>
+
+        <section class="section">
+            <div class="section-head">
+                <h2>HotelView</h2>
+                <p>Mockup della scena hotel attuale con sfondo e hotspot.</p>
+            </div>
+            <div class="section-body">
+                <div class="stage">
+                    <div class="hotel-view">
+                        <div class="hotel-slab"></div>
+                        <div class="hotel-hotspot a"></div>
+                        <div class="hotel-hotspot b"></div>
+                        <div class="hotel-hotspot c"></div>
+                    </div>
+                </div>
+                <div class="paths">Source files:
+src/components/hotel-view/HotelView.tsx
+src/css/hotelview/HotelView.css</div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
@@ -1,9 +1,7 @@
-{
+{
    "friendlist.search": "Zoek vrienden",
    "widget.chooser.checkall": "Selecteer meubels",
    "widget.chooser.btn.pickall": "pak de geselecteerde items op!",
-    "wiredfurni.params.requireall.2": "Als een van de geselecteerde furni een avatar heeft",
-    "wiredfurni.params.requireall.3": "Als alle geselecteerde furni avatars op hen hebben",
    "widget.settings.general": "Standaard",
    "widget.settings.general.title": "Pas de standaard nitro settings aan",
    "widget.settings.volume": "Volume",
@@ -20,25 +18,6 @@
    "widget.room.chat.clear_history": "leeg geschiedenis",
    "widget.room.youtube.shared": "YouTube word gedeeld",
    "widget.room.youtube.open_video": "Open de video",
-    "wiredfurni.params.area_selection.selected": "Geselecteerd gebied: Lengte=%x%, Breedte=%y%, breedte=%w%, hoogte=%h%",
-    "wiredfurni.params.sources.users.11": "L'utente cliccato",
-    "wiredfurni.params.setexecutions": "QuantitÃƒÂ  di esecuzioni: %amount%",
-    "wiredfurni.params.settimewindow": "Tempo massimo consentito: %timewindow% secondi",
-    "wiredfurni.params.eval_mode": "Condizioni che devono corrispondere:",
-    "wiredfurni.params.eval_mode.0": "Tutte",
-    "wiredfurni.params.eval_mode.1": "Almeno una",
-    "wiredfurni.params.eval_mode.2": "Non tutte",
-    "wiredfurni.params.eval_mode.3": "Nessuna",
-    "wiredfurni.params.eval_mode.cmp.0": "Meno di:",
-    "wiredfurni.params.eval_mode.cmp.1": "Esattamente:",
-    "wiredfurni.params.eval_mode.cmp.2": "Più di:",
-    "wiredfurni.error.condition_evaluation_furni": "Puoi selezionare solo la Condizione e i componenti aggiuntivi!",
-    "wiredfurni.params.texts.placeholder_name": "Nome del segnaposto:",
-    "wiredfurni.params.texts.placeholder_preview": "Usalo digitando <font color=\"#ffffaa\">%placeholder%</font> nei testi dei Wired.",
-    "wiredfurni.params.texts.placeholder_type": "Tipo di segnaposto:",
-    "wiredfurni.params.texts.placeholder_type.1": "Singolo",
-    "wiredfurni.params.texts.placeholder_type.2": "Multiplo",
-    "wiredfurni.params.texts.select_delimiter": "Seleziona il delimitatore:",
    "widget.memenu.dance1": "Ballo 1",
    "widget.memenu.dance2": "Ballo 2",
    "widget.memenu.dance3": "Ballo 3",
@@ -60,5 +39,19 @@
    "wiredfurni.params.action.sign.14": "Cartello 14",
    "wiredfurni.params.action.sign.15": "Cartello 15",
    "wiredfurni.params.action.sign.16": "Cartello 16",
-    "wiredfurni.params.action.sign.17": "Cartello 17"
+    "wiredfurni.params.action.sign.17": "Cartello 17",
+    "groupforum.list.tab.most_active": "Meest active threads",
+    "groupforum.list.tab.my_forums": "Mijn group forums",
+    "groupforum.list.no_forums": "Er zijn geen forums",
+    "groupforum.view.threads": "Aantal threads",
+    "groupforum.thread.pin": "Pin hem vast",
+    "groupforum.thread.unpin": "Unpin bericht",
+    "groupforum.thread.lock": "Lock de thread",
+    "groupforum.thread.unlock": "Unlock de thread",
+    "groupforum.thread.hide": "Verberg thread",
+    "groupforum.thread.restore": "Maak thread weer zichtbaar",
+    "groupforum.thread.delete": "Verwijder thread + posts",
+    "groupforum.message.hide": "Verberg bericht",
+    "group.forum.enable.caption": "Enable / Disable Group forum",
+    "group.forum.enable.help": "Als je de group forum disabled dan verwijderen ook alle posts!"
 }
@@ -1,22 +1,22 @@
 {
 	"socket.url": "ws://192.168.1.52:2096",
-	"asset.url": "https://client.paxxo.online/nitro/bundled",
-	"image.library.url": "https://client.paxxo.online/c_images/",
-	"hof.furni.url": "https://client.paxxo.online/c_images/dcr/hof_furni",
-	"images.url": "https://client.paxxo.online/nitro/images",
-	"gamedata.url": "https://client.paxxo.online/nitro/gamedata",
+	"asset.url": "https://client.slogga.it/nitro/bundled",
+	"image.library.url": "https://client.slogga.it/c_images/",
+	"hof.furni.url": "https://client.slogga.it/c_images/dcr/hof_furni",
+	"images.url": "https://client.slogga.it/nitro/images",
+	"gamedata.url": "https://client.slogga.it/nitro/gamedata",
 	"sounds.url": "${asset.url}/sounds/%sample%.mp3",
 	"external.texts.url": [
 		"${gamedata.url}/ExternalTexts.json",
 		"${gamedata.url}/UITexts.json"
 	],
 	"external.samples.url": "${hof.furni.url}/mp3/sound_machine_sample_%sample%.mp3",
-	"furnidata.url": "${gamedata.url}/FurnitureData.json?v=1",
-	"productdata.url": "${gamedata.url}/ProductData.json?v=1",
-	"avatar.actions.url": "${gamedata.url}/HabboAvatarActions.json?v=1",
-	"avatar.figuredata.url": "${gamedata.url}/FigureData.json?v=1",
-	"avatar.figuremap.url": "${gamedata.url}/FigureMap.json?v=1",
-	"avatar.effectmap.url": "${gamedata.url}/EffectMap.json?v=1",
+	"furnidata.url": "${gamedata.url}/FurnitureData.json?v=2",
+	"productdata.url": "${gamedata.url}/ProductData.json?v=2",
+	"avatar.actions.url": "${gamedata.url}/HabboAvatarActions.json?v=2",
+	"avatar.figuredata.url": "${gamedata.url}/FigureData.json?v=2",
+	"avatar.figuremap.url": "${gamedata.url}/FigureMap.json?v=2",
+	"avatar.effectmap.url": "${gamedata.url}/EffectMap.json?v=2",
 	"avatar.asset.url": "${asset.url}/figure/%libname%.nitro",
 	"avatar.asset.effect.url": "${asset.url}/effect/%libname%.nitro",
 	"furni.asset.url": "${asset.url}/furniture/%libname%.nitro",
@@ -14,7 +14,6 @@ export const App: FC<{}> = props =>
    const [ isReady, setIsReady ] = useState(false);
    const [ errorMessage, setErrorMessage ] = useState('');
    const [ homeUrl, setHomeUrl ] = useState('');
-
    const showSessionExpired = useCallback(() =>
    {
        const baseUrl = window.location.origin + '/';
@@ -37,6 +36,8 @@ export const App: FC<{}> = props =>

    useEffect(() =>
    {
+        let heartbeatInterval: number = null;
+
        const prepare = async (width: number, height: number) =>
        {
            try
@@ -51,6 +52,11 @@ export const App: FC<{}> = props =>
                    return;
                }

+                const rawUseBackBuffer = window.NitroConfig['renderer.useBackBuffer'];
+                const useBackBuffer = (rawUseBackBuffer === undefined)
+                    ? true
+                    : ((rawUseBackBuffer === true) || (rawUseBackBuffer === 'true'));
+
                const renderer = await PrepareRenderer({
                    width: Math.floor(width),
                    height: Math.floor(height),
@@ -61,7 +67,7 @@ export const App: FC<{}> = props =>
                    eventMode: 'none',
                    failIfMajorPerformanceCaveat: false,
                    roundPixels: true,
-                    useBackBuffer: true // Enable back buffer for blend filters
+                    useBackBuffer // Keep disabled by default unless explicitly enabled in NitroConfig
                });

                await GetConfiguration().init();
@@ -93,7 +99,7 @@ export const App: FC<{}> = props =>

                HabboWebTools.sendHeartBeat();

-                setInterval(() => HabboWebTools.sendHeartBeat(), 10000);
+                heartbeatInterval = window.setInterval(() => HabboWebTools.sendHeartBeat(), 10000);

                GetTicker().add(ticker => GetRoomEngine().update(ticker));
                GetTicker().add(ticker => renderer.render(GetStage()));
@@ -109,6 +115,11 @@ export const App: FC<{}> = props =>
        };

        prepare(window.innerWidth, window.innerHeight);
+
+        return () =>
+        {
+            if(heartbeatInterval !== null) window.clearInterval(heartbeatInterval);
+        };
    }, []);

    return (
@@ -120,4 +131,4 @@ export const App: FC<{}> = props =>
            <Base id="draggable-windows-container" />
        </Base>
    );
-};
+};
@@ -7,4 +7,5 @@ export class BuilderFurniPlaceableStatus
    public static NOT_ROOM_OWNER: number = 4;
    public static GUILD_ROOM: number = 5;
    public static VISITORS_IN_ROOM: number = 6;
+    public static NOT_GROUP_ADMIN: number = 7;
 }
@@ -7,6 +7,7 @@ export interface ICatalogOptions
    groups?: HabboGroupEntryData[];
    petPalettes?: CatalogPetPalette[];
    clubOffers?: ClubOfferData[];
+    clubOffersByWindowId?: Record<number, ClubOfferData[]>;
    clubGifts?: ClubGiftInfoParser;
    giftConfiguration?: GiftWrappingConfiguration;
    marketplaceConfiguration?: MarketplaceConfigurationMessageParser;
@@ -8,6 +8,7 @@ export class MessengerThread
 {
    public static MESSAGE_RECEIVED: string = 'MT_MESSAGE_RECEIVED';
    public static THREAD_ID: number = 0;
+    private static MAX_CHATS: number = 250;

    private _threadId: number;
    private _participant: MessengerFriend;
@@ -38,6 +39,7 @@ export class MessengerThread
        const chat = new MessengerThreadChat(senderId, message, secondsSinceSent, extraData, type);

        group.addChat(chat);
+        this.pruneChats();

        this._lastUpdated = new Date();

@@ -46,6 +48,27 @@ export class MessengerThread
        return chat;
    }

+    private pruneChats(): void
+    {
+        let totalChats = this._groups.reduce((total, current) => (total + current.chats.length), 0);
+
+        while(totalChats > MessengerThread.MAX_CHATS)
+        {
+            const firstGroup = this._groups[0];
+
+            if(!firstGroup) break;
+
+            if(firstGroup.chats.length) firstGroup.chats.shift();
+
+            if(!firstGroup.chats.length)
+            {
+                this._groups.shift();
+            }
+
+            totalChats--;
+        }
+    }
+
    private getLastGroup(userId: number): MessengerThreadChatGroup
    {
        let group = this._groups[(this._groups.length - 1)];
@@ -42,6 +42,8 @@ export class FriendlyTime

    public static getLocalization(key: string, amount: number): string
    {
-        return LocalizeText(key, [ 'amount' ], [ amount.toString() ]);
+        const amountValue = amount.toString();
+
+        return LocalizeText(key, [ 'amount', 'AMOUNT' ], [ amountValue, amountValue ]);
    }
 }
@@ -67,4 +67,23 @@ export class WiredActionLayoutCode
    public static OR_EVAL_EXTRA: number = 66;
    public static TEXT_OUTPUT_USERNAME_EXTRA: number = 67;
    public static TEXT_OUTPUT_FURNI_NAME_EXTRA: number = 68;
+    public static GIVE_VARIABLE: number = 69;
+    public static USER_VARIABLE_EXTRA: number = 70;
+    public static FURNI_VARIABLE_EXTRA: number = 71;
+    public static ROOM_VARIABLE_EXTRA: number = 72;
+    public static REMOVE_VARIABLE: number = 73;
+    public static CHANGE_VARIABLE_VALUE: number = 74;
+    public static FURNI_WITH_VARIABLE_SELECTOR: number = 75;
+    public static USERS_WITH_VARIABLE_SELECTOR: number = 76;
+    public static FILTER_USERS_BY_VARIABLE_EXTRA: number = 77;
+    public static FILTER_FURNI_BY_VARIABLE_EXTRA: number = 78;
+    public static VARIABLE_TEXT_CONNECTOR_EXTRA: number = 79;
+    public static TEXT_OUTPUT_VARIABLE_EXTRA: number = 80;
+    public static VARIABLE_REFERENCE_EXTRA: number = 81;
+    public static VARIABLE_LEVELUP_SYSTEM_EXTRA: number = 82;
+    public static VARIABLE_ECHO_EXTRA: number = 83;
+    public static CONTEXT_VARIABLE_EXTRA: number = 84;
+    public static TEXT_INPUT_VARIABLE_EXTRA: number = 85;
+    public static NEG_CALL_ANOTHER_STACK: number = 86;
+    public static NEG_SEND_SIGNAL: number = 87;
 }
@@ -40,4 +40,8 @@ export class WiredConditionlayout
    public static MATCH_DATE: number = 37;
    public static ACTOR_DIR: number = 38;
    public static SLC_QUANTITY: number = 39;
+    public static HAS_VAR: number = 40;
+    public static NEG_HAS_VAR: number = 41;
+    public static VAR_VAL_MATCH: number = 42;
+    public static VAR_AGE_MATCH: number = 43;
 }
@@ -22,4 +22,5 @@ export class WiredTriggerLayout
    public static CLICK_USER: number = 20;
    public static USER_PERFORMS_ACTION: number = 21;
    public static CLOCK_COUNTER: number = 22;
+    public static VARIABLE_CHANGED: number = 23;
 }
--- a/Show More
+++ b/Show More