Skip to content

Commit

Permalink
change default colors back to simplymc instead of empty, move color p…
Browse files Browse the repository at this point in the history 
…resets to color section, show formatting in custom format
  • Loading branch information
@saboooor
saboooor committed Dec 27, 2023
1 parent ee5ca48 commit 45482a2
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 55 deletions.
53 changes: 27 additions & 26 deletions src/routes/animtab/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default component$(() => {
const t = inlineTranslate();

const store: any = useStore({
colors: [],
colors: presets.SimplyMC,
name: 'logo',
text: 'SimplyMC',
type: 1,
Expand Down Expand Up @@ -104,10 +104,8 @@ export default component$(() => {
const parsedUserStore = JSON.parse(userstore);
for (const key of Object.keys(parsedUserStore)) {
const value = parsedUserStore[key];
if (key == 'colors') store[key] = value;
store[key] = value === 'true' ? true : value === 'false' ? false : value;
}
if (store.colors.length == 0) store.colors = ['#00FFE0', '#EB00FF'];
});

let speed = store.speed;
Expand Down Expand Up @@ -207,6 +205,18 @@ export default component$(() => {

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="hidden sm:flex flex-col gap-3 relative" id="colors">
<SelectInput id="color-preset" label={t('color.colorPreset@@Color Preset')} onChange$={
(event: any) => {
store.colors = presets[event.target!.value as keyof typeof presets];
setCookie(JSON.stringify(store));
}
}>
{Object.keys(presets).map((preset: any) => (
<option key={preset} value={preset}>
{preset}
</option>
))}
</SelectInput>
<NumberInput input min={2} value={store.colors.length} id="colorsinput"
onChange$={(event: any) => {
if (event.target!.value < 2) event.target!.value = 2;
Expand Down Expand Up @@ -292,7 +302,7 @@ export default component$(() => {
))}
</SelectInput>

<SelectInput id="format" label={t('color.colorFormat@@Color Format')} value={store.format} onChange$={
<SelectInput id="format" label={t('color.colorFormat@@Color Format')} value={store.customFormat ? 'custom' : store.format} onChange$={
(event: any) => {
if (event.target!.value == 'custom') {
store.customFormat = true;
Expand All @@ -306,11 +316,18 @@ export default component$(() => {
}>
{formats.map((format: any) => (
<option key={format} value={format}>
{format.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b').replace('$f', '').replace('$c', '')}
{format
.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
.replace('$f', `${store.bold ? store.formatchar + 'l' : ''}${store.italic ? store.formatchar + 'o' : ''}${store.underline ? store.formatchar + 'n' : ''}${store.strikethrough ? store.formatchar + 'm' : ''}`)
.replace('$c', '')}
</option>
))}
<option value={'custom'}>
{store.customFormat ? store.format.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b').replace('$f', '').replace('$c', '') : 'Custom'}
{store.customFormat ? store.format
.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
.replace('$f', `${store.bold ? store.formatchar + 'l' : ''}${store.italic ? store.formatchar + 'o' : ''}${store.underline ? store.formatchar + 'n' : ''}${store.strikethrough ? store.formatchar + 'm' : ''}`)
.replace('$c', '')
: 'Custom'}
</option>
</SelectInput>
<TextInput id="formatchar" value={store.formatchar} placeholder="&" onInput$={(event: any) => { store.formatchar = event.target!.value; setCookie(JSON.stringify(store)); }}>
Expand All @@ -337,22 +354,6 @@ export default component$(() => {
</>
}

<SelectInput id="preset" label={t('color.colorPreset@@Color Preset')} onChange$={
(event: any) => {
store.colors = [];
setTimeout(() => {
store.colors = presets[event.target!.value as keyof typeof presets];
setCookie(JSON.stringify(store));
}, 1);
}
}>
{Object.keys(presets).map((preset: any) => (
<option key={preset} value={preset}>
{preset}
</option>
))}
</SelectInput>

<TextInput big id="formatInput" value={store.outputFormat} placeholder="SimplyMC" onInput$={(event: any) => { store.outputFormat = event.target!.value; setCookie(JSON.stringify(store)); }}>
{t('animtab.outputFormat@@Output Format')}
</TextInput>
Expand Down Expand Up @@ -412,14 +413,14 @@ export default component$(() => {
<Toggle id="bold" checked={store.bold} onChange$={(event: any) => { store.bold = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.bold@@Bold')} - {store.formatchar + 'l'}
</Toggle>
<Toggle id="strikethrough" checked={store.strikethrough} onChange$={(event: any) => { store.strikethrough = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.strikethrough@@Strikethrough')} - {store.formatchar + 'm'}
<Toggle id="italic" checked={store.italic} onChange$={(event: any) => { store.italic = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.italic@@Italic')} - {store.formatchar + 'o'}
</Toggle>
<Toggle id="underline" checked={store.underline} onChange$={(event: any) => { store.underline = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.underline@@Underline')} - {store.formatchar + 'n'}
</Toggle>
<Toggle id="italic" checked={store.italic} onChange$={(event: any) => { store.italic = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.italic@@Italic')} - {store.formatchar + 'o'}
<Toggle id="strikethrough" checked={store.strikethrough} onChange$={(event: any) => { store.strikethrough = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.strikethrough@@Strikethrough')} - {store.formatchar + 'm'}
</Toggle>
</div>
</div>
Expand Down
63 changes: 34 additions & 29 deletions src/routes/gradients/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default component$(() => {
const t = inlineTranslate();

const store: any = useStore({
colors: [],
colors: presets.SimplyMC,
text: 'SimplyMC',
format: '&#$1$2$3$4$5$6$f$c',
formatchar: '&',
Expand Down Expand Up @@ -92,10 +92,8 @@ export default component$(() => {
const parsedUserStore = JSON.parse(userstore);
for (const key of Object.keys(parsedUserStore)) {
const value = parsedUserStore[key];
if (key == 'colors') store[key] = value;
store[key] = value === 'true' ? true : value === 'false' ? false : value;
}
if (store.colors.length == 0) store.colors = ['#00FFE0', '#EB00FF'];
});

return (
Expand Down Expand Up @@ -166,6 +164,18 @@ export default component$(() => {

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="hidden sm:flex flex-col gap-3 relative" id="colors">
<SelectInput id="color-preset" label={t('color.colorPreset@@Color Preset')} onChange$={
(event: any) => {
store.colors = presets[event.target!.value as keyof typeof presets];
setCookie(JSON.stringify(store));
}
}>
{Object.keys(presets).map((preset: any) => (
<option key={preset} value={preset}>
{preset}
</option>
))}
</SelectInput>
<NumberInput input min={2} max={store.text.length} value={store.colors.length} id="colorsinput"
onChange$={(event: any) => {
if (event.target!.value > store.text.length) event.target!.value = store.text.length;
Expand Down Expand Up @@ -226,21 +236,32 @@ export default component$(() => {
</TextInput>

<div class="flex flex-col md:grid grid-cols-2 gap-2">
<SelectInput id="format" label={t('color.colorFormat@@Color Format')} value={store.format} onChange$={
<SelectInput id="format" label={t('color.colorFormat@@Color Format')} value={store.customFormat ? 'custom' : store.format} onChange$={
(event: any) => {
if (event.target!.value == 'custom') return store.customFormat = true;
store.customFormat = false;
store.format = event.target!.value;
if (event.target!.value == 'custom') {
store.customFormat = true;
}
else {
store.customFormat = false;
store.format = event.target!.value;
}
setCookie(JSON.stringify(store));
}
}>
{formats.map((format: any) => (
<option key={format} value={format}>
{format.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b').replace('$f', '').replace('$c', '')}
{format
.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
.replace('$f', `${store.bold ? store.formatchar + 'l' : ''}${store.italic ? store.formatchar + 'o' : ''}${store.underline ? store.formatchar + 'n' : ''}${store.strikethrough ? store.formatchar + 'm' : ''}`)
.replace('$c', '')}
</option>
))}
<option value={'custom'}>
{store.customFormat ? store.format.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b').replace('$f', '').replace('$c', '') : 'Custom'}
{store.customFormat ? store.format
.replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
.replace('$f', `${store.bold ? store.formatchar + 'l' : ''}${store.italic ? store.formatchar + 'o' : ''}${store.underline ? store.formatchar + 'n' : ''}${store.strikethrough ? store.formatchar + 'm' : ''}`)
.replace('$c', '')
: 'Custom'}
</option>
</SelectInput>
<TextInput id="formatchar" value={store.formatchar} placeholder="&" onInput$={(event: any) => { store.formatchar = event.target!.value; setCookie(JSON.stringify(store)); }}>
Expand Down Expand Up @@ -271,22 +292,6 @@ export default component$(() => {
{t('gradient.prefix@@Prefix (Usually used for commands)')}
</TextInput>

<SelectInput id="preset" label={t('color.colorPreset@@Color Preset')} onChange$={
(event: any) => {
store.colors = [];
setTimeout(() => {
store.colors = presets[event.target!.value as keyof typeof presets];
setCookie(JSON.stringify(store));
}, 1);
}
}>
{Object.keys(presets).map((preset: any) => (
<option key={preset} value={preset}>
{preset}
</option>
))}
</SelectInput>

<label>
{t('color.presets@@Presets')}
</label>
Expand Down Expand Up @@ -342,14 +347,14 @@ export default component$(() => {
<Toggle id="bold" checked={store.bold} onChange$={(event: any) => { store.bold = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.bold@@Bold')} - {store.formatchar + 'l'}
</Toggle>
<Toggle id="strikethrough" checked={store.strikethrough} onChange$={(event: any) => { store.strikethrough = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.strikethrough@@Strikethrough')} - {store.formatchar + 'm'}
<Toggle id="italic" checked={store.italic} onChange$={(event: any) => { store.italic = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.italic@@Italic')} - {store.formatchar + 'o'}
</Toggle>
<Toggle id="underline" checked={store.underline} onChange$={(event: any) => { store.underline = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.underline@@Underline')} - {store.formatchar + 'n'}
</Toggle>
<Toggle id="italic" checked={store.italic} onChange$={(event: any) => { store.italic = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.italic@@Italic')} - {store.formatchar + 'o'}
<Toggle id="strikethrough" checked={store.strikethrough} onChange$={(event: any) => { store.strikethrough = event.target!.checked; setCookie(JSON.stringify(store)); }}>
{t('color.strikethrough@@Strikethrough')} - {store.formatchar + 'm'}
</Toggle>
</div>
</div>
Expand Down

0 comments on commit 45482a2

Please sign in to comment.