littlejsengine 1.13.4 → 1.14.2

package/plugins/box2d.js

@@ -88,14 +88,14 @@ class Box2dObject extends EngineObject
         if (this.tileInfo)
             super.render();
         else
-            this.drawFixtures(this.color, this.lineColor, this.lineWidth, mainContext);
+            this.drawFixtures(this.color, this.lineColor, this.lineWidth);
     }
 
     /** Render debug info */
     renderDebugInfo()
     {
         const isAsleep = !this.getIsAwake();
-        const isStatic = this.getBodyType() == box2d.bodyTypeStatic;
+        const isStatic = this.getBodyType() === box2d.bodyTypeStatic;
         const color = rgb(isAsleep?1:0, isAsleep?1:0, isStatic?1:0, .5);
         this.drawFixtures(color);
     }
@@ -1563,7 +1563,7 @@ class Box2dPlugin
         queryCallback.ReportFixture = function(fixturePointer)
         {
             const fixture = box2d.instance.wrapPointer(fixturePointer, box2d.instance.b2Fixture);
-            if (dynamicOnly && fixture.GetBody().GetType() != box2d.instance.b2_dynamicBody)
+            if (dynamicOnly && fixture.GetBody().GetType() !== box2d.instance.b2_dynamicBody)
                 return true; // continue getting results
             if (!fixture.TestPoint(box2d.vec2dTo(pos)))
                 return true; // continue getting results
@@ -1592,7 +1592,7 @@ class Box2dPlugin
      *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context=drawContext)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -1602,20 +1602,20 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                drawPoly(points, color, lineWidth, lineColor, pos, angle, false, false, context);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius, color, lineWidth, lineColor, false, false, context);
+                drawCircle(pos, radius, color, lineWidth, lineColor);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                drawLine(v1, v2, lineWidth, lineColor, pos, angle, false, false, context);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
                 break;
             }
         }
@@ -1694,7 +1694,9 @@ class Box2dPlugin
 }
 
 ///////////////////////////////////////////////////////////////////////////////
-/** Box2d Init - Call with await before starting LittleJS to init box2d
+/** Box2d Init - Call with await to init box2d
+ *  @example
+ *  await box2dInit();
  *  @return {Promise<Box2dPlugin>}
  *  @memberof Box2D */
 async function box2dInit()

package/plugins/drawUtilities.js

@@ -24,7 +24,7 @@ function drawNineSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2,
 }
 
 /** Draw a scalable nine-slice UI element in world space
- *  This function can apply color and additive color if webgl is enabled
+ *  This function can apply color and additive color if WebGL is enabled
  *  @param {Vector2} pos - World space position
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the nine-slice pattern
@@ -53,9 +53,9 @@ function drawNineSlice(pos, size, startTile, color, borderSize=1, additiveColor,
     {
         // sides
         const horizontal = i%2;
-        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-1:1));
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i===1?1:-1:0, horizontal?0:i?-1:1));
         const sideSize = vec2(horizontal ? borderSize : centerSize.x, horizontal ? centerSize.y : borderSize);
-        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i==1?1:i==3?-1:0,i==0?-flip:i==2?flip:0)))
+        const sideTile = centerTile.offset(startTile.size.multiply(vec2(i===1?1:i===3?-1:0,i===0?-flip:i===2?flip:0)))
         drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, angle, false, additiveColor, useWebGL, screenSpace, context);
     }
     for (let i=4; i--;)
@@ -84,7 +84,7 @@ function drawThreeSliceScreen(pos, size, startTile, borderSize=32, extraSpace=2,
 }
 
 /** Draw a scalable three-slice UI element in world space
- *  This function can apply color and additive color if webgl is enabled
+ *  This function can apply color and additive color if WebGL is enabled
  *  @param {Vector2} pos - World space position
  *  @param {Vector2} size - World space size
  *  @param {TileInfo} startTile - Starting tile for the three-slice pattern
@@ -116,7 +116,7 @@ function drawThreeSlice(pos, size, startTile, color, borderSize=1, additiveColor
         // sides
         const a = angle + i*PI/2;
         const horizontal = i%2;
-        const sidePos = cornerOffset.multiply(vec2(horizontal?i==1?1:-1:0, horizontal?0:i?-flip:flip));
+        const sidePos = cornerOffset.multiply(vec2(horizontal?i===1?1:-1:0, horizontal?0:i?-flip:flip));
         const sideSize = vec2(horizontal ? centerSize.y : centerSize.x, borderSize);
         drawTile(pos.add(sidePos.rotate(rotateAngle)), sideSize, sideTile, color, a, false, additiveColor, useWebGL, screenSpace, context);
     }

package/plugins/newgrounds.js

@@ -23,11 +23,11 @@ let newgrounds;
 class NewgroundsMedal extends Medal
 {
     /** Create a newgrounds medal object and adds it to the list of medals
-     *  @param {Number} id            - The unique identifier of the medal
-     *  @param {String} name          - Name of the medal
-     *  @param {String} [description] - Description of the medal
-     *  @param {String} [icon]        - Icon for the medal
-     *  @param {String} [src]         - Image location for the medal
+     *  @param {number} id            - The unique identifier of the medal
+     *  @param {string} name          - Name of the medal
+     *  @param {string} [description] - Description of the medal
+     *  @param {string} [icon]        - Icon for the medal
+     *  @param {string} [src]         - Image location for the medal
      */
     constructor(id, name, description, icon, src)
     { super(id, name, description, icon, src); }
@@ -119,7 +119,7 @@ class NewgroundsPlugin
      * @param {number} id       - The scoreboard id
      * @param {string} [user]   - A user's id or name
      * @param {number} [social] - If true, only social scores will be loaded
-     * @param {number} [skip]   - Number of scores to skip before start
+     * @param {number} [skip]   - Number of scores to skip over
      * @param {number} [limit]  - Number of scores to include in the list
      * @return {Object}         - The response JSON object
      */

package/plugins/pluginExport.js

@@ -53,4 +53,4 @@ export
     drawNineSliceScreen,
     drawThreeSlice,
     drawThreeSliceScreen,
-};
+}

package/plugins/uiSystem.js

@@ -40,11 +40,11 @@ class UISystemPlugin
         /** @property {Color} - Default text color for UI elements */
         this.defaultTextColor = BLACK;
         /** @property {Color} - Default button color for UI elements */
-        this.defaultButtonColor = hsl(0,0,.5);
+        this.defaultButtonColor = hsl(0,0,.7);
         /** @property {Color} - Default hover color for UI elements */
-        this.defaultHoverColor = hsl(0,0,.7);
+        this.defaultHoverColor = hsl(0,0,.9);
         /** @property {Color} - Default color for disabled UI elements */
-        this.defaultDisabledColor = hsl(0,0,.2);
+        this.defaultDisabledColor = hsl(0,0,.3);
         /** @property {number} - Default line width for UI elements */
         this.defaultLineWidth = 4;
         /** @property {number} - Default rounded rect corner radius for UI elements */
@@ -64,16 +64,16 @@ class UISystemPlugin
             
         engineAddPlugin(uiUpdate, uiRender);
 
-        function updateInvisible(o)
-        {
-            for (const c of o.children)
-                updateInvisible(c);
-            o.updateInvisible();
-        }
-
         // setup recursive update and render
         function uiUpdate()
         {
+            function updateInvisibleObject(o)
+            {
+                // update invisible objects
+                for (const c of o.children)
+                    updateInvisibleObject(c);
+                o.updateInvisible();
+            }
             function updateObject(o)
             {
                 if (o.visible)
@@ -87,7 +87,7 @@ class UISystemPlugin
                     o.update();
                 }
                 else
-                    updateInvisible(o);
+                    updateInvisibleObject(o);
             }
             uiSystem.uiObjects.forEach(o=> o.parent || updateObject(o));
         }
@@ -113,7 +113,7 @@ class UISystemPlugin
     *  @param {Color}   [color=uiSystem.defaultColor]
     *  @param {number}  [lineWidth=uiSystem.defaultLineWidth]
     *  @param {Color}   [lineColor=uiSystem.defaultLineColor]
-    *  @param {number}  [lineWidth=uiSystem.defaultCornerRadius] */
+    *  @param {number}  [cornerRadius=uiSystem.defaultCornerRadius] */
     drawRect(pos, size, color=uiSystem.defaultColor, lineWidth=uiSystem.defaultLineWidth, lineColor=uiSystem.defaultLineColor, cornerRadius=uiSystem.defaultCornerRadius)
     {
         const context = uiSystem.uiContext;
@@ -188,32 +188,40 @@ class UIObject
     constructor(pos=vec2(), size=vec2())
     {
         /** @property {Vector2} - Local position of the object */
-        this.localPos   = pos.copy();
+        this.localPos = pos.copy();
         /** @property {Vector2} - Screen space position of the object */
-        this.pos        = pos.copy();
+        this.pos = pos.copy();
         /** @property {Vector2} - Screen space size of the object */
-        this.size       = size.copy();
-        /** @property {Color} - color of the object */
-        this.color      = uiSystem.defaultColor;
-        /** @property {Color} - color for text */
-        this.textColor  = uiSystem.defaultTextColor;
-        /** @property {Color} - color used when hovering over the object */
+        this.size = size.copy();
+        /** @property {Color} - Color of the object */
+        this.color = uiSystem.defaultColor;
+        /** @property {string} - Text for this ui object */
+        this.text = undefined;
+        /** @property {Color} - Color when disabled */
+        this.disabledColor = uiSystem.defaultDisabledColor;
+        /** @property {boolean} - Is this object disabled? */
+        this.disabled = false;
+        /** @property {Color} - Color for text */
+        this.textColor = uiSystem.defaultTextColor;
+        /** @property {Color} - Color used when hovering over the object */
         this.hoverColor = uiSystem.defaultHoverColor;
-        /** @property {Color} - color for line drawing */
-        this.lineColor  = uiSystem.defaultLineColor;
-        /** @property {number} - width for line drawing */
-        this.lineWidth  = uiSystem.defaultLineWidth;
-        /** @property {string} - font for this objecct */
-        this.font       = uiSystem.defaultFont;
-        /** @property {number} - override for text height */
-        this.textHeight   = undefined;
-        /** @property {boolean} - should this object be drawn */
-        this.visible    = true;
-        /** @property {Array<UIObject>} - a list of this object's children */
-        this.children   = [];
-        /** @property {UIObject} - this object's parent, position is in parent space */
-        this.parent     = undefined;
-        /** @property {number} - Extra size added when checking if element is touched */
+        /** @property {Color} - Color for line drawing */
+        this.lineColor = uiSystem.defaultLineColor;
+        /** @property {number} - Width for line drawing */
+        this.lineWidth = uiSystem.defaultLineWidth;
+        /** @property {number} - Corner radius for rounded rects */
+        this.cornerRadius = uiSystem.defaultCornerRadius;
+        /** @property {string} - Font for this objecct */
+        this.font = uiSystem.defaultFont;
+        /** @property {number} - Override for text height */
+        this.textHeight = undefined;
+        /** @property {boolean} - Should this object be drawn */
+        this.visible  = true;
+        /** @property {Array<UIObject>} - A list of this object's children */
+        this.children = [];
+        /** @property {UIObject} - This object's parent, position is in parent space */
+        this.parent = undefined;
+        /** @property {number} - Extra size added to make small buttons easier to touch on mobile devices */
         this.extraTouchSize = 0;
         /** @property {Sound} - Sound when interactive element is pressed */
         this.soundPress = uiSystem.defaultSoundPress;
@@ -245,7 +253,7 @@ class UIObject
      */
     removeChild(child)
     {
-        ASSERT(child.parent == this && this.children.includes(child));
+        ASSERT(child.parent === this && this.children.includes(child));
         this.children.splice(this.children.indexOf(child), 1);
         child.parent = undefined;
     }
@@ -298,7 +306,7 @@ class UIObject
             this.mouseIsHeld = false;
         }
 
-        if (this.mouseIsOver != mouseWasOver)
+        if (this.mouseIsOver !== mouseWasOver)
             this.mouseIsOver ? this.onEnter() : this.onLeave();
     }
 
@@ -309,7 +317,7 @@ class UIObject
             uiSystem.drawRect(this.pos, this.size, this.color, this.lineWidth, this.lineColor, this.cornerRadius);
     }
 
-    /** Special update for when object is invisible */
+    /** Special update when object is not visible */
     updateInvisible()
     {
         // reset input state when not visible
@@ -317,28 +325,22 @@ class UIObject
     }
 
     /** Called when the mouse enters the object */
-    onEnter()   
-    {}
+    onEnter() {}
 
     /** Called when the mouse leaves the object */
-    onLeave()   
-    {}
+    onLeave() {}
 
     /** Called when the mouse is pressed while over the object */
-    onPress()   
-    {}
+    onPress() {}
 
     /** Called when the mouse is released while over the object */
-    onRelease() 
-    {}
+    onRelease() {}
 
     /** Called when user clicks on this object */
-    onClick()   
-    {}
+    onClick() {}
 
     /** Called when the state of this object changes */
-    onChange()  
-    {}
+    onChange() {}
 };
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -359,13 +361,13 @@ class UIText extends UIObject
     {
         super(pos, size);
 
-        /** @property {string} */
+        // set properties
         this.text = text;
-        /** @property {string} */
         this.align = align;
+        this.font = font;
 
-        this.font = font; // set font
-        this.lineWidth = 0; // set text to not be outlined by default
+        // make text not outlined by default
+        this.lineWidth = 0;
     }
     render()
     {
@@ -392,13 +394,14 @@ class UITile extends UIObject
     constructor(pos, size, tileInfo, color=WHITE, angle=0, mirror=false)
     {
         super(pos, size);
-
         /** @property {TileInfo} - Tile image to use */
         this.tileInfo = tileInfo;
         /** @property {number} - Angle to rotate in radians */
         this.angle = angle;
         /** @property {boolean} - Should it be mirrored? */
         this.mirror = mirror;
+        
+        // set properties
         this.color = color;
     }
     render()
@@ -424,22 +427,20 @@ class UIButton extends UIObject
     {
         super(pos, size);
 
-        /** @property {string} */
+        // set properties
         this.text = text;
-        /** @property {Color} */
-        this.disabledColor = uiSystem.defaultDisabledColor;
-        /** @property {boolean} */
-        this.disabled = false;
-        this.interactive = true;
         this.color = color;
+        this.interactive = true;
     }
     render()
     {
+        // draw the button
         const lineColor = this.mouseIsHeld && !this.disabled ? this.color : this.lineColor;
         const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
         
-        const textScale = .8; // scale text to fit in button
+        // draw the text
+        const textScale = .8; // scale text to fit
         const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 
             this.textColor, 0, undefined, this.align, this.font);
@@ -457,13 +458,18 @@ class UICheckbox extends UIObject
      *  @param {Vector2} [pos]
      *  @param {Vector2} [size]
      *  @param {boolean} [checked]
+     *  @param {string}  [text]
+     *  @param {Color}   [color=uiSystem.defaultButtonColor]
      */
-    constructor(pos, size, checked=false)
+    constructor(pos, size, checked=false, text='', color=uiSystem.defaultButtonColor)
     {
         super(pos, size);
-
-        /** @property {boolean} */
+        /** @property {boolean} - Current percentage value of this scrollbar 0-1 */
         this.checked = checked;
+
+        // set properties
+        this.text = text;
+        this.color = color;
         this.interactive = true;
     }
     onClick()
@@ -473,14 +479,24 @@ class UICheckbox extends UIObject
     }
     render()
     {
-        const color = this.mouseIsOver? this.hoverColor : this.color;
+        const color = this.disabled ? this.disabledColor : this.mouseIsOver ? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, this.lineColor, this.cornerRadius);
         if (this.checked)
         {
-            // draw an X if checked
-            uiSystem.drawLine(this.pos.add(this.size.multiply(vec2(-.5,-.5))), this.pos.add(this.size.multiply(vec2(.5,.5))), this.lineWidth, this.lineColor);
-            uiSystem.drawLine(this.pos.add(this.size.multiply(vec2(-.5,.5))), this.pos.add(this.size.multiply(vec2(.5,-.5))), this.lineWidth, this.lineColor);
+            const p = this.cornerRadius / min(this.size.x, this.size.y) * 2;
+            const length = lerp(1, 2**.5/2, p) / 2;
+            let s = this.size.scale(length);
+            uiSystem.drawLine(this.pos.add(s.multiply(vec2(-1))), this.pos.add(s.multiply(vec2(1))), this.lineWidth, this.lineColor);
+            uiSystem.drawLine(this.pos.add(s.multiply(vec2(-1,1))), this.pos.add(s.multiply(vec2(1,-1))), this.lineWidth, this.lineColor);
         }
+        
+        // draw the text to the right side of the checkbox
+        const textScale = .8; // scale text to fit
+        const gapScale = .55;
+        const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
+        const pos = this.pos.add(vec2(this.size.x*gapScale,0));
+        uiSystem.drawText(this.text, pos, textSize, 
+            this.textColor, 0, undefined, 'left', this.font);
     }
 }
 
@@ -503,43 +519,51 @@ class UIScrollbar extends UIObject
     {
         super(pos, size);
 
-        /** @property {number} */
+        /** @property {number} - Current percentage value of this scrollbar 0-1 */
         this.value = value;
-        /** @property {string} */
-        this.text = text;
-        /** @property {Color} */
+        /** @property {Color} - Color for the handle part of the scrollbar */
         this.handleColor = handleColor;
+
+        // set properties
+        this.text = text;
         this.color = color;
         this.interactive = true;
     }
     update()
     {
         super.update();
-        if (this.mouseIsHeld)
+        if (this.mouseIsHeld && this.interactive)
         {
+            // check if value changed
             const handleSize = vec2(this.size.y);
             const handleWidth = this.size.x - handleSize.x;
             const p1 = this.pos.x - handleWidth/2;
             const p2 = this.pos.x + handleWidth/2;
             const oldValue = this.value;
             this.value = percent(mousePosScreen.x, p1, p2);
-            this.value == oldValue || this.onChange();
+            this.value === oldValue || this.onChange();
         }
     }
     render()
     {
-        const lineColor = this.mouseIsHeld ? this.color : this.lineColor;
-        const color = this.mouseIsOver? this.hoverColor : this.color;
+        // draw the scrollbar background
+        const lineColor = this.interactive && this.mouseIsHeld && !this.disabled ? 
+            this.color : this.lineColor;
+        const color = this.disabled ? this.disabledColor : 
+            this.interactive && this.mouseIsHeld ? this.hoverColor : this.color;
         uiSystem.drawRect(this.pos, this.size, color, this.lineWidth, lineColor, this.cornerRadius);
     
+        // draw the scrollbar handle
         const handleSize = vec2(this.size.y);
         const handleWidth = this.size.x - handleSize.x;
         const p1 = this.pos.x - handleWidth/2;
         const p2 = this.pos.x + handleWidth/2;
         const handlePos = vec2(lerp(p1, p2, this.value), this.pos.y);
-        const barColor = this.mouseIsHeld ? this.color : this.handleColor;
-        uiSystem.drawRect(handlePos, handleSize, barColor, this.lineWidth, this.lineColor, this.cornerRadius);
+        const handleColor = this.disabled ? this.disabledColor : 
+            this.interactive && this.mouseIsHeld ? this.color : this.handleColor;
+        uiSystem.drawRect(handlePos, handleSize, handleColor, this.lineWidth, this.lineColor, this.cornerRadius);
 
+        // draw the text on the scrollbar
         const textScale = .8; // scale text to fit in scrollbar
         const textSize = vec2(this.size.x, this.textHeight || this.size.y*textScale);
         uiSystem.drawText(this.text, this.pos, textSize, 

package/plugins/zzfxm.js

@@ -46,16 +46,16 @@ class ZzFXMusic extends Sound
         if (!soundEnable || headlessMode) return;
         this.randomness = 0;
         this.sampleChannels = zzfxM(...zzfxMusic);
-        this.sampleRate = zzfxR;
+        this.sampleRate = audioDefaultSampleRate;
     }
 
-    /** Play the music
-     *  @param {number}  [volume=1] - How much to scale volume by
-     *  @param {boolean} [loop] - True if the music should loop
+    /** Play the music that loops by default
+     *  @param {number}  [volume] - Volume to play the music at
+     *  @param {boolean} [loop] - Should the music loop?
      *  @return {AudioBufferSourceNode} - The audio source node
      */
-    playMusic(volume, loop=false)
-    { return super.play(undefined, volume, 1, 1, loop); }
+    playMusic(volume=1, loop=true)
+    { return super.play(undefined, volume, 1, 0, loop); }
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -89,7 +89,7 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
   let panning = 0;
   let hasMore = 1;
   let sampleCache = {};
-  let beatLength = zzfxR / BPM * 60 >> 2;
+  let beatLength = audioDefaultSampleRate / BPM * 60 >> 2;
 
   // for each channel in order until there are no more
   for (; hasMore; channelIndex++) {
@@ -108,15 +108,15 @@ function zzfxM(instruments, patterns, sequence, BPM = 125)
       // get next offset, use the length of first channel
       nextSampleOffset = outSampleOffset + (patterns[patternIndex][0].length - 2 - (notFirstBeat?0:1)) * beatLength;
       // for each beat in pattern, plus one extra if end of sequence
-      isSequenceEnd = sequenceIndex == sequence.length - 1;
+      isSequenceEnd = sequenceIndex === sequence.length - 1;
       for (i = 2, k = outSampleOffset; i < patternChannel.length + isSequenceEnd; notFirstBeat = ++i) {
 
         // <channel-note>
         note = patternChannel[i];
 
         // stop if end, different instrument or new note
-        stop = i == patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
-            instrument != (patternChannel[0] || 0) || note | 0;
+        stop = i === patternChannel.length + isSequenceEnd - 1 && isSequenceEnd ||
+            instrument !== (patternChannel[0] || 0) || note | 0;
 
         // fill buffer with samples for previous beat, most cpu intensive part
         for (j = 0; j < beatLength && notFirstBeat;