// -*- coding: utf-8-unix -*-
class MatterWorld {
  #engine;

  constructor() {
    const debug = document.querySelector("#debug");
    const coord = document.querySelector("#coordinate");

    const engine = Matter.Engine.create();
    const render = Matter.Render.create({
      element: debug,
      engine: engine,
    });
    this.#engine = engine;

    const ground = Matter.Bodies.rectangle(400, 600, 800, 30, {isStatic: true});

    // mouse操作できるようにする。
    const mouse = Matter.Mouse.create(debug);

    // 普通のaddEventListenerでもいけそー。いけた。
    debug.addEventListener('mousemove', () =>
      coord.innerText=`x: ${mouse.position.x}, y: ${mouse.position.y}`
    );
    // debug.addEventListener('mouseup', () => {
    //     const circle = Matter.Bodies.circle(mouse.position.x, mouse.position.y, 20);
    //     Matter.Composite.add(engine.world, circle);
    // });

    // 配置  第一引数の場所に第二引数のモノを配置する。モノがいっぱいあるときは配列で指定できる。便利!!
    Matter.Composite.add(engine.world, [circle, ground]);

    Matter.Runner.run(engine);
    Matter.Render.run(render);

    //return {engine, render};
  }

  drop(world, piece, x, y) {
    const circle = Matter.Bodies.circle(x, y, piece.radius);
    Matter.Composite.add(world, circle);
  }

  setUpdateEvent() {
    // あれ…？これは…ここで良いのか…?
    Matter.Events.on(engine, 'afterUpdate', () =>
   }
}


window.onload = () => {

  class View {
    #app;
    //#imgs = {};
//  const makeCircle = (fillColor, radius) =>
//        new PIXI.Graphics()
//        .beginFill(fillColor)     // Hex; 0x??????
//        .drawCircle(0, 0, radius)
//        .endFill();
    constructor() {
      #app = new PIXI.Application({
        baackground: '#f2e5a5', // 楽しそうな色!!(わからん)
      });

      document.querySelector("#render").appendChild(app.view);
    }
  
    createPiece(type, x, y) {
      const piece = new PIXI.Sprite.from(type.image); //TODO: 画像キャッシュ
      piece.x = x;
      piece.y = y;
    }
  }


  class Presenter {
    #pieces = [];
    #view;
    #matterWorld;

    constructor(view, materWorld) {
      this.#view = view;
      this.#matterWorld = matterWorld;
    }
 
    drop(piece, x) {
      pieces.push(piece);
      // drop into matter world
      this.#matterWorld.drop(piece, x, DROP_Y);
      // make visible
      //app.stage.add(piece);
    }
  }