閒著做了自己的遊戲清單 - 桌遊

※ 引述《xexeydna (貢丸貢丸貢丸)》之銘言：
: 建議使用電腦版模式瀏覽，
: 能力不足做響應式orz
: http://bglist.byethost16.com/
: 因為家裡空間並不大，雖然桌遊也不多，
: 但每次開團要翻來翻去確認自己有什麼遊戲
: 覺得非常的累，所以做了一個網頁方便自己
: 或朋友挑遊戲，有簡易的篩選功能這樣。
: 大家都是如何管理自己的清單？
: 用excel似乎也是個不錯的選擇？
: -----

參考原原PO我也做了一個
可以使用Google Sheet作為來源

表格內容
http://bit.ly/2ldt0J0
結果網頁
http://bit.ly/2leFpfL


使用方式就是
在Google Drive開一個新的試算表
(也可以用我那份建立副本帶回自己的空間)
然後第一行要是欄位名稱
NAME是桌遊名稱，一定需要
其他都可以不填也能運作
BGGID：有給的話會自動帶BGG上的圖片
例如阿瓦隆就是128882
https://boardgamegeek.com/boardgame/128882
IMGUR：自訂圖片，會優先於BGGID
有時候會沒圖或是覺得圖片不是自己想要的可以用這個換
PLAYER：人數，只支援A~B或是A-B這樣，不支援2,4,6,8這種的
PLAYTIME：遊戲時間，同上
GAMETYPE：遊戲類型，用全形頓號分割
DESCRIPTION：備註，會顯示在遊戲名稱下面

全表格都不能用半形逗號
因為抽出的CSV檔用逗號分隔
所以用了逗號會壞掉OAQ

編輯好了就選檔案>發佈到網路
連結TAB下選整份文件>逗號分隔值(.csv)
會得到一個網址，把CSVID複製下來
從spreadsheets/d/e/這一串就是CSVID/pub?output=csv

然後在結果網頁後面那個csv=什麼什麼
換成你自己的csvid
就可以管理自己的桌遊清單了
另外Google Sheet會有Cache
所以更新後最慢可能得等10分鐘
才會看到新的結果呈現

目前沒有圖片的時候版面會壞掉
也沒有動畫效果
比起原原PO是有點醜醜的
所以UI還有很多需要調整的地方

--

回應一下junglecool的提問

原理就Google Sheet可以匯出csv
我就把它拉進來逐行解析資料
遊戲人數全部解析完
找出最少到最多人產生按鈕(2~10)
遊戲時間是區段的
1~14、15~29、30~44、45~60...
有跟欄位重疊到的部分才會顯示
(這邊判斷式比較複雜一點)
然後因為要自己傳圖覺得很麻煩
所以圖就用bgg的api把拉它進來用
至少不用都自己上傳

篩選完資料丟給前台顯示
然後這邊第一版是用CSS3的column-count
速度很快，不用自己去算定位點
只是效果不是說非常好

QRcode產生是用google chart
方便印出來或是分享給朋友

開發工具是ReactJS+Webpack
然後放置在免費的空間github上

--