shoot-miniprograms/src/components/ShootProgress.vue

<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPESV2 } from "@/constants";
import { getDirectionText } from "@/util";

import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);

const props = defineProps({
  show: {
    type: Boolean,
    default: true,
  },
  start: {
    type: Boolean,
    default: false,
  },
  tips: {
    type: String,
    default: "",
  },
  total: {
    type: Number,
    default: 120,
  },
  currentRound: {
    type: Number,
    default: 0,
  },
  battleId: {
    type: String,
    default: "",
  },
  melee: {
    type: Boolean,
    default: false,
  },
  onStop: {
    type: Function,
    default: () => {},
  },
});

const barColor = ref("#fed847");
const remain = ref(props.total);
const timer = ref(null);
const sound = ref(true);
const currentRound = ref(props.currentRound);
const currentRoundEnded = ref(false);
const ended = ref(false);
const halfTime = ref(false);
const wait = ref(0);
const transitionStyle = ref("all 1s linear");

watch(
  () => props.tips,
  (newVal) => {
    let key = "";
    if (newVal.includes("红队")) key = "请红方射箭";
    if (newVal.includes("蓝队")) key = "请蓝方射箭";
    if (key) {
      if (currentRoundEnded.value) {
        currentRound.value += 1;
        currentRoundEnded.value = false;
        if (currentRound.value === 1) audioManager.play("第一轮");
        if (currentRound.value === 2) audioManager.play("第二轮");
        if (currentRound.value === 3) audioManager.play("第三轮");
        if (currentRound.value === 4) audioManager.play("第四轮");
        if (currentRound.value === 5) audioManager.play("第五轮");
        setTimeout(() => {
          audioManager.play(key);
        }, 1000);
      } else {
        audioManager.play(key);
      }
    }
  }
);

const resetTimer = (count) => {
  if (timer.value) clearInterval(timer.value);
  const newVal = Math.round(count);
  
  // 如果剩余时间增加（如重置），瞬间变化无动画
  if (newVal >= remain.value) {
    transitionStyle.value = "none";
    remain.value = newVal;
    setTimeout(() => {
      transitionStyle.value = "all 1s linear";
    }, 50);
  } else {
    remain.value = newVal;
  }
  
  if (remain.value > 0) {
    timer.value = setInterval(() => {
      if (remain.value === 0) {
        clearInterval(timer.value);
        props.onStop();
      }
      if (remain.value > 0) remain.value--;
    }, 1000);
  }
};

watch(
  () => props.start,
  (newVal) => {
    if (newVal) {
      resetTimer(props.total);
    } else {
      remain.value = 0;
      clearInterval(timer.value);
    }
  },
  {
    immediate: true,
  }
);

const tipContent = computed(() => {
  if (halfTime.value) {
    return props.battleId ? "中场休息" : `中场休息(${wait.value}秒)`;
  }
  return props.start && remain.value === 0 ? "时间到！" : props.tips;
});

const updateSound = () => {
  sound.value = !sound.value;
  audioManager.setMuted(!sound.value);
};

async function onReceiveMessage(msg) {
  if (Array.isArray(msg)) return;
  if (msg.type === MESSAGETYPESV2.BattleStart) {
    halfTime.value = false;
    audioManager.play("比赛开始");
  } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
    audioManager.play("比赛结束", false);
  } else if (msg.type === MESSAGETYPESV2.ShootResult) {
    let arrow = {};
    if (msg.details && Array.isArray(msg.details)) {
      arrow = msg.details[msg.details.length - 1];
    } else {
      if (msg.shootData.playerId !== user.value.id) return;
      if (msg.shootData) arrow = msg.shootData;
    }
    let key = [];
    key.push(arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}环` : "未上靶");
    if (arrow.angle !== null)
      key.push(`向${getDirectionText(arrow.angle)}调整`);
    audioManager.play(key, false);
  } else if (msg.type === MESSAGETYPESV2.HalfRest) {
    halfTime.value = true;
    audioManager.play("中场休息");
  } else if (msg.type === MESSAGETYPESV2.InvalidShot) {
    uni.showToast({
      title: "距离不足，无效",
      icon: "none",
    });
    audioManager.play("射击无效");
  }
}

const playSound = (key) => {
  audioManager.play(key);
};

onMounted(() => {
  uni.$on("update-remain", resetTimer);
  uni.$on("socket-inbox", onReceiveMessage);
  uni.$on("play-sound", playSound);
});

onBeforeUnmount(() => {
  uni.$off("update-remain", resetTimer);
  uni.$off("socket-inbox", onReceiveMessage);
  uni.$off("play-sound", playSound);
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container" :style="{ display: show ? 'block' : 'none' }">
    <view>
      <image src="../static/shooter.png" mode="widthFix" />
      <text>{{ tipContent }}</text>
      <button hover-class="none" @click="updateSound">
        <image
          :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
          mode="widthFix"
        />
      </button>
    </view>
    <view>
      <view
        :style="{
          width: `${(remain / total) * 100}%`,
          backgroundColor: barColor,
          right: tips.includes('红队') ? 0 : 'unset',
          transition: transitionStyle,
        }"
      />
      <text>剩余{{ remain }}秒</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
}
.container > view:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1;
  transform: translateX(-10px);
}
.container > view:first-child > image:first-child {
  width: 20vw;
  transform: translateX(10px);
}
.container > view:first-child > text {
  color: #fed847;
  font-size: 18px;
  transform: translateY(-10px) translateX(-10px);
}
.container > view:first-child > button:last-child {
  overflow: visible;
}
.container > view:first-child > button:last-child > image {
  width: 40px;
  transform: translateX(10px) translateY(-10px);
}
.container > view:last-child {
  z-index: -1;
  width: calc(100% - 30px);
  margin: 0 15px;
  text-align: center;
  background-color: #ffffff80;
  border-radius: 20px;
  margin-top: -16px;
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  position: relative;
  overflow: hidden;
}
.container > view:last-child > view {
  position: absolute;
  height: 15px;
  border-radius: 15px;
  z-index: -1;
}
.container > view:last-child > text {
  font-size: 10px;
  line-height: 15px;
  z-index: 1;
  color: #000;
}
</style>