<!--
 * @Author: ChenChanghua
 * @Date: 2021-10-13 11:19:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-02-21 14:13:15
 * @Description: file content
-->
<script setup>
import { JsvSpray } from "jsview";
import { ref } from "vue";
import snow from "./assets/snow.png";
import GoldenCoin1 from "./assets/goldencoin1.png";
import GoldenCoin2 from "./assets/goldencoin2.png";
import RedPacket1 from "./assets/redpacket1.png";
import RedPacket2 from "./assets/redpacket2.png";
import Star1 from "./assets/star1.png";
import Star2 from "./assets/star2.png";
import Star3 from "./assets/star3.png";
import Star4 from "./assets/star4.png";
//定义图片url列表
const ImgData = [
  snow,
  GoldenCoin1,
  GoldenCoin2,
  RedPacket1,
  RedPacket2,
  Star1,
  Star2,
  Star3,
  Star4,
];
const sprayOk = {
  type: 0,
  particleNum: 50,
  deltaAngle: 180,
  deltaWidth: 50,
  deltaHeight: 50,
  pointSizeMin: 20,
  pointSizeMax: 30,
  speedMin: 1,
  speedMax: 7,
  lifeMin: 1000,
  lifeMax: 2000,
  accelerateX: 0,
  accelerateY: 0,
  enableFade: true,
  enableShrink: true,
};

const sprayRotate = {
  type: 1,
  particleNum: 100,
  deltaAngle: 0,
  deltaWidth: 0,
  deltaHeight: 50,
  pointSizeMin: 10,
  pointSizeMax: 20,
  speedMin: 5,
  speedMax: 10,
  lifeMin: 1000,
  lifeMax: 1500,
  accelerateX: 0,
  accelerateY: -100,
  particleAddSpeed: 0.1,
  enableFade: true,
  enableShrink: false,
};

const sprayMove = {
  type: 1,
  particleNum: 100,
  deltaAngle: 20,
  deltaWidth: 50,
  deltaHeight: 50,
  pointSizeMin: 10,
  pointSizeMax: 20,
  speedMin: 5,
  speedMax: 10,
  lifeMin: 1000,
  lifeMax: 3000,
  accelerateX: -50,
  accelerateY: -120,
  particleAddSpeed: 0.1,
  enableFade: true,
  enableShrink: true,
};

const sprayCycle = {
  type: 1,
  particleNum: 50,
  deltaAngle: 20,
  deltaWidth: 20,
  deltaHeight: 20,
  pointSizeMin: 30,
  pointSizeMax: 50,
  speedMin: 0,
  speedMax: 0,
  lifeMin: 1000,
  lifeMax: 3000,
  accelerateX: 0,
  accelerateY: 0,
  particleAddSpeed: 0.1,
  enableFade: true,
  enableShrink: false,
  angularVelocityMin: 360,
  angularVelocityMax: 1440,
  alphaMin: 0.5,
  alphaMax: 1,
};

const sprayFall = {
  type: 1,
  particleNum: 200,
  deltaAngle: 0,
  deltaWidth: 200,
  deltaHeight: 0,
  pointSizeMin: 30,
  pointSizeMax: 50,
  speedMin: 0,
  speedMax: 0,
  lifeMin: 4000,
  lifeMax: 6000,
  accelerateX: 0,
  accelerateY: -30,
  particleAddSpeed: 0.1,
  enableFade: false,
  enableShrink: false,
  angularVelocityMin: 360,
  angularVelocityMax: 1440,
  alphaMin: 0.5,
  alphaMax: 1,
};

const okCount = ref(0);

let stopped = false;
const onKeyDown = (ev) => {
  switch (ev.keyCode) {
    case 13:
      okCount.value++;
      return true;
    case 38:
      if (window.JsView) {
        // 目前先只有native支持
        // TODO: wasm版本上线后放开此限制
        stopped ? testRef.value.start() : testRef.value.stop();
        stopped = !stopped;
      }
      return true;
  }
  return false;
};

const s = {
  left: 0,
  top: 140,
  width: 250,
  height: 500,
  color: "#ffffff",
  fontSize: 20,
};

const testRef = ref();
</script>

<template>
  <div class="root">
    <jsv-focus-block
      autoFocus
      :onAction="{
        onKeyDown: onKeyDown,
      }"
    >
      <div :style="{ top: 20, left: 400 }">
        <div
          :style="{
            width: 40,
            height: 40,
            animation: 'cycle 3s linear infinite',
          }"
        >
          <jsv-spray :pointRes="`url(${snow})`" :sprayStyle="sprayCycle" />
        </div>
        <div
          :style="{
            top: 20,
            width: 400,
            height: 100,
            lineHeight: 100,
            textAlign: 'center',
            fontSize: 50,
            color: '#FFFFFF',
          }"
        >
          粒子效果
        </div>
        <div class="describe">
          {{ `#粒子在方形随机生成\n#初速度为0\n#不受外力` }}
        </div>
      </div>

      <div
        :style="{
          left: 0,
          top: 200,
          width: 400,
          height: 600,
          overflow: 'hidden',
        }"
      >
        <div :style="{ top: 150, left: 150 }">
          <div class="spray-ok">
            <div v-if="okCount > 0">
              <jsv-spray
                v-for="item in ImgData"
                :key="okCount"
                :pointRes="`url(${item})`"
                :sprayStyle="sprayOk"
                :ignoreClip="true"
              />
            </div>
          </div>
          <div class="describe">
            {{
              `#摁OK键\n#粒子在方形内生成\n#初速度方向360度随机\n#无外力作用\n#无视clipView`
            }}
          </div>
        </div>
      </div>
      <div
        :style="{
          left: 400,
          top: 200,
          width: 400,
          height: 600,
          overflow: 'hidden',
        }"
      >
        <div :style="{ top: 150, left: 195 }">
          <div class="spray-rotate">
            <jsv-spray
              v-for="item in ImgData"
              :pointRes="`url(${item})`"
              :sprayStyle="sprayRotate"
            />
          </div>
          <div class="describe">
            {{ `#粒子沿长边随机生成\n#初速度沿长边方向\n#受竖直方向的力作用` }}
          </div>
        </div>
      </div>
      <div
        :style="{
          left: 800,
          top: 200,
          width: 400,
          height: 600,
          overflow: 'hidden',
        }"
      >
        <div :style="{ top: 150, left: 150 }">
          <div class="spray-move">
            <jsv-spray
              ref="testRef"
              :pointRes="`url(${snow})`"
              :sprayStyle="sprayMove"
            />
          </div>
          <div class="describe">
            {{
              `#粒子在方形随机生成\n#按上键停止/开始喷射\n#初速度方向为竖直向上方向正负20度内随机\n#受水平方向和竖直方向的力作用`
            }}
          </div>
        </div>
      </div>
    </jsv-focus-block>
  </div>
</template>

<style scoped>
@keyframes move-back-force {
  0% {
    transform: translate3d(0, 0, 0);
  }

  25% {
    transform: translate3d(100, 0, 0);
  }

  50% {
    transform: translate3d(0, 0, 0);
  }

  75% {
    transform: translate3d(100, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rotate {
  from {
    transform: rotate3d(0, 0, 1, 0);
  }

  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes cycle {
  0% {
    transform: translate3d(0, 0, 0);
  }

  40% {
    transform: translate3d(400, 0, 0);
  }

  50% {
    transform: translate3d(400, 100, 0);
  }

  90% {
    transform: translate3d(0, 100, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.root {
  width: 1280;
  height: 720;
  background-color: #334c4c;
}

.spray-ok {
  width: 100;
  height: 100;
  background-color: #00ff00;
}

.spray-rotate {
  width: 10;
  height: 100;
  background-color: #00ff00;
  animation: rotate 3s linear infinite;
}

.spray-move {
  width: 100;
  height: 100;
  background-color: #00ff00;
  animation: move-back-force 10s linear infinite;
}

.spray-cycle {
  width: 40;
  height: 40;
  animation: cycle 3s linear infinite;
}

.describe {
  left: 0;
  top: 140;
  width: 250;
  height: 500;
  color: #ffffff;
  font-size: 20;
}
</style>
