Responsive flippers using proportions

[abepetrillo]

Forgive me if I'm doing something stupid, Just getting to grips with famo.us!

I've been using flippers to make a solitaire game with great success, but the next challenge is to make the flippers, or cards responsive. To do this I'm implementing the proportions modifier:

// create the main context
    var mainContext = Engine.createContext();
    mainContext.setPerspective(5000);

    var faceup = function(suit, number){
      return new Surface({
        content: '<img src="/assets/images/cards/'+suit+number+'.jpeg" />',
        overFlow: 'hidden',
        classes: ['double-sided']
      });
    }

    var facedown = function() {
      return  new Surface({
        content: '<img src="/assets/images/cards/back.jpeg" />',
        overFlow: 'hidden',
        classes: ['double-sided']
      });
    }

    flipper = new Flipper();

    flipper.setFront(faceup('club', '2'))
    flipper.setBack(facedown())

    var Mod = new Modifier({
      origin: [0.5,0.5],
      align: [0.5,0.5]
    });

    var sizeMod = new Modifier({
      proportions: [0.1, 0.25]
    });

    mainContext.add(Mod).add(sizeMod).add(flipper)

This ends up messing with the positions of the surfaces within the flipper, and you get this:

Instead of seeing one side of the card. In order to get the expected outcome, I have to remove the sizeMod modifier, and specify a specific pixel size for each of the surfaces. Any idea what I'm doing wrong, or is this a bug in Flipper?

[talves]

Change to ImageSurface

var faceup = function(suit, number){
  return new ImageSurface({
    content: '/assets/images/cards/'+suit+number+'.jpeg'
  });
}

var facedown = function() {
  return  new ImageSurface({
    content: '<img src="/assets/images/cards/back.jpeg" />'
  });
}

Also change your Modifier's around and make sure you have an initial size.

var Mod = new Modifier({
  origin: [0.5,0.5],
  align: [0.5,0.5],
});

var sizeMod = new Modifier({
  size: [180, 300],
  origin: [0.5,0.5],
  align: [0.5,0.5],
  proportions: [1,1]
});

mainContext.add(sizeMod).add(Mod).add(flipper)

[abepetrillo]

This seems to replace one problem with another. When you switch the modifiers, Mod seems to be ignored.

[talves]

Not seeing that problem, but have not tested fully.

[abepetrillo]

Ah, I think the align values have to be much higher, relative to the proportion size modifier perhaps? I'll play around with the numbers. Thanks @talves :+1: Does this mean we can close the bug? Or should the flipper be immune to what order the modifiers are in?

[talves]

I would close, because there will probably be better handling in the MixedMode release of Famo.us.

Maybe give the devs a chance to chime in and let them decide :wink: