kondiplo_front/app/views/games/index.html.erb

<p style="color: green"><%= notice %></p>

<% content_for :title, "Games" %>

<% content_for :top_content do %>
  <div class="flex justify-center mb-8">
    <%= image_tag "header-logo.png", width: 768, alt: "DipFront Logo" %>
  </div>
<% end %>

<div class="flex justify-between items-center mb-8">
  <h1 class="text-3xl font-bold text-gray-900">Games</h1>
  <%= link_to "New game", new_game_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
</div>

<% if current_user && @my_games.any? %>
  <div class="mb-10">
    <h2 class="text-2xl font-bold text-gray-900 mb-5 pl-2 border-l-4 border-[#c5a059] font-cinzel"><i class="fa-solid fa-flag mr-2 text-[#c5a059]"></i>参加中のゲーム</h2>
    <div id="my_games" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <% @my_games.each do |game| %>
        <div class="diplomacy-card overflow-hidden rounded-lg transition-transform hover:-translate-y-1 duration-300">
          <div class="bg-green-900 px-4 py-3 border-b border-[#c5a059]">
             <h3 class="text-lg font-bold text-[#c5a059] font-cinzel truncate"><%= game.title %></h3>
          </div>
          <div class="px-4 py-5 sm:p-6 bg-white/90">
             <div class="text-sm text-gray-700 space-y-2">
                <% if game.status == 'finished' %>
                  <p><i class="fa-solid fa-hourglass-end w-5 text-center text-gray-400"></i> <span class="font-medium">状態:</span> <span class="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full font-bold">履歴モード</span></p>
                <% else %>
                  <p><i class="fa-solid fa-hourglass-half w-5 text-center text-gray-400"></i> <span class="font-medium">状態:</span> <%= game.status %></p>
                <% end %>
                <% if game.turns.present? %>
                  <p><i class="fa-solid fa-calendar-days w-5 text-center text-gray-400"></i> <span class="font-medium">時期:</span> <%= parse_phase(game.turns.sort_by(&:number).last&.phase) %></p>
                <% end %>
               <% participant = game.participants.find_by(user: current_user) %>
               <% if participant %>
                 <p><i class="fa-solid fa-chess-king w-5 text-center text-gray-400"></i> <span class="font-medium">国:</span> <span class="font-bold text-green-800"><%= participant.power || '未選択' %></span></p>
                 <p>
                   <i class="fa-solid fa-pen-fancy w-5 text-center text-gray-400"></i> <span class="font-medium">命令:</span> 
                   <span class="<%= participant.orders_submitted ? 'text-green-600 font-bold' : 'text-red-500 font-bold' %>">
                     <%= participant.orders_submitted ? '完了' : '未完了' %>
                   </span>
                 </p>
               <% end %>
             </div>
          </div>
          <div class="bg-gray-50/90 px-4 py-3 sm:px-6 border-t border-gray-200 flex justify-end">
            <%= link_to game, class: "inline-flex items-center text-sm font-bold text-green-900 hover:text-[#c5a059] transition-colors" do %>
               プレイする <i class="fa-solid fa-arrow-right ml-2"></i>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

<% if @recruiting_games.any? %>
  <div class="mb-10">
    <h2 class="text-2xl font-bold text-gray-900 mb-5 pl-2 border-l-4 border-[#c5a059] font-cinzel"><i class="fa-solid fa-user-plus mr-2 text-[#c5a059]"></i>募集中のゲーム</h2>
    <div id="recruiting_games" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      <% @recruiting_games.each do |game| %>
        <div class="diplomacy-card overflow-hidden rounded-lg transition-transform hover:-translate-y-1 duration-300">
           <div class="bg-green-800 px-4 py-3 border-b border-[#c5a059]">
             <h3 class="text-lg font-bold text-white font-cinzel truncate"><%= game.title %></h3>
          </div>
          <div class="px-4 py-5 sm:p-6 bg-white/90">
             <div class="text-sm text-gray-700 space-y-2">
               <p><i class="fa-solid fa-users w-5 text-center text-gray-400"></i> <span class="font-medium">参加者:</span> <%= game.participants.count %> / <%= game.participants_count %></p>
               <% if game.password_protected? %>
                 <p class="text-amber-600"><i class="fa-solid fa-lock w-5 text-center"></i> パスワード保護</p>
               <% else %>
                 <p class="text-green-600"><i class="fa-solid fa-lock-open w-5 text-center"></i> 公開ゲーム</p>
               <% end %>
             </div>
          </div>
          <div class="bg-gray-50/90 px-4 py-3 sm:px-6 border-t border-gray-200 flex justify-end">
            <%= link_to game, class: "inline-flex items-center text-sm font-bold text-green-900 hover:text-[#c5a059] transition-colors" do %>
               詳細を見る <i class="fa-solid fa-arrow-right ml-2"></i>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

<div class="mb-8">
  <h2 class="text-2xl font-bold text-gray-900 mb-5 pl-2 border-l-4 border-gray-400 font-cinzel"><i class="fa-solid fa-list mr-2 text-gray-500"></i>すべてのゲーム</h2>
  <div id="games" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
    <% @games.each do |game| %>
      <div class="diplomacy-card overflow-hidden rounded-lg opacity-90 hover:opacity-100 transition-opacity">
        <div class="bg-gray-800 px-4 py-3 border-b border-gray-600">
             <h3 class="text-lg font-bold text-gray-300 font-cinzel truncate"><%= game.title %></h3>
        </div>
        <div class="px-4 py-5 sm:p-6 bg-white/90">
              <div class="text-sm text-gray-700">
                 <% if game.status == 'finished' %>
                    <p><i class="fa-solid fa-info-circle w-5 text-center text-gray-400"></i> <span class="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full font-bold">履歴モード</span></p>
                 <% else %>
                    <p><i class="fa-solid fa-info-circle w-5 text-center text-gray-400"></i> <%= game.status %></p>
                 <% end %>
                 <% if game.turns.present? %>
                    <p><i class="fa-solid fa-calendar-days w-5 text-center text-gray-400"></i> <span class="font-medium">時期:</span> <%= parse_phase(game.turns.sort_by(&:number).last&.phase) %></p>
                 <% end %>
                 <p><i class="fa-solid fa-users w-5 text-center text-gray-400"></i> <span class="font-medium">参加人数:</span> <%= game.participants.size %> / <%= game.participants_count %></p>
              </div>
        </div>
        <div class="bg-gray-50/90 px-4 py-3 sm:px-6 border-t border-gray-200 flex justify-end">
          <%= link_to game, class: "text-sm font-medium text-gray-600 hover:text-gray-900" do %>
            Show <i class="fa-solid fa-eye ml-1"></i>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>