{
{
+export const QwikPartytown = (props: PartytownProps): any => {
return ;
};
diff --git a/src/components/util/HexUtils.ts b/src/components/util/HexUtils.ts
index 712c8f1f..3a60245b 100644
--- a/src/components/util/HexUtils.ts
+++ b/src/components/util/HexUtils.ts
@@ -1,49 +1,34 @@
/**
* Typescript implementation of HexUtils Gradients from RoseGarden.
* https://github.com/Rosewood-Development/RoseGarden/blob/master/src/main/java/dev/rosewood/rosegarden/utils/HexUtils.java#L358
- * Modified to work with custom gradient points.
*/
export class Gradient {
- colors: { rgb: number[], pos: number }[];
- gradients: TwoStopGradient[];
+ colors: number[][];
+ gradients: any[];
steps: number;
step: number;
- constructor(colors: Gradient['colors'], numSteps: number) {
+ constructor(colors: number[][], numSteps: number) {
this.colors = colors;
this.gradients = [];
this.steps = numSteps - 1;
this.step = 0;
- if (colors[0].pos !== 0) colors.unshift({ rgb: colors[0].rgb, pos: 0 });
- if (colors[colors.length - 1].pos !== 100) colors.push({ rgb: colors[colors.length - 1].rgb, pos: 100 });
+ const increment = this.steps / (colors.length - 1);
for (let i = 0; i < colors.length - 1; i++) {
- let currentColor = colors[i];
- let nextColor = colors[i + 1];
- if (currentColor.pos > nextColor.pos) {
- const newColor = currentColor;
- currentColor = nextColor;
- nextColor = newColor;
- }
-
- const lowerRange = Math.round(colors[i].pos / 100 * numSteps);
- const upperRange = Math.round(colors[i + 1].pos / 100 * numSteps);
- if (lowerRange === upperRange) continue;
-
this.gradients.push(
new TwoStopGradient(
- currentColor.rgb,
- nextColor.rgb,
- lowerRange,
- upperRange,
- ),
+ colors[i],
+ colors[i + 1],
+ increment * i,
+ increment * (i + 1)),
);
}
}
/* Gets the next color in the gradient sequence as an array of 3 numbers: [r, g, b] */
next() {
- if (this.steps <= 1) { return this.colors[0].rgb; }
+ if (this.steps <= 1) { return this.colors[0]; }
const adjustedStep = Math.round(Math.abs(((2 * Math.asin(Math.sin(this.step * (Math.PI / (2 * this.steps))))) / Math.PI) * this.steps));
let color;
@@ -51,9 +36,9 @@ export class Gradient {
color = this.gradients[0].colorAt(adjustedStep);
}
else {
- const gradient = this.gradients.find(g => g.lowerRange <= adjustedStep && g.upperRange >= adjustedStep);
- if (!gradient) return this.colors[0].rgb;
- color = gradient.colorAt(adjustedStep);
+ const segment = this.steps / this.gradients.length;
+ const index = Math.min(Math.floor(adjustedStep / segment), this.gradients.length - 1);
+ color = this.gradients[index].colorAt(adjustedStep);
}
this.step++;
@@ -75,7 +60,6 @@ class TwoStopGradient {
}
colorAt(step: number) {
- if (this.startColor === this.endColor) return this.startColor;
return [
this.calculateHexPiece(step, this.startColor[0], this.endColor[0]),
this.calculateHexPiece(step, this.startColor[1], this.endColor[1]),
@@ -91,7 +75,7 @@ class TwoStopGradient {
}
export class AnimatedGradient extends Gradient {
- constructor(colors: Gradient['colors'], numSteps: number, offset: number) {
+ constructor(colors: number[][], numSteps: number, offset: number) {
super(colors, numSteps);
this.step = offset;
}
diff --git a/src/components/util/PresetUtils.ts b/src/components/util/PresetUtils.ts
index c35d362d..b3a70740 100644
--- a/src/components/util/PresetUtils.ts
+++ b/src/components/util/PresetUtils.ts
@@ -1,3 +1,5 @@
+export const presetVersion = 3;
+
export interface format {
color: string;
char?: string;
@@ -7,48 +9,35 @@ export interface format {
strikethrough?: string;
}
+declare interface preset {
+ version: number;
+ colors: string[];
+ name: string;
+ text: string;
+ type: number;
+ speed: number;
+ length: number;
+ format: format;
+ customFormat: boolean;
+ prefixsuffix: string;
+ outputFormat: string;
+ trimspaces: boolean;
+ bold: boolean;
+ italic: boolean;
+ underline: boolean;
+ strikethrough: boolean;
+}
+
export const presets = {
- '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 },
- ],
+ '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'],
};
export const v3formats = [
@@ -57,23 +46,16 @@ export const v3formats = [
char: '&',
},
{
- color: 'MiniMessage',
- bold: '$t',
- italic: '$t',
- underline: '$t',
- strikethrough: '
+ The /api/gradient endpoint is deprecated and will be removed in the future in favor of this new API. Please update your code to use the new API.
+
{method}: {description}
color example: {v3formats.find(format => format.color == 'MiniMessage')?.strikethrough} hex required type: string The color in hex format. example: "#00ffe0" pos required type: number The position of the color in the gradient as a percentage example: 50
- {store.frames[store.frame]}
- $t',
- },
- {
- color: '§x§$1§$2§$3§$4§$5§$6$f$c',
- char: '§',
+ color: '<#$1$2$3$4$5$6>$f$c',
+ char: '&',
},
{
color: '&x&$1&$2&$3&$4&$5&$6$f$c',
char: '&',
},
{
- color: '<#$1$2$3$4$5$6>$f$c',
- char: '&',
+ color: '§x§$1§$2§$3§$4§$5§$6$f$c',
+ char: '§',
},
{
color: '[COLOR=#$1$2$3$4$5$6]$c[/COLOR]',
@@ -82,6 +64,13 @@ export const v3formats = [
underline: '[UNDERLINE]$t[/UNDERLINE]',
strikethrough: '[STRIKETHROUGH]$t[/STRIKETHROUGH]',
},
+ {
+ color: 'MiniMessage',
+ bold: '
+
Get Started
@@ -42,7 +45,7 @@ export default component$(() => {
{path}
- {(Object.entries(endpoints[path].methods) as [string, string][]).map(([method, description]) =>
+ {Object.entries(endpoints[path].methods).map(([method, description]: any) =>
+
{(() => {
if (!store.frames[store.frame]) return '';
- const pattern = /&?(#([0-9A-Fa-f]{6}))?((&[0-9a-fk-or]){0,5})([^&#]*)/;
+ 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'));
- let color = '#ffffff';
- return spans?.map((string: string, i: number) => {
- const result = string.match(pattern);
- if (!result) return '';
- console.log(result);
- color = result[2] ? `#${result[2]}` : color;
- Object.keys(minecraftColors).forEach(key => {
- if (result[3]?.includes(key)) color = minecraftColors[key as keyof typeof minecraftColors];
- });
+ return spans.map((string: string, i: number) => {
+ let result: any = string.match(pattern);
+ result = result.filter((obj: string) => { return obj; });
return (
-
- {result[result.length - 1].replace(/ /g, '\u00A0')}
+ {result[result.length - 1]}
);
});
})()}
-
);
diff --git a/src/routes/resources/animtab/index.tsx b/src/routes/resources/animtab/index.tsx
index 3c70a3e8..5f3c5b93 100644
--- a/src/routes/resources/animtab/index.tsx
+++ b/src/routes/resources/animtab/index.tsx
@@ -1,109 +1,114 @@
-import { component$, useStore, useTask$, useVisibleTask$ } from '@builder.io/qwik';
+import { $, component$, useStore, useTask$, useVisibleTask$ } from '@builder.io/qwik';
import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';
import { defaults, loadPreset, presets, types, v3formats } from '~/components/util/PresetUtils';
-import { AnimationOutput, convertToRGB, getAnimFrames, getBrightness, getRandomColor } from '~/components/util/RGBUtils';
+import { AnimationOutput, getAnimFrames, getRandomColor } from '~/components/util/RGBUtils';
-import { Add, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons';
+import { ChevronDown, ChevronUp, ColorFillOutline, SettingsOutline, Text } from 'qwik-ionicons';
-import { Button, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle, ColorPicker } from '@luminescent/ui';
+import { Button, ColorInput, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle } from '@luminescent/ui';
import { inlineTranslate, useSpeak } from 'qwik-speak';
-import { getCookies, setCookies, sortColors } from '~/components/util/SharedUtils';
+import { getCookies, setCookies } from '~/components/util/SharedUtils';
import { isBrowser } from '@builder.io/qwik/build';
-import { rgbDefaults } from '../rgb';
-export const animTABDefaults = {
+const animTABDefaults = {
+ version: defaults.version,
+ colors: defaults.colors,
name: defaults.name,
+ text: defaults.text,
type: defaults.type,
speed: defaults.speed,
length: defaults.length,
+ prefixsuffix: defaults.prefixsuffix,
+ trimspaces: defaults.trimspaces,
+ bold: defaults.bold,
+ italic: defaults.italic,
+ underline: defaults.underline,
+ strikethrough: defaults.strikethrough,
+};
+
+const unsupportedDefaults = {
+ format: defaults.format,
+ customFormat: defaults.customFormat,
outputFormat: defaults.outputFormat,
};
export const useCookies = routeLoader$(async ({ cookie, url }) => {
- const animtabCookies = await getCookies(cookie, 'animtab', url.searchParams) as Partial
{t('animtab.title@@Animated TAB')}
@@ -111,7 +116,7 @@ export default component$(() => {
{t('animtab.subtitle@@TAB plugin gradient animation creator')}
-
- }
+ {store.customFormat &&
+
+ }
+
- { store.frames[i].delay = el.value; }} class="w-full text-lg bg-gray-700 text-white text-center focus:bg-gray-600 p-2 rounded-b-md" />
+ { store.frames[i].delay = event.target!.value; }} class="w-full text-lg bg-gray-700 text-white text-center focus:bg-gray-600 p-2 rounded-b-md" />