// グローバルに展開
phina.globalize();
// アセット
var ASSETS = {
  // 画像
  image: {
    'moukon': 'https://82mou.github.io/src/images/moukon.png',
  },
  sound: {
    'sound': 'https://82mou.github.io/src/sound/cork-plug1.mp3',
  },
};

/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // コンストラクタ
  init: function(option) {
    _this = this; // thisを保存
    this.pullFlg = false; // 抜いたかどうかのフラグ
    
    // 親クラス初期化
    this.superInit(option);
    
    // CircleShapeを作成
    let circle = CircleShape({
      radius: 1000,
      fill: "#FFD8BD",
      stroke: 0
    }).addChildTo(this).setPosition(this.gridX.center(),this.gridY.center(15));
   
    // スプライト画像を作成
    this.sprite = Sprite('moukon').addChildTo(this);
    
    // スプライト画像の初期位置設定
    this.sprite.x = this.gridX.center();
    this.sprite.y = this.gridY.center(-1.5);
    this.sprite.width = 80;
    this.sprite.height = 204;
    this.sprite.backgroundColor = 'red';
    
    // スプライト画像の初期設定を保存
    this.firstInitialPositionX = this.sprite.x;
    this.firstInitialPositionY = this.sprite.y;
    this.firstHeight = this.sprite.height;
    
    // スプライト画像の原点を左上に設定
    this.sprite.origin.set(0.5, 0);
    
    // マスクを作成
    let mask = RectangleShape({
        fill: '#FFD8BD',
        stroke: 0,
        width: 120,
        height: 300
    }).addChildTo(this).setPosition(this.gridX.center(),this.gridY.center(2));
    
    // スプライト画像をドラッグ可能にする
    this.sprite.draggable;

    // ドラッグ開始時
    this.sprite.ondragstart = () => {
      
      // ドラッグで中心より左右にずれたら中心に戻す
      this.sprite.x = this.gridX.center();
      
      // ドラッグで中心より下にずれたら中心に戻す
      if(this.sprite.y > this.gridY.center()) {
        this.sprite.y = this.gridY.center();
      }
    };
    // ドラッグ中
    this.sprite.ondrag = () => {
      
      // ドラッグで中心より左右にずれたら中心に戻す
      this.sprite.x = this.gridX.center();
      
      // ドラッグで中心より下にずれたら中心に戻す
      if(this.sprite.y > this.gridY.center()) {
        this.sprite.y = this.gridY.center();
      }
      
      // spriteの移動量を保存
      this.afterPositionX = this.firstInitialPositionX - this.sprite.x;
      this.afterPositionY = this.firstInitialPositionY - this.sprite.y;
      
      // spriteの移動量 + 補正値でドラッグ後の高さを保存
      this.afterHeight = this.firstHeight + (this.afterPositionY + 100);
      
      // spriteの移動後の高さが元の高さより小くならないように設定
      if(this.afterHeight < this.firstHeight) {
        this.sprite.height = this.firstHeight;
      } else {
        this.sprite.height = this.afterHeight;
      }
      
      // 一定数毛を上にドラッグしたら発火
      if(!this.pullFlg && this.sprite.y < 150) {
        this.pullFlg = true;
        
        // spriteのheightを1.5秒かけて元に戻す
        this.sprite.tweener.to({height: _this.firstHeight}, 1500, 'easeOutElastic') 
        
        // 音再生
        SoundManager.play('sound');
        setTimeout(() => {
          document.querySelector('#js-modal-bg').classList.remove('dn');
        },700);
      }
    };
    // ドラッグ終了時
    this.sprite.ondragend = () => {
      
      // ドラッグで中心より左右にずれたら中心に戻す
      this.sprite.x = this.gridX.center();
      
      // ドラッグで中心より下にずれたら中心に戻す
      if(this.sprite.y > this.gridY.center()) {
         this.sprite.y = this.gridY.center();
      }
    };
    
    // codepenをリセット
    document.querySelector('#js-btn').addEventListener('click', () => {
      history.go(0);
    });
  }
});

/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
    width: 2000,
    height: 1000,
    // アセット読み込み
    assets: ASSETS,
  })
  // 実行
  app.run();
});