const CORE = {
  setup: function(w, h){
    this.engine = new Engine(w, h);
  }
}

class Engine {
  constructor(w, h){
    const canvas = document.getElementById("canvas");
    canvas.width = w;
    canvas.height = h;
    canvas.style.backgroundColor = "#000000";
    CORE.canvas = canvas;
    CORE.ctx = canvas.getContext("2d");
    
    window.addEventListener('resize', () => {this.resizeCanvas();});
    this.resizeCanvas();  
  }
  _requestFrame(){
    this.update();
    requestAnimationFrame(()=>{this._requestFrame();});
  }
  resizeCanvas(){
    const canvas = CORE.canvas; 
    const canvasHeightRatio = canvas.height / canvas.width;
    const windowHeightRatio = window.innerHeight / window.innerWidth;
    
    let width;
    let height;
    if (windowHeightRatio > canvasHeightRatio) {
      width = window.innerWidth;
      height = window.innerWidth * (canvas.height / canvas.width);
    } else {
      width = window.innerHeight * (canvas.width / canvas.height);
      height = window.innerHeight;
    }
  
    canvas.style.width  = `${width}px`;
    canvas.style.height = `${height}px`;
    CORE.resolutionRatio = height / canvas.height;
  }
  preload(data){
    const length = Object.keys(data).length;
    let count = 0;
    const assets = [];
    for(let key in data) {
      assets[key] = new Image();
      assets[key].src = data[key];
      assets[key].onload = ()=>{
        if(++count == length){
          this.onload();
        }
      }
    }
    CORE.assets = assets;
  }
  clearCanvas(){//画面をクリア(前の画面描画を削除)
    CORE.ctx.clearRect(0, 0, CORE.canvas.width, CORE.canvas.height);
  }
  start(){
    this.init();
    requestAnimationFrame(()=>{this._requestFrame();});
  }
  onload(){}
  init(){}
  update(){}
}
/*********************** */
class Sprite {
  constructor(w, h){
    this.x = 0;
    this.y = 0;
    this.width = w;
    this.height = h;
    this.image;
  }
  draw(){
    CORE.ctx.drawImage(this.image, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);
  }
  update(){
  }
}
/****************** */


const CANVAS_HEIGHT = 900;
const CANVAS_WIDTH = 900;
let logo;
window.onload = function(){
  const assets = {
    "logo": "https://dl.dropbox.com/s/5tietjxglugrbpu/logo.png",
  }
  CORE.setup(CANVAS_WIDTH, CANVAS_HEIGHT);  
  
  CORE.engine.preload(assets);
  CORE.engine.onload = function(){
    CORE.engine.start();
  }
  CORE.engine.init = () => {
    logo = new Logo(150, 150);
    logo.x = 300;
  }
  CORE.engine.update = () => {
    CORE.engine.clearCanvas();
    logo.update();
  }
}

class Logo extends Sprite {
  constructor(w, h){
    super(w, h);
    this.vy = 2;
    this.vx = 2;
    this.image = CORE.assets['logo'];
  }
  update(){
    this.y += this.vy;
    if(this.y+this.height > CANVAS_HEIGHT || this.y < 0){
      this.vy *= -1;
    }
    this.x += this.vx;
    if(this.x+this.width > CANVAS_WIDTH || this.x < 0){
      this.vx *= -1;
    }
    this.draw();
  }
}