More

frontend/src/lib/MarchingAntsExtension.ts

@@ -0,0 +1,53 @@
+import { LayerExtension } from '@deck.gl/core';
+
+/** Animates a marching-ants border on PathLayer sublayers (alternating white/green dashes). */
+export class MarchingAntsExtension extends LayerExtension {
+  static extensionName = 'MarchingAntsExtension';
+  static defaultProps = {
+    marchTime: { type: 'number', value: 0 },
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  isEnabled(layer: any): boolean {
+    return 'pathTesselator' in layer.state;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getShaders(extension: any): any {
+    if (!extension.isEnabled(this)) return null;
+    return {
+      modules: [
+        {
+          name: 'marchingAnts',
+          inject: {
+            'fs:#decl': `\
+uniform marchingAntsUniforms {
+  float marchTime;
+} marchingAnts;`,
+            'fs:DECKGL_FILTER_COLOR': `\
+float marchSegLen = 4.0;
+float marchPos = mod(vPathPosition.y - marchingAnts.marchTime, marchSegLen * 2.0);
+if (marchPos < marchSegLen) {
+  color = vec4(1.0, 1.0, 1.0, color.a);
+} else {
+  color = vec4(0.114, 0.894, 0.765, color.a);
+}`,
+          },
+          uniformTypes: {
+            marchTime: 'f32',
+          },
+        },
+      ],
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  updateState(_params: any, extension: any): void {
+    if (!extension.isEnabled(this)) return;
+    // @ts-expect-error setShaderModuleProps exists on Layer
+    this.setShaderModuleProps({
+      // @ts-expect-error marchTime is a custom prop from this extension
+      marchingAnts: { marchTime: this.props.marchTime || 0 },
+    });
+  }
+}

frontend/src/lib/tutorial-styles.ts

@@ -0,0 +1,52 @@
+import type { Styles } from 'react-joyride';
+
+export function getTutorialStyles(theme: 'light' | 'dark'): Partial<Styles> {
+  const isDark = theme === 'dark';
+
+  return {
+    options: {
+      arrowColor: isDark ? '#292524' : '#ffffff',
+      backgroundColor: isDark ? '#292524' : '#ffffff',
+      overlayColor: isDark ? 'rgba(10,14,26,0.75)' : 'rgba(0,0,0,0.5)',
+      primaryColor: '#00a28c',
+      textColor: isDark ? '#d6d3d1' : '#44403c',
+      zIndex: 1000,
+    },
+    tooltip: {
+      borderRadius: 8,
+      padding: 16,
+    },
+    tooltipTitle: {
+      color: isDark ? '#f5f5f4' : '#0a0e1a',
+      fontSize: 15,
+      fontWeight: 600,
+    },
+    tooltipContent: {
+      fontSize: 13,
+      lineHeight: 1.5,
+      padding: '8px 0 0',
+    },
+    buttonNext: {
+      borderRadius: 6,
+      fontSize: 13,
+      fontWeight: 500,
+      padding: '6px 14px',
+    },
+    buttonBack: {
+      color: isDark ? '#a8a29e' : '#78716c',
+      fontSize: 13,
+      fontWeight: 500,
+      marginRight: 8,
+    },
+    buttonSkip: {
+      color: isDark ? '#78716c' : '#a8a29e',
+      fontSize: 12,
+    },
+    buttonClose: {
+      color: isDark ? '#a8a29e' : '#78716c',
+    },
+    spotlight: {
+      borderRadius: 8,
+    },
+  };
+}