Merge branch 'dev' into birdflop

birdflop · Jun 14, 2024 · 2467aa0 · 2467aa0
2 parents 8d7cb42 + f416afc
commit 2467aa0
Show file tree

Hide file tree

Showing 13 changed files with 307 additions and 267 deletions.
diff --git a/src/components/analyze/PaperTimings.tsx b/src/components/analyze/PaperTimings.tsx
@@ -21,26 +21,24 @@ export default component$(() => {
 
         <Slot />
 
-        <TextInput id="link" onInput$={
-          (event: any) => {
-            const link = event.target!.value;
-            store.redirect = '';
-            if (link.startsWith('https://spark.lucko.me')) {
-              store.error = '⚠️ This is a Spark Profile. Use the Spark Profile Analysis for this type of report.';
-            }
-            else if (link.startsWith('https://www.spigotmc.org/go/timings?url=') || link.startsWith('https://spigotmc.org/go/timings?url=')) {
-              store.error = '❌ Spigot timings have limited information. Switch to Purpur (or Paper) for better timings analysis. All your plugins will be compatible, and if you don\'t like it, you can easily switch back.';
-            }
-            else if (!link.startsWith('https://timin') || !link.includes('?id=')) {
-              store.error = '❌ This is an Invalid Timings Link.';
-            }
-            else {
-              store.error = '';
-              const code = link.replace('/d=', '/?id=').replace('timin.gs', 'timings.aikar.co').split('#')[0].split('\n')[0].split('/?id=')[1];
-              store.redirect = `/resources/papertimings/${code}`;
-            }
+        <TextInput id="link" onInput$={(e, el) => {
+          const link = el.value;
+          store.redirect = '';
+          if (link.startsWith('https://spark.lucko.me')) {
+            store.error = '⚠️ This is a Spark Profile. Use the Spark Profile Analysis for this type of report.';
           }
-        }>
+          else if (link.startsWith('https://www.spigotmc.org/go/timings?url=') || link.startsWith('https://spigotmc.org/go/timings?url=')) {
+            store.error = '❌ Spigot timings have limited information. Switch to Purpur (or Paper) for better timings analysis. All your plugins will be compatible, and if you don\'t like it, you can easily switch back.';
+          }
+          else if (!link.startsWith('https://timin') || !link.includes('?id=')) {
+            store.error = '❌ This is an Invalid Timings Link.';
+          }
+          else {
+            store.error = '';
+            const code = link.replace('/d=', '/?id=').replace('timin.gs', 'timings.aikar.co').split('#')[0].split('\n')[0].split('/?id=')[1];
+            store.redirect = `/resources/papertimings/${code}`;
+          }
+        }}>
           Paste the timings report link here
         </TextInput>
         <p class={{

diff --git a/src/components/analyze/SparkProfile.tsx b/src/components/analyze/SparkProfile.tsx
@@ -21,26 +21,24 @@ export default component$(() => {
 
         <Slot />
 
-        <TextInput id="link" onInput$={
-          (event: any) => {
-            const link = event.target!.value;
-            store.redirect = '';
-            if (link.startsWith('https://timin') || link.startsWith('https://www.spigotmc.org/go/timings?url=')) {
-              store.error = '⚠️ This is a Timings Report. Use the Timings Report Analysis for this type of report.';
-            }
-            else if (link.startsWith('https://www.spigotmc.org/go/timings?url=') || link.startsWith('https://spigotmc.org/go/timings?url=')) {
-              store.error = '❌ Spigot timings have limited information. Switch to Purpur (or Paper) for better timings analysis. All your plugins will be compatible, and if you don\'t like it, you can easily switch back.';
-            }
-            else if (!link.startsWith('https://spark.lucko.me/')) {
-              store.error = '❌ This is an Invalid Spark Profile Link.';
-            }
-            else {
-              store.error = '';
-              const code = link.replace('https://spark.lucko.me/', '');
-              store.redirect = `/resources/sparkprofile/${code}`;
-            }
+        <TextInput id="link" onInput$={(e, el) => {
+          const link = el.value;
+          store.redirect = '';
+          if (link.startsWith('https://timin') || link.startsWith('https://www.spigotmc.org/go/timings?url=')) {
+            store.error = '⚠️ This is a Timings Report. Use the Timings Report Analysis for this type of report.';
           }
-        }>
+          else if (link.startsWith('https://www.spigotmc.org/go/timings?url=') || link.startsWith('https://spigotmc.org/go/timings?url=')) {
+            store.error = '❌ Spigot timings have limited information. Switch to Purpur (or Paper) for better timings analysis. All your plugins will be compatible, and if you don\'t like it, you can easily switch back.';
+          }
+          else if (!link.startsWith('https://spark.lucko.me/')) {
+            store.error = '❌ This is an Invalid Spark Profile Link.';
+          }
+          else {
+            store.error = '';
+            const code = link.replace('https://spark.lucko.me/', '');
+            store.redirect = `/resources/sparkprofile/${code}`;
+          }
+        }}>
           Paste the spark profile link here
         </TextInput>
         <p class={{

diff --git a/src/components/partytown/partytown.tsx b/src/components/partytown/partytown.tsx
@@ -18,6 +18,6 @@ export interface PartytownProps extends PartytownConfig { }
  * @public
  * You can pass setting with props
  */
-export const QwikPartytown = (props: PartytownProps): any => {
+export const QwikPartytown = (props: PartytownProps) => {
   return <script dangerouslySetInnerHTML={partytownSnippet(props)} />;
 };
diff --git a/src/components/util/SharedUtils.ts b/src/components/util/SharedUtils.ts
@@ -3,7 +3,9 @@ import { rgbDefaults } from '~/routes/resources/rgb';
 import { animTABDefaults } from '~/routes/resources/animtab';
 import { defaults, loadPreset } from './PresetUtils';
 
-export function getCookies(cookie: Cookie, preset: string, urlParams: URLSearchParams) {
+type names = 'rgb' | 'animtab' | 'parsed' | 'animpreview';
+
+export function getCookies(cookie: Cookie, preset: names, urlParams: URLSearchParams) {
   let json = JSON.parse(cookie.get(preset)?.value || '{}');
 
   // migrate
@@ -38,7 +40,7 @@ export function getCookies(cookie: Cookie, preset: string, urlParams: URLSearchP
   return json;
 }
 
-export function setCookies(name: 'rgb' | 'animtab' | 'parsed', json: { [key: string]: any; }) {
+export function setCookies(name: names, json: { [key: string]: any; }) {
   console.debug('cookie', name, JSON.stringify(json));
 
   const cookie: { [key: string]: string; } = {};

diff --git a/src/components/util/flags/safeJSON.ts b/src/components/util/flags/safeJSON.ts
diff --git a/src/data/flags.ts b/src/data/flags.ts
@@ -292,18 +292,18 @@ export const flags: Flags = {
 };
 
 export const extraFlags: ExtraFlags = {
-  'vectors': {
-    'supports': ['aikars'],
-    'generate': ({ existingFlags }) => {
+  vectors: {
+    supports: ['aikars'],
+    generate: ({ existingFlags }) => {
       return [
         ...existingFlags,
         '--add-modules=jdk.incubator.vector',
       ];
     },
   },
-  'benchmarkedGraalVM': {
-    'supports': ['benchmarkedG1GC'],
-    'generate': ({ existingFlags }) => {
+  benchmarkedGraalVM: {
+    supports: ['benchmarkedG1GC'],
+    generate: ({ existingFlags }) => {
       return [
         ...existingFlags,
         '-XX:+UnlockExperimentalVMOptions',

diff --git a/src/routes/api/v2/docs/index.tsx b/src/routes/api/v2/docs/index.tsx
@@ -42,7 +42,7 @@ export default component$(() => {
             <h3 class="flex gap-4 items-center text-gray-100 text-lg sm:text-2xl font-bold mb-2 drop-shadow-lg">
               {path}
             </h3>
-            {Object.entries(endpoints[path].methods).map(([method, description]: any) =>
+            {(Object.entries(endpoints[path].methods) as [string, string][]).map(([method, description]) =>
               <p key={method} class="flex gap-4 items-center text-gray-400 sm:text-lg drop-shadow-lg">
                 {method}: {description}
               </p>,

diff --git a/src/routes/resources/animpreview/index.tsx b/src/routes/resources/animpreview/index.tsx
@@ -1,20 +1,44 @@
-import { component$, useStore, useTask$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
+import { component$, useStore, useTask$, useVisibleTask$ } from '@builder.io/qwik';
+import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';
+import { isBrowser } from '@builder.io/qwik/build';
 import { TextArea } from '@luminescent/ui';
-import {
-  inlineTranslate,
-  useSpeak,
-} from 'qwik-speak';
+import { getCookies, setCookies } from '~/components/util/SharedUtils';
+import { inlineTranslate, useSpeak } from 'qwik-speak';
 import yaml from 'yaml';
 
+export const useCookies = routeLoader$(async ({ cookie, url }) => {
+  return await getCookies(cookie, 'animpreview', url.searchParams);
+});
+
+const minecraftColors = {
+  '&0': '#000000',
+  '&1': '#0000AA',
+  '&2': '#00AA00',
+  '&3': '#00AAAA',
+  '&4': '#AA0000',
+  '&5': '#AA00AA',
+  '&6': '#FFAA00',
+  '&7': '#AAAAAA',
+  '&8': '#555555',
+  '&9': '#5555FF',
+  '&a': '#55FF55',
+  '&b': '#55FFFF',
+  '&c': '#FF5555',
+  '&d': '#FF55FF',
+  '&e': '#FFFF55',
+  '&f': '#FFFFFF',
+};
+
 export default component$(() => {
   useSpeak({ assets: ['animpreview'] });
   const t = inlineTranslate();
 
-  const store: any = useStore({
+  const cookies = useCookies().value;
+
+  const store = useStore({
     text: 'birdflop',
     speed: 50,
-    frames: [],
+    frames: [] as string[],
     frame: 1,
     yaml: `logo:
     change-interval: 50
@@ -33,27 +57,34 @@ export default component$(() => {
     - "&#43B6E9&lS&#6592ED&li&#866DF2&lm&#A849F6&lp&#C924FB&ll&#EB00FF&ly&#C924FB&lM&#A849F6&lC"
     - "&#22DBE4&lS&#43B6E9&li&#6592ED&lm&#866DF2&lp&#A849F6&ll&#C924FB&ly&#EB00FF&lM&#C924FB&lC"
     - "&#00FFE0&lS&#22DBE4&li&#43B6E9&lm&#6592ED&lp&#866DF2&ll&#A849F6&ly&#C924FB&lM&#EB00FF&lC"`,
+    ...cookies,
   }, { deep: true });
 
-  useTask$(() => {
-    let speed = store.speed;
-
-    let frameInterval = setInterval(() => setFrame(), Math.ceil(speed / 50) * 50);
-
-    function setFrame() {
-      if (!store.frames[0]) return;
-      if (speed != store.speed) {
-        clearInterval(frameInterval);
-        speed = store.speed;
-        frameInterval = setInterval(() => setFrame(), Math.ceil(speed / 50) * 50);
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(() => {
+    let lastTime = performance.now();
+    function setFrame(currentTime: number) {
+      const deltaTime = (currentTime - lastTime);
+      if (store.frames[0] && deltaTime > store.speed) {
+        store.frame = store.frame + 1 >= store.frames.length ? 0 : store.frame + 1;
+        lastTime = currentTime;
       }
-      store.frame = store.frame + 1 >= store.frames.length ? 0 : store.frame + 1;
+      requestAnimationFrame(setFrame);
     }
+    setFrame(performance.now());
   });
 
   useTask$(({ track }) => {
     track(() => store.yaml);
-    let json = yaml.parse(store.yaml);
+    isBrowser && setCookies('animpreview', { yaml: store.yaml });
+    let json;
+    try {
+      json = yaml.parse(store.yaml);
+    }
+    catch (e) {
+      console.error(e);
+    }
+    if (!json) return;
     json = json[Object.keys(json)[0]];
     store.speed = json['change-interval'] ?? 50;
     store.frames = json['texts'] ?? [];
@@ -69,33 +100,43 @@ export default component$(() => {
           {t('animpreview.subtitle@@Preview TAB Animations without the need to put them ingame')}
         </h2>
 
-        <TextArea id="Animaton" class={{ 'h-96': true }} value={store.yaml} onInput$={(event: any) => { store.yaml = event.target!.value; }}>
-          {t('animpreview.yamlInput@@YAML Input')}
-        </TextArea>
+        <p class="bg-gray-800 border border-gray-700 p-4 rounded-lg text-gray-50 font-mono">
+          {store.frames[store.frame]}
+        </p>
 
-        <h1 class={'text-6xl my-6 break-all max-w-7xl -space-x-[1px]'}>
+        <h1 class={'font-mc text-6xl my-6 break-all max-w-7xl -space-x-[1px]'}>
           {(() => {
             if (!store.frames[store.frame]) return '';
-            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 pattern = /&?(#([0-9A-Fa-f]{6}))?((&[0-9a-fk-or]){0,5})([^&#]*)/;
             const spans = store.frames[store.frame].match(new RegExp(pattern, 'g'));
-            return spans.map((string: string, i: number) => {
-              const result: any = string.match(pattern);
+            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 (
-                <span key={`char${i}`} style={{ color: result[1] }} class={{
-                  'underline': result.includes('&n'),
-                  'strikethrough': result.includes('&m'),
-                  'underline-strikethrough': result.includes('&n') && result.includes('&m'),
-                  'font-mc-bold': result.includes('&l'),
-                  'font-mc-italic': result.includes('&o'),
-                  'font-mc-bold-italic': result.includes('&l') && result.includes('&o'),
+                <span key={`char${i}`} style={{ color: color }} class={{
+                  'underline': result[3]?.includes('&n'),
+                  'strikethrough': result[3]?.includes('&m'),
+                  'underline-strikethrough': result[3]?.includes('&n') && result[3]?.includes('&m'),
+                  'font-mc-bold': result[3]?.includes('&l'),
+                  'font-mc-italic': result[3]?.includes('&o'),
+                  'font-mc-bold-italic': result[3]?.includes('&l') && result[3]?.includes('&o'),
                 }}>
-                  {result[result.length - 1]}
+                  {result[result.length - 1].replace(/ /g, '\u00A0')}
                 </span>
               );
             });
           })()}
         </h1>
 
+        <TextArea id="Animaton" class={{ 'h-96 font-mono': true }} value={store.yaml} onInput$={(e, el) => { store.yaml = el.value; }}>
+          {t('animpreview.yamlInput@@YAML Input')}
+        </TextArea>
       </div>
     </section>
   );