From 6be64c357b3885dd41da175e9d638e43416a5802 Mon Sep 17 00:00:00 2001 From: saboooooor Date: Wed, 12 Jun 2024 21:13:46 -0600 Subject: [PATCH] more progress and get rid of some redundant type definitions --- src/analyze/functions/analyzeProfile.ts | 10 +- src/analyze/functions/analyzeTimings.ts | 10 +- src/components/util/PresetUtils.ts | 58 ++- src/components/util/RGBUtils.ts | 21 +- src/components/util/SharedUtils.ts | 6 +- src/routes/resources/animpreview/index.tsx | 3 +- src/routes/resources/animtab/index.tsx | 491 ++++++++++----------- src/routes/resources/flags/index.tsx | 2 +- src/routes/resources/rgb/index.tsx | 190 ++++---- 9 files changed, 403 insertions(+), 388 deletions(-) diff --git a/src/analyze/functions/analyzeProfile.ts b/src/analyze/functions/analyzeProfile.ts index bddd946b..7c79e61d 100644 --- a/src/analyze/functions/analyzeProfile.ts +++ b/src/analyze/functions/analyzeProfile.ts @@ -89,8 +89,8 @@ export default async function analyzeProfile(id: string) { const jvm_version = sampler.metadata.systemStatistics.java.version; if (flags.includes('-XX:+UseZGC') && flags.includes('-Xmx')) { - const flaglist = flags.split(' '); - flaglist.forEach((flag: string) => { + const flaglist: string[] = flags.split(' '); + flaglist.forEach((flag) => { if (flag.startsWith('-Xmx')) { let max_mem = flag.split('-Xmx')[1].toLowerCase(); max_mem = max_mem.replace('g', '000'); @@ -105,8 +105,8 @@ export default async function analyzeProfile(id: string) { if (!flags.includes('-XX:+UseG1GC') && jvm_version.startsWith('1.8.')) fields.push({ name: '❌ Aikar\'s Flags', value: 'You must use G1GC when using Aikar\'s flags.' }); if (flags.includes('-Xmx')) { let max_mem = 0; - const flaglist = flags.split(' '); - flaglist.forEach((flag: string) => { + const flaglist: string[] = flags.split(' '); + flaglist.forEach((flag) => { if (flag.startsWith('-Xmx')) { flag = flag.split('-Xmx')[1].toLowerCase(); flag = flag.replace('g', '000'); @@ -118,7 +118,7 @@ export default async function analyzeProfile(id: string) { if (1000 * sampler.metadata.platformStatistics.playerCount / max_mem > 6 && max_mem < 10000) fields.push({ name: '❌ Low Memory', value: 'You should be using more RAM with this many players.' }); if (flags.includes('-Xms')) { let min_mem = 0; - flaglist.forEach((flag: string) => { + flaglist.forEach((flag) => { if (flag.startsWith('-Xms')) { flag = flag.split('-Xms')[1].toLowerCase(); flag = flag.replace('g', '000'); diff --git a/src/analyze/functions/analyzeTimings.ts b/src/analyze/functions/analyzeTimings.ts index f9e44d92..610fae5c 100644 --- a/src/analyze/functions/analyzeTimings.ts +++ b/src/analyze/functions/analyzeTimings.ts @@ -86,8 +86,8 @@ export default async function analyzeTimings(id: string) { const flags = request.timingsMaster.system.flags; const jvm_version = request.timingsMaster.system.jvmversion; if (flags.includes('-XX:+UseZGC') && flags.includes('-Xmx')) { - const flaglist = flags.split(' '); - flaglist.forEach((flag: string) => { + const flaglist: string[] = flags.split(' '); + flaglist.forEach((flag) => { if (flag.startsWith('-Xmx')) { let max_mem = flag.split('-Xmx')[1].toLowerCase(); max_mem = max_mem.replace('g', '000'); @@ -102,8 +102,8 @@ export default async function analyzeTimings(id: string) { if (!flags.includes('-XX:+UseG1GC') && jvm_version.startsWith('1.8.')) fields.push({ name: '❌ Aikar\'s Flags', value: 'You must use G1GC when using Aikar\'s flags.' }); if (flags.includes('-Xmx')) { let max_mem = 0; - const flaglist = flags.split(' '); - flaglist.forEach((flag: string) => { + const flaglist: string[] = flags.split(' '); + flaglist.forEach((flag) => { if (flag.startsWith('-Xmx')) { flag = flag.split('-Xmx')[1].toLowerCase(); flag = flag.replace('g', '000'); @@ -124,7 +124,7 @@ export default async function analyzeTimings(id: string) { if (1000 * max_online_players / max_mem > 6 && max_mem < 10000) fields.push({ name: '❌ Low Memory', value: 'You should be using more RAM with this many players.' }); if (flags.includes('-Xms')) { let min_mem = 0; - flaglist.forEach((flag: string) => { + flaglist.forEach((flag) => { if (flag.startsWith('-Xms')) { flag = flag.split('-Xms')[1].toLowerCase(); flag = flag.replace('g', '000'); diff --git a/src/components/util/PresetUtils.ts b/src/components/util/PresetUtils.ts index b3a70740..85282432 100644 --- a/src/components/util/PresetUtils.ts +++ b/src/components/util/PresetUtils.ts @@ -11,7 +11,7 @@ export interface format { declare interface preset { version: number; - colors: string[]; + colors: { hex: string; pos: number }[]; name: string; text: string; type: number; @@ -29,15 +29,47 @@ declare interface preset { } export const presets = { - 'birdflop': ['#084CFB', '#ADF3FD'], - 'SimplyMC': ['#00FFE0', '#EB00FF'], - 'Rainbow': ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'], - 'Skyline': ['#1488CC', '#2B32B2'], - 'Mango': ['#FFE259', '#FFA751'], - 'Vice City': ['#3494E6', '#EC6EAD'], - 'Dawn': ['#F3904F', '#3B4371'], - 'Rose': ['#F4C4F3', '#FC67FA'], - 'Firewatch': ['#CB2D3E', '#EF473A'], + 'birdflop': [ + { hex: '#084CFB', pos: 0 }, + { hex: '#ADF3FD', pos: 100 }, + ], + 'SimplyMC': [ + { hex: '#00FFE0', pos: 0 }, + { hex: '#EB00FF', pos: 100 }, + ], + 'Rainbow': [ + { hex: '#FF0000', pos: 0 }, + { hex: '#FF7F00', pos: 16.66 }, + { hex: '#FFFF00', pos: 33.33 }, + { hex: '#00FF00', pos: 50 }, + { hex: '#0000FF', pos: 66.66 }, + { hex: '#4B0082', pos: 83.33 }, + { hex: '#9400D3', pos: 100 }, + ], + 'Skyline': [ + { hex: '#1488CC', pos: 0 }, + { hex: '#2B32B2', pos: 100 }, + ], + 'Mango': [ + { hex: '#FFE259', pos: 0 }, + { hex: '#FFA751', pos: 100 }, + ], + 'Vice City': [ + { hex: '#3494E6', pos: 0 }, + { hex: '#EC6EAD', pos: 100 }, + ], + 'Dawn': [ + { hex: '#F3904F', pos: 0 }, + { hex: '#3B4371', pos: 100 }, + ], + 'Rose': [ + { hex: '#F4C4F3', pos: 0 }, + { hex: '#FC67FA', pos: 100 }, + ], + 'Firewatch': [ + { hex: '#CB2D3E', pos: 0 }, + { hex: '#EF473A', pos: 100 }, + ], }; export const v3formats = [ @@ -81,7 +113,7 @@ export const types = [ ]; export const defaults: preset = { - version: 3, + version: 4, colors: presets.birdflop, name: 'logo', text: 'birdflop', @@ -163,8 +195,8 @@ const v1formats = { }, }; -export function fromBinary(encoded: string): string { - let binary: string; +export function fromBinary(encoded: string) { + let binary; try { binary = atob(encoded); } catch (error) { diff --git a/src/components/util/RGBUtils.ts b/src/components/util/RGBUtils.ts index eb22714e..5b23028a 100644 --- a/src/components/util/RGBUtils.ts +++ b/src/components/util/RGBUtils.ts @@ -1,5 +1,4 @@ import { AnimatedGradient, Gradient } from './HexUtils'; -import type { format } from './PresetUtils'; import { defaults } from './PresetUtils'; export function hex(c: number) { @@ -43,8 +42,8 @@ export function getRandomColor() { return color; } -export function getAnimFrames(store: any) { - let colors = store.colors.map((color: string) => convertToRGB(color)); +export function getAnimFrames(store: typeof defaults) { + let colors = store.colors.map(color => convertToRGB(color.hex)); if (colors.length < 2) colors = [convertToRGB('#00FFE0'), convertToRGB('#EB00FF')]; const text = store.text ?? 'birdflop'; @@ -115,7 +114,7 @@ export function getAnimFrames(store: any) { return { OutputArray, frames }; } -export function AnimationOutput(store: any) { +export function AnimationOutput(store: typeof defaults) { let FinalOutput = ''; const AnimFrames = getAnimFrames(store); @@ -123,7 +122,7 @@ export function AnimationOutput(store: any) { const format = store.outputFormat; FinalOutput = format.replace('%name%', store.name); - FinalOutput = FinalOutput.replace('%speed%', store.speed); + FinalOutput = FinalOutput.replace('%speed%', `${store.speed}`); if (store.type == 1) { OutputArray.reverse(); } @@ -133,17 +132,15 @@ export function AnimationOutput(store: any) { } const outputFormat = FinalOutput.match(/%output:{(.*\$t.*)}%/); - if (outputFormat) { - OutputArray = OutputArray.map((output: string) => outputFormat[1].replace('$t', output)); - } + if (outputFormat) OutputArray = OutputArray.map(output => outputFormat[1].replace('$t', output)); FinalOutput = FinalOutput.replace(/%output:{.*\$t.*}%/, OutputArray.join('\n')); return FinalOutput; } export function generateOutput( - text: string = defaults.text, - colors: string[] = defaults.colors, - format: format = defaults.format, + text = defaults.text, + colors = defaults.colors, + format = defaults.format, prefixsuffix?: string, trimspaces?: boolean, bold?: boolean, @@ -157,7 +154,7 @@ export function generateOutput( output += `${text}`; } - const newColors = colors?.map((color: string) => convertToRGB(color)); + const newColors = colors?.map(color => convertToRGB(color.hex)); while (newColors.length < 2) newColors.push(convertToRGB(getRandomColor())); const gradient = new Gradient(newColors, text.length); diff --git a/src/components/util/SharedUtils.ts b/src/components/util/SharedUtils.ts index 4f3319fc..f042975d 100644 --- a/src/components/util/SharedUtils.ts +++ b/src/components/util/SharedUtils.ts @@ -63,4 +63,8 @@ export const setCookies = function (json: { [key: string]: any; }) { console.debug('cookie', key, encodedValue); document.cookie = `${key}=${encodedValue}; path=/`; }); -}; \ No newline at end of file +}; + +export function sortColors(colors: { hex: string, pos: number }[]) { + return [...colors].sort((a, b) => a.pos - b.pos); +} \ No newline at end of file diff --git a/src/routes/resources/animpreview/index.tsx b/src/routes/resources/animpreview/index.tsx index cfe0de07..3aac780b 100644 --- a/src/routes/resources/animpreview/index.tsx +++ b/src/routes/resources/animpreview/index.tsx @@ -79,8 +79,7 @@ export default component$(() => { const pattern = /&(#[0-9A-Fa-f]{6})?(&[0-9A-Fa-fk-or])?(&[0-9A-Fa-fk-or])?(&[0-9A-Fa-fk-or])?(&[0-9A-Fa-fk-or])([^&]*)/; const spans = store.frames[store.frame].match(new RegExp(pattern, 'g')); return spans.map((string: string, i: number) => { - let result: any = string.match(pattern); - result = result.filter((obj: string) => { return obj; }); + const result: any = string.match(pattern); return ( { }); export default component$(() => { - useSpeak({ assets: ['animpreview', 'color'] }); + useSpeak({ assets: ['animtab', 'color'] }); const t = inlineTranslate(); const cookies = useCookies().value; @@ -65,9 +65,9 @@ export default component$(() => { } const newColors = [...store.colors]; - const currentColor = `${newColors[currentIndex]}`; - newColors[currentIndex] = newColors[newIndex]; - newColors[newIndex] = currentColor; + const currentColor = `${newColors[currentIndex].hex}`; + newColors[currentIndex].hex = newColors[newIndex].hex; + newColors[newIndex].hex = currentColor; store.colors = newColors; }); @@ -108,8 +108,8 @@ export default component$(() => { }); return ( -
-
+
+

{t('animtab.title@@Animated TAB')}

@@ -117,7 +117,7 @@ export default component$(() => { {t('animtab.subtitle@@TAB plugin gradient animation creator')} - - } -
+
diff --git a/src/routes/resources/flags/index.tsx b/src/routes/resources/flags/index.tsx index 986229f5..6ba3f298 100644 --- a/src/routes/resources/flags/index.tsx +++ b/src/routes/resources/flags/index.tsx @@ -217,7 +217,7 @@ export default component$(() => {
{ store.parsed.flags = event.target!.value; - }} values={Object.keys(flagTypes).map((flag: string) => ({ + }} values={Object.keys(flagTypes).map(flag => ({ name: flagTypes[flag as keyof typeof flagTypes], value: flag, }))} value={store.parsed.flags}> diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx index 6ba05dd4..d9973b26 100644 --- a/src/routes/resources/rgb/index.tsx +++ b/src/routes/resources/rgb/index.tsx @@ -1,15 +1,15 @@ -import { $, component$, useStore, useTask$ } from '@builder.io/qwik'; +import { component$, useStore, useTask$ } from '@builder.io/qwik'; import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city'; import { Gradient } from '~/components/util/HexUtils'; import { defaults, loadPreset, presets, v3formats } from '~/components/util/PresetUtils'; import { convertToHex, convertToRGB, generateOutput, getBrightness, getRandomColor } from '~/components/util/RGBUtils'; -import { Add, Remove, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons'; +import { Add, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons'; -import { Button, ColorPicker, Header, Dropdown, TextArea, TextInput, Toggle } from '@luminescent/ui'; +import { Button, ColorPicker, Header, Dropdown, TextArea, TextInput, Toggle, NumberInputRaw } from '@luminescent/ui'; import { inlineTranslate, useSpeak } from 'qwik-speak'; -import { getCookies, setCookies } from '~/components/util/SharedUtils'; +import { getCookies, setCookies, sortColors } from '~/components/util/SharedUtils'; import { isBrowser } from '@builder.io/qwik/build'; export const rgbDefaults = { @@ -33,6 +33,7 @@ export const useCookies = routeLoader$(async ({ cookie, url }) => { export default component$(() => { useSpeak({ assets: ['gradient', 'color'] }); const t = inlineTranslate(); + const cookies = useCookies().value; const store = useStore({ ...rgbDefaults, @@ -44,28 +45,13 @@ export default component$(() => { }[], }, { deep: true }); - const handleSwap = $((currentIndex: number, newIndex: number) => { - // check if the index is out of bounds - const colorsLength = store.colors.length; - if (newIndex < 0) { - newIndex = colorsLength - 1; - } else if (newIndex >= colorsLength) { - newIndex = 0; - } - - const newColors = [...store.colors]; - const currentColor = `${newColors[currentIndex]}`; - newColors[currentIndex] = newColors[newIndex]; - newColors[newIndex] = currentColor; - store.colors = newColors; - }); - useTask$(({ track }) => { isBrowser && setCookies(store); Object.keys(store).forEach((key: any) => { if (key == 'frames' || key == 'frame' || key == 'alerts') return; else track(() => store[key as keyof typeof store]); }); + if (JSON.stringify(store.colors) != JSON.stringify(sortColors(store.colors))) store.colors = sortColors(store.colors); }); return ( @@ -81,8 +67,7 @@ export default component$(() => { Wanna automate generating gradients or use this in your own project? We have an API! - {/* charlimit={256} */} -