<template>
  <div>
    <canvas 
      id="villageTree"
      type="2d"
      :width="systemInfo.windowWidth" 
      :height="HEIGHT" 
      :style="{
        width: systemInfo.windowWidth + 'px',
        height: HEIGHT + 'px',
      }"
    />
  </div>
</template>

<script lang="ts" setup>
import { MiniRender } from '@/components/canvas/MiniRender';
import { UniWeappRender } from '@/components/canvas/UniWeappRender';
import { getCurrentInstance, onBeforeUnmount, onMounted } from 'vue';

const HEIGHT = 250;
const instance = getCurrentInstance();
const systemInfo = uni.getWindowInfo();
const render = new MiniRender.Scene(
  {
    canvas: new UniWeappRender('villageTree', instance),
    width: systemInfo.windowWidth,
    height: HEIGHT,
    backgroundColor: '#000',
  }, 
  async () => {
    const bg = new MiniRender.Sprite();
    bg.src = 'https://xy.wenlvti.net/app_static/images/village/TreeTestBg.jpg';
    bg.x = 0;
    bg.y = 0;
    bg.width = systemInfo.windowWidth;
    bg.height = HEIGHT;

    const flag = new MiniRender.Sprite();
    flag.src = 'https://xy.wenlvti.net/app_static/images/village/TreeTestFlag.png';
    flag.x = 130;
    flag.y = 54;
    flag.width = 80;
    flag.height = 100;

    const text = new MiniRender.Text('动画问题解决啦，就等设计师出图了！', {
      fontSize: 20,
      color: '#000',
      align: 'left',
      wrap: 'wrap',
      maxWidth: 200,
    });
    text.x = 20;
    text.y = 20;

    const robot = new MiniRender.AnimateSprite({
      framerate: 7,
      images: ['https://docs.imengyu.top/assets/character_robot_sheet.png'],
      frames: [
        // 来自 character_robot_sheet.xml（96x128）
        // walk0..walk7
        [0, 512, 96, 128],
        [96, 512, 96, 128],
        [192, 512, 96, 128],
        [288, 512, 96, 128],
        [384, 512, 96, 128],
        [480, 512, 96, 128],
        [576, 512, 96, 128],
        [672, 512, 96, 128],
        // run0..run2
        [576, 256, 96, 128],
        [672, 256, 96, 128],
        [768, 256, 96, 128],
        // attack0..attack2
        [0, 384, 96, 128],
        [96, 384, 96, 128],
        [192, 384, 96, 128],
      ],
      animations: {
        walk: { frames: [0, 1, 2, 3, 4, 5, 6, 7] },
        run: { frames: [8, 9, 10] },
        attack: { frames: [11, 12, 13], loop: false },
      },
      playOnce: false,
      currentAnimation: 'walk',
    });
    robot.x = 40;
    robot.y = 20;

    robot.play();

    render.root
      .add(bg)
      .add(text)
      .add(flag)
      .add(robot);
  },
  (dtMs: number) => {

  }
);

onBeforeUnmount(() => {
  render.dispose();
});
onMounted(async() => {
  await render.init()
  render.start();  
});
</script>