221 lines
12 KiB
Plaintext
221 lines
12 KiB
Plaintext
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 h-screen-minus-header flex flex-col">
|
|
<%= render "games/header", game: @game, display_turn: @game.latest_turn, current_participant: @current_participant, hide_controls: true %>
|
|
|
|
<!-- ヘッダー -->
|
|
<div class="md:flex md:items-center md:justify-between mb-4 border-b pb-4">
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center">
|
|
<%= link_to game_boards_path(@game), class: "mr-4 text-gray-500 hover:text-gray-700" do %>
|
|
<i class="fa-solid fa-arrow-left"></i>
|
|
<% end %>
|
|
|
|
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
|
|
<% if @board.global? %>
|
|
<i class="fa-solid fa-earth-americas text-blue-500 mr-2"></i> Global Board
|
|
<% else %>
|
|
<i class="fa-solid fa-handshake text-green-500 mr-2"></i> Negotiation Board
|
|
<% end %>
|
|
</h2>
|
|
|
|
<% if @board.is_public? %>
|
|
<span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
|
<i class="fa-solid fa-bullhorn mr-1"></i> 公開中
|
|
</span>
|
|
<% end %>
|
|
|
|
<% if @board.history_mode? %>
|
|
<span class="ml-3 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
|
<i class="fa-solid fa-scroll mr-1"></i> 履歴モード
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
|
|
<div class="mt-2 flex items-center text-sm text-gray-500">
|
|
<i class="fa-solid fa-users flex-shrink-0 mr-1.5 text-gray-400"></i>
|
|
メンバー:
|
|
<% @active_members.each do |m| %>
|
|
<span class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border <%= power_color_class(m.power) %>">
|
|
<%= m.power %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex md:mt-0 md:ml-4 space-x-2">
|
|
<!-- 公開設定切り替え (交渉用かつ参加中のみ) -->
|
|
<% if @board.negotiation? && @board.member?(@current_participant) && !@board.history_mode? %>
|
|
<%= button_to toggle_public_game_board_path(@game, @board), method: :patch, class: "inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
|
<% if @board.is_public? %>
|
|
<i class="fa-solid fa-lock mr-1"></i> 非公開にする
|
|
<% else %>
|
|
<i class="fa-solid fa-bullhorn mr-1"></i> 公開する
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<!-- 退出ボタン (交渉用かつ参加中のみ) -->
|
|
<% if @board.negotiation? && @board.member?(@current_participant) && !@board.history_mode? %>
|
|
<%= button_to leave_game_board_board_memberships_path(@game, @board), method: :delete, data: { turbo_confirm: "本当に退出しますか？退出後はこの掲示板に投稿できなくなります。" }, class: "inline-flex items-center px-3 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" do %>
|
|
<i class="fa-solid fa-right-from-bracket mr-1"></i> 退出
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- 左: チャットエリア -->
|
|
<div class="flex-1 flex flex-col bg-white border border-gray-200 rounded-lg shadow-sm mr-4 overflow-hidden">
|
|
|
|
<!-- 投稿フォーム (上部に移動) -->
|
|
<% if @board.member?(@current_participant) && !@board.history_mode? %>
|
|
<div class="p-4 bg-gray-50 border-b border-gray-200">
|
|
<%= form_with model: [@game, @board, @new_post], local: true, class: "flex items-end space-x-2" do |f| %>
|
|
<div class="flex-1">
|
|
<%= f.text_area :body, rows: 2, placeholder: "メッセージを入力...", class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", required: true %>
|
|
</div>
|
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 h-10">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
<% elsif @board.history_mode? %>
|
|
<div class="p-4 bg-gray-100 border-b border-gray-200 text-center text-gray-500 text-sm">
|
|
履歴モードのため投稿できません
|
|
</div>
|
|
<% else %>
|
|
<div class="p-4 bg-gray-100 border-b border-gray-200 text-center text-gray-500 text-sm">
|
|
この掲示板には参加していません
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- メッセージリスト -->
|
|
<div id="board-posts"
|
|
class="flex-1 p-4 overflow-y-auto space-y-4"
|
|
data-controller="board-channel"
|
|
data-board-channel-board-id-value="<%= @board.id %>"
|
|
data-board-channel-current-participant-id-value="<%= @current_participant&.id %>">
|
|
<% if @posts.empty? %>
|
|
<div class="text-center text-gray-400 py-10" id="no-posts-message">
|
|
<p>まだ投稿がありません。最初のメッセージを投稿しましょう。</p>
|
|
</div>
|
|
<% else %>
|
|
<% @posts.each do |post| %>
|
|
<%= render partial: "post", locals: { post: post, current_participant: @current_participant } %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 右: サイドパネル（メンバー管理・提案） -->
|
|
<div class="w-80 flex flex-col space-y-4 overflow-y-auto">
|
|
|
|
<!-- 提案 (Proposals) -->
|
|
<% if @board.negotiation? %>
|
|
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
|
|
<div class="px-3 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700">
|
|
条約・提案
|
|
</div>
|
|
<div class="p-3 space-y-3">
|
|
<% @proposals.each do |proposal| %>
|
|
<div class="border rounded p-2 text-sm <%= proposal.status == 'accepted' ? 'bg-green-50 border-green-200' : (proposal.status == 'rejected' ? 'bg-red-50 border-red-200' : 'bg-white border-gray-200') %>">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<div>
|
|
<span class="font-bold text-xs mr-1"><%= proposal.proposer.power %></span>
|
|
<% if proposal.phase %>
|
|
<span class="text-xs bg-gray-100 text-gray-500 px-1 rounded border border-gray-200"><%= proposal.phase %></span>
|
|
<% end %>
|
|
</div>
|
|
<span class="text-xs text-gray-400"><%= l proposal.created_at, format: :short %></span>
|
|
</div>
|
|
<p class="mb-2"><%= proposal.body %></p>
|
|
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xs font-medium px-2 py-0.5 rounded
|
|
<%= case proposal.status
|
|
when 'pending' then 'bg-yellow-100 text-yellow-800'
|
|
when 'accepted' then 'bg-green-100 text-green-800'
|
|
when 'rejected' then 'bg-red-100 text-red-800'
|
|
end %>">
|
|
<%= proposal.status.upcase %>
|
|
</span>
|
|
|
|
<% if proposal.pending? && @board.member?(@current_participant) && !@board.history_mode? %>
|
|
<div class="flex space-x-1">
|
|
<%= button_to "承認", game_board_board_proposal_path(@game, @board, proposal, board_proposal: { status: 'accepted' }), method: :patch, class: "text-xs bg-green-100 hover:bg-green-200 text-green-800 px-2 py-1 rounded" %>
|
|
<%= button_to "拒否", game_board_board_proposal_path(@game, @board, proposal, board_proposal: { status: 'rejected' }), method: :patch, class: "text-xs bg-red-100 hover:bg-red-200 text-red-800 px-2 py-1 rounded" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if @board.member?(@current_participant) && !@board.history_mode? %>
|
|
<div class="mt-2 pt-2 border-t text-center">
|
|
<button type="button" onclick="document.getElementById('new-proposal-form').classList.toggle('hidden')" class="text-xs text-indigo-600 hover:text-indigo-800">
|
|
+ 新しい提案を作成
|
|
</button>
|
|
<div id="new-proposal-form" class="hidden mt-2">
|
|
<%= form_with model: [@game, @board, @new_proposal], local: true do |f| %>
|
|
<%= f.text_area :body, rows: 2, class: "w-full text-xs border-gray-300 rounded mb-2", placeholder: "提案内容 (例: 1901秋冬は不可侵)" %>
|
|
<%= f.submit "提案する", class: "w-full bg-indigo-600 text-white text-xs py-1 rounded hover:bg-indigo-700" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- メンバー招待 -->
|
|
<% if @board.negotiation? && @board.member?(@current_participant) && !@board.history_mode? %>
|
|
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
|
|
<div class="px-3 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700">
|
|
メンバー追加
|
|
</div>
|
|
<div class="p-3">
|
|
<% if @candidates.present? %>
|
|
<%= form_with url: game_board_board_memberships_path(@game, @board), local: true do |f| %>
|
|
<div class="flex space-x-2">
|
|
<%= f.collection_select :participant_id, @candidates, :id, :power, { prompt: "国を選択" }, { class: "block w-full text-xs border-gray-300 rounded" } %>
|
|
<%= f.submit "招待", class: "bg-indigo-600 text-white text-xs px-3 py-1 rounded hover:bg-indigo-700" %>
|
|
</div>
|
|
<% end %>
|
|
<% else %>
|
|
<p class="text-xs text-gray-500">招待可能なプレイヤーがいません</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- メンバー一覧 -->
|
|
<div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
|
|
<div class="px-3 py-2 bg-gray-50 border-b border-gray-200 font-medium text-sm text-gray-700">
|
|
参加メンバー
|
|
</div>
|
|
<ul class="divide-y divide-gray-200">
|
|
<% @board.board_memberships.includes(:participant).each do |membership| %>
|
|
<li class="px-3 py-2 flex items-center justify-between text-sm">
|
|
<div class="flex items-center">
|
|
<span class="<%= 'line-through text-gray-400' if membership.left_at %>">
|
|
<%= membership.participant.power %>
|
|
</span>
|
|
<% if membership.participant.user == current_user %>
|
|
<span class="ml-1 text-xs text-indigo-500">(YOU)</span>
|
|
<% end %>
|
|
</div>
|
|
<% if membership.left_at %>
|
|
<span class="text-xs text-red-500">退出済</span>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|