Update

1. 现在可以自定义了！ 2. 修改了右侧边栏的样式
2024-05-18 15:32:04 +08:00
parent ced8fd7874
commit 2daf0d43a4
31 changed files with 400 additions and 41 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import { ref } from "vue"
+import { ref, watch } from "vue"
 import axios from "axios"
 import { Notyf } from 'notyf'
 import { createSocket, destroySocket } from "./socket/index"
@@ -19,15 +19,29 @@ import {
  followAStrength,
  followBStrength
 } from "./socket/coyote"
-
+import { waveData, strengthData, giftData } from "./assets/dataMap";

 const notyf = new Notyf({ duration: 3000 })

 // API
 const api = axios.create({
-    baseURL: "http://localhost:3000",
+    baseURL: "https://blive.babyfang.cn/",
 })

+//读取本地储存数据
+let settings = ref()
+if (window.localStorage.getItem("settings")) {
+  settings.value = JSON.parse(window.localStorage.getItem("settings") || '{}');
+  // console.log(settings.value)
+} else {
+  // 如果没有，使用默认值
+  settings.value = {
+    waveData: waveData,
+    strengthData: strengthData
+  };
+}
+
+
 // 替换你的主播身份码
 const codeId = ref("")
 // 替换你的app应用 [这里测试为互动游戏]
@@ -42,7 +56,20 @@ const heartBeatTimer = ref<NodeJS.Timer>()
 // be ready
 clearInterval(heartBeatTimer.value!)
 // 测试波形数据
-const waveData = ref("")
+const waveTestData = ref("")
+// 显示设置窗口
+const showSettings = ref(false)
+
+const selectedGift = ref('')
+const selectedWave = ref('')
+const relations = ref(Object.entries(giftData).map(([key, value]) => ({ gift: key, wave: settings.value.waveData[key] })))
+
+// console.log(relations.value)
+
+watch(selectedGift, (newGift) => {
+  selectedWave.value = waveData[newGift]
+})
+

 /**
 * 测试请求鉴权接口
@@ -167,9 +194,9 @@ const handleDestroySocket = () => {
 */
 const test = () => {
  try {
-    sendWaveData(5, 5, waveData.value, waveData.value)
+    sendWaveData(5, 5, waveTestData.value, waveTestData.value)
    addOrIncrease(2, 1, 1)
-    console.log(waveData.value)
+    console.log(waveTestData.value)
    notyf.success("波形发送成功")
  }
  catch (e) {
@@ -191,6 +218,37 @@ const showqrcode = () => {
 const hideqrcode = () => {
  qrcodeShow.value = false;
 }
+
+/**
+ * 保存设置
+ */
+const saveSettings = () => {
+  window.localStorage.setItem('settings', JSON.stringify(settings.value));
+  console.log(settings.value);
+}
+
+/**
+ * 添加并保存 waveData
+ */
+const addRelationAndSave = () => {
+  // 检查是否已经存在一个关系
+  const existingRelation = relations.value.find(relation => relation.gift === selectedGift.value);
+
+  if (existingRelation) {
+    // 如果存在，更新它
+    existingRelation.wave = selectedWave.value;
+  } else {
+    // 如果不存在，创建一个新的关系
+    relations.value.push({ gift: selectedGift.value, wave: selectedWave.value });
+  }
+
+  // 保存新的关系到 settings.waveData
+  settings.value.waveData[selectedGift.value] = selectedWave.value;
+  console.log(settings.value.waveData)
+
+  // 保存设置
+  saveSettings();
+}
 </script>

 <template>
@@ -206,26 +264,121 @@ const hideqrcode = () => {
      <div class="close-qrcode" @click="hideqrcode">关闭</div>
    </div>
  </div>
+
+  <div class="settings-window" v-show="showSettings">
+    <button @click="showSettings = false" style="float: right">关</button>
+    <div>
+      <h2>强度规则</h2>
+
+      <p>礼物规则 <u title="收到指定礼物后将更新强度">?</u></p>
+      <div>
+        赠送
+        <select name="addStrengthGift" id="addStrengthGift" v-model="settings.strengthData[0]">
+          <option v-for="(value, key) in giftData" :value="key">
+            {{ value }}
+          </option>
+        </select>
+        使强度 +1
+      </div>
+      <div>
+        赠送
+        <select name="subStrengthGift" id="subStrengthGift" v-model="settings.strengthData[1]">
+          <option v-for="(value, key) in giftData" :value="key">
+            {{ value }}
+          </option>
+        </select>
+        使强度 -1
+      </div>
+
+      <p>强度跟随 <u title="开启后对应强度将自动跟随软上限变化">?</u></p>
+      <div style="display: flex">
+        A<input type="checkbox" v-model="followAStrength" />
+
+        B<input type="checkbox" v-model="followBStrength" />
+      </div>
+
+      <button @click="saveSettings">保存</button>
+
+      <h2>波形规则</h2>
+      <div>
+        <div v-for="relation in relations" :key="relation.gift">
+          <div v-if="relation && relation.wave">
+            赠送
+            <span class="tag"> {{ giftData[relation.gift] }} </span>
+            输出波形
+            <input class="tag" v-model="relation.wave" disabled>
+          </div>
+        </div>
+
+        <div>
+          <div>
+            赠送
+            <select v-model="selectedGift">
+              <option v-for="(value, key) in giftData" :value="key">
+                {{ value }}
+              </option>
+            </select>
+            输出波形
+            <input v-model="selectedWave">
+          </div>
+          <a onclick="window.open('waveHelper.html', '', 'width=500,height=1000,left=700');">波形助手</a>
+        </div>
+        <button @click="addRelationAndSave">新建或保存</button>
+      </div>
+    </div>
+  </div>
+
  <div class="game-tips">
    ! 请在连接前确保已经设置好强度上限
  </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" />
+    <div style="display: flex">
+      <div class="channel-circle">
+        <div class="channel-tag">A</div>
+        <div class="channel-strength">{{ channelAStrength }}</div>
+        <div class="soft-strength">{{ softAStrength }}</div>
+      </div>
+      <div class="channel-circle">
+        <div class="channel-tag">B</div>
+        <div class="channel-strength">{{ channelBStrength }}</div>
+        <div class="soft-strength">{{ softBStrength }}</div>
+      </div>
+    </div>

    <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>
+    <h3>强度控制</h3>
+    <p>
+      赠送
+      <img :src="'/img/' + settings.strengthData[0] + '.png'" width="24" :alt="giftData[settings.strengthData[0]]">
+      <input class="tag" v-model="giftData[settings.strengthData[0]]" size="6" disabled>
+      强度 +1
+    </p>
+    <p>
+      赠送
+      <img :src="'/img/' + settings.strengthData[1] + '.png'" width="24" :alt="giftData[settings.strengthData[1]]">
+      <input class="tag" v-model="giftData[settings.strengthData[1]]" size="6" disabled>
+      强度 -1
+    </p>
+
+    <h3>波形控制</h3>
+    <div>
+      <p>赠送如下礼物可输出波形</p>
+      <div v-for="relation in relations" :key="relation.gift">
+        <div v-if="relation && relation.wave">
+          <img :src="'/img/' + relation.gift + '.png'" width="24" :alt="giftData[relation.gift]">
+          <input class="tag" v-model="giftData[relation.gift]" disabled>
+        </div>
+      </div>
+    </div>
+
+
+
+    <button @click="showSettings = true">修改玩法</button>
  </div>
  <div>
    <h2>系统设置</h2>
@@ -246,7 +399,7 @@ const hideqrcode = () => {
    <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" />
+      <input type="text" placeholder="填写欲测试的波形数组" v-model="waveTestData" />
      <button @click="test">测试</button>
    </div>
  </div>
@@ -268,4 +421,24 @@ const hideqrcode = () => {
  margin: 10px 0;
  font-size: 18px;
 }
+
+.settings-window {
+  position: fixed;
+  top: 10%;
+  bottom: 10%;
+  height: 500px;
+  left: 10%;
+  right: 10%;
+  background-color: #171717;
+  border-radius: 20px;
+  border: #ffe99d 2px solid;
+  z-index: 100;
+  padding: 20px;
+}
+
+.tag {
+  background: #fce9a7;
+  color: #000;
+  border-radius: 5px;
+}
 </style>
--- a/src/assets/dataMap.ts
+++ b/src/assets/dataMap.ts
@@ -7,13 +7,37 @@ const waveData = {
    "32609": `["4A4A4A4A64646464","4545454564646464","4040404064646464","3B3B3B3B64646464","3636363664646464","3232323264646464","2D2D2D2D64646464","2828282864646464","2323232364646464","1E1E1E1E64646464","1A1A1A1A64646464"]`,
 }

+const strengthData = ["31039", "31036"]
+
 // 礼物id和礼物名的对应关系
 const giftData = {
+    "30758": "这个好欸",
+    "30873": "花式夸夸",
+    "31028": "探索者启航",
    "31036": "小花花",
-    "31039": "牛哇牛哇",
-    "32609": "棒棒糖",
    "31037": "打call",
+    "31039": "牛哇牛哇",
+    "31044": "情书",
+    "31049": "干杯",
+    "31053": "告白花束",
+    "31122": "星愿水晶球",
    "31164": "粉丝团灯牌",
+    "31588": "星河入梦",
+    "31883": "璀璨烟火",
+    "32122": "小电视飞船",
+    "32201": "么么",
+    "32228": "爱的乐章",
+    "32575": "萌兔火箭",
+    "32609": "棒棒糖",
+    "32692": "落樱缤纷",
+    "32734": "快乐时光",
+    "32758": "爱心雨",
+    "32761": "可爱捏",
+    "32768": "携手同行",
+    "33031": "动鳗电机",
+    "33032": "干杯工厂",
+    "33988": "人气票",
+    "34065": "为你打call",
 }

-export { waveData }
+export { waveData, strengthData, giftData }
--- a/src/socket/index.ts
+++ b/src/socket/index.ts
@@ -1,11 +1,33 @@
 import DanmakuWebSocket from "../assets/danmaku-websocket.min.js"
 import { Notyf } from 'notyf'
 import { closeCoyoteSocket, addOrIncrease, sendWaveData } from "./coyote"
-import { waveData } from "../assets/dataMap";
+import { waveData, strengthData } from "../assets/dataMap";
+import { Ref, ref } from "vue";

 let ws: DanmakuWebSocket
 const notyf = new Notyf({ duration: 4000 })

+interface SettingsType {
+    strengthData: typeof strengthData;
+    waveData: typeof waveData;
+}
+
+let settings: Ref<SettingsType> = ref({
+    waveData: waveData,
+    strengthData: strengthData
+});
+
+if (window.localStorage.getItem("settings")) {
+    settings.value = JSON.parse(window.localStorage.getItem("settings") || '{}');
+    console.log(settings.value)
+} else {
+    // 如果没有，使用默认值
+    settings.value = {
+        waveData: waveData,
+        strengthData: strengthData
+    };
+}
+
 /**
 * 创建socket长连接
 * @param authBody
@@ -30,33 +52,39 @@ function createSocket(authBody: string, wssLinks: string[]) {
            //     }
            // }

+            settings = window.localStorage.getItem("settings") ? ref(JSON.parse(window.localStorage.getItem("settings") || '{}')) : null
+
+            console.log(settings.value)
+
            if (res.cmd == "LIVE_OPEN_PLATFORM_SEND_GIFT") {
-                if (res.data.gift_id == 31036) {
+                if (res.data.gift_id.toString() === settings.value.strengthData[0]) {
+                    // 牛哇牛哇：加强度1
+                    try {
+                        console.log("开始操作")
+                        addOrIncrease(2, 1, 1)
+                        addOrIncrease(2, 2, 1)
+                        console.log("结束操作")
+                        notyf.success("收到" + res.data.gift_name + "，强度+1")
+                    }
+                    catch (e) {
+                        console.log(e)
+                        notyf.error("强度操作失败！")
+                    }
+                } else if (res.data.gift_id.toString() === settings.value.strengthData[1]) {
                    // 小花花：减强度1
                    try {
                        addOrIncrease(1, 1, 1)
                        addOrIncrease(1, 2, 1)
-                        notyf.success("收到花花，强度-1")
+                        notyf.success("收到" + res.data.gift_name + "，强度-1")
                    }
                    catch (e) {
                        console.log(e)
                        notyf.error("强度操作失败！")
                    }
-                } else if (res.data.gift_id == 31039) {
-                    // 牛哇牛哇：加强度1
-                    try {
-                        addOrIncrease(2, 1, 1)
-                        addOrIncrease(2, 2, 1)
-                        notyf.success("收到牛牛，强度+1")
-                    }
-                    catch (e) {
-                        console.log(e)
-                        notyf.error("强度操作失败！")
-                    }
-                } else {
+                } else if(settings.value.waveData[res.data.gift_id]) {
                    // 其他礼物，发送波形数据
                    try {
-                        sendWaveData(5, 5, waveData[res.data.gift_id], waveData[res.data.gift_id])
+                        sendWaveData(5, 5, settings.value.waveData[res.data.gift_id], settings.value.waveData[res.data.gift_id])
                        notyf.success("收到礼物" + res.data.gift_name)
                    }
                    catch (e) {