mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
Add UI Customization Panel with full color theming
- New "Interfaccia" panel with color picker (HSV + hex/RGB/alpha + 30 presets) - Profile background customization tab - Accent color propagates via CSS variables to: card headers/tabs, context menus, Button dark/primary/gray variants, InfoStand panels, toolbar, room tools, purse, .btn-primary/.btn-dark CSS classes - All elements use var(--name, fallback) for zero visual change when default - Settings persisted in localStorage - Added react-colorful dependency - Added ui-config.json with header images config keys
This commit is contained in:
medievalshell
@@ -0,0 +1,179 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,107 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user