128 lines
4.0 KiB
TypeScript
128 lines
4.0 KiB
TypeScript
import type { Block } from "@/types/trajectory";
|
|
|
|
export const API = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
|
|
|
|
export const INIT_VIEW = {
|
|
longitude: 2.2,
|
|
latitude: 41.2,
|
|
zoom: 7.5,
|
|
pitch: 0,
|
|
bearing: 0,
|
|
} as const;
|
|
|
|
export const SPEEDS = [0.5, 1, 2, 4, 8] as const;
|
|
export const BLOCK_SIZE = 24;
|
|
export const USE_ARROW = true;
|
|
/** Load this many blocks first so the map becomes interactive quickly; rest load in background. */
|
|
export const INITIAL_BLOCKS = 10;
|
|
/** Max particles to draw as trails/trips (subsampling keeps perf). */
|
|
export const MAX_TRAIL_PARTICLES = 2500;
|
|
/** Subsample path: one point every N steps to reduce data and speed up animation. */
|
|
export const TRAIL_STEP_STRIDE = 3;
|
|
/** Max trail length in hours (FlowRenderer-style: shorter = streak-like). */
|
|
export const TRAIL_LENGTH_HOURS = 12;
|
|
/** Options for trail length (hours) in UI. */
|
|
export const TRAIL_LENGTH_OPTIONS = [6, 12, 24, 72] as const;
|
|
/** Options for path density: one point every N steps. */
|
|
export const TRAIL_STRIDE_OPTIONS = [1, 2, 3] as const;
|
|
|
|
export const BASEMAPS: {
|
|
id: string;
|
|
name: string;
|
|
url: string;
|
|
thumb: string;
|
|
}[] = [
|
|
{
|
|
id: "dark",
|
|
name: "Dark",
|
|
url: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
|
|
thumb: "https://placehold.co/160x100/1e293b/475569?text=Dark",
|
|
},
|
|
{
|
|
id: "positron",
|
|
name: "Light",
|
|
url: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
|
|
thumb: "https://placehold.co/160x100/f1f5f9/cbd5e1?text=Light",
|
|
},
|
|
{
|
|
id: "voyager",
|
|
name: "Voyager",
|
|
url: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
|
|
thumb: "https://placehold.co/160x100/0c4a6e/0ea5e9?text=Voyager",
|
|
},
|
|
];
|
|
|
|
export type HeaderTheme = {
|
|
bg: string;
|
|
border: string;
|
|
text: string;
|
|
subtitle: string;
|
|
accent: string;
|
|
accentMuted: string;
|
|
card: string;
|
|
};
|
|
|
|
export const HEADER_THEMES: Record<string, HeaderTheme> = {
|
|
dark: {
|
|
bg: "bg-slate-900/92",
|
|
border: "border-slate-700/60",
|
|
text: "text-white",
|
|
subtitle: "text-slate-500",
|
|
accent: "text-teal-400",
|
|
accentMuted: "bg-teal-500/20 ring-teal-500/30",
|
|
card: "bg-slate-800/80 border-slate-700/80",
|
|
},
|
|
positron: {
|
|
bg: "bg-white/95",
|
|
border: "border-slate-200/80",
|
|
text: "text-slate-900",
|
|
subtitle: "text-slate-500",
|
|
accent: "text-teal-600",
|
|
accentMuted: "bg-teal-500/15 ring-teal-500/40",
|
|
card: "bg-slate-100/90 border-slate-200",
|
|
},
|
|
voyager: {
|
|
bg: "bg-sky-950/90",
|
|
border: "border-sky-800/60",
|
|
text: "text-white",
|
|
subtitle: "text-sky-200/80",
|
|
accent: "text-teal-300",
|
|
accentMuted: "bg-teal-500/25 ring-teal-400/40",
|
|
card: "bg-sky-900/60 border-sky-700/80",
|
|
},
|
|
};
|
|
|
|
export const C_BEACHED: [number, number, number, number] = [239, 68, 68, 240];
|
|
/** Electric blue core (FlowRenderer-style), thin streamlines */
|
|
export const C_TRAIL_ACTIVE: [number, number, number, number] = [0, 180, 255, 255];
|
|
export const C_TRAIL_BEACHED: [number, number, number, number] = [
|
|
239, 68, 68, 200,
|
|
];
|
|
export const C_SELECTED: [number, number, number, number] = [250, 204, 21, 255];
|
|
/** Inner glow for electric look */
|
|
export const C_GLOW_ACTIVE: [number, number, number, number] = [0, 180, 255, 120];
|
|
export const C_GLOW_BEACHED: [number, number, number, number] = [
|
|
239, 68, 68, 70,
|
|
];
|
|
/** Outer bloom (very soft, wide) for FlowRenderer-style halo */
|
|
export const C_BLOOM_ACTIVE: [number, number, number, number] = [80, 200, 255, 40];
|
|
export const C_BLOOM_BEACHED: [number, number, number, number] = [
|
|
255, 100, 100, 30,
|
|
];
|
|
|
|
/** Palette per origen (seed): [R, G, B], un color per zona de llançament */
|
|
export const PALETTE_ORIGIN: [number, number, number][] = [
|
|
[0, 180, 255], // blau elèctric
|
|
[0, 255, 200], // cyan
|
|
[100, 255, 100], // verd
|
|
[255, 220, 80], // groc
|
|
[255, 140, 60], // taronja
|
|
[255, 100, 200], // magenta
|
|
[180, 120, 255], // lila
|
|
[80, 240, 255], // cel
|
|
];
|
|
|
|
export function activeColor(_speed: number): [number, number, number, number] {
|
|
return [0, 180, 255, 220];
|
|
}
|