feat(viewer): honor pitch and bearing in addition to zoom (#188)

Co-authored-by: Nicholas Cowan <[email protected]>

Author: nicholascowan

.gitignore

@@ -6,3 +6,5 @@ dist
 cdk.context.json
 test-data
 *.ndjson
+package-lock.json
+yarn-error.log

packages/viewer/src/bounds.ts

@@ -52,4 +52,6 @@ export interface LonLat {
 
 export interface MapLocation extends LonLat {
   zoom: number;
+  pitch: number;
+  bearing: number;
 }

packages/viewer/src/map.protocol.ts

@@ -32,9 +32,11 @@ function urlToXyzParams(url: string): null | MapParams {
   const x = Number(chunks[6]);
   const y = Number(chunks[7]);
 
-  if (isNaN(x) || isNaN(x) || isNaN(z)) return null;
+  const rasterFillColor = chunks[8];
 
-  return { seed, difficulty, act, x, y, z };
+  if (isNaN(x) || isNaN(y) || isNaN(z)) return null;
+
+  return { seed, difficulty, act, x, y, z, rasterFillColor };
 }
 
 export type Cancel = { cancel: () => void };

packages/viewer/src/map.ts

@@ -12,6 +12,7 @@ export class Diablo2MapViewer {
   difficulty = Difficulty.Nightmare;
   act = Act.ActV;
   seed = 0x00ff00ff;
+  color = 'white';
   updateUrlTimer: unknown;
 
   constructor(el: string) {
@@ -44,33 +45,44 @@ export class Diablo2MapViewer {
   }
 
   /**
-   * Support parsing of zooms with `z14` or `14z`
-   * @param zoom string to parse zoom from
+   * Support parsing of zooms, pitches, bearings with `z14` or `14z`, etc
+   * @param value string to parse value from
+   * @param prefixSuffix prefix or suffix for the map property
    */
-  parseZoom(zoom: string | null): number {
-    if (zoom == null || zoom === '') return NaN;
-    if (zoom.startsWith('z')) return parseFloat(zoom.slice(1));
-    if (zoom.endsWith('z')) return parseFloat(zoom);
+  parseMapControlValue(value: string | null, prefixSuffix: string): number {
+    if (value == null || value === '') return NaN;
+    if (value.startsWith(prefixSuffix)) return parseFloat(value.slice(1));
+    if (value.endsWith(prefixSuffix)) return parseFloat(value);
     return NaN;
   }
 
   /** Parse a location from window.hash if it exists */
   fromHash(str: string): Partial<MapLocation> {
     const output: Partial<MapLocation> = {};
     const hash = str.replace('#@', '');
-    const [latS, lonS, zoomS] = hash.split(',');
+    const [latS, lonS, zoomS, pitchS, bearingS] = hash.split(',');
     const lat = parseFloat(latS);
     const lon = parseFloat(lonS);
     if (!isNaN(lat) && !isNaN(lon)) {
       output.lat = lat;
       output.lon = lon;
     }
 
-    const newZoom = this.parseZoom(zoomS);
+    const newZoom = this.parseMapControlValue(zoomS, 'z');
     if (!isNaN(newZoom)) {
       output.zoom = newZoom;
     }
 
+    const newPitch = this.parseMapControlValue(pitchS, 'p');
+    if (!isNaN(newPitch)) {
+      output.pitch = newPitch;
+    }
+
+    const newBearing = this.parseMapControlValue(bearingS, 'b');
+    if (!isNaN(newBearing)) {
+      output.bearing = newBearing;
+    }
+
     return output;
   }
 
@@ -81,11 +93,14 @@ export class Diablo2MapViewer {
     if (isNaN(this.seed) || this.seed <= 0) this.seed = 0x00ff00ff;
     this.act = ActUtil.fromString(urlParams.get('act')) ?? Act.ActI;
     this.difficulty = DifficultyUtil.fromString(urlParams.get('difficulty')) ?? Difficulty.Normal;
+    this.color = urlParams.get('color') || 'white';
 
     if (window.location.hash == null) return;
 
     const location = this.fromHash(window.location.hash);
     if (location.zoom) this.map.setZoom(location.zoom);
+    if (location.pitch) this.map.setPitch(location.pitch);
+    if (location.bearing) this.map.setBearing(location.bearing);
     if (location.lat) this.map.setCenter(location);
   }
 
@@ -94,13 +109,17 @@ export class Diablo2MapViewer {
     urlParams.set('seed', toHex(this.seed, 8));
     urlParams.set('act', Act[this.act]);
     urlParams.set('difficulty', Difficulty[this.difficulty]);
+    urlParams.set('color', this.color);
     const center = this.map.getCenter();
     if (center == null) throw new Error('Invalid Map location');
     const zoom = Math.floor((this.map.getZoom() ?? 0) * 10e3) / 10e3;
+    const pitch = Math.floor((this.map.getPitch() ?? 0) * 10e3) / 10e3;
+    const bearing = Math.floor((this.map.getBearing() ?? 0) * 10e3) / 10e3;
+
     window.history.replaceState(
       null,
       '',
-      '?' + urlParams.toString() + `#@${center.lat.toFixed(7)},${center.lng.toFixed(7)},z${zoom}`,
+      '?' + urlParams.toString() + `#@${center.lat.toFixed(7)},${center.lng.toFixed(7)},z${zoom},p${pitch},b${bearing}`,
     );
     this.updateUrlTimer = null;
   }
@@ -114,7 +133,7 @@ export class Diablo2MapViewer {
   update(): void {
     this.updateUrl();
     this.updateDom();
-    const d2Url = `${toHex(this.seed, 8)}/${Difficulty[this.difficulty]}/${Act[this.act]}/{z}/{x}/{y}`;
+    const d2Url = `${toHex(this.seed, 8)}/${Difficulty[this.difficulty]}/${Act[this.act]}/{z}/{x}/{y}/${this.color}`;
     if (this.lastUrl === d2Url) return;
     this.lastUrl = d2Url;
 
@@ -187,4 +206,5 @@ export class Diablo2MapViewer {
       }
     });
   }
+
 }

packages/viewer/src/render.ts

@@ -1,5 +1,6 @@
 import { Bounds } from './bounds';
 import { Diablo2Level } from '@diablo2/data';
+import { MapParams } from './tile';
 
 function isInBounds(pt: { x: number; y: number }, bounds: Bounds): boolean {
   if (pt.x < bounds.x) return false;
@@ -12,8 +13,17 @@ function isInBounds(pt: { x: number; y: number }, bounds: Bounds): boolean {
 export class LevelRender {
   static ExitSize = 12;
 
-  static render(level: Diablo2Level, ctx: CanvasRenderingContext2D, bounds: Bounds, scale = 0.5): void {
+  static render(
+    level: Diablo2Level,
+    ctx: CanvasRenderingContext2D,
+    bounds: Bounds,
+    scale = 0.5,
+    mapParams?: MapParams,
+  ): void {
     ctx.fillStyle = 'white';
+
+    if (mapParams?.rasterFillColor) ctx.fillStyle = String(mapParams?.rasterFillColor).replace('0x', '#');
+
     const map = level.map;
 
     for (let yOffset = 0; yOffset < map.length; yOffset++) {

packages/viewer/src/tile.ts

@@ -11,6 +11,7 @@ export interface MapParams {
   x: number;
   y: number;
   z: number;
+  rasterFillColor: string;
 }
 
 process = typeof process === 'undefined' ? ({ env: {} } as any) : process;
@@ -48,7 +49,7 @@ export class Diablo2MapTiles {
   }
 
   static getRaster(d: MapParams): Promise<unknown> {
-    const tileId = ['raster', toHex(d.difficulty, 8), Act[d.act], d.seed, d.z, d.x, d.y].join('__');
+    const tileId = ['raster', toHex(d.difficulty, 8), Act[d.act], d.seed, d.z, d.x, d.y, d.rasterFillColor].join('__');
     let existing = this.tiles.get(tileId);
     if (existing == null) {
       existing = this.tileRaster(d);
@@ -78,7 +79,7 @@ export class Diablo2MapTiles {
     if (ctx == null) return;
 
     // console.time('RenderLevel:' + tileId);
-    for (const zone of zones) LevelRender.render(zone, ctx, bounds, (1 / scale) * 2);
+    for (const zone of zones) LevelRender.render(zone, ctx, bounds, (1 / scale) * 2, d);
     // console.timeEnd('RenderLevel:' + tileId);
 
     // TODO 99% of the time for rendering a map is this conversion into a PNG