Frontend Game Map Setup

[wingtkw]

Any suggestion in implementing the network-like map in frontend?
@sandytang886 @KalpasWang

[KalpasWang]

I've looked into it before, and I think it's easier to use data visualization libraries like D3, visx, nivo, because there are existing network charts, what do you think?

[sandytang886]

i thought that we have to draw it by our own😅 , i have no idea but wecome to use any tools that can draw the map
I think D3 Connection map can help this

[KalpasWang]

sigma.js seems to be a good choice, too. It uses WebGL and performance is better than D3.
https://www.sigmajs.org/

[sandytang886]

@KalpasWang
我嘗試了一下sigmajs 畫地圖，但sigmajs不能很好的固定地圖形狀，然後node是可以怎樣儲存下使用者資料，這部分也是我現階段不太能想像到怎樣做，想問下關於這個有沒有什麼建議？

[KalpasWang]

@sandytang886
sigma.js 我還沒試過，不過我試了 D3 跟 visx，可以參考看看我的 code
https://codesandbox.io/p/sandbox/game-map-myqxnh
個人覺得可能不需要用 sigma.js，D3 跟 visx 比較容易實作，有問題也比較容易解決。

[wingtkw]

同意
d3 能做更多 customization
以前有用過d3 network graph
感覺不錯
visx 沒有使用過，這兩天看一看

[KalpasWang]

@wingtkw
visx 簡單講就是 react 版的 d3，客製化也很方便，寫法比 d3 更適合 react
缺點就是目前只支援 svg

[wingtkw]

那可能d3 更好一點
因為我試過把map convert 成svg
效果沒有那麽好

[KalpasWang]

@wingtkw
意思是 map 要用 canvas 嗎？
那卡牌也要用 canvas 嗎？這樣感覺難度蠻高的…

[wingtkw]

用 d3 + canvas 做了一個大致的map layout，
@KalpasWang @sandytang886 可以看一下
用canvas 的話performance 應該會好一些

卡牌未必需要用canvas

[metalalive]

用 d3 + canvas 做了一個大致的map layout， KalpasWang sandytang886 可以看一下 用canvas 的話performance 應該會好一些

卡牌未必需要用canvas

請問是否有可能為這部分添加單元測試案例？
或者 這個 commit 主要是數據，沒有太多應用程式邏輯

謝謝回覆