Added badge content example to button doctest.

dist/iwmlib.pixi.js

@@ -2569,34 +2569,12 @@
                 }
 
                 const badge = new Badge(opts);
-
-                switch (opts.align) {
-                    case 'left':
-                        badge.x = this.x - badge.width / 2 + opts.offsetLeft;
-                        break
-                    case 'center':
-                        badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft;
-                        break
-                    case 'right':
-                        badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft;
-                }
-
-                switch (opts.verticalAlign) {
-                    case 'top':
-                        badge.y = this.y - badge.height / 2 + opts.offsetTop;
-                        break
-                    case 'middle':
-                        badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop;
-                        break
-                    case 'bottom':
-                        badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop;
-                }
-
                 this.addChild(badge);
-
                 this.badge = badge;
             }
 
+            this.layout();
+
             // set position
             //-----------------
             this.position.set(this.opts.x, this.opts.y);
@@ -2681,6 +2659,40 @@
 
             this.icon = icon;
 
+            // badge
+            //--------------------
+            if (this.badge) {
+
+                this.removeChild(this.badge);
+                const width = this.width;
+                const height = this.height;
+                this.addChild(this.badge);
+
+                const badge = this.badge;
+
+                switch (badge.opts.align) {
+                    case 'left':
+                        badge.x = -badge.width / 2 + badge.opts.offsetLeft;
+                        break
+                    case 'center':
+                        badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft;
+                        break
+                    case 'right':
+                        badge.x = width - badge.width / 2 + badge.opts.offsetLeft;
+                }
+
+                switch (badge.opts.verticalAlign) {
+                    case 'top':
+                        badge.y = -badge.height / 2 + badge.opts.offsetTop;
+                        break
+                    case 'middle':
+                        badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop;
+                        break
+                    case 'bottom':
+                        badge.y = height - badge.height / 2 + badge.opts.offsetTop;
+                }
+            }
+
             // draw
             //-----------------
             this.draw();
@@ -7859,6 +7871,8 @@
 
     DOMScatter.zIndex = 1000;
 
+    /* eslint-disable no-unused-vars */
+
     class CardLoader {
         constructor(
             src,
@@ -7879,7 +7893,7 @@
             this.x = x;
             this.y = y;
             this.scale = scale;
-            this.rotation = 0;
+            this.rotation = rotation;
             this.maxScale = maxScale;
             this.minScale = minScale;
             this.wantedWidth = width;
@@ -7887,12 +7901,6 @@
             this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth;
             this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight;
             this.addedNode = null;
-            console.log({
-                width,
-                height,
-                maxWidth,
-                maxHeight
-            });
         }
 
         unload() {
@@ -8042,7 +8050,6 @@
         }
 
         setupFlippable(flippable, loader) {
-            console.log('setupFlippable', loader.wantedWidth);
             flippable.wantedWidth = loader.wantedWidth;
             flippable.wantedHeight = loader.wantedHeight;
             flippable.wantedScale = loader.scale;
@@ -8052,7 +8059,6 @@
         }
 
         start({ targetCenter = null } = {}) {
-            console.log('DOMFlip.start', targetCenter);
             if (this.preloadBack) {
                 this.flippable.start({ duration: this.flipDuration, targetCenter });
             } else {
@@ -8202,7 +8208,6 @@
 
         clickInfo() {
             this.bringToFront();
-            console.log('clickInfo');
             this.infoBtn.click();
         }
 
@@ -8229,6 +8234,7 @@
             let startScale = this.element._gsTransform.scaleX;
             let w = this.element.style.width;
             let h = this.element.style.height;
+            // eslint-disable-next-line no-console
             console.log(info, startX, startY, startAngle, startScale, w, h);
         }
 
@@ -8298,14 +8304,12 @@
             let y = this.flipped ? yy : this.startY;
 
             let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null;
-            console.log('start', this.flipDuration);
             TweenLite.to(this.card, this.flipDuration, {
                 rotationY: targetY,
                 ease: Power1.easeOut,
                 transformOrigin: '50% 50%',
                 onUpdate,
                 onComplete: e => {
-                    console.log('start end', this.flipDuration);
                     if (this.flipped) {
                         //this.hide(this.front)
                         this.enable(this.backBtn);
@@ -8336,8 +8340,6 @@
                 },
                 force3D: true
             });
-
-            console.log('start 2', this.wantedWidth, this.startWidth, { w, h });
             // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
             TweenLite.to(this.element, this.flipDuration / 2, {
                 scale: targetScale,