<!--
 * @Author: ChenChanghua
 * @Date: 2021-10-20 18:27:25
 * @LastEditors: ChenChanghua
 * @LastEditTime: 2021-10-21 14:01:59
 * @Description: file content
-->
<script setup>
import { JsvActorMoveControl, JsvActorMove } from "jsview";
import { shallowRef } from "vue";

const props = defineProps({
  name: String,
});

let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
let moveControl = new JsvActorMoveControl(); // 平移运动体控制器

let direction = shallowRef(1);

function onKeyDown(ev) {
  switch (ev.keyCode) {
    case 13:
      direction.value = -direction.value;

      moveControl.moveToX(195 * direction.value, 250, (x, y) => {
        console.log(`Move end with x=${x} y=${y}`);
      });
      throwControl.throwAlongY(
        -500,
        750,
        { type: "catch", position: 0, direction: 1 },
        (x, y) => {
          console.log(`Throw end with x=${x} y=${y}`);
        },
        () => {
          console.log("Get to the pole...");
        }
      );
      return true;
  }
  return false;
}
</script>

<template>
  <jsv-focus-block
    ref="focusNode"
    :name="name"
    autoFocus
    :onAction="{
      onKeyDown: onKeyDown,
    }"
  >
    <div
      key="sample1"
      class="detail-font"
      :style="{ top: 150, left: 425, width: 430, height: 40 }"
    >
      抛物线运动
    </div>
    <div
      key="DirectText"
      class="font"
      :style="{ top: 250, left: 425, width: 430, height: 40 }"
    >
      {{ `当前方向:${direction > 0 ? "右" : "左"}` }}
    </div>
    <div :style="{ top: 590, left: 625 }">
      <jsv-actor-move key="move" :control="moveControl">
        <jsv-actor-move key="throw" :control="throwControl">
          <div
            :style="{ backgroundColor: '#00FF00', width: 30, height: 30 }"
          ></div>
        </jsv-actor-move>
      </jsv-actor-move>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.font {
  font-size: 32;
  color: #73665c;
  line-height: 40;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.detail-font {
  font-size: 32;
  color: #f7f7eb;
  line-height: 30;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
</style>
