UI完善

src/components/ShootProgress.vue

@@ -19,12 +19,19 @@ const props = defineProps({
   },
 });
 
-let barColor = "#fed847";
+const barColor = ref("#fed847");
-if (props.tips.includes("红队")) barColor = "#FF6060";
+
-if (props.tips.includes("蓝队")) barColor = "#5FADFF";
 const remain = ref(props.total);
 const timer = ref(null);
 
+watch(
+  () => props.tips,
+  (newVal) => {
+    if (newVal.includes("红队")) barColor.value = "#FF6060";
+    if (newVal.includes("蓝队")) barColor.value = "#5FADFF";
+  }
+);
+
 watch(
   () => props.seq,
   () => {
@@ -115,6 +122,7 @@ watch(
   height: 20px;
   border-radius: 20px;
   z-index: -1;
+  transition: all 0.3s linear;
 }
 .container > view:last-child > text {
   z-index: 1;

src/pages/battle-room.vue

@@ -18,27 +18,35 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
-const step = ref(3);
+const step = ref(1);
 const room = ref({});
 const roomNumber = ref("");
+const opponent = ref({});
 const players = new Array(7).fill(1);
+const start = ref(false);
 const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
+const power = ref(0);
+const scores = ref([]);
+const tips = ref("");
 onLoad(async (options) => {
-  if (options.roomNumber) {
+  if (!options.roomNumber) {
     roomNumber.value = options.roomNumber;
-    const result = await getRoomAPI(options.roomNumber);
+    const result = await getRoomAPI(options.roomNumber || "15655424");
+    console.log(11111, result);
     room.value = result;
   }
 });
 const startGame = async () => {
   const result = await startRoomAPI(room.value.number);
-  console.log(result);
+  start.value = true;
+  console.log(2222, result);
   step.value = 2;
 };
 
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
+    console.log("收到消息：", msg);
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
       if (scores.value.length === total) {
@@ -72,7 +80,7 @@ onUnmounted(() => {
           <text>天赋异禀的弓箭手们，比赛即将开始！</text>
         </view>
       </Guide>
-      <view v-if="room.battleType === 1 && room.count === 2" class="one-on-one">
+      <view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
         <image src="../static/1v1-bg.png" mode="widthFix" />
         <view>
           <image :src="user.avatarUrl" mode="widthFix" />
@@ -86,7 +94,7 @@ onUnmounted(() => {
         v-if="room.battleType === 2 && room.count === 10"
         :players="players"
       />
-      <view>
+      <view v-if="!start">
         <SButton
           v-if="room.battleType === 1 && room.count === 2"
           :onClick="startGame"
@@ -111,7 +119,15 @@ onUnmounted(() => {
           <BowPower :power="45" />
         </view>
       </Guide>
-      <BowTarget tips="本次射程5.2米，已达距离要求" />
+      <BowTarget
+        :tips="
+          !start && scores.length > 0
+            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
+                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
+              }达到距离要求`
+            : ''
+        "
+      />
       <SButton :onClick="() => (step = 3)">开始</SButton>
     </view>
     <view v-if="step === 3">
@@ -166,31 +182,31 @@ onUnmounted(() => {
 .player-unknow > image {
   width: 40%;
 }
-.one-on-one {
+.team-mode {
   width: calc(100vw - 30px);
   height: 120vw;
   margin: 15px;
 }
-.one-on-one > image:first-child {
+.team-mode > image:first-child {
   position: absolute;
   width: calc(100vw - 30px);
   z-index: -1;
 }
-.one-on-one > view {
+.team-mode > view {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 95%;
 }
-.one-on-one > view > image:first-child {
+.team-mode > view > image:first-child {
   width: 70px;
   transform: translateY(-45px);
   border-radius: 50%;
 }
-.one-on-one > view > image:nth-child(2) {
+.team-mode > view > image:nth-child(2) {
   width: 120px;
 }
-.one-on-one > view > view:nth-child(3) {
+.team-mode > view > view:nth-child(3) {
   width: 70px;
   height: 70px;
   border-radius: 50%;
@@ -200,7 +216,7 @@ onUnmounted(() => {
   align-items: center;
   transform: translateY(45px);
 }
-.one-on-one > view > view:nth-child(3) > image {
+.team-mode > view > view:nth-child(3) > image {
   width: 25px;
   height: 25px;
   margin-right: 2px;

src/pages/melee-match.vue

@@ -125,7 +125,7 @@ onUnmounted(() => {
           <BowPower :power="45" />
         </view>
       </Guide>
-      <ShootProgress v-if="start" :tips="tips" />
+      <ShootProgress v-if="start" :start="start" :tips="tips" />
       <BowTarget
         :avatar="user.avatarUrl"
         :power="power"

src/pages/team-match.vue

@@ -151,7 +151,7 @@ onUnmounted(() => {
           <BowPower :power="45" />
         </view>
       </Guide>
-      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
+      <ShootProgress v-if="start" :tips="tips" :seq="seq" :total="30" />
       <PlayersRow
         v-if="start"
         :currentShooterId="currentShooterId"