鐵人檔案
來做一個連線一對一的簡單網頁卡牌遊戲
從設計遊戲，設定開發環境，到開發。
使用 Elixir, Phoenix, Liveview 與 Tailwind
拉出 component Component 除了在同一個 module 用之外也能拉出來放我們來把 logo 拉出來到 lib/card_web/compon...
兩個人都準備好的時候，要轉到遊戲畫面 我來把準備畫面跟遊戲分開好了這樣比較不會什麼都塞在同一個 liveview 先來改 router 部分 live &quo...
發牌員 我們的短期目標是，在網頁上用純文字的方式直接顯示遊戲狀態並會隨著遊戲更新的時候更新 原本想要把 遊戲 存在房間裡面，但是在這邊已經不需要其他房間的功能了...
用 PubSub 更新遊戲狀態 現在我們要讓玩家訂閱遊戲的狀態並讓遊戲在狀態更新的時候，廣播到雙方的畫面 先來弄訂閱，我們在邀請頁面已經用過 id 來當作訂閱的...
來把卡擺上去吧我們先來做卡的外型放在 lib/card_web/component.ex 裡面 def card(assigns) do ~H"&...
出牌 出牌跟之前的遊戲準備按鈕一樣幫一個元件加上 phx-clixk 再綁上對應的動作，唯一的差別是這次要使用 phx-value-card 來幫他辨識這次傳的...
覆蓋的牌 在測試出牌的時候我才想到，同一回合如果只有我出牌，對方應該是要看不到我出什麼牌才對我覺得這項功能從原本的 Card.Game 那層來做會比較好，但是有...
遊戲狀態 是時候把 inspect game 拿掉，換成好看的介面了，啊更正！相對好看的介面哈哈主要有兩小區 勝場數(先到二的贏) 目前回合 東西都已經在...
獲勝畫面 獲勝畫面我們做一個 modal 好了 如果 遊戲狀態不是進行中 與 開啟modal 的話就顯示 game_over_modal component 進...
就算 liveview 可以達到大部分想做的互動但是還是有一些邊邊角角是滿困難的 像是複製到剪貼簿 這邊來帶大家做一遍 如果要在專案裡面使用 npm 安裝套件要...
