[第二十七只羊] 迷雾森林舞会XVI 整理客厅，首页列表介面

天亮了 昨晚是平安夜

关於迷雾森林故事

悍跳

兔兔就这样使出吃奶的力气让大家停下舞步
兔兔暴怒地大喊着在方舟上推他们下船的就是Lulu
他们就是一直以来森林里面的凶手
虽然他们的胜利许愿让大家忘记了这件事的存在
不过因为当时两只兔子是昏迷状态
所以洛神在清除大家记忆的时候并没有清除到两只兔子的
随着意识逐渐清醒他们还是有听到转播的声音，所以知道
比赛结果与後续发展
Lulu 则是淡定地回答说
是吗？你有什麽证据，现在全场只有你觉得我是坏人
说不定你才是真正的坏人呢！？
一醒来就信口雌黄的血口喷人，我怎麽知道你们是不是说谎
况且也没有人看到是我推你下去的，也有可能是你自己跌到方舟之外的海里
就算你说的都是真的
还是不能确定你的身份
你们不过就是两只个乳臭未乾的小鬼
不要在这边打话大家的兴致
我们今天可是平安夜 没人想理你们呢
兔兔不甘示弱地说
洛神是依据你的过去所做所为给予技能
你在被分发技能之时，大家就已知道你的底牌
只是现在因为你赢了游戏又杀了动物
大家害怕想起来
待续..

动物园派对

调整一下首页
这边有两个重点又跟热线你和我(hotwire)有点关系
1.
首页的部分现在是由hotwire的turbo_frame处理
在这个页面所有动作都会交由turbo透过websocket帮我们同步
所以我们才能再新增房间後重新读取页面就可以看到刚建立的房间
所以要让他转跳到房间
我们必须先把turbo的功能关起来
关的方法大概像这样子
没关的话就会一直停留在 index 页面唷

<div><%= link_to room.name, room_path(room.id), data: { turbo: "false" } %></div>

hotwire处理table表单方式稍微有点不太一样
或者是说我们原本把 rooms 抽成 parial 的方式会让 table 稍微不好处理
所以我们先把他拉回 index 页面
概念跟以往一样还是在table body 里面塞进回圈的 、 数值来呈现表单
不同的是也要告诉turbo这个room是哪一个
所以弄起来会有点像是这样
这是其中一个栏位的显示

   <turbo-table-body id="rooms">
      <% @rooms.each do |room| %>
      <tr>
        <%= turbo_frame_tag dom_id(room) do %>
          <td>
            <div class="flex items-center space-x-3">
              <div>
                <div class="font-bold">
                  <%= room.name %>
                </div>
              </div>
            </div>
          </td>
          <td>
            <%= room.board %>

            <br>
            <span class="badge badge-outline badge-sm"><%= Room.bord_introduction(Room::boards[room.board]) %></span>
          </td>

顺手多补一个东西
把板子的角色呈列在表单中
在model新增一个方法来表列板子的角色

/app/model/room.rb

  def self.bord_introduction(board)
    player_roles = []

    case board
    when 0
      player_roles << '预言家'
      player_roles << '女巫'
      player_roles << '猎人'
      player_roles << '村民'
      player_roles << '骑士'
      player_roles << '狼王'
      player_roles << '3小狼'
    end

    player_roles
  end

好罗，那我们这两项整合起来就可以完成我们的 index UI 画面罗
~~如果阿虎看到一定觉得想哭～～

/app/views/rooms/index.erb

<!--<div id="app"></div>-->

<div class="hero min-h-screen bg-base-200">
  <div class="text-center hero-content">
    <div class="max-w-md">
      <h1 class="mb-5 text-5xl font-bold">
        动物园派对
      </h1>
      <p class="mb-5">
        逻辑碰撞的派对游戏
      </p>
      <button class="px-3 py-2 mb-1 mr-1 text-sm font-bold text-white uppercase rounded shadow outline-none transition-all duration-150 ease-linear bg-blueGray-500 active:bg-blueGray-600 hover:shadow-md focus:outline-none" type="button">
        <%= link_to new_room_path do %>
          <span class="text-sm align-middle opacity-75 material-icons">建立新房间</span>
        <% end %>
      </button>
    </div>
  </div>
</div>

<%= render "rooms/form", room: @room %>
<button class="btn btn-primary mt-5 mb-10 w-full text-lg">
  房间列表
  <div class="badge ml-2 badge-outline"><%= Room&.count %></div>
</button>

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

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

<div class="overflow-x-auto">
  <table class="table w-full">
    <thead>
    <tr>
      <th>房间名称</th>
      <th>板子</th>
      <th>玩家人数</th>
      <th></th>
    </tr>
    </thead>
    <turbo-table-body id="rooms">
      <% @rooms.each do |room| %>
        <tr>
          <%= turbo_frame_tag dom_id(room) do %>
            <td>
              <div class="flex items-center space-x-3">
                <div>
                  <div class="font-bold">
                    <%= room.name %>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <%= room.board %>

              <br>
              <% Room.bord_introduction(Room::boards[room.board]).each do |player_role| %>
                <div class="badge badge-accent badge-outline badge-sm"><%= player_role %></div>
              <% end %>
            </td>
            <td><%= room.number_of_gamer %></td>
        <% end %>
                <th>
                  <button class="btn btn-ghost btn-xs"><%= link_to '进入房间', room_path(room.id), data: { turbo: "false" } %></button>
                </th>
                </tr>
          <% end %>
          </turbo-table-body>
          </table>
          </div>

这麽一来我们就等於是把房间列表的 index 页面与 show 页面的 UI 都完成 90% 罗
介面还有登入注册要面要调整，再来就是发牌了

阿虎每日选币

柴犬币发车中，已经在车上可以继续坐着，还没上车的除非要长线不然就不要追高