Re: [閒聊] 閒著做了自己的遊戲清單

[wingchord (翼弦)]

※ 引述《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上

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.134.139.197 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/BoardGame/M.1563032873.A.30B.html
推 TWUYW: 這個感覺很方便耶 來試試看 謝謝分享!!
→ tony332976: 桌遊版的網站前端大賽要開始了嗎(?
推 xexeydna: 太厲害了，我覺得我是拋磚引玉成功xD
→ wingchord: 之前都用表格看，之後可以用QRcode了，感謝好點子分享
推 xiturz: 未看先推，感謝分享。很需要表單做桌遊整理的清單。
推 ShadowKou: 好厲害啊
推 VULCJO: 學起來了謝謝分享~
推 cloudy1124: 不推不行
推 junglecool: 想要知道網站是怎麼做的，可以請原po簡單說一下嗎 謝
→ junglecool: 謝
推 ntnusliver: 按樓主方法套用了 https://reurl.cc/qld0y
推 PsMonkey: ㄜ... 為啥不吃 JSON 阿 XD
→ wingchord: http://bit.ly/2lgVpxN  ，因為json有點大包，感覺防呆
→ wingchord: 要做的更好，就有點麻煩，還是有其他的格式能吐Q_Q
※ 編輯: wingchord (220.134.139.197 臺灣), 07/14/2019 16:20:57
推 PsMonkey: ㄜ... 大包無所謂吧，反正右不是吃你的流量 XD
→ PsMonkey: 至少你不用煩惱逗號把格式炸光光阿 XD
→ PsMonkey: 我一直幻想說搞 JS 的人會非 JSON 不選 [被毆飛]
→ wingchord: 真的，如果資料正常的話JSON當然是首選，但舉例如果欄
→ wingchord: 位多了空格，csv用trim就能正常運作了，但是google提供
→ wingchord: 的json前面還有冠東西就得另外再濾，防錯兼容要做更多
推 BRIANKUO: 其實bgg就有xml api了，資料都可以直接撈，不需要慢慢打
→ wingchord: 發現沒加bggid會不顯示的問題修正了
推 putindoggod: 您好 請問遊戲時間上限支援多久 第七大陸我打1000還
→ putindoggod: 是只有出現2小時+的標籤 但點了也沒有把第七大陸分
→ putindoggod: 頁放在裡面 另外是否不支援自己新增欄位 放了一個預
→ putindoggod: 購跟已有的欄位 似乎不會被解析到
→ wingchord: 超過1000確實不會顯示是BUG，時間原本只支援到2+，我先
→ wingchord: 改成2/4/8/長時間，自訂欄位也沒有，不過有想做這個，
→ wingchord: 例如希望有個NEW或是推薦等地自訂標籤在上面，但是不要
→ wingchord: 是分類這樣的
推 leo7283: 謝囉 我照著做  做了自己的 https://reurl.cc/5AVgy 謝
推 huangwm: 酷
推 Yokoyamayui: !
→ wingchord: 補充一下，google做了一個修正原本可以表私人只匯出csv
→ wingchord: ，現在表也要改成任何知道連結的人都可以檢視，功能才
→ wingchord: 能正常使用
推 FJHS: 非常感謝分享！
推 ketsu10211: 請問欄位如果要自己編輯的話是可以的嗎，嘗試一下好
→ ketsu10211: 像無法