mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
🆙 Cleanup
This commit is contained in:
duckietm
@@ -1,7 +1,5 @@
|
||||
import { PurchasePrefixComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { LocalizeText, SendMessageComposer, PRESET_PREFIX_EFFECTS, generateGradientColors } from '../../../../../api';
|
||||
import { PrefixPreview } from '../../../../../layout';
|
||||
import { LocalizeText, SanitizeHtml, SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
|
||||
import { CatalogLayoutProps } from './CatalogLayout.types';
|
||||
import data from '@emoji-mart/data';
|
||||
@@ -24,13 +22,11 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
}, [ page, hideNavigation ]);
|
||||
|
||||
const [ prefixText, setPrefixText ] = useState('');
|
||||
const [ colorMode, setColorMode ] = useState<'single' | 'perLetter' | 'gradient'>('single');
|
||||
const [ colorMode, setColorMode ] = useState<'single' | 'perLetter'>('single');
|
||||
const [ singleColor, setSingleColor ] = useState('#FFFFFF');
|
||||
const [ letterColors, setLetterColors ] = useState<Record<number, string>>({});
|
||||
const [ selectedLetterIndex, setSelectedLetterIndex ] = useState<number | null>(null);
|
||||
const [ customColorInput, setCustomColorInput ] = useState('#FFFFFF');
|
||||
const [ gradientStart, setGradientStart ] = useState('#FF0000');
|
||||
const [ gradientEnd, setGradientEnd ] = useState('#0066FF');
|
||||
const [ selectedIcon, setSelectedIcon ] = useState('');
|
||||
const [ showIconPicker, setShowIconPicker ] = useState(false);
|
||||
const [ selectedEffect, setSelectedEffect ] = useState('');
|
||||
@@ -40,16 +36,15 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
if(colorMode === 'single') return singleColor;
|
||||
|
||||
if(colorMode === 'gradient')
|
||||
{
|
||||
const steps = Math.max(prefixText.length, 2);
|
||||
return generateGradientColors(gradientStart, gradientEnd, steps).join(',');
|
||||
}
|
||||
|
||||
if(!prefixText.length) return singleColor;
|
||||
|
||||
return [ ...prefixText ].map((_, i) => letterColors[i] || singleColor).join(',');
|
||||
}, [ colorMode, singleColor, letterColors, prefixText, gradientStart, gradientEnd ]);
|
||||
}, [ colorMode, singleColor, letterColors, prefixText ]);
|
||||
|
||||
const previewColors = useMemo(() =>
|
||||
{
|
||||
return parsePrefixColors(prefixText || '...', colorString || '#FFFFFF');
|
||||
}, [ prefixText, colorString ]);
|
||||
|
||||
const isValid = useMemo(() =>
|
||||
{
|
||||
@@ -57,12 +52,9 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
|
||||
if(colorMode === 'single') return /^#[0-9A-Fa-f]{6}$/.test(singleColor);
|
||||
|
||||
if(colorMode === 'gradient')
|
||||
return /^#[0-9A-Fa-f]{6}$/.test(gradientStart) && /^#[0-9A-Fa-f]{6}$/.test(gradientEnd);
|
||||
|
||||
const colors = colorString.split(',');
|
||||
return colors.every(c => /^#[0-9A-Fa-f]{6}$/.test(c));
|
||||
}, [ prefixText, colorMode, singleColor, colorString, gradientStart, gradientEnd ]);
|
||||
}, [ prefixText, colorMode, singleColor, colorString ]);
|
||||
|
||||
const handlePurchase = () =>
|
||||
{
|
||||
@@ -80,7 +72,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
setSingleColor(color);
|
||||
setCustomColorInput(color);
|
||||
}
|
||||
else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
|
||||
else if(selectedLetterIndex !== null)
|
||||
{
|
||||
setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: color }));
|
||||
setCustomColorInput(color);
|
||||
@@ -104,7 +96,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
setSingleColor(value);
|
||||
}
|
||||
else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
|
||||
else if(selectedLetterIndex !== null)
|
||||
{
|
||||
setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: value }));
|
||||
}
|
||||
@@ -129,12 +121,18 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
setLetterColors(newColors);
|
||||
};
|
||||
|
||||
const hasMultiColor = colorMode === 'perLetter' && previewColors.length > 1 && new Set(previewColors).size > 1;
|
||||
|
||||
const currentActiveColor = colorMode === 'single'
|
||||
? singleColor
|
||||
: (selectedLetterIndex !== null ? (letterColors[selectedLetterIndex] || singleColor) : singleColor);
|
||||
|
||||
const effectStyle = getPrefixEffectStyle(selectedEffect, previewColors[0] || '#FFFFFF');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 h-full overflow-auto p-1">
|
||||
<style>{ PREFIX_EFFECT_KEYFRAMES }</style>
|
||||
|
||||
{ /* Header */ }
|
||||
{ page.localization.getImage(0) &&
|
||||
<img alt="" className="w-full rounded" src={ page.localization.getImage(0) } /> }
|
||||
@@ -150,37 +148,20 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
} }>
|
||||
<div className="absolute inset-0 rounded-lg opacity-20"
|
||||
style={ { background: 'radial-gradient(ellipse at center, rgba(100,149,237,0.3) 0%, transparent 70%)' } } />
|
||||
<span className="relative flex items-center">
|
||||
<PrefixPreview
|
||||
className="tracking-wide"
|
||||
color={ colorString }
|
||||
effect={ selectedEffect }
|
||||
icon={ selectedIcon }
|
||||
text={ prefixText || '...' }
|
||||
textSize="text-xl" />
|
||||
<span className="ml-2 text-white/80 text-lg font-medium">Username</span>
|
||||
<span className="relative text-xl font-bold tracking-wide" style={ effectStyle }>
|
||||
{ selectedIcon && <span className="mr-1">{ selectedIcon }</span> }
|
||||
<span style={ hasMultiColor ? effectStyle : { ...effectStyle, color: previewColors[0] || '#FFFFFF' } }>
|
||||
{'{'}
|
||||
{ hasMultiColor
|
||||
? [ ...(prefixText || '...') ].map((char, i) => (
|
||||
<span key={ i } style={ { color: previewColors[i] || previewColors[previewColors.length - 1], ...getPrefixEffectStyle(selectedEffect, previewColors[i]) } }>{ char }</span>
|
||||
))
|
||||
: (prefixText || '...')
|
||||
}
|
||||
{'}'}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{ /* Chat Bubble Preview */ }
|
||||
<div className="relative rounded-lg overflow-hidden p-2"
|
||||
style={ { background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.06)' } }>
|
||||
<div className="text-[10px] opacity-40 mb-1 uppercase font-bold tracking-wider">{ LocalizeText('catalog.prefix.chat.preview') }</div>
|
||||
<div className="chat-bubble bubble-0 type-0 max-w-[350px] relative z-1 wrap-break-word min-h-[26px] text-[14px]">
|
||||
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
|
||||
{ (prefixText || '...') &&
|
||||
<PrefixPreview
|
||||
className="mr-1"
|
||||
color={ colorString }
|
||||
effect={ selectedEffect }
|
||||
icon={ selectedIcon }
|
||||
text={ prefixText || '...' }
|
||||
textSize="text-[inherit]" /> }
|
||||
<b className="username">Username: </b>
|
||||
<span className="message">Hello everyone!</span>
|
||||
</div>
|
||||
<div className="pointer absolute left-[50%] translate-x-[-50%] w-[9px] h-[6px] bottom-[-5px]" />
|
||||
</div>
|
||||
<span className="relative ml-2 text-white/80 text-lg font-medium">Username</span>
|
||||
</div>
|
||||
|
||||
{ /* Text + Icon Row */ }
|
||||
@@ -237,7 +218,6 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{ showIconPicker && (
|
||||
<>
|
||||
<div className="fixed inset-0" style={ { zIndex: 999, background: 'rgba(0,0,0,0.5)' } } onClick={ () => setShowIconPicker(false) } />
|
||||
<div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
|
||||
<div className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
|
||||
<Picker
|
||||
data={ data }
|
||||
@@ -295,74 +275,14 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
style={ {
|
||||
background: colorMode === 'perLetter' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
|
||||
borderRight: '1px solid rgba(0,0,0,0.1)',
|
||||
opacity: colorMode === 'perLetter' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('perLetter'); if(prefixText.length > 0) setSelectedLetterIndex(0); } }>
|
||||
{ LocalizeText('catalog.prefix.color.per.letter') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
style={ {
|
||||
background: colorMode === 'gradient' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
|
||||
opacity: colorMode === 'gradient' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('gradient'); setSelectedLetterIndex(null); } }>
|
||||
{ LocalizeText('catalog.prefix.color.gradient') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Gradient Controls */ }
|
||||
{ colorMode === 'gradient' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label
|
||||
className="relative cursor-pointer shrink-0"
|
||||
style={ {
|
||||
width: '24px', height: '24px', borderRadius: '6px',
|
||||
backgroundColor: gradientStart,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ gradientStart }40`
|
||||
} }>
|
||||
<input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
|
||||
type="color" value={ gradientStart }
|
||||
onChange={ e => setGradientStart(e.target.value) } />
|
||||
</label>
|
||||
<input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
|
||||
maxLength={ 7 } placeholder="#FF0000"
|
||||
style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
|
||||
type="text" value={ gradientStart }
|
||||
onChange={ e => { const v = e.target.value; setGradientStart(v); } } />
|
||||
</div>
|
||||
<span className="text-xs opacity-40">→</span>
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label
|
||||
className="relative cursor-pointer shrink-0"
|
||||
style={ {
|
||||
width: '24px', height: '24px', borderRadius: '6px',
|
||||
backgroundColor: gradientEnd,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ gradientEnd }40`
|
||||
} }>
|
||||
<input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
|
||||
type="color" value={ gradientEnd }
|
||||
onChange={ e => setGradientEnd(e.target.value) } />
|
||||
</label>
|
||||
<input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
|
||||
maxLength={ 7 } placeholder="#0066FF"
|
||||
style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
|
||||
type="text" value={ gradientEnd }
|
||||
onChange={ e => { const v = e.target.value; setGradientEnd(v); } } />
|
||||
</div>
|
||||
</div>
|
||||
{ /* Gradient preview bar */ }
|
||||
<div className="h-2 rounded-full"
|
||||
style={ { background: `linear-gradient(to right, ${ gradientStart }, ${ gradientEnd })` } } />
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Per-Letter Selector */ }
|
||||
{ colorMode === 'perLetter' && prefixText.length > 0 && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
@@ -427,49 +347,6 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Color Palette (single & perLetter modes) */ }
|
||||
{ colorMode !== 'gradient' && (
|
||||
<div className="flex flex-col gap-1">
|
||||
{ colorMode === 'perLetter' && selectedLetterIndex !== null &&
|
||||
<span className="text-[10px] opacity-50 italic">
|
||||
{ LocalizeText('catalog.prefix.color.selected') } "{ prefixText[selectedLetterIndex] || '' }"
|
||||
</span>
|
||||
}
|
||||
<div className="grid gap-1" style={ { gridTemplateColumns: 'repeat(auto-fill, minmax(34px, 1fr))' } }>
|
||||
{ PRESET_COLORS.map((color, idx) =>
|
||||
{
|
||||
const isActive = currentActiveColor === color;
|
||||
return (
|
||||
<div
|
||||
key={ idx }
|
||||
className={ `aspect-square rounded cursor-pointer transition-all duration-100 border-2 ${ isActive ? 'scale-110 border-white shadow-lg' : 'border-transparent hover:scale-105' }` }
|
||||
style={ {
|
||||
backgroundColor: color,
|
||||
boxShadow: isActive ? `0 0 8px ${ color }, 0 0 0 1px rgba(0,0,0,0.3)` : 'inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)',
|
||||
zIndex: isActive ? 5 : 1
|
||||
} }
|
||||
onClick={ () => handleColorSelect(color) } />
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<label
|
||||
className="relative cursor-pointer"
|
||||
style={ {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: customColorInput,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
|
||||
} }>
|
||||
<input
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
type="color"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleColorSelect(e.target.value) } />
|
||||
</label>
|
||||
{ /* Color Palette */ }
|
||||
<div className="flex flex-col gap-1">
|
||||
{ colorMode === 'perLetter' && selectedLetterIndex !== null &&
|
||||
@@ -506,22 +383,28 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
|
||||
} }>
|
||||
<input
|
||||
className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
|
||||
maxLength={ 7 }
|
||||
placeholder="#FFFFFF"
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
color: 'inherit',
|
||||
maxWidth: '80px',
|
||||
borderRadius: '5px'
|
||||
} }
|
||||
type="text"
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
type="color"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleCustomColorChange(e.target.value) } />
|
||||
</div>
|
||||
onChange={ e => handleColorSelect(e.target.value) } />
|
||||
</label>
|
||||
<input
|
||||
className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
|
||||
maxLength={ 7 }
|
||||
placeholder="#FFFFFF"
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
color: 'inherit',
|
||||
maxWidth: '80px',
|
||||
borderRadius: '5px'
|
||||
} }
|
||||
type="text"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleCustomColorChange(e.target.value) } />
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
|
||||
{ /* Purchase Footer */ }
|
||||
<div className="flex items-center justify-between mt-auto pt-2"
|
||||
|
||||
Reference in New Issue
Block a user