diff --git a/public/css/style.css b/public/css/style.css index 20d5b2b..b18d512 100644 --- a/public/css/style.css +++ b/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; diff --git a/public/img/31036.png b/public/img/31036.png new file mode 100644 index 0000000..83662f2 Binary files /dev/null and b/public/img/31036.png differ diff --git a/public/img/31039.png b/public/img/31039.png new file mode 100644 index 0000000..1f3f353 Binary files /dev/null and b/public/img/31039.png differ diff --git a/src/App.vue b/src/App.vue index 4439173..d98f824 100644 --- a/src/App.vue +++ b/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() // 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 = () => {
! 请在连接前确保已经设置好强度上限
-
+
+

主机状态

+

A: {{ channelAStrength }} / {{ softAStrength }}

+

B: {{ channelBStrength }} / {{ softBStrength }}

+ +
+

游戏设置

+

强度跟随 ?

+ A + B + +
+ +

游戏玩法

+

小花花强度 -1

+

牛哇牛哇强度 +1

+
+
+

系统设置

@@ -220,6 +245,8 @@ const hideqrcode = () => {

调试选项

+ +
diff --git a/src/socket/coyote.ts b/src/socket/coyote.ts index 8123d60..2e78f01 100644 --- a/src/socket/coyote.ts +++ b/src/socket/coyote.ts @@ -4,15 +4,17 @@ import QRCode from 'qrcode' const notyf = new Notyf({ duration: 4000 }) -let channelAStrength = 0; // A通道强度 -let channelBStrength = 0; // B通道强度 +let channelAStrength = ref(0); // A通道强度 +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 +} diff --git a/src/waveHelper.vue b/src/waveHelper.vue index dc31393..650d0d1 100644 --- a/src/waveHelper.vue +++ b/src/waveHelper.vue @@ -13,7 +13,7 @@ const sliderGroups: Ref = 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) {

波形数据

-
{{ JSON.stringify(waveData) }}
+
@@ -168,12 +168,10 @@ function deleteGroup(index: number) { } .slider { - writing-mode: bt-lr; /* IE */ - -webkit-appearance: slider-vertical; /* WebKit */ + -webkit-appearance: slider-vertical; margin-top: 26px; width: 8px; height: 200px; padding: 0 5px; } -