Add haloMinOpacity

Author: hasparus

src/app/(main)/community/events/map/engine.ts

@@ -111,6 +111,7 @@ class MapEngine implements MapHandle {
   private markerCapacityWarned = false
   private readonly markerColor: Float32Array
   private haloColor: Float32Array
+  private haloMinOpacity: number
   private readonly markerIntensity: Float32Array
   private readonly markerIntensityTarget: Float32Array
   private readonly markerIndexById: Map<string, number>
@@ -160,6 +161,7 @@ class MapEngine implements MapHandle {
     this.markerCount = this.packMarkers(this.markerPoints, this.markerData)
     this.markerColor = new Float32Array(options.theme.marker)
     this.haloColor = new Float32Array(options.theme.halo)
+    this.haloMinOpacity = options.theme.haloMinOpacity
     this.markerIntensity = new Float32Array(MARKER_CAPACITY)
     this.markerIntensityTarget = new Float32Array(MARKER_CAPACITY)
     this.markerIndexById = new Map()
@@ -200,6 +202,7 @@ class MapEngine implements MapHandle {
     this.landColor.set(colors.land)
     this.markerColor.set(colors.marker)
     this.haloColor.set(colors.halo)
+    this.haloMinOpacity = colors.haloMinOpacity
   }
 
   setActiveMarker(id: string | null) {
@@ -658,6 +661,7 @@ class MapEngine implements MapHandle {
       this.haloColor[1],
       this.haloColor[2],
     )
+    setUniform1f(gl, this.dotsProgram, "uHaloMinOpacity", this.haloMinOpacity)
     setUniform1i(gl, this.dotsProgram, "uMarkerCount", this.markerCount)
     gl.activeTexture(gl.TEXTURE0)
     gl.bindTexture(gl.TEXTURE_2D, this.landTexture)

src/app/(main)/community/events/map/map-colors.tsx

@@ -5,6 +5,7 @@ export type MapColors = {
   land: ColorVec3
   marker: ColorVec3
   halo: ColorVec3
+  haloMinOpacity: number
 }
 
 export const MAP_COLORS = {
@@ -13,12 +14,14 @@ export const MAP_COLORS = {
     land: [0.8627, 0.8706, 0.8275], // neu-300
     marker: [0.8824, 0.0039, 0.5961], // #E10198 = pri-base
     halo: [1.0, 0.6, 0.8784], // hsl(318, 100%, 80%) = pri-light
+    haloMinOpacity: 0.75,
   },
   dark: {
     sea: [0.0549, 0.0588, 0.0431], // neu-50
     land: [0.1647, 0.1804, 0.1373], // a shade darker than neu-800
     marker: [1, 0.6, 0.8745], // #FF99DF = pri-light
     halo: [1.0, 0.8, 0.9373], // hsl(319, 100%, 90%) = pri-lighter
+    haloMinOpacity: 0.5,
   },
 } satisfies Record<string, MapColors>
 

src/app/(main)/community/events/map/shaders.ts

@@ -32,6 +32,7 @@ uniform vec4 uMarkers[${MARKER_CAPACITY}];
 uniform int uMarkerCount;
 uniform vec3 uMarkerColor;
 uniform vec3 uHaloColor;
+uniform float uHaloMinOpacity;
 
 vec2 markerCellCenter(vec4 marker, vec2 referencePx) {
   float periodX = uWorldSize.x * uZoom;
@@ -106,8 +107,7 @@ void main() {
       float radiusDiff = max(outerRadius - innerRadius, 0.0001);
       float t = clamp((dist - innerRadius) / radiusDiff, 0.0, 1.0);
       float logFalloff = 1.0 - log(1.0 + t * 9.0) / log(10.0);
-      float minOpacity = 0.5;
-      float halo = minOpacity * logFalloff * strength;
+      float halo = uHaloMinOpacity * logFalloff * strength;
       haloIntensity = max(haloIntensity, halo);
     }
   }

src/app/(main)/community/events/meetups-list.tsx

@@ -4,6 +4,7 @@ import { clsx } from "clsx"
 import ExternalLinkIcon from "@/app/conf/_design-system/pixelarticons/external-link.svg?svgr"
 
 import { meetups as meetupNodes } from "@/components/meetups"
+import { useEffect } from "react"
 
 type MeetupListItem = {
   id: string
@@ -45,10 +46,27 @@ export function MeetupsList({
   onActiveMeetupChange,
   meetups = DEFAULT_MEETUPS,
 }: MeetupsListProps) {
+  useEffect(() => {
+    if (activeMeetupId) {
+      const list = document.querySelector("#meetups-list")
+      if (!list) return
+
+      const activeAnchor = list.querySelector<HTMLAnchorElement>(
+        `a[aria-current="true"]`,
+      )
+      if (!activeAnchor) return
+
+      if (list.scrollTop + list.clientHeight < activeAnchor.offsetTop) {
+        list.scrollTo({ top: activeAnchor.offsetTop, behavior: "smooth" })
+      }
+    }
+  }, [activeMeetupId])
+
   if (meetups.length === 0) return null
 
   return (
     <ul
+      id="meetups-list"
       className={clsx(
         "nextra-scrollbar overflow-y-auto scrollview-fade-y-16 scrollview-fade md:h-full",
         className,