Revert "Merge pull request #16 from simoleo89/feature/ui-customization"

This reverts commit d1a5996268, reversing
changes made to ae4ecc42f0.

src/components/interface-settings/InterfaceColorTabView.tsx

@@ -1,179 +0,0 @@
-import { RgbaColorPicker, RgbaColor } from 'react-colorful';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { FaUndo, FaTrash, FaPen, FaFillDrip, FaSave } from 'react-icons/fa';
-import { PRESET_COLORS, useUiSettings } from '../../api';
-import { Flex, Text } from '../../common';
-
-const hexToRgba = (hex: string, a = 1): RgbaColor =>
-{
-    const num = parseInt(hex.replace('#', ''), 16);
-    return { r: (num >> 16) & 0xFF, g: (num >> 8) & 0xFF, b: num & 0xFF, a };
-};
-
-const rgbaToHex = (rgba: RgbaColor): string =>
-{
-    return '#' + ((1 << 24) + (rgba.r << 16) + (rgba.g << 8) + rgba.b).toString(16).slice(1);
-};
-
-export const InterfaceColorTabView: FC<{}> = () =>
-{
-    const { settings, updateSettings, resetSettings } = useUiSettings();
-    const [ color, setColor ] = useState<RgbaColor>(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100));
-
-    const hexColor = useMemo(() => rgbaToHex(color), [ color ]);
-    const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
-
-    const onHexInput = useCallback((value: string) =>
-    {
-        const clean = value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
-        if(clean.length === 6)
-        {
-            const rgba = hexToRgba('#' + clean, color.a);
-            setColor(rgba);
-        }
-    }, [ color.a ]);
-
-    const onRgbInput = useCallback((channel: 'r' | 'g' | 'b', value: number) =>
-    {
-        const clamped = Math.max(0, Math.min(255, value || 0));
-        setColor(prev => ({ ...prev, [channel]: clamped }));
-    }, []);
-
-    const onAlphaInput = useCallback((value: number) =>
-    {
-        const clamped = Math.max(0, Math.min(100, value || 0));
-        setColor(prev => ({ ...prev, a: clamped / 100 }));
-    }, []);
-
-    const onPresetClick = useCallback((presetHex: string) =>
-    {
-        setColor(hexToRgba(presetHex, color.a));
-    }, [ color.a ]);
-
-    const onSave = useCallback(() =>
-    {
-        updateSettings({
-            colorMode: 'color',
-            headerColor: hexColor,
-            headerAlpha: alphaPercent
-        });
-    }, [ updateSettings, hexColor, alphaPercent ]);
-
-    const onReset = useCallback(() =>
-    {
-        resetSettings();
-        setColor(hexToRgba('#1E7295', 1));
-    }, [ resetSettings ]);
-
-    const onDelete = useCallback(() =>
-    {
-        updateSettings({ colorMode: 'default' });
-        setColor(hexToRgba('#1E7295', 1));
-    }, [ updateSettings ]);
-
-    return (
-        <Flex column gap={ 2 } className="items-center p-2">
-            <div className="w-[280px]">
-                <RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
-            </div>
-            <Flex gap={ 1 } className="items-center mt-1">
-                <Flex column className="items-center">
-                    <input
-                        className="form-control form-control-sm text-center w-[70px]"
-                        value={ hexColor.replace('#', '').toUpperCase() }
-                        onChange={ e => onHexInput(e.target.value) }
-                        maxLength={ 6 }
-                    />
-                    <Text small className="text-black">Hex</Text>
-                </Flex>
-                <Flex column className="items-center">
-                    <input
-                        type="number"
-                        className="form-control form-control-sm text-center w-[45px]"
-                        value={ color.r }
-                        onChange={ e => onRgbInput('r', parseInt(e.target.value)) }
-                        min={ 0 } max={ 255 }
-                    />
-                    <Text small className="text-black">R</Text>
-                </Flex>
-                <Flex column className="items-center">
-                    <input
-                        type="number"
-                        className="form-control form-control-sm text-center w-[45px]"
-                        value={ color.g }
-                        onChange={ e => onRgbInput('g', parseInt(e.target.value)) }
-                        min={ 0 } max={ 255 }
-                    />
-                    <Text small className="text-black">G</Text>
-                </Flex>
-                <Flex column className="items-center">
-                    <input
-                        type="number"
-                        className="form-control form-control-sm text-center w-[45px]"
-                        value={ color.b }
-                        onChange={ e => onRgbInput('b', parseInt(e.target.value)) }
-                        min={ 0 } max={ 255 }
-                    />
-                    <Text small className="text-black">B</Text>
-                </Flex>
-                <Flex column className="items-center">
-                    <input
-                        type="number"
-                        className="form-control form-control-sm text-center w-[45px]"
-                        value={ alphaPercent }
-                        onChange={ e => onAlphaInput(parseInt(e.target.value)) }
-                        min={ 0 } max={ 100 }
-                    />
-                    <Text small className="text-black">A</Text>
-                </Flex>
-            </Flex>
-            <div className="grid grid-cols-10 gap-0.5 mt-1">
-                { PRESET_COLORS.map((presetHex, i) => (
-                    <div
-                        key={ i }
-                        className="w-[24px] h-[24px] rounded cursor-pointer border border-black/20 hover:scale-110 transition-transform"
-                        style={ { backgroundColor: presetHex } }
-                        onClick={ () => onPresetClick(presetHex) }
-                    />
-                )) }
-            </div>
-            <Flex gap={ 1 } className="w-full mt-2">
-                <button
-                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
-                    style={ { backgroundColor: '#5f9ea0' } }
-                    onClick={ onReset }
-                >
-                    <FaUndo size={ 14 } />
-                </button>
-                <button
-                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
-                    style={ { backgroundColor: '#5f9ea0' } }
-                    onClick={ onDelete }
-                >
-                    <FaTrash size={ 14 } />
-                </button>
-                <button
-                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
-                    style={ { backgroundColor: '#b0b0b0' } }
-                >
-                    <FaPen size={ 14 } />
-                </button>
-                <button
-                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
-                    style={ { backgroundColor: '#5f9ea0' } }
-                    onClick={ onSave }
-                >
-                    <FaFillDrip size={ 14 } />
-                </button>
-            </Flex>
-            <button
-                className="w-full py-2 rounded cursor-pointer text-white font-bold flex items-center justify-center gap-2"
-                style={ { backgroundColor: '#008000' } }
-                onClick={ onSave }
-            >
-                <FaSave size={ 14 } />
-                Salva colore
-            </button>
-        </Flex>
-    );
-};

src/components/interface-settings/InterfaceImageTabView.tsx

@@ -1,52 +0,0 @@
-import { FC, useCallback, useMemo } from 'react';
-import { GetConfigurationValue, useUiSettings } from '../../api';
-
-export const InterfaceImageTabView: FC<{}> = () =>
-{
-    const { settings, updateSettings } = useUiSettings();
-
-    const imageCount = useMemo(() =>
-    {
-        return GetConfigurationValue<number>('ui.header.images.count', 30);
-    }, []);
-
-    const baseUrl = useMemo(() =>
-    {
-        return GetConfigurationValue<string>('ui.header.images.url', 'https://image.webbo.city/image/headerImage/image{id}.gif');
-    }, []);
-
-    const images = useMemo(() =>
-    {
-        const result: string[] = [];
-        for(let i = 1; i <= imageCount; i++)
-        {
-            result.push(baseUrl.replace('{id}', String(i)));
-        }
-        return result;
-    }, [ imageCount, baseUrl ]);
-
-    const onImageSelect = useCallback((url: string) =>
-    {
-        updateSettings({
-            colorMode: 'image',
-            headerImageUrl: url
-        });
-    }, [ updateSettings ]);
-
-    return (
-        <div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
-            { images.map((url, i) => (
-                <div
-                    key={ i }
-                    className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
-                    style={ {
-                        backgroundImage: `url(${ url })`,
-                        backgroundSize: 'cover',
-                        backgroundPosition: 'center'
-                    } }
-                    onClick={ () => onImageSelect(url) }
-                />
-            )) }
-        </div>
-    );
-};

src/components/interface-settings/InterfaceProfileTabView.tsx

@@ -1,107 +0,0 @@
-import { GetSessionDataManager, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
-import { Base, Flex, Grid, LayoutCurrencyIcon, NitroCardTabsItemView, NitroCardTabsView, Text } from '../../common';
-import { useRoom } from '../../hooks';
-
-interface ItemData
-{
-    id: number;
-    isHcOnly: boolean;
-    minRank: number;
-    isAmbassadorOnly: boolean;
-    selectable: boolean;
-}
-
-const SUB_TABS = [ 'backgrounds', 'stands', 'overlays' ] as const;
-type SubTabType = typeof SUB_TABS[number];
-
-const SUB_TAB_LABELS: Record<SubTabType, string> = {
-    backgrounds: 'Sfondi',
-    stands: 'Basi',
-    overlays: 'Overlay'
-};
-
-export const InterfaceProfileTabView: FC<{}> = () =>
-{
-    const [ activeSubTab, setActiveSubTab ] = useState<SubTabType>('backgrounds');
-    const [ selectedBackground, setSelectedBackground ] = useState<number>(0);
-    const [ selectedStand, setSelectedStand ] = useState<number>(0);
-    const [ selectedOverlay, setSelectedOverlay ] = useState<number>(0);
-    const { roomSession } = useRoom();
-
-    const userData = useMemo(() => ({
-        isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB,
-        securityLevel: GetSessionDataManager().canChangeName,
-        isAmbassador: GetSessionDataManager().isAmbassador
-    }), []);
-
-    const processData = useCallback((configData: any[], dataType: string): ItemData[] =>
-    {
-        if(!configData?.length) return [];
-
-        return configData
-            .filter(item =>
-            {
-                const meetsRank = userData.securityLevel >= item.minRank;
-                const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
-                return item.isHcOnly || (meetsRank && ambassadorEligible);
-            })
-            .map(item => ({ id: item[`${ dataType }Id`], ...item, selectable: !item.isHcOnly || userData.isHcMember }));
-    }, [ userData ]);
-
-    const allData = useMemo(() => ({
-        backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'background'),
-        stands: processData(GetConfigurationValue('stands.data'), 'stand'),
-        overlays: processData(GetConfigurationValue('overlays.data'), 'overlay')
-    }), [ processData ]);
-
-    const handleSelection = useCallback((id: number) =>
-    {
-        if(!roomSession) return;
-
-        const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
-        const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
-
-        setters[activeSubTab](id);
-        const newValues = { ...currentValues, [activeSubTab]: id };
-        roomSession.sendBackgroundMessage(newValues.backgrounds, newValues.stands, newValues.overlays);
-    }, [ activeSubTab, roomSession, selectedBackground, selectedStand, selectedOverlay ]);
-
-    const renderItem = useCallback((item: ItemData, type: string) => (
-        <Flex
-            pointer
-            position="relative"
-            key={ item.id }
-            onClick={ () => item.selectable && handleSelection(item.id) }
-            className={ item.selectable ? '' : 'non-selectable' }
-        >
-            <Base className={ `profile-${ type } ${ type }-${ item.id }` } />
-            { item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 inset-e-1" type="hc" /> }
-        </Flex>
-    ), [ handleSelection ]);
-
-    return (
-        <Flex column gap={ 1 }>
-            <Flex gap={ 1 } className="justify-center">
-                { SUB_TABS.map(tab => (
-                    <button
-                        key={ tab }
-                        className={ `px-3 py-1 rounded text-sm cursor-pointer transition-colors ${ activeSubTab === tab ? 'bg-primary text-white' : 'bg-card-grid-item text-black hover:bg-card-grid-item-active' }` }
-                        onClick={ () => setActiveSubTab(tab) }
-                    >
-                        { SUB_TAB_LABELS[tab] }
-                    </button>
-                )) }
-            </Flex>
-            { !roomSession && (
-                <Text bold center className="text-black py-4">Entra in una stanza per modificare il profilo</Text>
-            ) }
-            { roomSession && (
-                <Grid gap={ 1 } columnCount={ 7 } overflow="auto" className="max-h-[300px]">
-                    { allData[activeSubTab].map(item => renderItem(item, activeSubTab.slice(0, -1))) }
-                </Grid>
-            ) }
-        </Flex>
-    );
-};

src/components/interface-settings/InterfaceSettingsView.tsx

@@ -1,74 +0,0 @@
-import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useState } from 'react';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardView } from '../../common';
-import { InterfaceColorTabView } from './InterfaceColorTabView';
-import { InterfaceProfileTabView } from './InterfaceProfileTabView';
-
-const TABS = [ 'color', 'profile' ] as const;
-type TabType = typeof TABS[number];
-
-const TAB_LABELS: Record<TabType, string> = {
-    color: 'Colore',
-    profile: 'Sfondo profilo'
-};
-
-export const InterfaceSettingsView: FC<{}> = () =>
-{
-    const [ isVisible, setIsVisible ] = useState(false);
-    const [ currentTab, setCurrentTab ] = useState<TabType>('color');
-
-    useEffect(() =>
-    {
-        const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) =>
-            {
-                const parts = url.split('/');
-                if(parts.length < 2) return;
-
-                switch(parts[1])
-                {
-                    case 'show':
-                        setIsVisible(true);
-                        return;
-                    case 'hide':
-                        setIsVisible(false);
-                        return;
-                    case 'toggle':
-                        setIsVisible(prev => !prev);
-                        return;
-                    case 'profile':
-                        setCurrentTab('profile');
-                        setIsVisible(true);
-                        return;
-                }
-            },
-            eventUrlPrefix: 'interface-settings/'
-        };
-
-        AddLinkEventTracker(linkTracker);
-        return () => RemoveLinkEventTracker(linkTracker);
-    }, []);
-
-    if(!isVisible) return null;
-
-    return (
-        <NitroCardView uniqueKey="interface-settings" className="min-w-[535px] max-w-[700px]">
-            <NitroCardHeaderView headerText="Interfaccia" onCloseClick={ () => setIsVisible(false) } />
-            <NitroCardTabsView>
-                { TABS.map(tab => (
-                    <NitroCardTabsItemView
-                        key={ tab }
-                        isActive={ currentTab === tab }
-                        onClick={ () => setCurrentTab(tab) }
-                    >
-                        { TAB_LABELS[tab] }
-                    </NitroCardTabsItemView>
-                )) }
-            </NitroCardTabsView>
-            <NitroCardContentView>
-                { currentTab === 'color' && <InterfaceColorTabView /> }
-                { currentTab === 'profile' && <InterfaceProfileTabView /> }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-};