littlejsengine 1.13.1 → 1.14.2

package/src/engineTileLayer.js

@@ -1,4 +1,4 @@
-/** 
+/**
  * LittleJS Tile Layer System
  * - Caches arrays of tiles to off screen canvas for fast rendering
  * - Unlimited numbers of layers, allocates canvases as needed
@@ -14,9 +14,9 @@
 // Tile Layer System
 
 /** Keep track of all tile layers with collision
- *  @type {Array<TileCollisionLayer>} 
+ *  @type {Array<TileCollisionLayer>}
  *  @memberof TileCollision */
-let tileCollisionLayers = [];
+const tileCollisionLayers = [];
 
 /** Get tile collision data for a given cell in the grid
 *  @param {Vector2} pos
@@ -70,7 +70,7 @@ function tileCollisionRaycast(posStart, posEnd, object, solidOnly=true)
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** 
+/**
  * Load tile layers from exported data
  *  @param {Object}   tileMapData - Level data from exported data
  *  @param {TileInfo} [tileInfo] - Default tile info (used for size and texture)
@@ -103,13 +103,13 @@ function tileCollisionLoad(tileMapData, tileInfo=tile(), renderOrder=0, collisio
     {
         const dataLayer = tileMapData.layers[layerIndex];
         ASSERT(dataLayer.data && dataLayer.data.length);
-        ASSERT(levelSize.area() == dataLayer.data.length);
+        ASSERT(levelSize.area() === dataLayer.data.length);
 
         const layerRenderOrder = renderOrder - (layerCount - 1 - layerIndex);
         const tileLayer = new TileCollisionLayer(vec2(), levelSize, tileInfo, layerRenderOrder);
         tileLayers[layerIndex] = tileLayer;
 
-        for (let x=levelSize.x; x--;) 
+        for (let x=levelSize.x; x--;)
         for (let y=levelSize.y; y--;)
         {
             const pos = vec2(x, levelSize.y-1-y);
@@ -168,7 +168,7 @@ class TileLayerData
 /**
  * Canvas Layer - cached off screen rendering system
  * - Contains an offscreen canvas that can be rendered to
- * - Webgl rendering is optional, call useWebGL to enable
+ * - WebGL rendering is optional, call useWebGL to enable
  * @extends EngineObject
  * @example
  * const canvasLayer = new CanvasLayer(vec2(), vec2(200,100));
@@ -190,18 +190,18 @@ class CanvasLayer extends EngineObject
         this.canvas = headlessMode ? undefined : new OffscreenCanvas(canvasSize.x, canvasSize.y);
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this layer */
         this.context = headlessMode ? undefined : this.canvas.getContext('2d');
-        /** @property {WebGLTexture} - Texture if using webgl for this layer, call useWebGL to enable */
+        /** @property {WebGLTexture} - Texture if using WebGL for this layer, call useWebGL to enable */
         this.glTexture = undefined;
         this.gravityScale = 0; // disable gravity by default for canvas layers
     }
-   
+
     /** Destroy this canvas layer */
     destroy()
     {
         if (this.destroyed)
             return;
 
-        // free up the webgl texture
+        // free up the WebGL texture
         if (this.glTexture)
             glDeleteTexture(this.glTexture);
         super.destroy();
@@ -226,12 +226,12 @@ class CanvasLayer extends EngineObject
     draw(pos, size, angle=0, color=WHITE, mirror=false, additiveColor, screenSpace=false, context)
     {
         // draw the canvas layer as a single tile that uses the whole texture
-        const useWebgl = glEnable && this.glTexture != undefined;
+        const useWebGL = glEnable && this.glTexture !== undefined;
         const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
-        drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebgl, screenSpace, context);
+        drawTile(pos, size, tileInfo, color, angle, mirror, additiveColor, useWebGL, screenSpace, context);
     }
 
-    /** Draw onto the layer canvas in world space (bypass webgl)
+    /** Draw onto the layer canvas in world space (bypass WebGL)
      *  @param {Vector2}  pos
      *  @param {Vector2}  size
      *  @param {number}   angle
@@ -265,8 +265,8 @@ class CanvasLayer extends EngineObject
             if (textureInfo)
             {
                 context.globalAlpha = color.a; // only alpha is supported
-                context.drawImage(textureInfo.image, 
-                    tileInfo.pos.x,  tileInfo.pos.y, 
+                context.drawImage(textureInfo.image,
+                    tileInfo.pos.x,  tileInfo.pos.y,
                     tileInfo.size.x, tileInfo.size.y, -.5, -.5, 1, 1);
                 context.globalAlpha = 1;
             }
@@ -284,11 +284,11 @@ class CanvasLayer extends EngineObject
      *  @param {Vector2} [size=(1,1)]
      *  @param {Color}   [color=(1,1,1,1)]
      *  @param {number}  [angle=0] */
-    drawRect(pos, size, color, angle) 
+    drawRect(pos, size, color, angle)
     { this.drawTile(pos, size, undefined, color, angle); }
 
-    /** Create or update the webgl texture for this layer
-     *  @param {boolean} [enable] - enable webgl rendering and update the texture */
+    /** Create or update the WebGL texture for this layer
+     *  @param {boolean} [enable] - enable WebGL rendering and update the texture */
     useWebGL(enable=true)
     {
         if (glEnable && enable)
@@ -334,7 +334,7 @@ class TileLayer extends CanvasLayer
         this.canvas = new OffscreenCanvas(canvasSize.x, canvasSize.y);
         /** @property {OffscreenCanvasRenderingContext2D} - The 2D canvas context used by this tile layer */
         this.context = this.canvas.getContext('2d');
-        /** @property {WebGLTexture} - Texture if using webgl for this layer */
+        /** @property {WebGLTexture} - Texture if using WebGL for this layer */
         this.glTexture = useWebGL ? glCreateTexture(this.canvas) : undefined;
         // set no friction by default, applied friction is max of both objects
         this.friction = 0;
@@ -359,7 +359,7 @@ class TileLayer extends CanvasLayer
         }
     }
 
-    /** Set data at a given position in the array 
+    /** Set data at a given position in the array
      *  @param {Vector2}       layerPos - Local position in array
      *  @param {TileLayerData} data     - Data to set
      *  @param {boolean}       [redraw] - Force the tile to redraw if true */
@@ -371,26 +371,26 @@ class TileLayer extends CanvasLayer
             redraw && this.drawTileData(layerPos);
         }
     }
-    
-    /** Get data at a given position in the array 
+
+    /** Get data at a given position in the array
      *  @param {Vector2} layerPos - Local position in array
      *  @return {TileLayerData} */
     getData(layerPos)
     { return layerPos.arrayCheck(this.size) && this.data[(layerPos.y|0)*this.size.x+layerPos.x|0]; }
-    
+
     // Render the tile layer, called automatically by the engine
     render()
     {
-        ASSERT(drawContext != this.context, 'must call redrawEnd() after drawing tiles!');
-        
+        ASSERT(drawContext !== this.context, 'must call redrawEnd() after drawing tiles!');
+
         // draw the tile layer as a single tile
         const tileInfo = new TileInfo().setFullImage(this.canvas, this.glTexture);
         const pos = this.pos.add(this.size.scale(.5));
-        const useWebgl = glEnable && this.glTexture != undefined;
-        drawTile(pos, this.size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebgl);
+        const useWebGL = glEnable && this.glTexture !== undefined;
+        drawTile(pos, this.size, tileInfo, WHITE, 0, false, CLEAR_BLACK, useWebGL);
     }
 
-    /** Draw all the tile data to an offscreen canvas 
+    /** Draw all the tile data to an offscreen canvas
      *  - This may be slow in some browsers but only needs to be done once */
     redraw()
     {
@@ -400,7 +400,7 @@ class TileLayer extends CanvasLayer
             this.drawTileData(vec2(x,y), false);
         this.redrawEnd();
         if (this.glTexture)
-            this.useWebGL(); // update webgl texture
+            this.useWebGL(); // update WebGL texture
     }
 
     /** Call to start the redraw process
@@ -436,7 +436,7 @@ class TileLayer extends CanvasLayer
     /** Call to end the redraw process */
     redrawEnd()
     {
-        ASSERT(drawContext == this.context, 'must call redrawStart() before drawing tiles');
+        ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
         glCopyToContext(drawContext);
         //debugSaveCanvas(this.canvas);
 
@@ -447,7 +447,7 @@ class TileLayer extends CanvasLayer
     /** Draw the tile at a given position in the tile grid
      *  This can be used to clear out tiles when they are destroyed
      *  Tiles can also be redrawn if inside a redrawStart/End block
-     *  @param {Vector2} layerPos 
+     *  @param {Vector2} layerPos
      *  @param {boolean} [clear] - should the old tile be cleared out
      */
     drawTileData(layerPos, clear=true)
@@ -462,9 +462,9 @@ class TileLayer extends CanvasLayer
 
         // draw the tile if it has layer data
         const d = this.getData(layerPos);
-        if (d.tile != undefined)
+        if (d.tile !== undefined)
         {
-            ASSERT(drawContext == this.context, 'must call redrawStart() before drawing tiles');
+            ASSERT(drawContext === this.context, 'must call redrawStart() before drawing tiles');
             const pos = layerPos.add(vec2(.5));
             const tileInfo = tile(d.tile, s, this.tileInfo.textureIndex, this.tileInfo.padding);
             drawTile(pos, vec2(1), tileInfo, d.color, d.direction*PI/2, d.mirror);
@@ -477,7 +477,7 @@ class TileLayer extends CanvasLayer
  * Tile Collision Layer - a tile layer with collision
  * - adds collision data and functions to TileLayer
  * - there can be multiple tile collision layers
- * - tile collison layers should not overlap each other
+ * - tile collision layers should not overlap each other
  * @extends TileLayer
  */
 class TileCollisionLayer extends TileLayer

package/src/engineUtilities.js

@@ -75,7 +75,19 @@ function lerp(valueA, valueB, percent)
     if (valueA >= 0 && valueA <= 1 && ((valueB < 0 || valueB > 1) && (percent < 0 || percent > 1)))
         console.warn('lerp() parameter order changed! use lerp(start, end, p)');
     return valueA + clamp(percent) * (valueB-valueA);
- }
+}
+
+/** Gets percent between percentA and percentB and linearly interpolates between lerpA and lerpB
+ *  A shortcut for lerp(lerpA, lerpB, percent(value, percentA, percentB))
+ *  @param {number} value
+ *  @param {number} percentA
+ *  @param {number} percentB
+ *  @param {number} lerpA
+ *  @param {number} lerpB
+ *  @return {number}
+ *  @memberof Utilities */
+function percentLerp(value, percentA, percentB, lerpA, lerpB)
+{ return lerp(lerpA, lerpB, percent(value, percentA, percentB)); }
 
 /** Returns signed wrapped distance between the two values passed in
  *  @param {number} valueA
@@ -127,22 +139,23 @@ function smoothStep(percent) { return percent * percent * (3 - 2 * percent); }
  *  @memberof Utilities */
 function isPowerOfTwo(value) { return !(value & (value - 1)); }
 
-/** Returns the nearest power of two not less then the value
+/** Returns the nearest power of two not less than the value
  *  @param {number} value
  *  @return {number}
  *  @memberof Utilities */
 function nearestPowerOfTwo(value) { return 2**Math.ceil(Math.log2(value)); }
 
-/** Returns true if two axis aligned bounding boxes are overlapping 
+/** Returns true if two axis aligned bounding boxes are overlapping
+ *  this can be used for simple collision detection between objects
  *  @param {Vector2} posA          - Center of box A
  *  @param {Vector2} sizeA         - Size of box A
  *  @param {Vector2} posB          - Center of box B
- *  @param {Vector2} [sizeB=(0,0)] - Size of box B, a point if undefined
+ *  @param {Vector2} [sizeB=(0,0)] - Size of box B, uses a point if undefined
  *  @return {boolean}              - True if overlapping
  *  @memberof Utilities */
 function isOverlapping(posA, sizeA, posB, sizeB=vec2())
-{ 
-    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x 
+{
+    return abs(posA.x - posB.x)*2 < sizeA.x + sizeB.x
         && abs(posA.y - posB.y)*2 < sizeA.y + sizeB.y;
 }
 
@@ -191,12 +204,13 @@ function isIntersecting(start, end, pos, size)
  *  @param {number} [frequency] - Frequency of the wave in Hz
  *  @param {number} [amplitude] - Amplitude (max height) of the wave
  *  @param {number} [t=time]    - Value to use for time of the wave
+ *  @param {number} [offset]    - Value to use for time offset of the wave
  *  @return {number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
-function wave(frequency=1, amplitude=1, t=time)
-{ return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
+function wave(frequency=1, amplitude=1, t=time, offset=0)
+{ return amplitude/2 * (1 - Math.cos(offset + t*frequency*2*PI)); }
 
-/** Formats seconds to mm:ss style for display purposes 
+/** Formats seconds to mm:ss style for display purposes
  *  @param {number} t - time in seconds
  *  @return {string}
  *  @memberof Utilities */
@@ -212,13 +226,12 @@ async function fetchJSON(url)
     return response.json();
 }
 
-/** 
+/**
  * Check if object is a valid number, not NaN or undefined, but it may be infinite
  * @param {any} n
  * @return {boolean}
- * @memberof Utilities
- */
-function isNumber(n) { return typeof n == 'number' && !isNaN(n); }
+ * @memberof Utilities */
+function isNumber(n) { return typeof n === 'number' && !isNaN(n); }
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -273,13 +286,13 @@ function randInCircle(radius=1, minRadius=0)
  *  @memberof Random */
 function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
 {
-    return linear ? colorA.lerp(colorB, rand()) : 
+    return linear ? colorA.lerp(colorB, rand()) :
         new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Seeded random number generator
  * - Can be used to create a deterministic random number sequence
  * @example
@@ -306,8 +319,8 @@ class RandomGenerator
     float(valueA=1, valueB=0)
     {
         // xorshift algorithm
-        this.seed ^= this.seed << 13; 
-        this.seed ^= this.seed >>> 17; 
+        this.seed ^= this.seed << 13;
+        this.seed ^= this.seed >>> 17;
         this.seed ^= this.seed << 5;
         return valueB + (valueA - valueB) * ((this.seed >>> 0) / 2**32);
     }
@@ -356,16 +369,14 @@ class RandomGenerator
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
  * a = vec2(5);        // set a to (5, 5)
  * b = vec2();         // set b to (0, 0)
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function vec2(x=0, y) { return new Vector2(x, y === undefined ? x : y); }
 
-/** 
+/**
  * Check if object is a valid Vector2
  * @param {any} v
  * @return {boolean}
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function isVector2(v) { return v instanceof Vector2; }
 
 // vector2 asserts
@@ -374,10 +385,10 @@ function ASSERT_NUMBER_VALID(n) { ASSERT(isNumber(n), 'Number is invalid.', n);
 function ASSERT_VECTOR2_NORMAL(v)
 {
     ASSERT_VECTOR2_VALID(v);
-    ASSERT(abs(v.lengthSquared()-1) < .01, 'Vector2 is not normal.', v); 
+    ASSERT(abs(v.lengthSquared()-1) < .01, 'Vector2 is not normal.', v);
 }
 
-/** 
+/**
  * 2D Vector object with vector math library
  * - Functions do not change this so they can be chained together
  * @example
@@ -501,7 +512,7 @@ class Vector2
      * @param {number} [angle]
      * @param {number} [length]
      * @return {Vector2} */
-    setAngle(angle=0, length=1) 
+    setAngle(angle=0, length=1)
     {
         ASSERT_NUMBER_VALID(angle);
         ASSERT_NUMBER_VALID(length);
@@ -516,7 +527,7 @@ class Vector2
     rotate(angle)
     {
         ASSERT_NUMBER_VALID(angle);
-        const c = Math.cos(-angle), s = Math.sin(-angle); 
+        const c = Math.cos(-angle), s = Math.sin(-angle);
         return new Vector2(this.x*c - this.y*s, this.x*s + this.y*c);
     }
 
@@ -528,9 +539,9 @@ class Vector2
         ASSERT_NUMBER_VALID(direction);
         ASSERT_NUMBER_VALID(length);
         direction = mod(direction, 4);
-        ASSERT(direction==0 || direction==1 || direction==2 || direction==3,
+        ASSERT(direction===0 || direction===1 || direction===2 || direction===3,
             'Vector2.setDirection() direction must be an integer between 0 and 3.');
-        return vec2(direction%2 ? direction-1 ? -length : length : 0, 
+        return vec2(direction%2 ? direction-1 ? -length : length : 0,
             direction%2 ? 0 : direction ? -length : length);
     }
 
@@ -582,7 +593,7 @@ class Vector2
     /** Returns this vector expressed as a string
      * @param {number} digits - precision to display
      * @return {string} */
-    toString(digits=3) 
+    toString(digits=3)
     {
         ASSERT_NUMBER_VALID(digits);
         if (debug)
@@ -601,7 +612,7 @@ class Vector2
 
 ///////////////////////////////////////////////////////////////////////////////
 
-/** 
+/**
  * Create a color object with RGBA values, white by default
  * @param {number} [r=1] - red
  * @param {number} [g=1] - green
@@ -612,29 +623,27 @@ class Vector2
  */
 function rgb(r, g, b, a) { return new Color(r, g, b, a); }
 
-/** 
+/**
  * Create a color object with HSLA values, white by default
  * @param {number} [h=0] - hue
  * @param {number} [s=0] - saturation
  * @param {number} [l=1] - lightness
  * @param {number} [a=1] - alpha
  * @return {Color}
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 
-/** 
+/**
  * Check if object is a valid Color
  * @param {any} c
  * @return {boolean}
- * @memberof Utilities
- */
+ * @memberof Utilities */
 function isColor(c) { return c instanceof Color; }
 
 // color asserts
 function ASSERT_COLOR_VALID(c) { ASSERT(isColor(c) && c.isValid(), 'Color is invalid.', c); }
 
-/** 
+/**
  * Color object (red, green, blue, alpha) with some helpful functions
  * @example
  * let a = new Color;              // white
@@ -706,7 +715,7 @@ class Color
      * @param {number} scale
      * @param {number} [alphaScale=scale]
      * @return {Color} */
-    scale(scale, alphaScale=scale) 
+    scale(scale, alphaScale=scale)
     { return new Color(this.r*scale, this.g*scale, this.b*scale, this.a*alphaScale); }
 
     /** Returns a copy of this color clamped to the valid range between 0 and 1
@@ -723,9 +732,9 @@ class Color
         ASSERT_NUMBER_VALID(percent);
         const p = clamp(percent);
         return new Color(
-            c.r*p + this.r*(1-p), 
-            c.g*p + this.g*(1-p), 
-            c.b*p + this.b*(1-p), 
+            c.r*p + this.r*(1-p),
+            c.g*p + this.g*(1-p),
+            c.b*p + this.b*(1-p),
             c.a*p + this.a*(1-p));
     }
 
@@ -765,15 +774,15 @@ class Color
         const minC = min(r, g, b);
         const l = (maxC + minC) / 2;
         let h = 0, s = 0;
-        if (maxC != minC)
+        if (maxC !== minC)
         {
             let d = maxC - minC;
             s = l > .5 ? d / (2 - maxC - minC) : d / (maxC + minC);
-            if (r == maxC)
+            if (r === maxC)
                 h = (g - b) / d + (g < b ? 6 : 0);
-            else if (g == maxC)
+            else if (g === maxC)
                 h = (b - r) / d + 2;
-            else if (b == maxC)
+            else if (b === maxC)
                 h =  (r - g) / d + 4;
         }
         return [h / 6, s, l, a];
@@ -783,7 +792,7 @@ class Color
      * @param {number} [amount]
      * @param {number} [alphaAmount]
      * @return {Color} */
-    mutate(amount=.05, alphaAmount=0) 
+    mutate(amount=.05, alphaAmount=0)
     {
         ASSERT_NUMBER_VALID(amount);
         ASSERT_NUMBER_VALID(alphaAmount);
@@ -799,47 +808,47 @@ class Color
     /** Returns this color expressed as a hex color code
      * @param {boolean} [useAlpha] - if alpha should be included in result
      * @return {string} */
-    toString(useAlpha = true)      
+    toString(useAlpha = true)
     {
-        ASSERT(typeof useAlpha == 'boolean', 'Use alpha boolean is invalid.', useAlpha);
+        ASSERT(typeof useAlpha === 'boolean', 'Use alpha boolean is invalid.', useAlpha);
         if (debug && !this.isValid())
             return `#000`;
         const toHex = (c)=> ((c=clamp(c)*255|0)<16 ? '0' : '') + c.toString(16);
         return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
     }
-    
+
     /** Set this color from a hex code
      * @param {string} hex - html hex code
      * @return {Color} */
     setHex(hex)
     {
-        ASSERT(typeof hex == 'string' && hex[0] == '#', 'Color hex code must be a string starting with #');
+        ASSERT(typeof hex === 'string' && hex[0] === '#', 'Color hex code must be a string starting with #');
         ASSERT([4,5,7,9].includes(hex.length), 'Invalid hex');
 
         if (hex.length < 6)
         {
             const fromHex = (c)=> clamp(parseInt(hex[c],16)/15);
             this.r = fromHex(1);
-            this.g = fromHex(2),
+            this.g = fromHex(2);
             this.b = fromHex(3);
-            this.a = hex.length == 5 ? fromHex(4) : 1;
+            this.a = hex.length === 5 ? fromHex(4) : 1;
         }
         else
         {
             const fromHex = (c)=> clamp(parseInt(hex.slice(c,c+2),16)/255);
             this.r = fromHex(1);
-            this.g = fromHex(3),
+            this.g = fromHex(3);
             this.b = fromHex(5);
-            this.a = hex.length == 9 ? fromHex(7) : 1;
+            this.a = hex.length === 9 ? fromHex(7) : 1;
         }
 
         ASSERT_COLOR_VALID(this);
         return this;
     }
-    
+
     /** Returns this color expressed as 32 bit RGBA value
      * @return {number} */
-    rgbaInt()  
+    rgbaInt()
     {
         const r = clamp(this.r)*255|0;
         const g = clamp(this.g)*255<<8;
@@ -851,9 +860,7 @@ class Color
     /** Checks if this is a valid color
      * @return {boolean} */
     isValid()
-    { 
-        return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a);
-    }
+    { return isNumber(this.r) && isNumber(this.g) && isNumber(this.b) && isNumber(this.a); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -862,7 +869,7 @@ class Color
 /** Color - White #ffffff
  *  @type {Color}
  *  @memberof Utilities */
-const WHITE = rgb(); 
+const WHITE = rgb();
 
 /** Color - Clear White #ffffff with 0 alpha
  *  @type {Color}
@@ -977,11 +984,11 @@ class Timer
     /** Get percentage elapsed based on time it was set to, returns 0 if not set
      * @return {number} */
     getPercent() { return this.isSet()? 1-percent(this.time - time, 0, this.setTime) : 0; }
-    
+
     /** Returns this timer expressed as a string
      * @return {string} */
     toString() { if (debug) { return this.isSet() ? Math.abs(this.get()) + ' seconds ' + (this.get()<0 ? 'before' : 'after' ) : 'unset'; }}
-    
+
     /** Get how long since elapsed, returns 0 if not set (returns negative if currently active)
      * @return {number} */
     valueOf() { return this.get(); }