diff --git a/frontend/src/apis/socketApi.ts b/frontend/src/apis/socketApi.ts index bb3c360..86e062d 100644 --- a/frontend/src/apis/socketApi.ts +++ b/frontend/src/apis/socketApi.ts @@ -24,9 +24,10 @@ export type PulseItemResponse = { name: string; }; -export type StrengthInfo = { +export type GameStrengthInfo = { strength: number; limit: number; + tempStrength: number; }; export type GameStrengthConfig = { @@ -51,7 +52,7 @@ export interface SocketApiEventListeners extends EventDef { gameInitialized: []; gameStarted: []; gameStopped: []; - strengthChanged: [strength: StrengthInfo]; + strengthChanged: [strength: GameStrengthInfo]; configUpdated: [config: CoyoteLiveGameConfig]; } diff --git a/frontend/src/pages/Controller.vue b/frontend/src/pages/Controller.vue index 2b11c81..70d995e 100644 --- a/frontend/src/pages/Controller.vue +++ b/frontend/src/pages/Controller.vue @@ -13,6 +13,8 @@ const state = reactive({ randomStrengthVal: 5, strengthLimit: 20, + tempStrength: 0, + randomFreqLow: 10, randomFreqHigh: 15, @@ -65,8 +67,8 @@ const gameConfig = computed({ }); const chartVal = computed(() => ({ - valLow: state.strengthVal, - valHigh: Math.min(state.strengthVal + state.randomStrengthVal, state.strengthLimit), + valLow: state.strengthVal + state.tempStrength, + valHigh: Math.min(state.strengthVal + state.tempStrength + state.randomStrengthVal, state.strengthLimit), valLimit: state.strengthLimit, })) @@ -152,6 +154,7 @@ const initWebSocket = async () => { wsClient.on('strengthChanged', (strength) => { state.strengthLimit = strength.limit; + state.tempStrength = strength.tempStrength; }); wsClient.on('configUpdated', (config) => { diff --git a/frontend/src/pages/Viewer.vue b/frontend/src/pages/Viewer.vue index 2164882..0e79cde 100644 --- a/frontend/src/pages/Viewer.vue +++ b/frontend/src/pages/Viewer.vue @@ -4,9 +4,11 @@ import { ServerInfoResData, webApi } from '../apis/webApi'; import { handleApiResponse } from '../utils/response'; const state = reactive({ - valLow: 0, - valHigh: 0, - valLimit: 50, + strength: 0, + randomStrength: 0, + strengthLimit: 50, + + tempStrength: 0, clientId: '', @@ -18,6 +20,12 @@ const state = reactive({ let serverInfo: ServerInfoResData; let wsClient: SocketApi; +const chartVal = computed(() => ({ + valLow: state.strength + state.tempStrength, + valHigh: Math.min(state.strength + state.tempStrength + state.randomStrength, state.strengthLimit), + valLimit: state.strengthLimit, +})) + const initServerInfo = async () => { try { let serverInfoRes = await webApi.getServerInfo(); @@ -41,15 +49,15 @@ const initWebSocket = async () => { }); wsClient.on('strengthChanged', (strength) => { - state.valLimit = strength.limit; + state.strengthLimit = strength.limit; + state.tempStrength = strength.tempStrength; }); wsClient.on('configUpdated', (config) => { - state.valLow = config.strength.strength; - state.valHigh = config.strength.randomStrength; + state.strength = config.strength.strength; + state.randomStrength = config.strength.randomStrength; - state.valLow = Math.min(state.valLow, state.valLimit); - state.valHigh = Math.min(state.valLow + state.valHigh, state.valLimit); + state.strength = Math.min(state.strength, state.strengthLimit); // 限制当前值不超过上限 }); wsClient.on('gameStarted', () => { @@ -89,9 +97,9 @@ onMounted(async () => {