const cubism2Model = "live2d/model.json";
let model2;
(async function main() {
  try {
    await loadScript("https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js");
    await loadScript("https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js");
    await loadScript("https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js");
    await loadScript("https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js");


    const app = new PIXI.Application({
      view: document.getElementById("canvas"),
      autoStart: true,
      resizeTo: window,
      backgroundAlpha: 0
    });

    function moveModel() {
      model2.x = app.screen.width * 0.75 - model2.width / 2;
      model2.y = app.screen.height / 2 - model2.height / 3;
    }

    model2 = await PIXI.live2d.Live2DModel.from(cubism2Model);
    app.stage.addChild(model2);
    model2.scale.set(0.4);

    model2.interactive = true;

    model2.on('mouseover', () => {
        document.body.style.cursor = 'pointer';
    });
    model2.on('mouseout', () => {
        document.body.style.cursor = 'default';
    });

    model2.on('pointerdown', async () => {
	model2.motion('motion', 3);
	model2.expression(2);
    });
    moveModel();
    window.addEventListener('resize', () => {
      app.renderer.resize(window.innerWidth, window.innerHeight);
      moveModel();
    });


  } catch (error) {
    console.error("Error loading resources or initializing:", error);
  }
})();



async function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}