diff --git a/package.json b/package.json index 716c4bf..4dab2f5 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "framer-motion": "^11.2.12", "react": "^19.2.4", "react-bootstrap": "^2.10.10", - "react-colorful": "^5.6.1", "react-dom": "^19.2.4", "react-icons": "^5.5.0", "react-slider": "^2.0.6", diff --git a/src/App.tsx b/src/App.tsx index 59c8ce4..c97d6fa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; -import { GetUIVersion, UiSettingsProvider } from './api'; +import { GetUIVersion } from './api'; import { Base } from './common'; import { LoadingView } from './components/loading/LoadingView'; import { MainView } from './components/MainView'; @@ -90,14 +90,12 @@ export const App: FC<{}> = props => }, []); return ( - - - { !isReady && - } - { isReady && } - - - - + + { !isReady && + } + { isReady && } + + + ); }; \ No newline at end of file diff --git a/src/api/index.ts b/src/api/index.ts index 1bbb9e9..7089277 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -24,6 +24,5 @@ export * from './room'; export * from './room/events'; export * from './room/widgets'; export * from './user'; -export * from './ui-settings'; export * from './utils'; export * from './wired'; diff --git a/src/api/ui-settings/IUiSettings.ts b/src/api/ui-settings/IUiSettings.ts deleted file mode 100644 index 5c6e96d..0000000 --- a/src/api/ui-settings/IUiSettings.ts +++ /dev/null @@ -1,43 +0,0 @@ -export interface IUiSettings -{ - colorMode: 'color' | 'image' | 'default'; - headerColor: string; - headerImageUrl: string; - headerAlpha: number; -} - -export const DEFAULT_UI_SETTINGS: IUiSettings = { - colorMode: 'default', - headerColor: '#1E7295', - headerImageUrl: '', - headerAlpha: 100 -}; - -export const PRESET_COLORS: string[] = [ - '#000000', '#444444', '#888888', '#CCCCCC', '#660000', '#CC3333', '#FF6666', '#CC6600', - '#FF3333', '#FF6633', '#FF9933', '#FFCC00', '#FFFF00', '#66FF00', '#00CC00', '#009900', - '#00FFCC', '#33CCFF', '#3366FF', '#0000CC', '#6633CC', '#9933FF', '#CC33FF', '#FF66CC', - '#FF99CC', '#1E7295', '#185D79', '#2DABC2', '#2B91A7', '#283F5D' -]; - -export interface IThemePreset -{ - name: string; - color: string; - alpha: number; -} - -export const THEME_PRESETS: IThemePreset[] = [ - { name: 'default', color: '#1E7295', alpha: 100 }, - { name: 'ocean', color: '#0077B6', alpha: 100 }, - { name: 'forest', color: '#2D6A4F', alpha: 100 }, - { name: 'sunset', color: '#E76F51', alpha: 100 }, - { name: 'royal', color: '#7B2CBF', alpha: 100 }, - { name: 'midnight', color: '#1B1B2F', alpha: 100 }, - { name: 'cherry', color: '#C1121F', alpha: 100 }, - { name: 'gold', color: '#B8860B', alpha: 100 }, - { name: 'slate', color: '#475569', alpha: 100 }, - { name: 'candy', color: '#FF69B4', alpha: 100 }, - { name: 'emerald', color: '#059669', alpha: 100 }, - { name: 'volcano', color: '#DC2626', alpha: 90 }, -]; diff --git a/src/api/ui-settings/UiSettingsContext.tsx b/src/api/ui-settings/UiSettingsContext.tsx deleted file mode 100644 index 99685ce..0000000 --- a/src/api/ui-settings/UiSettingsContext.tsx +++ /dev/null @@ -1,224 +0,0 @@ -import { GetCommunication, UiSettingsDataEvent, UiSettingsLoadComposer, UiSettingsSaveComposer } from '@nitrots/nitro-renderer'; -import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react'; -import { DEFAULT_UI_SETTINGS, IUiSettings } from './IUiSettings'; - -const STORAGE_KEY = 'nitro.ui.settings'; - -interface IUiSettingsContext -{ - settings: IUiSettings; - isCustomActive: boolean; - updateSettings: (partial: Partial) => void; - resetSettings: () => void; - getHeaderStyle: () => React.CSSProperties; - getTabsStyle: () => React.CSSProperties; - getAccentColor: () => string; -} - -const UiSettingsContext = createContext({ - settings: DEFAULT_UI_SETTINGS, - isCustomActive: false, - updateSettings: () => {}, - resetSettings: () => {}, - getHeaderStyle: () => ({}), - getTabsStyle: () => ({}), - getAccentColor: () => DEFAULT_UI_SETTINGS.headerColor -}); - -const darkenColor = (hex: string, amount: number): string => -{ - const num = parseInt(hex.replace('#', ''), 16); - const r = Math.max(0, ((num >> 16) & 0xFF) - amount); - const g = Math.max(0, ((num >> 8) & 0xFF) - amount); - const b = Math.max(0, (num & 0xFF) - amount); - - return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); -}; - -const loadSettings = (): IUiSettings => -{ - try - { - const stored = localStorage.getItem(STORAGE_KEY); - if(stored) return { ...DEFAULT_UI_SETTINGS, ...JSON.parse(stored) }; - } - catch(e) {} - - return { ...DEFAULT_UI_SETTINGS }; -}; - -const saveSettings = (settings: IUiSettings): void => -{ - try - { - localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); - } - catch(e) {} -}; - -const sendComposer = (composer: any): void => -{ - try - { - GetCommunication()?.connection?.send(composer); - } - catch(e) {} -}; - -export const UiSettingsProvider: FC = ({ children }) => -{ - const [ settings, setSettings ] = useState(loadSettings); - const serverSaveTimerRef = useRef>(null); - - // Carica dal server al mount e ascolta risposta - useEffect(() => - { - sendComposer(new UiSettingsLoadComposer()); - - const connection = GetCommunication()?.connection; - - if(!connection) return; - - const handler = (event: any) => - { - try - { - const parser = event.getParser(); - const json = parser?.settingsJson; - - if(json && json !== '{}') - { - const serverSettings = { ...DEFAULT_UI_SETTINGS, ...JSON.parse(json) }; - setSettings(serverSettings); - saveSettings(serverSettings); - } - } - catch(e) {} - }; - - connection.addMessageEvent(new UiSettingsDataEvent(handler)); - }, []); - - const syncToServer = useCallback((settingsToSave: IUiSettings) => - { - if(serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current); - - serverSaveTimerRef.current = setTimeout(() => - { - sendComposer(new UiSettingsSaveComposer(JSON.stringify(settingsToSave))); - }, 1000); - }, []); - - const updateSettings = useCallback((partial: Partial) => - { - setSettings(prev => - { - const updated = { ...prev, ...partial }; - saveSettings(updated); - syncToServer(updated); - - return updated; - }); - }, [ syncToServer ]); - - const resetSettings = useCallback(() => - { - setSettings({ ...DEFAULT_UI_SETTINGS }); - saveSettings(DEFAULT_UI_SETTINGS); - syncToServer(DEFAULT_UI_SETTINGS); - }, [ syncToServer ]); - - const getHeaderStyle = useCallback((): React.CSSProperties => - { - if(settings.colorMode === 'color') - { - const alpha = (settings.headerAlpha ?? 100) / 100; - const num = parseInt(settings.headerColor.replace('#', ''), 16); - const r = (num >> 16) & 0xFF; - const g = (num >> 8) & 0xFF; - const b = num & 0xFF; - - return { backgroundColor: `rgba(${ r }, ${ g }, ${ b }, ${ alpha })` }; - } - - if(settings.colorMode === 'image' && settings.headerImageUrl) - { - return { - backgroundImage: `url(${ settings.headerImageUrl })`, - backgroundSize: 'cover', - backgroundPosition: 'center', - backgroundRepeat: 'repeat' - }; - } - - return {}; - }, [ settings ]); - - const getTabsStyle = useCallback((): React.CSSProperties => - { - if(settings.colorMode === 'color') - { - return { backgroundColor: darkenColor(settings.headerColor, 30) }; - } - - if(settings.colorMode === 'image' && settings.headerImageUrl) - { - return { - backgroundImage: `url(${ settings.headerImageUrl })`, - backgroundSize: 'cover', - backgroundPosition: 'center bottom', - backgroundRepeat: 'repeat' - }; - } - - return {}; - }, [ settings ]); - - const getAccentColor = useCallback((): string => - { - if(settings.colorMode === 'color') return settings.headerColor; - - return DEFAULT_UI_SETTINGS.headerColor; - }, [ settings ]); - - const isCustomActive = settings.colorMode !== 'default'; - - const ALL_CSS_VARS = [ - '--ui-accent-color', '--ui-accent-dark', - '--ui-ctx-bg', '--ui-ctx-header-bg', '--ui-ctx-item-bg1', '--ui-ctx-item-bg2', - '--ui-btn-primary-bg', '--ui-btn-primary-border', - '--ui-dark-bg', '--ui-dark-border' - ]; - - useEffect(() => - { - const root = document.documentElement; - - if(settings.colorMode === 'color') - { - const c = settings.headerColor; - root.style.setProperty('--ui-accent-color', c); - root.style.setProperty('--ui-accent-dark', darkenColor(c, 30)); - root.style.setProperty('--ui-ctx-bg', darkenColor(c, 50)); - root.style.setProperty('--ui-ctx-header-bg', darkenColor(c, 20)); - root.style.setProperty('--ui-ctx-item-bg1', darkenColor(c, 60)); - root.style.setProperty('--ui-ctx-item-bg2', darkenColor(c, 70)); - root.style.setProperty('--ui-btn-primary-bg', c); - root.style.setProperty('--ui-btn-primary-border', darkenColor(c, 20)); - root.style.setProperty('--ui-dark-bg', darkenColor(c, 55)); - root.style.setProperty('--ui-dark-border', darkenColor(c, 60)); - } - else - { - ALL_CSS_VARS.forEach(v => root.style.removeProperty(v)); - } - }, [ settings ]); - - return ( - - { children } - - ); -}; - -export const useUiSettings = () => useContext(UiSettingsContext); diff --git a/src/api/ui-settings/index.ts b/src/api/ui-settings/index.ts deleted file mode 100644 index 255a5da..0000000 --- a/src/api/ui-settings/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './IUiSettings'; -export * from './UiSettingsContext'; diff --git a/src/common/Button.tsx b/src/common/Button.tsx index c59afa0..6b7d454 100644 --- a/src/common/Button.tsx +++ b/src/common/Button.tsx @@ -12,16 +12,20 @@ export interface ButtonProps extends FlexProps export const Button: FC = props => { - const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], style = {}, ...rest } = props; + const { variant = 'primary', size = 'sm', active = false, disabled = false, classNames = [], ...rest } = props; const getClassNames = useMemo(() => { + + // fucked up method i know (i dont have a clue what im doing because im a ninja) + const newClassNames: string[] = [ 'pointer-events-auto inline-block font-normal leading-normal text-[#fff] text-center no-underline align-middle cursor-pointer select-none border border-[solid] border-transparent px-[.75rem] py-[.375rem] text-[.9rem] rounded-[.25rem] [transition:color_.15s_ease-in-out,background-color_.15s_ease-in-out,border-color_.15s_ease-in-out,box-shadow_.15s_ease-in-out]' ]; if(variant) { + if(variant == 'primary') - newClassNames.push('text-white [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white'); + newClassNames.push('text-white bg-[#1e7295] border-[#1e7295] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#1a617f] hover:border-[#185b77]'); if(variant == 'success') newClassNames.push('text-white bg-[#00800b] border-[#00800b] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#006d09] hover:border-[#006609]'); @@ -39,10 +43,10 @@ export const Button: FC = props => newClassNames.push('text-white bg-[#185d79] border-[#185d79] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#144f67] hover:border-[#134a61]'); if(variant == 'dark') - newClassNames.push('text-white [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white'); - + newClassNames.push('text-white bg-dark [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#18181bfb] hover:border-[#161619fb]'); + if(variant == 'gray') - newClassNames.push('text-white [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white'); + newClassNames.push('text-white bg-[#1e7295] border-[#1e7295] [box-shadow:inset_0_2px_#ffffff26,inset_0_-2px_#0000001a,0_1px_#0000001a] hover:text-white hover:bg-[#1a617f] hover:border-[#185b77]'); } @@ -63,28 +67,5 @@ export const Button: FC = props => return newClassNames; }, [ variant, size, active, disabled, classNames ]); - const getStyle = useMemo(() => - { - if(variant === 'primary' || variant === 'gray') - { - return { - backgroundColor: 'var(--ui-btn-primary-bg, #1e7295)', - borderColor: 'var(--ui-btn-primary-border, #1e7295)', - ...style - }; - } - - if(variant === 'dark') - { - return { - backgroundColor: 'var(--ui-dark-bg, rgba(28, 28, 32, .98))', - borderColor: 'var(--ui-dark-border, rgba(28, 28, 32, .98))', - ...style - }; - } - - return style; - }, [ variant, style ]); - - return ; + return ; }; diff --git a/src/common/Text.tsx b/src/common/Text.tsx index 3e797c5..ffc0a85 100644 --- a/src/common/Text.tsx +++ b/src/common/Text.tsx @@ -1,4 +1,4 @@ -import React, { FC, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { Base, BaseProps } from './Base'; import { ColorVariantType, FontSizeType, FontWeightType, TextAlignType } from './types'; @@ -44,7 +44,7 @@ export const Text: FC = props => { const newClassNames: string[] = [truncate ? 'block' : 'inline']; if (variant) { - // primary color handled via inline style with CSS variable + if (variant === 'primary') newClassNames.push('text-[#1e7295]'); if (variant == 'secondary') newClassNames.push('text-[#185d79]'); if (variant === 'black') newClassNames.push('text-[#000000]'); if (variant == 'dark') newClassNames.push('text-[#18181b]'); @@ -73,12 +73,7 @@ export const Text: FC = props => { return newClassNames; }, [ variant, fontWeight, fontSize, fontSizeCustom, align, bold, underline, italics, truncate, center, textEnd, small, wrap, noWrap, textBreak ]); - const style = useMemo(() => { - const s: React.CSSProperties = {}; - if (fontSizeCustom) (s as any)['--font-size'] = `${fontSizeCustom}px`; - if (variant === 'primary') s.color = 'var(--ui-accent-color, #1e7295)'; - return Object.keys(s).length ? s : undefined; - }, [ fontSizeCustom, variant ]); + const style = fontSizeCustom ? { '--font-size': `${fontSizeCustom}px` } as React.CSSProperties : undefined; return ; }; \ No newline at end of file diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx index 57a4aa2..8bb354c 100644 --- a/src/common/card/NitroCardHeaderView.tsx +++ b/src/common/card/NitroCardHeaderView.tsx @@ -1,6 +1,5 @@ import { FC, MouseEvent } from 'react'; import { FaFlag } from 'react-icons/fa'; -import { useUiSettings } from '../../api/ui-settings/UiSettingsContext'; import { Base, Column, ColumnProps, Flex } from '..'; interface NitroCardHeaderViewProps extends ColumnProps @@ -17,7 +16,8 @@ interface NitroCardHeaderViewProps extends ColumnProps export const NitroCardHeaderView: FC = props => { 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 { isCustomActive, getHeaderStyle } = useUiSettings(); + + const onMouseDown = (event: MouseEvent) => { @@ -25,12 +25,8 @@ export const NitroCardHeaderView: FC = props => event.nativeEvent.stopImmediatePropagation(); }; - const headerClassName = isCustomActive - ? 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header' - : 'relative flex items-center justify-center flex-col drag-handler min-h-card-header max-h-card-header bg-card-header'; - return ( - + { headerText } { isGalleryPhoto && diff --git a/src/common/card/tabs/NitroCardTabsView.tsx b/src/common/card/tabs/NitroCardTabsView.tsx index 4083309..5e14506 100644 --- a/src/common/card/tabs/NitroCardTabsView.tsx +++ b/src/common/card/tabs/NitroCardTabsView.tsx @@ -1,27 +1,21 @@ import { FC, useMemo } from 'react'; -import { useUiSettings } from '../../../api/ui-settings/UiSettingsContext'; import { Flex, FlexProps } from '../..'; export const NitroCardTabsView: FC = props => { const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props; - const { isCustomActive, getTabsStyle } = useUiSettings(); const getClassNames = useMemo(() => { - const base = isCustomActive - ? 'justify-center gap-0.5 flex min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' - : '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'; - - const newClassNames: string[] = [ base ]; + 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, isCustomActive ]); + }, [ classNames ]); return ( - + { children } ); diff --git a/src/common/layout/LayoutProgressBar.tsx b/src/common/layout/LayoutProgressBar.tsx index cd96a28..e538657 100644 --- a/src/common/layout/LayoutProgressBar.tsx +++ b/src/common/layout/LayoutProgressBar.tsx @@ -14,7 +14,7 @@ export const LayoutProgressBar: FC = props => const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'border border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden', 'text-white' ]; + const newClassNames: string[] = [ 'border border-[solid] border-[#fff] p-[2px] h-[20px] rounded-[.25rem] overflow-hidden bg-[#1E7295] ', 'text-white' ]; if(classNames.length) newClassNames.push(...classNames); @@ -22,7 +22,7 @@ export const LayoutProgressBar: FC = props => }, [ classNames ]); return ( - + { text && (text.length > 0) && { text } } diff --git a/src/components/backgrounds/BackgroundsView.tsx b/src/components/backgrounds/BackgroundsView.tsx index eaeb07a..9782dd6 100644 --- a/src/components/backgrounds/BackgroundsView.tsx +++ b/src/components/backgrounds/BackgroundsView.tsx @@ -2,11 +2,9 @@ import { GetSessionDataManager, HabboClubLevelEnum} from '@nitrots/nitro-rendere import { Dispatch, FC, SetStateAction, useCallback, useMemo, useState } from 'react'; import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text, LayoutCurrencyIcon } from '../../common'; import { useRoom } from '../../hooks'; -import { GetClubMemberLevel, GetConfigurationValue, LocalizeText } from '../../api'; -import { InterfaceColorTabView } from '../interface-settings/InterfaceColorTabView'; -import { InterfaceImageTabView } from '../interface-settings/InterfaceImageTabView'; +import { GetClubMemberLevel, GetConfigurationValue } from '../../api'; -interface ItemData { +interface ItemData { id: number; isHcOnly: boolean; minRank: number; @@ -24,7 +22,7 @@ interface BackgroundsViewProps { setSelectedOverlay: Dispatch>; } -const TABS = ['backgrounds', 'stands', 'overlays', 'color', 'image'] as const; +const TABS = ['backgrounds', 'stands', 'overlays'] as const; type TabType = typeof TABS[number]; export const BackgroundsView: FC = ({ @@ -38,7 +36,7 @@ export const BackgroundsView: FC = ({ }) => { const [activeTab, setActiveTab] = useState('backgrounds'); const { roomSession } = useRoom(); - + const userData = useMemo(() => ({ isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB, securityLevel: GetSessionDataManager().canChangeName, @@ -47,7 +45,7 @@ export const BackgroundsView: FC = ({ const processData = useCallback((configData: any[], dataType: string): ItemData[] => { if (!configData?.length) return []; - + return configData .filter(item => { const meetsRank = userData.securityLevel >= item.minRank; @@ -67,10 +65,10 @@ export const BackgroundsView: FC = ({ if (!roomSession) return; const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay }; - + const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay }; - setters[activeTab as 'backgrounds' | 'stands' | 'overlays'](id); + setters[activeTab](id); const newValues = { ...currentValues, [activeTab]: id }; roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays ); }, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, setSelectedBackground, setSelectedStand, setSelectedOverlay]); @@ -88,11 +86,9 @@ export const BackgroundsView: FC = ({ ), [handleSelection]); - const isProfileTab = activeTab === 'backgrounds' || activeTab === 'stands' || activeTab === 'overlays'; - return ( - setIsVisible(false)} /> + setIsVisible(false)} /> {TABS.map(tab => ( = ({ isActive={activeTab === tab} onClick={() => setActiveTab(tab)} > - { LocalizeText(`interface.settings.tab.${ tab }`) } + {tab.charAt(0).toUpperCase() + tab.slice(1)} ))} - { isProfileTab && ( - <> - { LocalizeText('interface.settings.select.option') } - - {allData[activeTab as 'backgrounds' | 'stands' | 'overlays'].map(item => renderItem(item, activeTab.slice(0, -1)))} - - - ) } - { activeTab === 'color' && } - { activeTab === 'image' && } + Select an Option + + {allData[activeTab].map(item => renderItem(item, activeTab.slice(0, -1)))} + ); -}; +}; \ No newline at end of file diff --git a/src/components/interface-settings/InterfaceColorTabView.tsx b/src/components/interface-settings/InterfaceColorTabView.tsx deleted file mode 100644 index 70c9fb6..0000000 --- a/src/components/interface-settings/InterfaceColorTabView.tsx +++ /dev/null @@ -1,288 +0,0 @@ -import { RgbaColorPicker, RgbaColor } from 'react-colorful'; -import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { FaUndo, FaTrash, FaDownload, FaUpload } from 'react-icons/fa'; -import { LocalizeText, PRESET_COLORS, THEME_PRESETS, 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(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100)); - const [ importValue, setImportValue ] = useState(''); - const [ showImport, setShowImport ] = useState(false); - const [ copyFeedback, setCopyFeedback ] = useState(false); - const previewTimerRef = useRef>(null); - - const hexColor = useMemo(() => rgbaToHex(color), [ color ]); - const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]); - - // Live preview con debounce - useEffect(() => - { - if(previewTimerRef.current) clearTimeout(previewTimerRef.current); - - previewTimerRef.current = setTimeout(() => - { - updateSettings({ - colorMode: 'color', - headerColor: hexColor, - headerAlpha: alphaPercent - }); - }, 50); - - return () => - { - if(previewTimerRef.current) clearTimeout(previewTimerRef.current); - }; - }, [ hexColor, alphaPercent ]); - - 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 onThemeClick = useCallback((themeColor: string, themeAlpha: number) => - { - setColor(hexToRgba(themeColor, themeAlpha / 100)); - }, []); - - const onReset = useCallback(() => - { - resetSettings(); - setColor(hexToRgba('#1E7295', 1)); - }, [ resetSettings ]); - - const onDelete = useCallback(() => - { - updateSettings({ colorMode: 'default' }); - setColor(hexToRgba('#1E7295', 1)); - }, [ updateSettings ]); - - const onExport = useCallback(() => - { - const data = JSON.stringify({ - color: hexColor, - alpha: alphaPercent, - mode: settings.colorMode, - image: settings.headerImageUrl - }); - - navigator.clipboard.writeText(data); - setCopyFeedback(true); - setTimeout(() => setCopyFeedback(false), 2000); - }, [ hexColor, alphaPercent, settings ]); - - const onImport = useCallback(() => - { - try - { - const data = JSON.parse(importValue); - - if(data.color) - { - const alpha = data.alpha ?? 100; - setColor(hexToRgba(data.color, alpha / 100)); - updateSettings({ - colorMode: data.mode || 'color', - headerColor: data.color, - headerAlpha: alpha, - headerImageUrl: data.image || '' - }); - } - - setImportValue(''); - setShowImport(false); - } - catch(e) {} - }, [ importValue, updateSettings ]); - - return ( - - {/* Color picker */} -
- -
- - {/* Color preview swatch */} -
- - {/* Hex/RGB/A inputs */} - - - onHexInput(e.target.value) } - maxLength={ 6 } - /> - Hex - - - onRgbInput('r', parseInt(e.target.value)) } - min={ 0 } max={ 255 } - /> - R - - - onRgbInput('g', parseInt(e.target.value)) } - min={ 0 } max={ 255 } - /> - G - - - onRgbInput('b', parseInt(e.target.value)) } - min={ 0 } max={ 255 } - /> - B - - - onAlphaInput(parseInt(e.target.value)) } - min={ 0 } max={ 100 } - /> - A - - - - {/* Preset colors */} -
- { PRESET_COLORS.map((presetHex, i) => ( -
onPresetClick(presetHex) } - /> - )) } -
- - {/* Theme presets */} - { LocalizeText('interface.settings.color.themes') } -
- { THEME_PRESETS.map((theme) => ( -
onThemeClick(theme.color, theme.alpha) } - > -
- { LocalizeText(`interface.settings.theme.${ theme.name }`) } -
- )) } -
- - {/* Action buttons */} - - - - - - - - {/* Import panel */} - { showImport && ( - - setImportValue(e.target.value) } - /> - - - ) } - - ); -}; diff --git a/src/components/interface-settings/InterfaceImageTabView.tsx b/src/components/interface-settings/InterfaceImageTabView.tsx deleted file mode 100644 index 390a390..0000000 --- a/src/components/interface-settings/InterfaceImageTabView.tsx +++ /dev/null @@ -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('ui.header.images.count', 30); - }, []); - - const baseUrl = useMemo(() => - { - return GetConfigurationValue('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 ( -
- { images.map((url, i) => ( -
onImageSelect(url) } - /> - )) } -
- ); -}; diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandBadgeSlotView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandBadgeSlotView.tsx index dde184d..6a504d2 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandBadgeSlotView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandBadgeSlotView.tsx @@ -45,8 +45,7 @@ const BadgeMiniPicker: FC<{ return (
e.stopPropagation() }> = props return ( - +
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx index 8a7d2a2..12aca46 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx @@ -133,7 +133,7 @@ export const InfoStandWidgetUserView: FC = props = return ( <> - +
diff --git a/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx b/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx index ff26177..a0513cf 100644 --- a/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx +++ b/src/components/room/widgets/context-menu/ContextMenuHeaderView.tsx @@ -3,21 +3,16 @@ import { Flex, FlexProps } from '../../../../common'; export const ContextMenuHeaderView: FC = props => { - const { justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, ...rest } = props; + const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props; const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ]; + const newClassNames: string[] = [ 'bg-[#3d5f6e] text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ]; if(classNames.length) newClassNames.push(...classNames); return newClassNames; }, [ classNames ]); - const mergedStyle = useMemo(() => ({ - backgroundColor: 'var(--ui-ctx-header-bg, #3d5f6e)', - ...style - }), [ style ]); - - return ; + return ; }; diff --git a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx index b012a93..0a1eacc 100644 --- a/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx +++ b/src/components/room/widgets/context-menu/ContextMenuListItemView.tsx @@ -8,7 +8,7 @@ interface ContextMenuListItemViewProps extends FlexProps export const ContextMenuListItemView: FC = props => { - const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, onClick = null, ...rest } = props; + const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props; const handleClick = (event: MouseEvent) => { @@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC = props = const getClassNames = useMemo(() => { - const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] cursor-pointer' ]; + const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,#131e25_50%,#0d171d_50%,#0d171d_100%)] cursor-pointer' ]; if(disabled) newClassNames.push('disabled'); @@ -28,10 +28,5 @@ export const ContextMenuListItemView: FC = props = return newClassNames; }, [ disabled, classNames ]); - const mergedStyle = useMemo(() => ({ - background: 'repeating-linear-gradient(var(--ui-ctx-item-bg1, #131e25), var(--ui-ctx-item-bg1, #131e25) 50%, var(--ui-ctx-item-bg2, #0d171d) 50%, var(--ui-ctx-item-bg2, #0d171d) 100%)', - ...style - }), [ style ]); - - return ; + return ; }; diff --git a/src/components/room/widgets/context-menu/ContextMenuView.tsx b/src/components/room/widgets/context-menu/ContextMenuView.tsx index b92dc89..1ca3e83 100644 --- a/src/components/room/widgets/context-menu/ContextMenuView.tsx +++ b/src/components/room/widgets/context-menu/ContextMenuView.tsx @@ -76,6 +76,7 @@ export const ContextMenuView: FC = ({ const getClassNames = useMemo(() => { const classes = [ 'p-[2px]!', + 'bg-[#1c323f]', 'border-2', 'border-[solid]', 'border-[rgba(255,255,255,.5)]', @@ -97,7 +98,6 @@ export const ContextMenuView: FC = ({ top: pos.y ?? 0, transition: isFading ? 'opacity 75ms linear' : undefined, opacity, - backgroundColor: 'var(--ui-ctx-bg, #1c323f)', ...style, }), [pos, opacity, isFading, style] diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 62503bb..fbb5ae8 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -69,7 +69,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => )} - + { diff --git a/src/css/common/Buttons.css b/src/css/common/Buttons.css index 21d7f1f..106a3cc 100644 --- a/src/css/common/Buttons.css +++ b/src/css/common/Buttons.css @@ -24,8 +24,8 @@ input[type=number] { .btn-primary { color: #fff; - background-color: var(--ui-btn-primary-bg, #3c6d82); - border: 2px solid var(--ui-btn-primary-border, #1a617f); + background-color: #3c6d82; + border: 2px solid #1a617f; padding: 0.25rem 0.5rem; font-size: .7875rem; border-radius: 0.5rem; @@ -33,7 +33,7 @@ input[type=number] { } .btn-primary:hover { - border: 2px solid var(--ui-btn-primary-border, #1a617f); + border: 2px solid #1a617f; box-shadow: none!important; } @@ -81,16 +81,16 @@ input[type=number] { .btn-dark { color: #fff; - background-color: var(--ui-dark-bg, #212131); - border: 2px solid var(--ui-dark-border, #1c1c2a); + background-color: #212131; + border: 2px solid #1c1c2a; box-shadow: none!important; border-radius: 8px; padding: 4px 11px 4px 11px; } .btn-dark:hover{ - background-color: var(--ui-dark-bg, #212131); - border: 2px solid var(--ui-dark-border, #1c1c2a); + background-color: #212131; + border: 2px solid #1c1c2a; box-shadow: none!important; border-radius: 8px; padding: 4px 11px 4px 11px; diff --git a/src/css/index.css b/src/css/index.css index cdf4dab..806e0e5 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -78,27 +78,6 @@ body { } @layer components { - @keyframes prefix-pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } - } - - @keyframes prefix-rainbow { - 0% { filter: hue-rotate(0deg); } - 100% { filter: hue-rotate(360deg); } - } - - @keyframes prefix-shake { - 0%, 100% { transform: translateX(0); } - 25% { transform: translateX(-1px) rotate(-1deg); } - 75% { transform: translateX(1px) rotate(1deg); } - } - - @keyframes prefix-wave { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-3px); } - } - @keyframes blink { 0%, @@ -813,7 +792,7 @@ body { /* Header and Tab Colors */ .bg-card-header { - background-color: var(--ui-btn-primary-bg, #1e7295); /* e.g., #2c3e50 */ + background-color: #1e7295; /* e.g., #2c3e50 */ } .bg-card-tabs { @@ -975,19 +954,4 @@ body { z-index: 5; width: 100%; } -} - -/* UI Theme transitions */ -.nitro-card-header, -.bg-card-header, -.bg-card-tabs, -.nitro-room-tools, -.nitro-room-history, -.nitro-room-tools-info, -.borderhccontent, -.nitro-purse-seasonal-currency, -.nitro-infostand, -.btn-primary, -.btn-dark { - transition: background-color 0.3s ease, border-color 0.3s ease; } \ No newline at end of file diff --git a/src/css/nitrocard/NitroCardView.css b/src/css/nitrocard/NitroCardView.css index 05309c8..2d13b40 100644 --- a/src/css/nitrocard/NitroCardView.css +++ b/src/css/nitrocard/NitroCardView.css @@ -12,7 +12,7 @@ .nitro-card-header { min-height: 33px; max-height: 33px; - background: var(--ui-accent-color, #1E7295); + background: #1E7295; .nitro-card-header-text { color: #FFF; diff --git a/src/css/purse/PurseView.css b/src/css/purse/PurseView.css index 69c1732..7134551 100644 --- a/src/css/purse/PurseView.css +++ b/src/css/purse/PurseView.css @@ -22,7 +22,7 @@ pointer-events: all; } .borderhccontent{ - background-color: var(--ui-dark-bg, #212131); + background-color: #212131; border-radius: 0.5rem!important; border: 2px solid #383853; height: calc(100% - 3px); @@ -46,7 +46,7 @@ } .nitro-purse-seasonal-currency { - background-color: var(--ui-dark-bg, #212131); + background-color: #212131; background: linear-gradient(to right, #5f5f8d, transparent); height: 30px; margin-bottom: 4px; diff --git a/src/css/room/InfoStand.css b/src/css/room/InfoStand.css index 7e1a050..e44b062 100644 --- a/src/css/room/InfoStand.css +++ b/src/css/room/InfoStand.css @@ -27,7 +27,7 @@ width: clamp(160px, 20vw, 190px); /* Responsive width */ z-index: 30; pointer-events: auto; - background: var(--ui-dark-bg, #212131); + background: #212131; box-shadow: inset 0 5px rgba(38, 38, 57, 0.6), inset 0 -4px rgba(25, 25, 37, 0.6); border-radius: 0.5rem; padding: 10px; diff --git a/src/css/room/RoomWidgets.css b/src/css/room/RoomWidgets.css index 9f28d43..1509e5b 100644 --- a/src/css/room/RoomWidgets.css +++ b/src/css/room/RoomWidgets.css @@ -4,7 +4,7 @@ left: 15px; .nitro-room-tools { - background: var(--ui-dark-bg, #212131); + background: #212131; box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; @@ -54,7 +54,7 @@ } .nitro-room-history { - background: var(--ui-dark-bg, #212131); + background: #212131; box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); transition: all .2s ease; width: 150px; @@ -63,7 +63,7 @@ } .nitro-room-tools-info { - background: var(--ui-dark-bg, #212131); + background: #212131; box-shadow: inset 0px 5px lighten(rgba(#000, .6), 2.5), inset 0 -4px darken(rgba(#000, .6), 4); transition: all .2s ease; max-width: 250px; diff --git a/src/css/slider.css b/src/css/slider.css index 150c342..528dbb0 100644 --- a/src/css/slider.css +++ b/src/css/slider.css @@ -10,7 +10,7 @@ overflow: hidden; &.track-0 { - background-color: var(--ui-btn-primary-bg, #1e7295); + background-color: #1e7295; } &.track-1 {