shoot-miniprograms/src/pages/battle-room.vue

<script setup>
import { ref, onUnmounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import AppBackground from "@/components/AppBackground.vue";
import Header from "@/components/Header.vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import BowTarget from "@/components/BowTarget.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import BowPower from "@/components/BowPower.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
import { MESSAGETYPES } from "@/constants";
import websocket from "@/websocket";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const step = ref(1);
const room = ref({});
const roomNumber = ref("");
const seats = new Array(10).fill(1);
const players = new Array(7).fill(1);
const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
onLoad(async (options) => {
  if (options.roomNumber) {
    roomNumber.value = options.roomNumber;
    const result = await getRoomAPI(options.roomNumber);
    room.value = result;
  }
});
onUnmounted(() => {
  websocket.closeWebSocket();
  if (user.value.id === room.value.creator) {
    destroyRoomAPI(room.value.id);
  } else {
    exitRoomAPI(room.value.id);
  }
});
const startGame = async () => {
  const result = await startRoomAPI(room.value.number);
  console.log(result);
  step.value = 2;
  const token = uni.getStorageSync("token");

  websocket.createWebSocket(token, (content) => {
    const messages = JSON.parse(content).data.updates || [];
    messages.forEach((msg) => {
      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
        scores.value.push(msg.target);
        if (scores.value.length === total) {
          showScore.value = true;
          websocket.closeWebSocket();
        }
      }
    });
  });
};
</script>

<template>
  <Container title="对战">
    <view class="standby-phase" v-if="step === 1">
      <Guide>
        <view :style="{ display: 'flex', flexDirection: 'column' }">
          <text :style="{ color: '#fed847' }">人都到齐了吗？</text>
          <text>天赋异禀的弓箭手们，比赛即将开始！</text>
        </view>
      </Guide>
      <view v-if="room.battleType === 1 && room.count === 2" class="one-on-one">
        <image src="../static/1v1-bg.png" mode="widthFix" />
        <view>
          <image :src="user.avatarUrl" mode="widthFix" />
          <image src="../static/versus.png" mode="widthFix" />
          <view>
            <image src="../static/question-mark.png" mode="widthFix" />
          </view>
        </view>
      </view>
      <view v-if="room.battleType === 2 && room.count === 10" class="players">
        <view v-for="(_, index) in seats" :key="index">
          <image src="../static/player-bg.png" mode="widthFix" />
          <image
            v-if="players[index]"
            src="../static/avatar.png"
            mode="widthFix"
          />
          <view v-else class="player-unknow">
            <image src="../static/question-mark.png" mode="widthFix" />
          </view>
          <text v-if="players[index]">选手{{ index + 1 }}</text>
          <text v-else :style="{ color: '#fff9' }">虚位以待</text>
          <view v-if="index === 0" class="founder">创建者</view>
          <image
            :src="`../static/player-${index + 1}.png`"
            mode="widthFix"
            class="player-bg"
          />
        </view>
      </view>
      <view>
        <SButton
          v-if="room.battleType === 1 && room.count === 2"
          :onClick="startGame"
          >进入对战</SButton
        >
        <SButton
          v-if="room.battleType === 2 && room.count === 10"
          :onClick="startGame"
          >进入大乱斗</SButton
        >
        <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
      </view>
    </view>
    <view v-if="step === 2">
      <BattleHeader />
      <Guide noBg>
        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
          <view :style="{ display: 'flex', flexDirection: 'column' }">
            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
            <text>请确保射击距离只有5米</text>
          </view>
          <BowPower :power="45" />
        </view>
      </Guide>
      <BowTarget tips="本次射程5.2米，已达距离要求" />
      <SButton :onClick="() => (step = 3)">开始</SButton>
    </view>
    <view v-if="step === 3">
      <ShootProgress tips="请红队射箭-第一轮" />
      <PlayersRow :blueTeam="teams" :redTeam="teams" />
      <BowTarget :power="45" currentRound="1" :totalRound="3" debug />
      <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
    </view>
  </Container>
</template>

<style scoped>
.standby-phase {
  width: 100%;
  height: calc(100% - 40px);
  overflow-x: hidden;
}
.players {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 15px;
  row-gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
}
.players > view {
  width: 45%;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  height: 90px;
  overflow: hidden;
}
.players > view > image:first-child {
  width: 100%;
  position: absolute;
  z-index: -1;
}
.players > view > image:nth-child(2) {
  width: 40px;
  margin: 0 10px;
  border: 1px solid #fff;
  border-radius: 50%;
}
.founder {
  position: absolute;
  background-color: #fed847;
  top: 0;
  color: #000;
  font-size: 12px;
  padding: 2px 5px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.player-bg {
  position: absolute;
  width: 52px;
  right: 0;
}
.tips {
  color: #fff9;
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 10px;
  font-size: 14px;
}
.player-unknow {
  width: 40px;
  height: 40px;
  margin: 0 10px;
  border: 1px solid #fff3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #69686866;
}
.player-unknow > image {
  width: 40%;
}
.one-on-one {
  width: calc(100vw - 30px);
  height: 120vw;
  margin: 15px;
}
.one-on-one > image:first-child {
  position: absolute;
  width: calc(100vw - 30px);
  z-index: -1;
}
.one-on-one > view {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95%;
}
.one-on-one > view > image:first-child {
  width: 70px;
  transform: translateY(-45px);
  border-radius: 50%;
}
.one-on-one > view > image:nth-child(2) {
  width: 120px;
}
.one-on-one > view > view:nth-child(3) {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(45px);
}
.one-on-one > view > view:nth-child(3) > image {
  width: 25px;
  height: 25px;
  margin-right: 2px;
}
</style>