diff --git a/src/components/util/HexUtils.ts b/src/components/util/HexUtils.ts index 6a5b6fd3..712c8f1f 100644 --- a/src/components/util/HexUtils.ts +++ b/src/components/util/HexUtils.ts @@ -52,7 +52,8 @@ export class Gradient { } else { const gradient = this.gradients.find(g => g.lowerRange <= adjustedStep && g.upperRange >= adjustedStep); - color = gradient?.colorAt(adjustedStep); + if (!gradient) return this.colors[0].rgb; + color = gradient.colorAt(adjustedStep); } this.step++; diff --git a/src/components/util/RGBUtils.ts b/src/components/util/RGBUtils.ts index 54e3befb..2b3d5a2a 100644 --- a/src/components/util/RGBUtils.ts +++ b/src/components/util/RGBUtils.ts @@ -1,5 +1,6 @@ import { AnimatedGradient, Gradient } from './HexUtils'; import { defaults } from './PresetUtils'; +import { sortColors } from './SharedUtils'; export function hex(c: number) { const s = '0123456789ABCDEF'; @@ -154,7 +155,7 @@ export function generateOutput( output += `${text}`; } - const newColors = colors?.map(color => ({ rgb: convertToRGB(color.hex), pos: color.pos })); + const newColors = sortColors(colors).map(color => ({ rgb: convertToRGB(color.hex), pos: color.pos })); if (newColors.length < 2) return 'Error: Not enough colors.'; const gradient = new Gradient(newColors, text.length); diff --git a/src/routes/resources/animtab/index.tsx b/src/routes/resources/animtab/index.tsx index d95bfae4..e4d351d1 100644 --- a/src/routes/resources/animtab/index.tsx +++ b/src/routes/resources/animtab/index.tsx @@ -6,7 +6,7 @@ import { AnimationOutput, convertToRGB, getAnimFrames, getBrightness, getRandomC import { Add, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons'; -import { Button, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle, ColorPicker, NumberInputRaw } from '@luminescent/ui'; +import { Button, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle, ColorPicker } from '@luminescent/ui'; import { inlineTranslate, useSpeak } from 'qwik-speak'; import { getCookies, setCookies, sortColors } from '~/components/util/SharedUtils'; import { isBrowser } from '@builder.io/qwik/build'; @@ -46,12 +46,20 @@ export default component$(() => { ...animTABDefaults, ...unsupportedDefaults, ...cookies, - opened: -1, - alerts: [] as { + }, { deep: true }); + + const tempstore: { + opened: number, + alerts: { class: string, text: string, }[], - frames: [] as (string | null)[][], + frames: (string | null)[][], + frame: number, + } = useStore({ + opened: -1, + alerts: [], + frames: [], frame: 0, }, { deep: true }); @@ -62,13 +70,13 @@ export default component$(() => { let frameInterval = setInterval(() => setFrame(), Math.ceil(speed / 50) * 50); function setFrame() { - if (!store.frames[0]) return; + if (!tempstore.frames[0]) return; if (speed != store.speed) { clearInterval(frameInterval); speed = store.speed; frameInterval = setInterval(() => setFrame(), Math.ceil(speed / 50) * 50); } - store.frame = store.frame + 1 >= store.frames.length ? 0 : store.frame + 1; + tempstore.frame = tempstore.frame + 1 >= tempstore.frames.length ? 0 : tempstore.frame + 1; } }); @@ -80,14 +88,14 @@ export default component$(() => { }); const { frames } = getAnimFrames({ ...store, text: store.text != '' ? store.text : 'birdflop' }); if (store.type == 1) { - store.frames = frames.reverse(); + tempstore.frames = frames.reverse(); } else if (store.type == 3) { const frames2 = frames.slice(); - store.frames = frames.reverse().concat(frames2); + tempstore.frames = frames.reverse().concat(frames2); } else { - store.frames = frames; + tempstore.frames = frames; } }); @@ -116,8 +124,8 @@ export default component$(() => { {(() => { const text = store.text != '' ? store.text : 'birdflop'; - if (!store.frames[0]) return; - const colors = store.frames[store.frame]; + if (!tempstore.frames[0]) return; + const colors = tempstore.frames[tempstore.frame]; if (!colors) return; return text.split('').map((char: string, i: number) => ( @@ -204,17 +212,17 @@ export default component$(() => { const abortController = new AbortController(); document.addEventListener('click', (e) => { if (e.target instanceof HTMLElement && !e.target.closest(`#color${i + 1}`) && !e.target.closest(`#color${i + 1}-popup`)) { - if (store.opened == i) store.opened = -1; + if (tempstore.opened == i) tempstore.opened = -1; abortController.abort(); } }, { signal: abortController.signal }); - store.opened = i; + tempstore.opened = i; }} />
e.stopPropagation()}>
= 50, }}> @@ -228,24 +236,8 @@ export default component$(() => { } -
- { - const newColors = [...store.colors]; - newColors[i].pos = Number(el.value); - store.colors = newColors; - }} - onDecrement$={() => { - const newColors = [...store.colors]; - newColors[i].pos -= 1; - store.colors = newColors; - }} - onIncrement$={() => { - const newColors = [...store.colors]; - newColors[i].pos += 1; - store.colors = newColors; - }} - /> +
+ {store.colors[i].pos}%
{ let json: any; try { const preset = await loadPreset(event.target!.value); - event.target!.value = JSON.stringify(preset); - navigator.clipboard.writeText(JSON.stringify(preset)); - json = { ...animTABDefaults, ...preset }; + event.target!.value = JSON.stringify(preset); + navigator.clipboard.writeText(JSON.stringify(preset)); + json = { ...animTABDefaults, ...preset }; } catch (error) { const alert = { class: 'text-red-500', text: 'color.invalidPreset@@INVALID PRESET! Please report this to the Developers with the preset you tried to import.', }; - store.alerts.push(alert); + tempstore.alerts.push(alert); return setTimeout(() => { - store.alerts.splice(store.alerts.indexOf(alert), 1); + tempstore.alerts.splice(tempstore.alerts.indexOf(alert), 1); }, 5000); } Object.keys(json).forEach(key => { @@ -339,9 +331,9 @@ export default component$(() => { class: 'text-green-500', text: 'color.importedPreset@@Successfully imported preset!', }; - store.alerts.push(alert); + tempstore.alerts.push(alert); setTimeout(() => { - store.alerts.splice(store.alerts.indexOf(alert), 1); + tempstore.alerts.splice(tempstore.alerts.indexOf(alert), 1); }, 2000); }}> {t('color.presets@@Presets')} @@ -349,7 +341,11 @@ export default component$(() => {