195 lines
9.3 KiB
Plaintext
195 lines
9.3 KiB
Plaintext
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<%= 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-6">
|
|
<div class="flex-1 min-w-0">
|
|
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
|
|
外交・交渉掲示板
|
|
</h2>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
他国との秘密交渉や全体へのアナウンスを行います。
|
|
</p>
|
|
</div>
|
|
<div class="mt-4 flex md:mt-0 md:ml-4">
|
|
<%= link_to game_path(@game), class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
|
<i class="fa-solid fa-map mr-2"></i> マップに戻る
|
|
<% end %>
|
|
|
|
<% if @game.status == 'in_progress' %>
|
|
<%= link_to new_game_board_path(@game), class: "ml-3 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
|
|
<i class="fa-solid fa-plus mr-2"></i> 新しい掲示板を作成
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if @game.status == 'finished' %>
|
|
<div class="mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-history text-yellow-400"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-yellow-700">
|
|
このゲームは終了しています。すべての掲示板は履歴モード（閲覧専用）です。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- 左カラム: 掲示板一覧 -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
<!-- 掲示板リスト -->
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
|
<ul role="list" class="divide-y divide-gray-200">
|
|
<% if @boards.empty? %>
|
|
<li class="px-4 py-4 sm:px-6 text-center text-gray-500 text-sm">
|
|
掲示板がありません
|
|
</li>
|
|
<% else %>
|
|
<% @boards.each do |board| %>
|
|
<li>
|
|
<%= link_to game_board_path(@game, board), class: "block hover:bg-gray-50" do %>
|
|
<div class="px-4 py-4 sm:px-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<% if board.global? %>
|
|
<span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-3">
|
|
<i class="fa-solid fa-earth-americas mr-1"></i> 共通
|
|
</span>
|
|
<p class="text-sm font-medium text-indigo-600 truncate">
|
|
Global Board (全体掲示板)
|
|
</p>
|
|
<% else %>
|
|
<span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-3">
|
|
<i class="fa-solid fa-handshake mr-1"></i> 交渉
|
|
</span>
|
|
<p class="text-sm font-medium text-indigo-600 truncate">
|
|
<% members = board.participants.map(&:power).compact.sort %>
|
|
<%= members.join(' / ') %>
|
|
</p>
|
|
<% end %>
|
|
|
|
<% if board.is_public? %>
|
|
<span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
|
|
<i class="fa-solid fa-bullhorn mr-1"></i> 公開中
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<div class="ml-2 flex-shrink-0 flex">
|
|
<% unread_count = board.unread_count_for(@current_participant) %>
|
|
<% if unread_count > 0 %>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
<%= unread_count %> 未読
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 sm:flex sm:justify-between">
|
|
<div class="sm:flex">
|
|
<p class="flex items-center text-sm text-gray-500">
|
|
<% last_post = board.board_posts.last %>
|
|
<% if last_post %>
|
|
<i class="fa-solid fa-comment-dots flex-shrink-0 mr-1.5 text-gray-400"></i>
|
|
<span class="truncate max-w-xs"><%= last_post.body.truncate(30) %></span>
|
|
<span class="ml-2 text-xs text-gray-400">- <%= last_post.participant.power %></span>
|
|
<% else %>
|
|
<span class="text-gray-400">投稿なし</span>
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
|
|
<% if last_post %>
|
|
<i class="fa-regular fa-clock flex-shrink-0 mr-1.5 text-gray-400"></i>
|
|
<p>
|
|
<%= time_ago_in_words(last_post.created_at) %>前
|
|
</p>
|
|
<% else %>
|
|
<p>
|
|
作成: <%= l board.created_at, format: :short %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右カラム: 外交関係マップ -->
|
|
<div class="space-y-6">
|
|
<div class="bg-white shadow rounded-lg border border-gray-200">
|
|
<div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
|
|
<h3 class="text-lg font-medium text-gray-900">外交関係マップ</h3>
|
|
<p class="text-xs text-gray-500 mt-1">
|
|
交渉チャンネルを持つ国同士の繋がり（相互のみ表示）
|
|
</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<!-- 簡易的なマトリックス表示 -->
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 text-xs">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-2 py-1"></th>
|
|
<% @diplomacy_matrix.keys.sort.each do |power| %>
|
|
<th class="px-2 py-1 font-bold text-gray-500 rotate-45 origin-bottom-left transform translate-x-2"><%= power[0..2] %></th>
|
|
<% end %>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<% @diplomacy_matrix.keys.sort.each do |row_power| %>
|
|
<tr>
|
|
<th class="px-2 py-1 font-bold text-gray-500 text-left"><%= row_power[0..2] %></th>
|
|
<% @diplomacy_matrix.keys.sort.each do |col_power| %>
|
|
<td class="px-2 py-1 text-center">
|
|
<% if row_power == col_power %>
|
|
<span class="text-gray-200">-</span>
|
|
<% elsif @diplomacy_matrix[row_power]&.include?(col_power) %>
|
|
<span class="text-green-600 font-bold">●</span>
|
|
<% else %>
|
|
<span class="text-gray-200">・</span>
|
|
<% end %>
|
|
</td>
|
|
<% end %>
|
|
</tr>
|
|
<% end %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4 text-xs text-gray-500">
|
|
<p>※ あなたが参加している掲示板、または公開された掲示板の関係のみ表示されます。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ヒント -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-md p-4">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<i class="fa-solid fa-circle-info text-blue-400"></i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-blue-800">交渉のヒント</h3>
|
|
<div class="mt-2 text-sm text-blue-700">
|
|
<ul role="list" class="list-disc pl-5 space-y-1">
|
|
<li>共通掲示板は全員が見ています。外交方針の発表に使いましょう。</li>
|
|
<li>特定の国と密約を結ぶには「新しい掲示板を作成」から招待してください。</li>
|
|
<li>交渉用掲示板の内容は、メンバー以外には秘密です（「公開」設定にしない限り）。</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|