iT邦幫忙

2021 iThome 鐵人賽

DAY 19
1
Software Development

透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計系列 第 19

[第十九隻羊] 迷霧森林舞會XIII 設定form 綁定dom 同步房間(單押)

天亮了 前晚是1號玩家死亡

關於迷霧森林故事

反指標

洛神:2號玩家請繼續發言

2號:1號是獵人他帶了6號但是6號身份未知,然後我講一下,剛唯一只有3號把我當成狼,我先說為什麼我做不成狼,7號講得那麼薄,如果我是狼隊我馬上就站邊9號,不需要說7號捉摸不定讓大家多一個質疑我的點,我剛真的是出於沒有視角的角度,去講7號當好人的時候他講話也那麼少,就會覺得我是不是錯看她,所以不用懷疑到我身上,現在場上還有兩狼,未知6號身份的話,我想想,8我覺得給7包容度是好,但是現在如果7號確認,8號就小入坑,7號玩家點了3 9號,9號是預言家,那3號可能就要再變成一個焦點。

3號:其實我覺這個發言順序有點尷尬,因為我就沒有辦法聽到 5 8 10 的表水,然後我剛剛第一輪我是覺得5跟10蠻好的,但是剛剛7出去的時候10跟我反應蠻像的都是開心的,然後我剛剛也是差點被4號說服,4號果然是大反指標XD,但我覺得我剛的坑可能還是要從2 8選,因為2號說8跟他想法很像,又想踩一下8 又想踩一下我,因為你們都是對7號蠻有容忍度的兩張牌所以我還是得擔心一下。
待續..

動物園派對

介紹為最基礎的Hotwire
我們繼續把房間透過turbo套件完成不用重新讀取頁面就能在首頁直接呈現新增的房間
先在 simple_form_for 上面對應Room.new的地方加上dom_id
這樣就會自動幫我們鎖定對應的room_id

/app/views/rooms/_form

<%= simple_form_for Room.new, dom_id:(room) do |f| %>
  <%= f.input :name, label: '房間名稱'%>
  <%= f.input :number_of_gamer, label: '房間人數' %>
  <%= f.input :board, label: '板子',include_blank: false, collection: Room::BOARDS.map(&:to_sym) %>
  <%= f.input :user_id, as: :hidden, input_html: { value: current_user.id }%>
  <%= f.button :submit %>
<% end %>

接下來在前端生成表單
暫時先把這個form也移到首頁上
所以首頁目前的 views 會長這個樣子

/app/views/rooms/index.erb

<%= render "rooms/form", room: @room %>

<h1>Rooms</h1>
<%= turbo_stream_from "rooms" do %>
  <%= render "rooms/form", room: @room %>
<% end %>

<%= turbo_frame_tag "rooms" do %>
  <%= render @rooms %>
<% end %>

回到 rooms_controller 把save與redirected_to拿掉
@room.save
redirect_to room_path(@room), notice: '房間建立成功'
redirect_to new_room_path, notice: '發生錯誤 請重新建立房間'
因為現在已經把建立房間放在index頁面
也就是他進房間就是要登入狀態才能建立房間
所以直接把authenticate_user綁在整個rooms_controller
也就是把
before_action :authenticate_user!, except: %i[index] 後面的except拿掉
, except: %i[index]

於是當我們新增房間的時候
透過 turbo_drive 與 turbo_frame
就會達成不重新讀取頁面(也就是不用 redirected_to)
房間名稱就會直接出現在最下方囉
https://ithelp.ithome.com.tw/upload/images/20211004/20131155Y2RbcLcU2g.png

阿虎每日選幣


圖片來源

納斯達克美股空方開工了,青蛙好可愛

天黑請閉眼


上一篇
[第十八隻羊] 迷霧森林舞會XII Hotwire 101
下一篇
[第二十隻羊] 迷霧森林舞會XIV 進房間聊天 hotwire + stimulus 起步走
系列文
透過迷霧,看破一切~~ZOOPARTY 動物園派對桌遊設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言