[第二十五只羊] 迷雾森林舞会XIV 房间介面调整

天亮了 昨晚是平安夜

关於迷雾森林故事

旋木

随着蓝调漫节奏
大家跟着音浪一起流动
阿虎也拿着麦克风
喵喵叫的唱歌
似乎都已忘记了邪恶阵营还融入在森林之中
正当Lulu走上前 抢了阿虎的麦克风 说 借我表演一下
按下了一个神秘的开关
中央舞台浮出了一个旋转木马
他轻轻挥动他的喜鹊翅膀
配合着Rocky散发黯淡月光
打量他的灰色羽毛
并唱跟着弦律唱起了歌
美丽的歌声搭着配乐
漫步在旋转木马舞台走唱
仔细一看
旋木上面的木马不是木马
竟然是悠游在空气中的海马
挥动他的短胸鳍 游来游去

图片来源
待续..

动物园派对

在发牌之前我们先稍微小小调整一下房间的介面
先删掉之前用误加的bootstraper样式，因为现在是使用tailwindcss的daisyui

首先将玩家分成两栏位
这个跟bootstraper很接近
但是bootstraper是透过grid-system
col-6
在这边我们只要告诉他我们要用两栏
就可以分成两栏
grid-cols-2
然後再透过daisyui avatar
指定一个default的玩家图像

/app/views/rooms/show.erb

<%= turbo_stream_from @room %>

<%= turbo_frame_tag "room" do %>
  <%= render @room %>

  <p>
    <%= link_to 'Edit', edit_room_path(@room) %> |
    <%= link_to 'Back', rooms_path, "data-turbo-frame": "_top" %>
  </p>
<% end %>
// 欢迎来到游戏房间
<p>房间名称</p>
<%= @room.name %>
<p>房间板子</p>
<%= @room.board %>
<p>游戏人数</p>
<%= @room.number_of_gamer %>
<p>房间座位数量</p>
<%= @room.seats.count %>

<div class="grid w-full grid-cols-2 gap-6">
  <% @room.seats.each do |seat| %>
<!--      <p><%#= seat.user_id %></p>-->
    <div class="block">
      <span class="text-gray-700">Radio Buttons</span>
      <p>座位<%= seat.number %></p>
      <div class="avatar">
        <div class="mb-8 w-24 h-24 mask mask-squircle">
          <img src="http://daisyui.com/[email protected]">
        </div>
      </div>
      <div class="mt-6">
        <div>
          <label class="inline-flex items-center">
            <input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked>
            <span class="ml-2">Option 1</span>
          </label>
        </div>
      </div>
    </div>
  <% end %>
</div>

这麽一来我们就暂时有个简单的玩家ui了

阿虎每日选币

$doge 狗狗币收敛完准备起飞