Update
1. 显示主机当前状态 2. 可发送自定义波形
This commit is contained in:
parent
164dcc6ac5
commit
cc552fcbee
@ -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;
|
||||
|
||||
BIN
public/img/31036.png
Normal file
BIN
public/img/31036.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/img/31039.png
Normal file
BIN
public/img/31039.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
43
src/App.vue
43
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>
|
||||
|
||||
@ -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,35 +67,70 @@ 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连接已关闭" })
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
-webkit-appearance: slider-vertical;
|
||||
margin-top: 26px;
|
||||
width: 8px;
|
||||
height: 200px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user