Update

1. 显示主机当前状态
2. 可发送自定义波形

public/css/style.css

@@ -36,6 +36,10 @@ button {
     -o-border-radius: 3px;
 }
 
+a {
+    color: #fce9a7;
+}
+
 button:hover {
     background-color: #ffe668;
 }
@@ -450,6 +454,18 @@ select {
     position: fixed;
 }
 
+.game-info {
+    position: fixed;
+    top: 64px;
+    right: 60px;
+    padding: 0 10px 10px 10px;
+    color: #ffe99d;
+    background: #171717;
+    border-radius: 10px;
+    border: 1px solid #ffe99d;
+    width: 200px;
+}
+
 .tips-hide {
     font-weight: bold;
     margin-left: 15px;

src/App.vue

@@ -3,20 +3,26 @@
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import { ref } from "vue"
 import axios from "axios"
+import { Notyf } from 'notyf'
 import { createSocket, destroySocket } from "./socket/index"
 import {
   createCoyoteSocket,
   closeCoyoteSocket,
+  addOrIncrease,
   sendWaveData,
   qrcodeSrc,
   qrcodeShow,
-  addOrIncrease
+  channelAStrength,
+  channelBStrength,
+  softAStrength,
+  softBStrength,
+  followAStrength,
+  followBStrength
 } from "./socket/coyote"
-import { Notyf } from 'notyf'
+
 
 const notyf = new Notyf({ duration: 3000 })
 
-
 // API
 const api = axios.create({
     baseURL: "http://localhost:3000",
@@ -35,6 +41,8 @@ const wssLinks = ref([])
 const heartBeatTimer = ref<NodeJS.Timer>()
 // be ready
 clearInterval(heartBeatTimer.value!)
+// 测试波形数据
+const waveData = ref("")
 
 /**
  * 测试请求鉴权接口
@@ -158,11 +166,10 @@ const handleDestroySocket = () => {
  * 测试按钮
  */
 const test = () => {
-  const waveData = {
-    "test": `["0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A00000000","0A0A0A0A01010101","0A0A0A0A01010101","0A0A0A0A22222222","0A0A0A0A22222222","0A0A0A0A43434343","0A0A0A0A43434343","0A0A0A0A64646464","0A0A0A0A64646464"]`
-  }
   try {
-    sendWaveData(5, 5, waveData["test"], waveData["test"])
+    sendWaveData(5, 5, waveData.value, waveData.value)
+    addOrIncrease(2, 1, 1)
+    console.log(waveData.value)
     notyf.success("波形发送成功")
   }
   catch (e) {
@@ -202,8 +209,26 @@ const hideqrcode = () => {
   <div class="game-tips">
     ! 请在连接前确保已经设置好强度上限
   </div>
-  <div>
+  <div class="game-info">
+    <h2>主机状态</h2>
+    <p>A: {{ channelAStrength }} / {{ softAStrength }}</p>
+    <p>B: {{ channelBStrength }} / {{ softBStrength }}</p>
+
+    <hr />
+
     <h2>游戏设置</h2>
+    <p>强度跟随 <u title="开启后对应强度将自动跟随软上限变化">?</u></p>
+    A<input type="checkbox" v-model="followAStrength" />
+    B<input type="checkbox" v-model="followBStrength" />
+
+    <hr />
+
+    <h2>游戏玩法</h2>
+    <p><img src="/img/31036.png" width="18" alt="小花花">强度 -1</p>
+    <p><img src="/img/31039.png" width="18" alt="牛哇牛哇">强度 +1</p>
+  </div>
+  <div>
+    <h2>系统设置</h2>
     <div class="form">
       <label>主播身份码</label>
       <input type="password" placeholder="填写主播身份码" v-model="codeId"/>
@@ -220,6 +245,8 @@ const hideqrcode = () => {
     <h2>调试选项</h2>
     <div class="form">
       <button @click="getAuth">鉴权</button>
+      <label>波形数组 <a onclick="window.open('waveHelper.html', '', 'width=500,height=1000,left=700');">波形助手</a></label>
+      <input type="text" placeholder="填写欲测试的波形数组" v-model="waveData" />
       <button @click="test">测试</button>
     </div>
   </div>

src/socket/coyote.ts

@@ -4,15 +4,17 @@ import QRCode from 'qrcode'
 
 const notyf = new Notyf({ duration: 4000 })
 
-let channelAStrength = 0; // A通道强度
+let channelAStrength = ref(0);     // A通道强度
-let channelBStrength = 0; // B通道强度
+let channelBStrength = ref(0);     // B通道强度
+let softAStrength = ref(0);        // A通道软上限
+let softBStrength = ref(0);        // B通道软上限
+let followAStrength = ref(false);  //跟随A通道软上限
+let followBStrength = ref(false);  //跟随B通道软上限
 
 let connectionId = ""; // 从接口获取的连接标识符
 let targetWSId = ""; // 发送目标
 let fangdou = 500; //500毫秒防抖
 let fangdouSetTimeOut; // 防抖定时器
-let followAStrength = false; //跟随AB软上限
-let followBStrength = false;
 let wsConn; // 全局ws链接
 const feedBackMsg = {
     "feedback-0": "A通道：○",
@@ -36,8 +38,9 @@ QRCode.toDataURL("https://www.dungeon-lab.com/app-download.php#DGLAB-SOCKET#wss:
 
 function createCoyoteSocket() {
     wsConn = new WebSocket('wss://coyote.babyfang.cn/');
+
     wsConn.onopen = function (event) {
-        console.log("WebSocket连接已建立");
+        console.log("WebSocket连接已建立")
     }
 
     wsConn.onmessage = function (event) {
@@ -46,7 +49,7 @@ function createCoyoteSocket() {
             msg = JSON.parse(event.data);
         } catch (e) {
             console.log(event.data);
-            return;
+            return
         }
 
         console.log(event.data)
@@ -64,36 +67,71 @@ function createCoyoteSocket() {
                 } else {
                     if (msg.clientId != connectionId) {
                         console.log("错误的clientId")
-                        return;
+                        return
                     }
                     targetWSId = msg.targetId;
                     console.log("收到targetId: " + msg.targetId + ", msg: " + msg.message);
                     qrcodeShow.value = false
                     notyf.success({message: "郊狼连接成功"})
                 }
-                break;
+                break
             case 'break':
                 if (msg.targetId != targetWSId)
-                    return;
+                    return
                 console.log("收到断开连接指令")
                 notyf.error({ message: "收到断开连接指令" })
                 //location.reload();
-                break;
+                break
             case 'error':
                 if (msg.targetId != targetWSId)
-                    return;
+                    return
                 console.log("对方已断开，code：" + msg.message)
                 notyf.error({ message: "对方已断开（" + msg.message + "）" })
-                break;
+                break
             case 'msg':
                 const result: { type: string; numbers: number[] }[] = []
                 if(msg.message.includes("strength")) {
                     const numbers = msg.message.match(/\d+/g).map(Number)
                     result.push({ type: "strength", numbers: numbers })
-                }
 
+                    console.log(numbers)
+                    channelAStrength.value = numbers[0];
+                    channelBStrength.value = numbers[1];
+
+                    softAStrength.value = numbers[2];
+                    softBStrength.value = numbers[3];
+
+                    if (followAStrength.value && numbers[2] !== numbers[0]) {
+                        const data1 = { type: 4, message: `strength-1+2+${numbers[2]}` }
+                        sendWsMsg(data1)
+                    }
+
+                    if (followBStrength.value && numbers[3] !== numbers[1]) {
+                        const data2 = { type: 4, message: `strength-2+2+${numbers[3]}` }
+                        sendWsMsg(data2)
+                    }
+                } else if (msg.message.includes("feedback")) {
+                    notyf.success({ message: feedBackMsg[msg.message] })
+                }
+                break
+            case 'heartbeat':
+                console.log("收到心跳包")
+                break
+            default:
+                console.log("未知消息类型：" + JSON.stringify(msg));
+                break
         }
     }
+
+    wsConn.onerror = function (event) {
+        console.log("WebSocket连接出错")
+        notyf.error({ message: "WebSocket连接出错" })
+    }
+
+    wsConn.onclose = function (event) {
+        console.log("WebSocket连接已关闭")
+        notyf.error({ message: "WebSocket连接已关闭" })
+    }
 }
 
 function sendWsMsg(messageObj) {
@@ -108,7 +146,7 @@ function addOrIncrease(type, channelIndex, strength) {
     // 1 减少一  2 增加一  3 设置到
     // channel:1-A    2-B
     // 获取当前频道元素和当前值
-    let channelStrength = channelIndex === 1 ? channelAStrength : channelBStrength;
+    let channelStrength = channelIndex === 1 ? channelAStrength.value : channelBStrength.value;
 
     // 如果是设置操作
     if (type === 3) {
@@ -170,4 +208,19 @@ function closeCoyoteSocket() {
 }
 
 
-export { createCoyoteSocket, closeCoyoteSocket, sendWsMsg, sendWaveData, addOrIncrease, clearAB, qrcodeSrc, qrcodeShow, channelAStrength, channelBStrength }
+export {
+    createCoyoteSocket,
+    closeCoyoteSocket,
+    sendWsMsg,
+    sendWaveData,
+    addOrIncrease,
+    clearAB,
+    qrcodeSrc,
+    qrcodeShow,
+    channelAStrength,
+    channelBStrength,
+    softAStrength,
+    softBStrength,
+    followAStrength,
+    followBStrength
+}

src/waveHelper.vue

@@ -13,7 +13,7 @@ const sliderGroups: Ref<SliderGroup[]> = ref([
   reactive({ sliders: [50, 50, 50, 50], autoStrength: true }),
 ]);
 
-const inputFrequency = ref(0)
+const inputFrequency = ref(10)
 
 const waveData = ref()
 
@@ -152,7 +152,7 @@ function deleteGroup(index: number) {
     <button @click="newGroup">新建分组</button>
     <div v-if="waveData">
       <h3>波形数据</h3>
-      <div style="overflow-x: scroll;">{{ JSON.stringify(waveData) }}</div>
+      <textarea style="width: 100%; height: 50px;">{{ JSON.stringify(waveData) }}</textarea>
     </div>
   </div>
 </template>
@@ -168,12 +168,10 @@ function deleteGroup(index: number) {
 }
 
 .slider {
-  writing-mode: bt-lr; /* IE */
+  -webkit-appearance: slider-vertical;
-  -webkit-appearance: slider-vertical; /* WebKit */
   margin-top: 26px;
   width: 8px;
   height: 200px;
   padding: 0 5px;
 }
-
 </style>