@shijiu/jsview-vue 0.9.766 → 0.9.804

package/samples/FocusBlockDemos/ProgressiveFocusControl/BaseBlock.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { shallowRef } from "vue";
+import { DefaultKeyCodeMap } from "jsview"
+
+const props = defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default: {},
+  },
+  onLeftRight: Function,
+});
+
+const hasFocused = shallowRef(false);
+
+const onFocusFunc = () => {
+  console.log(`子节点 ${props.name} 获得焦点`);
+  hasFocused.value = true;
+};
+
+const onBlurFunc = () => {
+  console.log(`子节点 ${props.name} 失去焦点`);
+  hasFocused.value = false;
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`子节点 ${props.name} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`子节点 ${props.name} 收到回流按键 code=${ev.keyCode}`);
+  
+  // 将按键转化为left/right指令
+  let keyConsumed = true;
+  switch(ev.keyCode) {
+    case DefaultKeyCodeMap.Left:
+      props.onLeftRight?.("left");
+      break;
+    case DefaultKeyCodeMap.Right:
+      props.onLeftRight?.("right");
+      break;
+    default:
+      keyConsumed = false;
+  }
+
+  if (keyConsumed) {
+    console.log(`子节点 ${props.name} 截断按键回流处理`)
+  }
+  return keyConsumed;
+}
+
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+  >
+    <div
+      :style="{
+        ...props.style,
+        width: 100,
+        height: 100,
+        fontSize: 35,
+        backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
+      }"
+    >
+      {{ props.name }}
+    </div>
+  </jsv-focus-block>
+</template>

package/samples/FocusBlockDemos/ProgressiveFocusControl/DownPlaneBlock.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { inject } from "vue" 
+import { useFocusHub } from "jsview"
+import BaseBlock from "./BaseBlock.vue";
+import FocusNames from "./FocusNamesDefine"
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.Box1, FocusNames.Box2, FocusNames.Box3];
+let globalColumn = inject("globalColumn"); // 从App获取的全局coloumn信息
+let lastIndex = 0;
+let planeName = FocusNames.DownPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 让子焦点获焦
+  lastIndex = globalColumn.index; // 同步全局节点信息
+  focusHub.setFocus(ChildBlockNames[lastIndex]);
+};
+
+const onBlurFunc = () => {
+  console.log(`父节点 ${planeName} 失去焦点`);
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到回流按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const leftRightFunc = (action)=>{
+  let indexChanged = false;
+
+  if (action == "left") {
+    if (lastIndex >= 0) {
+      lastIndex--;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+
+  if (indexChanged) {
+    // 回传lastIndex columen, 以方便Plane切换后保持column
+    globalColumn.index = lastIndex;
+  }
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="planeName"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+    :style="props.style"
+  >
+    <base-block :name="ChildBlockNames[0]" :style="{left:150 * 1}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[1]" :style="{left:150 * 2}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[2]" :style="{left:150 * 3}" :onLeftRight="leftRightFunc" />
+  </jsv-focus-block>
+</template>

package/samples/FocusBlockDemos/ProgressiveFocusControl/FocusNamesDefine.js

@@ -0,0 +1,12 @@
+const FocusNames = {
+    UpPlane: "UpPlane",
+    DownPlane: "DownPlane",
+    BoxA: "A",
+    BoxB: "B",
+    BoxC: "C",
+    Box1: "1",
+    Box2: "2",
+    Box3: "3",
+}
+
+export default FocusNames;

package/samples/FocusBlockDemos/ProgressiveFocusControl/UpPlaneBlock.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { inject } from "vue" 
+import { useFocusHub } from "jsview"
+import BaseBlock from "./BaseBlock.vue";
+import FocusNames from "./FocusNamesDefine"
+
+const props = defineProps({
+  style: {
+    type: Object,
+    default: {},
+  },
+});
+
+let focusHub = useFocusHub();
+let ChildBlockNames = [FocusNames.BoxA, FocusNames.BoxB, FocusNames.BoxC];
+let globalColumn = inject("globalColumn"); // 从App获取的全局coloumn信息
+let lastIndex = 0;
+let planeName = FocusNames.UpPlane;
+
+const onFocusFunc = () => {
+  console.log(`父节点 ${planeName} 获得焦点`);
+
+  // 让子焦点获焦
+  lastIndex = globalColumn.index; // 同步全局节点信息
+  focusHub.setFocus(ChildBlockNames[lastIndex]);
+};
+
+const onBlurFunc = () => {
+  console.log(`父节点 ${planeName} 失去焦点`);
+};
+
+const onDispatchKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到下发按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const onKeyDownFunc = (ev)=>{
+  console.log(`父节点 ${planeName} 收到回流按键 code=${ev.keyCode}`);
+  return false;
+}
+
+const leftRightFunc = (action)=>{
+  let indexChanged = false;
+
+  if (action == "left") {
+    if (lastIndex >= 0) {
+      lastIndex--;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  } else if (action = "right") {
+    if (lastIndex < ChildBlockNames.length - 1) {
+      lastIndex++;
+      indexChanged = true;
+      console.log(`父节点 ${planeName} 收到left指令 切换子节点到${ChildBlockNames[lastIndex]}`);
+      focusHub.setFocus(ChildBlockNames[lastIndex]);
+    }
+  }
+
+  if (indexChanged) {
+    // 回传lastIndex columen, 以方便Plane切换后保持column
+    globalColumn.index = lastIndex;
+  }
+}
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="planeName"
+    :onAction="{
+      onDispatchKeyDown: onDispatchKeyDownFunc,
+      onKeyDown: onKeyDownFunc,
+      onFocus: onFocusFunc,
+      onBlur: onBlurFunc,
+    }"
+    :style="props.style"
+  >
+    <base-block :name="ChildBlockNames[0]" :style="{left:150 * 1}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[1]" :style="{left:150 * 2}" :onLeftRight="leftRightFunc" />
+    <base-block :name="ChildBlockNames[2]" :style="{left:150 * 3}" :onLeftRight="leftRightFunc" />
+  </jsv-focus-block>
+</template>

package/samples/GiftRain/App.vue

@@ -0,0 +1,248 @@
+<template>
+  <jsv-focus-block autoFocus ref="App" :onAction="actionDefines">
+    <div
+      :style="{ width: 1920, height: 1080, overflow: 'hidden', transform: 'scale3d(0.67,0.67,1)', left: -220 * 1.5 + 8, top: -170 - 8 }">
+      <JsvPreload :preloadList="preload_info"></JsvPreload>
+      <div
+        :style="{ backgroundImage: bg, width: 1920, height: 1080, overflow: 'hidden' }">
+        <Score :score="score"></Score>
+        <JsvActorMove key="JsvSpriteTranslate" :style="{
+          top: 476 * 1.5,
+          left: 220 * 1.5,
+          width: 194 * 1.5,
+          height: 244 * 1.5,
+        }" :control=_TranslateControl>
+          <div key="kimi" :style="{
+            top: 0,
+            left: 0,
+            width: 194 * 1.5,
+            height: 244 * 1.5,
+            backgroundImage: kimi,
+          }">
+            <div key="MoneyBag" ref="moneyBag" :style="{
+              top: 22 * 1.3,
+              left: 7,
+              width: 180 * 1.5,
+              height: 100 * 1.5,
+              backgroundColor: 'rgba(0,0,0,0)'
+            }"></div>
+            <div :style="{
+              top: 0,
+              left: 40 * 1.5,
+              width: 81 * 1.5,
+              height: 74 * 1.5,
+              visibility: scoreMinAnim !== null ? 'visible' : 'hidden',
+              backgroundImage: min_score_image,
+              animation: scoreMinAnim,
+            }" @animationend=_ScoreMinAnimationEnd />
+            <div :style="{
+              top: 0,
+              left: 40 * 1.5,
+              width: 81 * 1.5,
+              height: 74 * 1.5,
+              visibility: scoreAddAnim !== null ? 'visible' : 'hidden',
+              backgroundImage: add_score_image,
+              animation: scoreAddAnim,
+            }" @animationend=_ScoreAddAnimationEnd />
+          </div>
+        </JsvActorMove>
+        <RedPacket :MoneyBag="moneyBag" :onImpactTracer="_onImpactTracer" :_ScoreMinAnimationEnd="_ScoreMinAnimationEnd"
+          :_ScoreAddAnimationEnd="_ScoreAddAnimationEnd" />
+
+      </div>
+      <!-- 音频 -->
+      <JsvAudio key="AudioBg" :src="_AudioBgUrl" :loop="true" :onRef="onRef1" :onLoad="audioOnLoad" />
+
+      <JsvAudio v-if="!_DisableEffectSound" :onRef="onRef2" :loop="true" />
+
+
+    </div>
+  </jsv-focus-block>
+</template>
+<script setup>
+/* eslint-disable */
+import { JsvFocusBlock, JsvActorMove, JsvActorMoveControl, jJsvRuntimeBridge, JsvPreload, buildPreloadInfo } from "jsview";
+import JsvAudio, { globalLoadJsvAudioPlugin } from "jsview/utils/JsViewPlugin/JsvAudio"
+import { shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import Score from "./components/Score.vue";
+import RedPacket from "./components/RedPacket.vue";
+import Sound from "./common/Sound.js"
+//音频Sound
+const MySound = new Sound()
+//加载音频插件  jsview/utils/JsViewPlugin/JsvAudio
+globalLoadJsvAudioPlugin((status) => {
+  console.log("Audio plugin load status", status);
+});
+//预加载信息
+const kimi_normal = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png';
+const kimi_smile = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png';
+const kimi_boom = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png';
+const red_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/red.png';
+const bigRed_packet = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bigred.png'
+const boom_image = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/boom.png'
+const bg = 'http://oss.image.qcast.cn/demo_images/red_packet_rain/bg.jpg'
+const preload_info = [
+  buildPreloadInfo(kimi_normal),
+  buildPreloadInfo(kimi_smile),
+  buildPreloadInfo(kimi_boom),
+  buildPreloadInfo(red_packet),
+  buildPreloadInfo(bigRed_packet),
+  buildPreloadInfo(boom_image),
+  buildPreloadInfo(bg)
+];
+//定义不需要响应式的变量
+let _CurrentRain = null;
+//音频ref
+let _Audio = null;
+let _AudioBgUrl = "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewAudio/MiniGameBackgroundMusic-redpack.mp3";
+//背景音频ref
+let _BgAudio = null;
+let _IsRunning = false;
+let _DisableEffectSound = true;
+let _TranslateControl = new JsvActorMoveControl()
+//定义需要响应式的变量
+let kimi = shallowRef("http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png")
+let score = shallowRef(0)
+let min_score_image = shallowRef(null)
+let add_score_image = shallowRef(null)
+let scoreAddAnim = shallowRef(null)
+let scoreMinAnim = shallowRef(null)
+let moneyBag = shallowRef(null)
+
+//定义扣分结束动画
+const _ScoreAddAnimationEnd = (event) => {
+  // event.stopPropagation();
+  scoreAddAnim.value = null
+  console.log(" _ScoreAddAnimationEnd event:", event);
+}
+//定义加分结束动画
+const _ScoreMinAnimationEnd = (event) => {
+  // event.stopPropagation();
+  scoreMinAnim.value = null
+  console.log(" _ScoreMinAnimationEnd event:", event);
+}
+
+//定义碰撞函数
+const _onImpactTracer = (rain) => {
+  if (rain !== null && rain !== _CurrentRain) {
+    _CurrentRain = rain;
+    console.log("_onImpactTracer rain:", rain);
+    switch (rain.type) {
+      case 0:
+        scoreAddAnim.value = "scoreUp 0.2s";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_normal.png";
+        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add1.png";
+        score.value += 1;
+        MySound.playGetSound()
+        break;
+      case 1:
+        scoreAddAnim.value = "scoreUp 0.2s";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_smile.png";
+        add_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/add5.png";
+        MySound.playGetSound()
+        score.value += 5;
+        break;
+      case 2:
+        scoreMinAnim.value = "scoreUp 0.2s";
+        min_score_image.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/min1.png";
+        kimi.value = "http://oss.image.qcast.cn/demo_images/red_packet_rain/kimi_boom.png";
+        score.value -= 1;
+        MySound.playBoomSound()
+        if (score.value < 0) {
+          score.value = 0;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+}
+//键盘松开时应该暂停动作
+const onKeyUp = (ev) => {
+  console.log("onKeyUp in : ", ev);
+  if (ev.keyCode === 37 || ev.keyCode === 39) {
+    _IsRunning = false;
+    _TranslateControl.pause((x, y) => {
+      console.log(`_TranslateControl pause x:${x}`);
+    });
+    return true;
+  }
+
+  return false;
+}
+const router = useRouter();
+//定义键盘按下
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1)
+  } else if (ev.keyCode === 37) {
+    console.log(" ev.keyCode === 37 ");
+    if (!_IsRunning) {
+      _TranslateControl.moveToX(0, 400 * 1.5, null);
+      _IsRunning = true;
+    }
+  } else if (ev.keyCode === 39) {
+    console.log(" ev.keyCode === 39");
+    if (!_IsRunning) {
+      _TranslateControl.moveToX((1280 - 220 - 194) * 1.5, 400 * 1.5, null);
+      _IsRunning = true;
+    }
+  }
+  return true;
+}
+
+//注册
+const actionDefines = {
+  onKeyDown,
+  onKeyUp
+}
+//定义音频回调
+const onRef1 = (ref) => {
+  _BgAudio = ref
+}
+const onRef2 = (ref) => {
+  _Audio = ref
+}
+const audioOnLoad = () => {
+  console.log("audio on load")
+  _BgAudio.play()
+}
+onMounted(() => {
+  //初始化音效
+  MySound.initSound();
+  //摘画布
+  jJsvRuntimeBridge.notifyPageLoaded();
+  window.BgAudio = _BgAudio;
+})
+
+//卸载之前摧毁音效
+onBeforeUnmount(() => {
+  MySound.destroy();
+});
+</script>
+  
+<style scoped>
+@keyframes scoreUp {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, -20, 0);
+  }
+}
+
+@keyframes rainDown {
+  from {
+    transform: translate3d(0, -780, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+;
+;
+</style>

package/samples/GiftRain/common/Sound.js

@@ -0,0 +1,48 @@
+import { JsvSoundPool } from "jsview";
+import getAudio from "../audio/get.mp3";
+import boomAudio from "../audio/boom.mp3";
+
+class Sound {
+    initSound() {
+       this.soundPool = new JsvSoundPool(10);
+       this.soundPool.request(
+           `url(${getAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load get audio ", state)
+               if (state === 0) {
+                   Sound._AudioController1 = audioController;
+               }
+           }
+       );
+       this.soundPool.request(
+           `url(${boomAudio})`,
+           null,
+           1,
+           (state, audioController) => {
+               console.log("load boom audio ", state)
+               if (state === 0) {
+                   Sound._AudioController2 = audioController;
+               }
+           }
+       );
+   }
+
+    playGetSound() {
+       if (Sound._AudioController1) {
+           Sound._AudioController1.play();
+       }
+   }
+
+   playBoomSound() {
+       if (Sound._AudioController2) {
+           Sound._AudioController2.play();
+       }
+   }
+   destroy () {
+       this.soundPool.destroy()
+   }
+
+}
+export default Sound ;