Fixed flipeffect bug.

dist/iwmlib.js

@@ -5038,9 +5038,13 @@
         }
 
         start({ targetCenter = null } = {}) {
+            console.log('start');
+            this.flippable.showFront();
             if (this.preloadBack) {
+                console.log('preloadBack');
                 this.flippable.start({ duration: this.flipDuration, targetCenter });
             } else {
+                console.log('no back preload');
                 let back = this.cardWrapper.querySelector('.back');
                 let flippable = this.flippable;
                 this.backLoader.load(back).then(loader => {
@@ -5248,6 +5252,7 @@
 
         start({ targetCenter = null } = {}) {
             this.bringToFront();
+            console.log('flippable start', this.flipped);
             if (!this.flipped) {
                 this.startX = this.element._gsTransform.x;
                 this.startY = this.element._gsTransform.y;

dist/iwmlib.pixi.js

@@ -8336,9 +8336,13 @@
         }
 
         start({ targetCenter = null } = {}) {
+            console.log('start');
+            this.flippable.showFront();
             if (this.preloadBack) {
+                console.log('preloadBack');
                 this.flippable.start({ duration: this.flipDuration, targetCenter });
             } else {
+                console.log('no back preload');
                 let back = this.cardWrapper.querySelector('.back');
                 let flippable = this.flippable;
                 this.backLoader.load(back).then(loader => {
@@ -8546,6 +8550,7 @@
 
         start({ targetCenter = null } = {}) {
             this.bringToFront();
+            console.log('flippable start', this.flipped);
             if (!this.flipped) {
                 this.startX = this.element._gsTransform.x;
                 this.startY = this.element._gsTransform.y;
@@ -10564,7 +10569,9 @@
             let canvas = globalScatterLoaderCanvas;
             canvas.width = w;
             canvas.height = h;
-            let renderer = new PIXI.Renderer(w, h, {
+            let renderer = new PIXI.Renderer({
+                width: w,
+                height: h,
                 view: canvas,
                 resolution: resolution
             });
@@ -10645,7 +10652,6 @@
                 domFlip.centerAt(center);
                 domFlip.zoom(this.scatter.scale);
                 let target = this.constraintFlipCenter(center, loader);
-                console.log('FlipEffect.startFlip', target, loader);
                 domFlip.start({ targetCenter: target });
             });
         }
@@ -10668,7 +10674,6 @@
         constraintFlipCenter(center, loader) {
             let w = loader.wantedWidth;
             let h = loader.wantedHeight;
-            console.log('constraintFlipCenter', w, h);
             let canvas = app.renderer.view;
             let x = center.x;
             let y = center.y;

lib/flippable.js

@@ -332,9 +332,13 @@ export class DOMFlip {
     }
 
     start({ targetCenter = null } = {}) {
+        console.log('start')
+        this.flippable.showFront()
         if (this.preloadBack) {
+            console.log('preloadBack')
             this.flippable.start({ duration: this.flipDuration, targetCenter })
         } else {
+            console.log('no back preload')
             let back = this.cardWrapper.querySelector('.back')
             let flippable = this.flippable
             this.backLoader.load(back).then(loader => {
@@ -542,6 +546,7 @@ export class DOMFlippable {
 
     start({ targetCenter = null } = {}) {
         this.bringToFront()
+        console.log('flippable start', this.flipped)
         if (!this.flipped) {
             this.startX = this.element._gsTransform.x
             this.startY = this.element._gsTransform.y

lib/pixi/flipeffect.html

@@ -80,13 +80,13 @@
                 setup() {
                     super.setup()
                     let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
-                    PIXI.Loader.shared.add(urls).load(loader => {
+                    PIXI.Loader.shared.add(urls).load((loader, resources) => {
                         // We need a loader because the size of the sprite must be known
                         // when the scatter is defined
                         let x = 30
                         let y = 30
-                        for (let url in loader.resources) {
-                            let sprite = PIXI.Sprite.from(url)
+                        for (const url of urls) {
+                            const sprite = PIXI.Sprite.from(resources[url].texture)
                             sprite.interactive = true
                             let scatter = new DisplayObjectScatter(sprite, this.renderer, {
                                 x: x,

lib/pixi/flipeffect.js

@@ -43,7 +43,9 @@ export class ScatterLoader extends CardLoader {
         let canvas = globalScatterLoaderCanvas
         canvas.width = w
         canvas.height = h
-        let renderer = new PIXI.Renderer(w, h, {
+        let renderer = new PIXI.Renderer({
+            width: w,
+            height: h,
             view: canvas,
             resolution: resolution
         })
@@ -124,7 +126,6 @@ export default class FlipEffect {
             domFlip.centerAt(center)
             domFlip.zoom(this.scatter.scale)
             let target = this.constraintFlipCenter(center, loader)
-            console.log('FlipEffect.startFlip', target, loader)
             domFlip.start({ targetCenter: target })
         })
     }
@@ -147,7 +148,6 @@ export default class FlipEffect {
     constraintFlipCenter(center, loader) {
         let w = loader.wantedWidth
         let h = loader.wantedHeight
-        console.log('constraintFlipCenter', w, h)
         let canvas = app.renderer.view
         let x = center.x
         let y = center.y