dsh-lol-esports:給 DSH Web 端加一個英雄聯盟賽事觀賽面板

前言

要在 DSH 客戶端裏看英雄聯盟賽事,常見做法是開官網或第三方數據站,賽程、比分、直播鏈接、局內數據分散在幾個頁面之間,還要自己換算本地時區。dsh-lol-esports 把這些收進 DSH Web 端左欄的一個面板裏:賽程與賽果合併成一條時間線,正在打的比賽附帶局內實時數據。下面介紹這個插件的定位、功能、安裝方式和已知限制。

這是什麼

neilny/dsh-lol-esports 是 NeilNy 維護的一個 DSH 客戶端插件,fork 自 Rustyibe/dsh-lol,按自己的節奏改,不跟隨上游更新。相對上游的主要增量是一條局內實時數據條,另外在選手名處理、BO 結束判定、空態渲染上做了本地化修改。社區目錄把它歸在「客戶端」分類,Star 數爲 0,屬於個人項目。

它解決的問題是:S 賽期間,在 DSH 裏不用切出插件就能看完賽程、比分、觀賽入口,並看到正在進行對局的擊殺、經濟、推塔、小龍、男爵和十名選手的 K/D/A 與補刀。

核心功能

1、一條按本地日期分組的時間線。賽程與賽果合併,過去的比賽在上、今天居中、未來在下;打開面板自動滾到今天那組,每 60 秒靜默刷新。

2、比賽卡片。顯示階段、BO 數、狀態徽標、開賽時間、比分;進行中的卡片高亮並帶局內實時數據條。

3、階段篩選。入圍賽、瑞士輪、四分之一決賽、半決賽、決賽,只列出當前屆真實存在的階段。

4、觀賽鏈接。官方直播頁、逐局中文回放(YouTube 直接跳到該局開始時間)、英文流、Twitch 直播流。

5、按語言取流。界面是中文就優先中文流與中文回放,英文界面優先英文。

6、單場 AI 與整屆 AI。單場卡片上的「問 AI」把這場比賽的賽事、階段、對陣、BO、時間、比分、觀賽鏈接帶進新建會話;頂部「聊賽事」按「今天」或某個階段,把已結束、待打和當前戰績一起帶進新會話。

7、局內實時數據。擊殺、經濟、推塔、小龍、男爵,加十名選手的 K/D/A 與補刀;數據條顯示落後直播多少秒的延遲讀數,本局結束後換成「本局已結束」。數值變化時滑入,值不變不閃。

8、本地判定 BO 結束。任一方達到賽制所需勝場即判爲已結束,不等接口翻狀態(Riot 的狀態會滯後幾分鐘)。

9、選手名去前綴。IG TheShy 顯示爲 TheShy,僅當首段確實等於隊伍 code 時才剝,Hans Sama 不受影響。

10、雙語。跟隨 DSH 語言設置,時間按本地時區。

安裝與啓用

需要 DSH >= 0.2.1-rc.2 < 0.3.0(engines.dsh 已聲明,不滿足會被拒絕安裝或激活)。安裝不需要構建,client.js 是倉庫裏已打包好的產物。

# 桌面版
dsh plugin --profile desktop add github:NeilNy/dsh-lol-esports

# 或 web 版
dsh plugin --profile web add github:NeilNy/dsh-lol-esports

裝完重啓 DSH(桌面版 ⌘Q 後重開),左欄會多出一個獎盃圖標,點開就是面板。當前版本 1.2.0,MIT 許可,倉庫內帶 LICENSE。

典型用法

1、打開面板,自動定位到今天那組比賽;往上滑看歷史賽程與賽果,往下滑看後續賽程。

2、點擊某張比賽卡片,看階段、比分與觀賽鏈接;比賽進行中時卡片上會多出實時數據條,包括雙方擊殺、經濟、推塔、小龍、男爵,以及雙方十名選手的 K/D/A 與補刀。

3、需要基於這場比賽提問時,點卡片上的「問 AI」,賽事、階段、對陣、BO、時間、比分、觀賽鏈接會作爲上下文帶進一個新會話。

4、要整屆聊天時,點頂部「聊賽事」,可選「今天」或某個階段,已結束、待打和當前戰績一起進入會話。

5、時間不在自己的時區時不用換算,插件按本地時區渲染,並跟隨 DSH 的語言設置切換中英文。

數據與隱私

賽程與詳情走 https://esports-api.lolesports.com/persisted/gw/{getSchedule,getEventDetails},帶 lolesports 前端的公開 x-api-key;局內實時走 https://feed.lolesports.com/livestats/v1/window/{gameId}(10 秒窗口)。全部是瀏覽器直連的公開 GET:不經代理、不帶賬號、不讀寫本地文件、無遙測。面板是純前端插件,只註冊 main 與 sidebar.panellist 兩個槽位。

適用場景與注意

適合想在 DSH 內看 S 賽、或者把賽事上下文帶進 AI 會話的人。插件運行在當前 DSH 進程裏,權限與該進程一致;安裝前應打開倉庫核一遍源碼與許可證,確認接口調用範圍符合自己的預期。這是個人 fork 項目,Star 數爲 0,不跟隨上游更新,出問題需要自己提 issue 或改代碼。

已知限制:

1、只支持 S 賽(Worlds)。要其他聯賽需改 client.js 裏的 WORLDS_ID(Worlds = 98767975604431411)。

2、實時數據永遠慢約一分鐘。Riot 的 feed 要求窗口結束時間至少比當前早 50 秒,且 startingTime 對齊 10 秒;插件取 now - 65s,以 20 秒爲週期輪詢。

3、沒有中文或英文 VOD 的對局,詳情裏只有「官方賽事頁」。

4、官網 lolesports.com 強制跳 en-US,官網鏈接無法本地化。

5、lolesports 的公開 key 若被輪換,需要更新 client.js 頂部的 API_KEY。

開發

源碼是 TypeScript + JSX,用 esbuild 打成 client.js(DSH 客戶端模塊格式),產物提交進倉庫,所以安裝時不跑構建:

npm install
npm run check    # tsc --noEmit
npm test         # 打包後跑 node:test(模塊契約 + 數據層)
npm run build    # src/main.ts -> client.js

倉庫結構按職責分文件:src/main.ts 是入口,註冊到 window.__ModuleLoader__;src/panel.ts 負責 inject / apply;src/ui.tsx 是 React 組件;src/api.ts 覆蓋賽程、詳情、局內實時三套接口並做規範化;其餘是格式化、鏈接、i18n、樣式、常量與類型。React 只能從宿主注入的 require('react') 拿,不能靜態 import,src/runtime.ts 就是爲此存在的。

小結

這個插件的價值在於把 S 賽的賽程、賽果、觀賽鏈接和局內實時數據集中進 DSH 左欄,並支持把賽事上下文直接帶進 AI 會話。它的邊界同樣清楚:只覆蓋 Worlds,實時數據天然滯後一分鐘,依賴 lolesports 的公開接口和 key。裝之前值得花幾分鐘核一遍源碼。

  • 目錄頁:https://www.skillhub.cn/plugins/NeilNy/dsh-lol-esports
  • GitHub:https://github.com/NeilNy/dsh-lol-esports
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜