shoot-miniprograms/src/components/RoundEndTip.vue

<script setup>
import { t } from "@/locales";

import { ref, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
  isFinal: {
    type: Boolean,
    default: false,
  },
  round: {
    type: Number,
    default: 0,
  },
  bluePoint: {
    type: Number,
    default: 0,
  },
  redPoint: {
    type: Number,
    default: 0,
  },
  roundData: {
    type: Object,
    default: () => ({}),
  },
  onAutoClose: {
    type: Function,
    default: () => {},
  },
});
const count = ref(props.isFinal ? 10 : 3);
const tiemr = ref(null);
function startCount() {
  if (tiemr.value) clearInterval(tiemr.value);
  tiemr.value = setInterval(() => {
    if (count.value === 0) {
      clearInterval(tiemr.value);
      props.onAutoClose();
    } else count.value -= 1;
  }, 1000);
}
onMounted(() => {
  startCount();
});
onBeforeUnmount(() => {
  if (tiemr.value) clearInterval(tiemr.value);
});
</script>

<template>
  <view class="round-end-tip">
    <text>{{ t('round') }}{{ round }}{{ t('shooting_complete') }}</text>
    <block v-if="!isFinal">
      <view class="point-view1" v-if="bluePoint !== 0 || redPoint !== 0">
        <text>{{ t('blue_team_this_round') }}</text>
        <text>{{
          (roundData.shoots[1] || []).reduce(
            (last, next) => last + next.ring,
            0
          )
        }}</text>
        <text>{{ t('pts_red_team') }}</text>
        <text>{{
          (roundData.shoots[2] || []).reduce(
            (last, next) => last + next.ring,
            0
          )
        }}</text>
        <text>{{ t('pts') }}</text>
      </view>
      <text
        v-if="bluePoint === 0 && redPoint === 0"
        :style="{ marginTop: '20px' }"
      >{{ t('no_arrows_were_shot_by_either_team_for_3_consecutive_turns_match') }}</text>
      <text v-if="bluePoint !== 0 && bluePoint === redPoint">{{ t('red_and_blue_teams_each_earn') }}<text :style="{ color: '#fed847', margin: '0 5px' }">{{
          redPoint
        }}</text
        >{{ t('pts_175') }}</text>
      <text v-if="bluePoint > redPoint">{{ t('blue_team_wins_and_earns') }}<text :style="{ color: '#fed847', margin: '0 5px' }">{{
          bluePoint
        }}</text
        >{{ t('pts_175') }}</text>
      <text v-if="bluePoint < redPoint">{{ t('red_team_wins_and_earns') }}<text :style="{ color: '#fed847', margin: '0 5px' }">{{
          redPoint
        }}</text
        >{{ t('pts_175') }}</text>
    </block>
    <block v-if="isFinal">
      <view class="point-view2">
        <text>{{ t('blue_team') }}</text>
        <text>{{ bluePoint }}</text>
        <text>{{ t('pts_red_team_179') }}</text>
        <text>{{ redPoint }}</text>
        <text>{{ t('pts_180') }}</text>
      </view>
      <text>{{ t('a_tie_one_final_arrow_decides_the_winner') }}</text>
      <view class="final-shoot">
        <text>{{ count }}</text>
        <text>{{ t('s_until_both_teams_shoot') }}</text>
        <text>{{ t('golden_arrow') }}</text>
        <text>{{ t('one_arrow_decides_it_all') }}</text>
      </view>
    </block>
  </view>
</template>

<style scoped>
.round-end-tip {
  width: 100%;
  color: #fff9;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 32rpx;
}
.round-end-tip > text:first-child {
  font-size: 36rpx;
  color: #fff;
}
.point-view1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 3px;
}
.point-view1 > text:nth-child(2),
.point-view1 > text:nth-child(4) {
  color: #fed847;
  margin: 0 5px;
}
.point-view2 {
  margin: 12px 0;
  font-size: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.point-view2 > text:nth-child(2),
.point-view2 > text:nth-child(4) {
  color: #fed847;
  width: 30px;
  text-align: center;
  font-size: 30px;
}
.final-shoot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  font-size: 28rpx;
  word-break: keep-all;
}
.final-shoot > text:nth-child(1) {
  width: 20px;
  text-align: right;
}
.final-shoot > text:nth-child(1),
.final-shoot > text:nth-child(3) {
  font-size: 32rpx;
  color: #fed847;
  margin-left: 10px;
  margin-right: 5px;
}
</style>