littlejsengine 1.14.11 → 1.14.19

package/examples/module/game.js

@@ -69,16 +69,16 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
+        1, 0, 500, Math.PI,         // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        1, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
         .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.trailScale = 2;   // stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -90,7 +90,7 @@ function gameUpdate()
         sound_click.play(LJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = LJS.randColor();
         particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);

package/examples/platformer/gameEffects.js

@@ -48,13 +48,13 @@ export function makeDebris(pos, color = hsl(), amount = 50, size=.2, restitution
 {
     const color2 = color.lerp(hsl(), .5);
     const emitter = new LJS.ParticleEmitter(
-        pos, 0, 1, .1, amount/.1, 3.14, // pos, angle, emitSize, emitTime, emitRate, emitCone
+        pos, 0, 1, .1, amount/.1, 3.14, // pos, angle, size, time, rate, cone
         0,                     // tileInfo
         color, color2,         // colorStartA, colorStartB
         color, color2,         // colorEndA, colorEndB
         3, size,size, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
         1, .95, .4, 3.14, 0,   // damp, angleDamp, gravity, particleCone, fade
-        .5, 1                  // randomness, collide, additive, colorLinear, renderOrder
+        .5, 1                  // randomness, collide
     );
     emitter.restitution = restitution;
     emitter.particleDestroyCallback = persistentParticleDestroyCallback;
@@ -109,7 +109,7 @@ export function explosion(pos, radius=3)
     // smoke
     new LJS.ParticleEmitter(
         pos, 0,                       // pos, angle
-        radius/2, .2, 50*radius, 3.14,// emitSize, emitTime, emitRate, emitCone
+        radius/2, .2, 50*radius, 3.14,// emitSize, emitTime, rate, cone
         0,                            // tileInfo
         hsl(0,0,0), hsl(0,0,0),       // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0),   // colorEndA, colorEndB
@@ -121,7 +121,7 @@ export function explosion(pos, radius=3)
     // fire
     new LJS.ParticleEmitter(
         pos, 0,                         // pos, angle
-        radius/2, .1, 100*radius, 3.14, // emitSize, emitTime, emitRate, emitCone
+        radius/2, .1, 100*radius, 3.14, // emitSize, emitTime, rate, cone
         0,                              // tileInfo
         rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
         rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
@@ -255,7 +255,7 @@ export class ParallaxLayer extends LJS.CanvasLayer
         this.context.clearRect(0,0,1,h);
     
         // make WebGL texture
-        this.useWebGL(LJS.glEnable);
+        this.useWebGL();
     }
 
     render()

package/examples/platformer/gameLevel.js

@@ -50,7 +50,7 @@ function loadLevelData()
 {
     // load the level data
     const tileMapData = Game.gameLevelData;
-    tileLayers = LJS.tileCollisionLoad(tileMapData, tile(0,16,1), 0, 1);
+    tileLayers = LJS.tileLayersLoad(tileMapData, tile(0,16,1), 0, 1);
     levelSize = tileLayers[0].size;
     playerStartPos = vec2(0, levelSize.y); // default player start
     foregroundTileLayer = tileLayers[0];

package/examples/platformer/gameObjects.js

@@ -247,13 +247,13 @@ export class Weapon extends LJS.EngineObject
 
         // shell effect
         this.addChild(this.shellEmitter = new LJS.ParticleEmitter(
-            vec2(), 0, 0, 0, 0, .1,  // pos, angle, emitSize, emitTime, emitRate, emitCone
+            vec2(), 0, 0, 0, 0, .1,  // pos, angle, size, time, rate, cone
             0,                       // tileInfo
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorStartA, colorStartB
             rgb(1,.8,.5), rgb(.9,.7,.5), // colorEndA, colorEndB
             3, .1, .1, .15, .1, // time, sizeStart, sizeEnd, speed, angleSpeed
             1, .95, 1, 0, 0,    // damp, angleDamp, gravity, particleCone, fade
-            .1, 1               // randomness, collide, additive, colorLinear, renderOrder
+            .1, 1               // randomness, collide
         ), vec2(.1,0), -.8);
         this.shellEmitter.restitution = .5;
         this.shellEmitter.particleDestroyCallback = GameEffects.persistentParticleDestroyCallback;
@@ -368,13 +368,13 @@ export class Bullet extends LJS.EngineObject
 
         // spark effects
         const emitter = new LJS.ParticleEmitter(
-            this.pos, 0, 0, .1, 100, .5, // pos, angle, emitSize, emitTime, emitRate, emitCone
+            this.pos, 0, 0, .1, 100, .5, // pos, angle, size, time, rate, cone
             0,                           // tileInfo
             rgb(1,1,0), rgb(1,0,0), // colorStartA, colorStartB
             rgb(1,1,0), rgb(1,0,0), // colorEndA, colorEndB
             .2, .2, 0, .1, .1,  // time, sizeStart, sizeEnd, speed, angleSpeed
             1, 1, .5, 3.14, .1, // damp, angleDamp, gravityScale, particleCone, fade, 
-            .5, 1, 1            // randomness, collide, additive, colorLinear, renderOrder
+            .5, 1, 1            // randomness, collide, additive
         );
         emitter.trailScale = 1;
         emitter.restitution = .3;

package/examples/puzzle/game.js

@@ -309,7 +309,7 @@ function clearMatches()
             const color2 = color1.lerp(hsl(), .5);
             new LJS.ParticleEmitter(
                 pos.add(vec2(.5)), 0, // pos, angle
-                .5, .1, 200, 3.14,    // emitSize, emitTime, emitRate, emitCone
+                .5, .1, 200, 3.14,    // emitSize, emitTime, rate, cone
                 0,                    // tileInfo
                 color1, color2,                      // colorStartA, colorStartB
                 color1.scale(1,0), color2.scale(1,0),// colorEndA, colorEndB

package/examples/shorts/animation.js

@@ -3,7 +3,7 @@ canvasClearColor = GRAY;
 function gameRender()
 {
     {
-        // animate using multiple frames
+        // animate by changing frames
         const pos = vec2(-5, 2*abs(Math.sin(time*2*PI)));
         const frame = (time*4)%2|0;
         drawTile(pos, vec2(7), tile(3).frame(frame), RED);

package/examples/shorts/base.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html><meta charset=utf-8><body>
-<script src=../../dist/littlejs.js?1134></script>
+<script src=../../dist/littlejs.js?11417></script>
 <script src=../../dist/box2d.wasm.js></script>
 
 <!-- LittleJS Engine Source

package/examples/shorts/blending.js

@@ -1,20 +1,14 @@
-// use smooth blending
-setCanvasPixelated(false);
-setTilesPixelated(false);
-
 function gameRender()
 {
-    const circleTile = tile(2, 128); // get the circle tile
-
-    // additive blend
+    // additive blending
     setBlendMode(1);
-    drawTile(vec2(-8,-2), vec2(7), circleTile, rgb(0,0,.5), 0, false, rgb(0,0,.5));
-    drawTile(vec2(-6, 2), vec2(7), circleTile, rgb(0,1,0));
-    drawTile(vec2(-4,-2), vec2(7), circleTile, rgb(1,0,0));
+    drawCircle(vec2(-8,-2), 7, rgb(0,0,.5));
+    drawCircle(vec2(-6, 2), 7, rgb(0,1,0));
+    drawCircle(vec2(-4,-2), 7, rgb(1,0,0));
 
-    // alpha blend
+    // alpha blending
     setBlendMode(0);
-    drawTile(vec2(4,-2), vec2(7), circleTile, hsl(time/9    ,1,.5), 0, false, hsl(1,1,.5));
-    drawTile(vec2(8,-2), vec2(7), circleTile, hsl(time/9+1/3,1,.5,.5));
-    drawTile(vec2(6, 2), vec2(7), circleTile, hsl(time/9+2/3,1,.5,.5));
+    drawCircle(vec2(4,-2), 7, hsl(time/9    ,1,.5));
+    drawCircle(vec2(8,-2), 7, hsl(time/9+1/3,1,.5,.5));
+    drawCircle(vec2(6, 2), 7, hsl(time/9+2/3,1,.5,.5));
 }

package/examples/shorts/box2d.js

@@ -7,13 +7,16 @@ async function gameInit()
     canvasClearColor = hsl(0,0,.9);
     
     // create ground object
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
+    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
+        GRAY, box2d.bodyTypeStatic);
     groundObject.addBox(vec2(100,2));
 
     // add some random objects
     for (let i=50; i--;)
     {
-        const o = new Box2dObject(randInCircle(5), vec2(), 0, 0, randColor());
+        const pos = randInCircle(5);
+        const color = randColor();
+        const o = new Box2dObject(pos, vec2(), 0, 0, color);
         randInt(2) ? o.addCircle(rand(1,2)) : o.addRandomPoly(rand(1,2));
     }
 }
@@ -36,7 +39,8 @@ function gameUpdate()
         // grab object
         const object = box2d.pointCast(mousePos);
         if (object)
-            mouseJoint = new Box2dTargetJoint(object, groundObject, mousePos);
+            mouseJoint = new Box2dTargetJoint(object,
+                groundObject, mousePos);
     }
 }
 

package/examples/shorts/box2dCar.js

@@ -3,7 +3,8 @@ async function gameInit()
     // setup box2d and create the objects
     await box2dInit();
     gravity.y = -20;
-    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0, GRAY, box2d.bodyTypeStatic);
+    groundObject = new Box2dObject(vec2(-8), vec2(), 0, 0,
+        GRAY, box2d.bodyTypeStatic);
     groundObject.addBox(vec2(100,6));
     new CarObject(vec2(0,-2));
     canvasClearColor = hsl(0,0,.9);

package/examples/shorts/empty.js

@@ -0,0 +1,30 @@
+function gameInit()
+{
+    // called once after the engine starts up
+    // setup the game
+}
+
+function gameUpdate()
+{
+    // called every frame at 60 frames per second
+    // handle input and update the game state
+}
+
+function gameUpdatePost()
+{
+    // called after physics and objects are updated
+    // setup camera and prepare for render
+}
+
+function gameRender()
+{
+    // called before objects are rendered
+    // draw any background effects that appear behind objects
+}
+
+function gameRenderPost()
+{
+    // called after objects are rendered
+    // draw effects or hud that appear above all objects
+    drawTextScreen('LittleJS Engine', mainCanvasSize.scale(.5), 80);
+}

package/examples/shorts/helloWorld.js

@@ -4,7 +4,7 @@ function gameRender()
     drawRectGradient(cameraPos, getCameraSize(), BLACK, WHITE);
 
     // draw text to the overlay canvas
-    drawTextOverlay('Hello World', vec2(0,3), 3);
+    drawTextOverlay('LittleJS Engine', vec2(0,3), 3);
         
     // draw a tile
     drawTile(vec2(Math.sin(time)*3,-2), vec2(7), tile(3,128));

package/examples/shorts/hillGlideGame.js

@@ -2,7 +2,7 @@ class Player extends EngineObject
 {
     constructor(pos)
     {
-        super(pos, vec2(2), tile(9), 0, CYAN);
+        super(pos, vec2(2), tile(9), 0, RED);
         this.damping = 1; // disable damping
         this.clampSpeed = false; // disable speed clamping
     }
@@ -11,12 +11,14 @@ class Player extends EngineObject
     {
         super.update();
 
+        // check ground height
         const h = getGroundHeight(this.pos.x);
         if (this.pos.y < h + this.size.y/2)
         {
             // clamp to ground and reflect velocity
             this.pos.y = h + this.size.y/2;
-            const n = vec2((h-getGroundHeight(this.pos.x+.1))/.1, 1).normalize();
+            const h2 = getGroundHeight(this.pos.x+.1);
+            const n = vec2((h-h2)/.1, 1).normalize();
             this.velocity = this.velocity.reflect(n,0);
         }
 
@@ -40,13 +42,17 @@ function gameInit()
 {
     gravity.y = -.01;
     new Player(vec2(0,5));
-    canvasClearColor = hsl(.7,1,.8);
+    canvasClearColor = hsl(.6,1,.8);
 }
 
 function gameRender()
 {
+    // draw ground as a series of thin rectangles
     const h = 100, w = 20;
-    const pos = vec2(), sizeTop = vec2(.4), size = vec2(.2,h), color = WHITE;
+    const pos = vec2();
+    const sizeTop = vec2(.4);
+    const size = vec2(.2,h);
+    const color = rgb();
     for (let x=cameraPos.x-w; x<cameraPos.x+w; x+=.1)
     {
         pos.x = x;

package/examples/shorts/landerGame.js

@@ -14,7 +14,8 @@ class Player extends EngineObject
         // space ship controls
         const moveInput = keyDirection();
         this.applyAngularAcceleration(moveInput.x * .002);
-        this.applyAcceleration(vec2().setAngle(this.angle, moveInput.y*.002));
+        const accel = vec2(0, moveInput.y*.002).rotate(this.angle);
+        this.applyAcceleration(accel);
     }
 
     // explode when it collides
@@ -25,16 +26,16 @@ class Player extends EngineObject
         if (this.velocity.length() < .05)
             return true;
 
+        // explode!
         this.destroy();
         new ParticleEmitter(
-            this.pos, 0,      // pos, angle
-            1, .1, 300, 3.14, // emitSize, emitTime, emitRate, emitCone
-            0,                              // tileInfo
+            this.pos, 0,         // pos, angle
+            1, .1, 300, 3.14, 0, // emitSize, emitTime, rate, cone, tile
             rgb(1,.5,.1), rgb(1,.1,.1),     // colorStartA, colorStartB
             rgb(1,.5,.1,0), rgb(1,.1,.1,0), // colorEndA, colorEndB
-            .7, .8, .2, .2, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
-            .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, particleCone, fade
-            1, 0, 1               // randomness, collide, additive
+            .7, .8, .2, .2, .05,   // time, start, end, speed, angleSpeed
+            .9, 1, -.2, 3.14, .05, // damp, angleDamp, gravity, cone, fade
+            1, 0, 1                // randomness, collide, additive
         );
     }
 }
@@ -49,7 +50,9 @@ function gameInit()
     for (let i=0, y=0; i<20; ++i)
     {
         y = (y + rand(1,-1)*4) * .5;
-        const o = new EngineObject(vec2(i*2-20, y-54), vec2(2, 99), 0, 0, hsl(0,0,.5+i%.29));
+        const pos = vec2(i*2-20, y-54);
+        const color = hsl(0, 0, .5+i%.29);
+        const o = new EngineObject(pos, vec2(2, 99), 0, 0, color);
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics
     }

package/examples/shorts/medals.js

@@ -1,8 +1,8 @@
 // create example medals
-const medal_openedExample = new Medal(0, 'Opened Example',   'You opened this example!');
-const medal_leftClick     = new Medal(1, 'Left Clicked',     'You left clicked!',     '🐁');
-const medal_rightClick    = new Medal(2, 'Right Clicked',    'You right clicked!',    '🐭');
-const medal_spacePressed  = new Medal(3, 'Pressed Spacebar', 'You pressed spacebar!', '🚀');
+const medal_openedExample = new Medal(0, 'Open', 'Opened this example!');
+const medal_leftClick = new Medal(1, 'Lefty', 'Left clicked!', '🐁');
+const medal_rightClick = new Medal(2, 'Righty', 'Right clicked!', '🐭');
+const medal_spacePressed = new Medal(3, 'Space', 'Pressed spacebar!', '🚀');
 
 // setup medals
 const saveName = 'Medals Example';

package/examples/shorts/music.js

@@ -1,7 +1,7 @@
-let playButton, stopButton, progressBar;
+let musicPlayer, playButton, stopButton, infoText;
 let musicSound = new SoundWave('song.mp3');
 let musicVolume = 1;
-let musicInstance;
+let music;
 
 function gameInit()
 {
@@ -10,27 +10,28 @@ function gameInit()
     uiSystem.defaultSoundPress = new Sound([.5,0,220]);
     uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 20;
-    canvasClearColor = hsl(.9,.3,.2); // background color
+    canvasClearColor = hsl(.9,.3,.2);
 
     // setup music player UI
-    const musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 220));
 
-    // title
-    const title = new UIText(vec2(0, -100), vec2(500, 40), 'LittleJS Music Player');
-    musicPlayer.addChild(title);
+    // infomation text
+    infoText = new UIText(vec2(0, -70), vec2(400, 50));
+    musicPlayer.addChild(infoText);
 
     // volume slider
-    const volumeSlider = new UIScrollbar(vec2(0, -40), vec2(400, 30), musicVolume, 'Music Volume');
+    const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30), 
+        musicVolume, 'Music Volume');
     musicPlayer.addChild(volumeSlider);
     volumeSlider.onChange = () => 
     {
         musicVolume = volumeSlider.value;
-        if (musicInstance) 
-            musicInstance.setVolume(musicVolume);
+        if (music) 
+            music.setVolume(musicVolume);
     };
 
     // play button
-    playButton = new UIButton(vec2(-90, 30), vec2(140, 50), 'Play');
+    playButton = new UIButton(vec2(-90, 50), vec2(140, 50), 'Play');
     musicPlayer.addChild(playButton);
     playButton.onClick = ()=>
     {
@@ -38,68 +39,40 @@ function gameInit()
             return;
         
         // handle play/pause toggle
-        if (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume);
-        else if (musicInstance.isPaused())
-            musicInstance.resume();
+        if (!music)
+            music = musicSound.playMusic(musicVolume);
+        else if (music.isPaused())
+            music.resume();
         else
-            musicInstance.pause();
+            music.pause();
     };
 
     // stop button
-    stopButton = new UIButton(vec2(90, 30), vec2(140, 50), 'Stop');
-    stopButton.onClick = ()=>
-    {
-        if (!musicInstance)
-            return;
-
-        // stop sound
-        musicInstance.stop();
-    };
+    stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
+    stopButton.onClick = ()=>  music && music.stop();
     musicPlayer.addChild(stopButton);
-
-    // progress bar and scrollbar for seeking
-    progressBar = new UIScrollbar(vec2(0, 100), vec2(400, 30), 0, 'Progress');
-    progressBar.disabledColor = RED;
-    progressBar.onChange = ()=> 
-    {
-        // control music seek position
-        const wasPlaying = musicInstance && musicInstance.isPlaying();
-        if (!musicInstance)
-            musicInstance = musicSound.playMusic(musicVolume, true, true);
-        progressBar.value = min(progressBar.value, .999); // prevent looping around
-        const seekTime = progressBar.value * musicSound.getDuration();
-        musicInstance.start(seekTime);
-        if (!wasPlaying)
-            musicInstance.pause();
-    };
-    musicPlayer.addChild(progressBar);
 }
 
 function gameUpdate()
 {
-    // disable buttons while loading or waiting for interaction
-    const isDisabled = !musicSound.isLoaded() || !audioIsRunning();
-    playButton.disabled  = isDisabled
-    stopButton.disabled  = isDisabled
-    progressBar.disabled = isDisabled
+    // disable buttons while loading
+    const isDisabled = !musicSound.isLoaded();
+    playButton.disabled = stopButton.disabled = isDisabled;
 
     // update ui
-    if (!musicSound.isLoaded())
+    if (isDisabled)
     {
         // update loading progress
-        const loadingPercent = musicSound.loadedPercent * 100;
-        progressBar.text = `Loading: ${(loadingPercent).toFixed(2)}%`;
+        const loadingPercent = musicSound.loadedPercent * 100|0;
+        infoText.text = `Loading: ${loadingPercent}%`;
     }
     else
     {
         // update ui text
-        playButton.text = !musicInstance || !musicInstance.isPlaying() ? 'Play' : 'Pause';
-        const currentTime = musicInstance ? musicInstance.getCurrentTime() : 0;
+        const isPlaying = music && music.isPlaying();
+        playButton.text = isPlaying ? 'Pause' : 'Play';
+        const current = music ? music.getCurrentTime() : 0;
         const duration = musicSound.getDuration();
-        if (!progressBar.mouseIsHeld)
-            progressBar.value = currentTime / duration;
-        const timeText = `${formatTime(currentTime)} / ${formatTime(duration)}`;
-        progressBar.text = audioIsRunning() ? timeText : 'Click to Enable Audio';
+        infoText.text = formatTime(current) +' / '+ formatTime(duration);
     }
 }

package/examples/shorts/musicPlayer.js

@@ -0,0 +1,135 @@
+let musicPlayer, playButton, stopButton, progressBar;
+let musicSound, music;
+let musicVolume = 1;
+
+function gameInit()
+{
+    // setup ui system plugin
+    new UISystemPlugin;
+    uiSystem.defaultSoundPress = new Sound([.5,0,220]);
+    uiSystem.defaultSoundClick = new Sound([.5,0,440]);
+    uiSystem.defaultCornerRadius = 20;
+    uiSystem.defaultGradientColor = WHITE;
+    canvasClearColor = hsl(.9,.3,.2);
+
+    // setup music player UI
+    musicPlayer = new UIObject(mainCanvasSize.scale(.5), vec2(500, 300));
+    const title = new UIText(vec2(0, -100), vec2(500, 40),
+        'LittleJS Music Player');
+    musicPlayer.addChild(title);
+
+    // drop zone text
+    const dropZoneText = new UIText(vec2(0, -60), vec2(450, 20),
+        'Drag & Drop Audio Files Here!');
+    dropZoneText.textColor = hsl(.9, .3, .8, .7);
+    musicPlayer.addChild(dropZoneText);
+
+    // volume slider
+    const volumeSlider = new UIScrollbar(vec2(0, -20), vec2(400, 30),
+        musicVolume, 'Music Volume');
+    musicPlayer.addChild(volumeSlider);
+    volumeSlider.onChange = () => 
+    {
+        musicVolume = volumeSlider.value;
+        if (music) 
+            music.setVolume(musicVolume);
+    };
+
+    // play button
+    playButton = new UIButton(vec2(-90, 50), vec2(140, 50), 'Play');
+    musicPlayer.addChild(playButton);
+    playButton.onClick = ()=>
+    {
+        if (!musicSound.isLoaded())
+            return;
+        
+        // handle play/pause toggle
+        if (!music)
+            music = musicSound.playMusic(musicVolume);
+        else if (music.isPaused())
+            music.resume();
+        else
+            music.pause();
+    };
+
+    // stop button
+    stopButton = new UIButton(vec2(90, 50), vec2(140, 50), 'Stop');
+    stopButton.onClick = ()=>  music && music.stop();
+    musicPlayer.addChild(stopButton);
+
+    // progress bar and scrollbar for seeking
+    progressBar = new UIScrollbar(vec2(0, 120), vec2(400, 30), 0);
+    progressBar.disabledColor = RED;
+    progressBar.onChange = ()=> 
+    {
+        // control music seek position
+        const wasPlaying = music && music.isPlaying();
+        if (!music)
+            music = musicSound.playMusic(musicVolume, true, true);
+        progressBar.value = min(progressBar.value, .999); // prevent wrap
+        const seekTime = progressBar.value * musicSound.getDuration();
+        music.start(seekTime);
+        if (!wasPlaying)
+            music.pause();
+    };
+    musicPlayer.addChild(progressBar);
+
+    {
+        // setup drag and drop for audio files
+        function onDragEnter() { musicPlayer.color = RED; };
+        function onDragLeave() { musicPlayer.color = WHITE; };
+        function onDrop(e)
+        {
+            musicPlayer.color = WHITE
+            
+            // get the dropped file
+            const file = e.dataTransfer.files[0];
+            if (!file || !file.type.startsWith('audio'))
+                return;
+                
+            // create new sound from dropped file
+            const fileURL = URL.createObjectURL(file);
+            musicSound = new SoundWave(fileURL, musicVolume);
+            dropZoneText.text = file.name;
+            
+            // reset UI
+            music && music.stop();
+            music = undefined;
+            progressBar.value = 0;
+        }
+        uiSystem.setupDragAndDrop(onDrop, onDragEnter, onDragLeave);
+    }
+}
+
+function gameUpdate()
+{
+    // disable buttons while loading
+    const isDisabled = !musicSound || !musicSound.isLoaded();
+    playButton.disabled  = isDisabled
+    stopButton.disabled  = isDisabled
+    progressBar.disabled = isDisabled
+
+    // update ui
+    if (!musicSound)
+    {
+        // waiting for file
+        progressBar.text = 'No File Loaded';
+    }
+    else if (isDisabled)
+    {
+        // update loading progress
+        const loadingPercent = musicSound.loadedPercent * 100|0;
+        progressBar.text = `Loading: ${loadingPercent}%`;
+    }
+    else
+    {
+        // update ui text
+        const isPlaying = music && music.isPlaying();
+        playButton.text = isPlaying ? 'Pause' : 'Play';
+        const current = music ? music.getCurrentTime() : 0;
+        const duration = musicSound.getDuration();
+        progressBar.text = formatTime(current) +' / '+ formatTime(duration);
+        if (!progressBar.mouseIsHeld)
+            progressBar.value = current / duration;
+    }
+}