@woosh/meep-engine 3.60.1 → 3.60.2

package/src/view/elements/progress/segmented/segment_mask_url.js

@@ -0,0 +1,74 @@
+/**
+ * @type {HTMLCanvasElement|null}
+ */
+let canvas = null;
+
+/**
+ * Whether masks can be drawn here. Keyed on `OffscreenCanvas`, which every browser that draws a canvas has and
+ * jsdom does not: jsdom's own canvas reports "not implemented" on the console for every call, so it is never asked.
+ * @returns {boolean}
+ */
+export function segment_mask_supported() {
+    return typeof OffscreenCanvas === 'function' && typeof document !== 'undefined';
+}
+
+/**
+ * A mask image of opaque columns, one device pixel tall, for a layer `width_device` device pixels wide: stretched
+ * over the layer with `mask-size: 100% 100%`, each column covers exactly the device pixels it was drawn on. CSS keeps
+ * painting the layer (its colour, gradient, height); the mask only decides which columns of it show.
+ *
+ * @param {number} width_device
+ * @param {number[]} columns [x, width, x, width, ...] in whole device pixels from the layer's left edge
+ * @param {number} column_count how many pairs of `columns` to draw
+ * @returns {string|null} a `url(...)` for `mask-image`, or null where masks cannot be drawn
+ */
+export function segment_mask_url(width_device, columns, column_count) {
+    if (!segment_mask_supported() || !(width_device > 0)) {
+        return null;
+    }
+
+    if (canvas === null) {
+        canvas = document.createElement('canvas');
+    }
+
+    canvas.width = width_device;
+    canvas.height = 1;
+
+    const ctx = canvas.getContext('2d');
+
+    if (ctx === null) {
+        return null;
+    }
+
+    ctx.clearRect(0, 0, width_device, 1);
+    ctx.fillStyle = '#000';
+
+    for (let i = 0; i < column_count; i++) {
+        ctx.fillRect(columns[i * 2], 0, columns[i * 2 + 1], 1);
+    }
+
+    return `url(${canvas.toDataURL()})`;
+}
+
+/**
+ * Put a mask from {@link segment_mask_url} on an element, sampled nearest so its columns stay whole, or take it off
+ * @param {HTMLElement} el
+ * @param {string|null} url
+ */
+export function segment_mask_apply(el, url) {
+    const style = el.style;
+    const value = url === null ? '' : url;
+
+    style.setProperty('mask-image', value);
+    style.setProperty('-webkit-mask-image', value);
+
+    if (url === null) {
+        return;
+    }
+
+    style.setProperty('mask-size', '100% 100%');
+    style.setProperty('-webkit-mask-size', '100% 100%');
+    style.setProperty('mask-repeat', 'no-repeat');
+    style.setProperty('-webkit-mask-repeat', 'no-repeat');
+    style.setProperty('image-rendering', 'pixelated');
+}

package/src/view/elements/progress/segmented/segment_mask_width.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The width to give a layer whose content is drawn in whole device pixels and stretched over it by a mask: the
+ * widest whole number of CSS pixels, no wider than `width_px`, that is also a whole number of device pixels.
+ *
+ * Measured in Chrome (90% to 300%): a masked layer whose width is not whole in both units is resampled when it is
+ * painted, and somewhere along it one device column is doubled or dropped, so one gap of a row of equal gaps paints
+ * a pixel wider or narrower than the rest. Whole in both, every column lands where it was drawn. The cost is up to a
+ * few CSS pixels at the layer's right end (at 125%, a multiple of 4).
+ *
+ * Where no such width lies within {@link SEARCH_CSS_PX} (a ratio like 2/3), it falls back to the whole device
+ * pixels that fit.
+ *
+ * @param {number} width_px the room there is, CSS pixels
+ * @param {number} ratio device pixels per CSS pixel
+ * @returns {number} the layer's width in device pixels; divided by `ratio`, its width in CSS pixels
+ */
+export function segment_mask_width(width_px: number, ratio: number): number;
+//# sourceMappingURL=segment_mask_width.d.ts.map

package/src/view/elements/progress/segmented/segment_mask_width.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment_mask_width.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/segment_mask_width.js"],"names":[],"mappings":"AAYA;;;;;;;;;;;;;;;GAeG;AACH,6CAJW,MAAM,SACN,MAAM,GACJ,MAAM,CAmBlB"}

package/src/view/elements/progress/segmented/segment_mask_width.js

@@ -0,0 +1,46 @@
+/**
+ * How far a scan gives up looking for a whole width that is also whole in device pixels, in CSS pixels
+ * @type {number}
+ */
+const SEARCH_CSS_PX = 12;
+
+/**
+ * Tolerance for "a whole number of device pixels"
+ * @type {number}
+ */
+const WHOLE_TOLERANCE = 1e-6;
+
+/**
+ * The width to give a layer whose content is drawn in whole device pixels and stretched over it by a mask: the
+ * widest whole number of CSS pixels, no wider than `width_px`, that is also a whole number of device pixels.
+ *
+ * Measured in Chrome (90% to 300%): a masked layer whose width is not whole in both units is resampled when it is
+ * painted, and somewhere along it one device column is doubled or dropped, so one gap of a row of equal gaps paints
+ * a pixel wider or narrower than the rest. Whole in both, every column lands where it was drawn. The cost is up to a
+ * few CSS pixels at the layer's right end (at 125%, a multiple of 4).
+ *
+ * Where no such width lies within {@link SEARCH_CSS_PX} (a ratio like 2/3), it falls back to the whole device
+ * pixels that fit.
+ *
+ * @param {number} width_px the room there is, CSS pixels
+ * @param {number} ratio device pixels per CSS pixel
+ * @returns {number} the layer's width in device pixels; divided by `ratio`, its width in CSS pixels
+ */
+export function segment_mask_width(width_px, ratio) {
+    if (!(width_px > 0) || !(ratio > 0)) {
+        return 0;
+    }
+
+    const widest = Math.floor(width_px);
+
+    for (let w = widest; w > 0 && w > widest - SEARCH_CSS_PX; w--) {
+        const device = w * ratio;
+        const whole = Math.round(device);
+
+        if (Math.abs(device - whole) <= WHOLE_TOLERANCE) {
+            return whole;
+        }
+    }
+
+    return Math.floor(width_px * ratio);
+}

package/src/view/elements/progress/segmented/segmented-resource-bar.css

@@ -3,7 +3,7 @@
 
  Theming: every colour, notch height and the ghost go through a --segmented-bar-* custom property with a
  fallback, so a game re-skins the bar by defining the properties on the bar or any ancestor, without overriding a
- selector. Each notch carries its tier's class_name; the three classes below are the ones SEGMENT_TIERS_DEFAULT
+ selector. Each tier's layer carries its class_name; the three classes below are the ones SEGMENT_TIERS_DEFAULT
  uses, and a game's own tiers may reuse them or style their own.
 
  Import this from a style entry point, never from a logic module. Give the bar its width and height there; keep
@@ -61,14 +61,14 @@
     background: var(--segmented-bar-fill-2-color, #7a5fd0);
 }
 
-/* notches */
+/* notches: one layer per tier, the width of the bar, cut to its notches by a mask the view draws. Style the
+   layer as you would one notch: its colour, its height, from the top. */
 
 .ui-segmented-resource-bar-view .notch {
     position: absolute;
     top: 0;
     height: var(--segmented-bar-tick-height, 100%);
     background: var(--segmented-bar-tick-color, rgba(0, 0, 0, 0.6));
-    box-shadow: var(--segmented-bar-tick-highlight, none);
 }
 
 .ui-segmented-resource-bar-view .notch.segment-tier-minor {
@@ -86,7 +86,8 @@
     background: var(--segmented-bar-tick-super-color, rgba(0, 0, 0, 0.85));
 }
 
-/* cells */
+/* cells: one strip, the empty cells colour, cut into cells by a mask the view draws; the ghost and the fill run
+   along it and end on a cell edge (or part way across the one filling up) */
 
 .ui-segmented-resource-bar-view.mode-cells {
     /* the gaps between cells show the bar through them */
@@ -94,7 +95,7 @@
     box-shadow: none;
 }
 
-.ui-segmented-resource-bar-view .cell {
+.ui-segmented-resource-bar-view .cell-strip {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -119,11 +120,6 @@
     background: var(--segmented-bar-cell-filled-color, #e8c25a);
 }
 
-/* a cell filling up one at a time, e.g. a round being loaded */
-.ui-segmented-resource-bar-view .cell.partial > .cell-fill {
-    background: var(--segmented-bar-cell-partial-color, rgba(232, 194, 90, 0.6));
-}
-
 /* highlights (the view's `highlights` list) */
 
 .ui-segmented-resource-bar-view > .highlights {