make the lead suit in a round and the highest scoring card bonus much…

… more clear for everyone

lib/copi/cornucopia.ex

@@ -359,4 +359,14 @@ defmodule Copi.Cornucopia do
       |> Map.new(fn {round, played_cards} -> {round, Enum.sort_by(played_cards, &(&1.updated_at))} end) # Sort played cards in rounds by when played
       |> Enum.flat_map(fn {_round, ordered_played_cards} -> Enum.filter(ordered_played_cards, fn card -> card.card.category == List.first(ordered_played_cards).card.category or card.card.value in ["JokerA", "JokerB"] or String.upcase(card.card.category) == "CORNUCOPIA" end) end) # Back to a list of just the lead suit cards in each round (plus jokers and trump cards)
   end
+
+  def all_dealt_cards(game) do
+    Enum.reduce(game.players, [], fn player, cards -> player.dealt_cards ++ cards end)
+  end
+
+  def ordered_cards_played_in_round(game, round) do
+    all_dealt_cards(game)
+      |> Enum.filter(fn card -> card.played_in_round == round end)
+      |> Enum.sort_by(&(&1.updated_at))
+  end
 end

lib/copi_web/components/core_components/table_components.ex

@@ -7,6 +7,7 @@ defmodule CopiWeb.CoreComponents.TableComponents do
   attr :player_card, :map
   attr :is_current_player, :boolean, default: false
   attr :first_card_played, :map
+  attr :highest_scoring_card, :map
   slot :inner_block, required: true
 
   def card_drop_zone(assigns) do
@@ -25,7 +26,14 @@ defmodule CopiWeb.CoreComponents.TableComponents do
           <p class="text-center">Waiting for <%= @player.name %> to play their card</p>
         <% end %>
         <% else %>
-          <%= render_slot(@inner_block) %>
+          <div
+          class={[
+          "",
+          @player_card && @highest_scoring_card && @player_card.id == @highest_scoring_card.id && "ring-offset-2 ring-4 ring-amber-300"
+        ]}
+          >
+            <%= render_slot(@inner_block) %>
+          </div>
       <% end %>
     </div>
     """

lib/copi_web/live/game_live/show.html.heex

@@ -3,31 +3,53 @@
 </.header1>
 
 <%= if @game.started_at do %>
-<p class="">You're watching this game! You'll see all the cards as they're played and votes as they're cast.</p>
+
+  <% first_card_played = Copi.Cornucopia.ordered_cards_played_in_round(@game, @requested_round) |> List.first %>
+  <% highest_scoring_card = Copi.Cornucopia.highest_scoring_card_in_round(@game, @requested_round) %>
+
+  <p class="">You're watching this game! You'll see all the cards as they're played and votes as they're cast.</p>
 
   <%= if @game.finished_at do %>
   <h3>Thanks for playing! This game finished at <%= @game.finished_at %></h3>
   <% end %>
 
   <%= if @requested_round == @game.rounds_played + 1 do %>
-  <p class="my-8">Round <strong><%= @game.rounds_played + 1 %></strong> in progress</p>
+  <p class="my-8">Round <strong><%= @game.rounds_played + 1 %></strong>:
+    <%= if first_card_played do %>
+      <em><%= first_card_played.card.category %></em>
+    <% else %>
+      <em>No lead suit yet</em>
+    <% end %>
+  </p>
   <% else %>
-  <p class="my-8">Viewing round <strong><%= @requested_round %></strong></p>
+  <p class="my-8">Viewing round <strong><%= @requested_round %></strong>:
+    <%= if first_card_played do %>
+      <em><%= first_card_played.card.category %></em>
+    <% else %>
+      <em>No lead suit yet</em>
+    <% end %>
+  </p>
   <% end %>
 
-  <div class="flex flex-row justify-between gap-x-4" id="table">
+  <div class="flex flex-row justify-between gap-x-4 px-1" id="table">
     <%= for player <- @game.players do %>
       <% player_card = card_played_in_round(player.dealt_cards, @requested_round) %>
 
         <div class="card-player flex-col justify-start">
           <div class="name mb-4">
             <%= if player_card != nil && (Enum.count(player_card.votes) > (Enum.count(@game.players) - 1) / 2) do %>
-              <p class="font-bold"> <%= player.name %> Scored!</p> 
+              <p class="font-bold"> <%= player.name %> Scored
+                <%= if highest_scoring_card && highest_scoring_card.id == player_card.id do %>
+                  +2!
+                <% else %>
+                  +1!
+                <% end %>
+              </p> 
             <% else %>
               <p> <%= player.name %></p> 
             <% end %>
           </div>
-          <.card_drop_zone player={player} player_card={player_card}> 
+          <.card_drop_zone player={player} player_card={player_card} highest_scoring_card={highest_scoring_card}> 
             <CopiWeb.CardHTML.show card={player_card.card} />
           </.card_drop_zone>
 

lib/copi_web/live/player_live/show.ex

@@ -134,16 +134,6 @@ defmodule CopiWeb.PlayerLive.Show do
     Enum.find(dealt_card.votes, fn vote -> vote.player_id == player.id end)
   end
 
-  def all_dealt_cards(game) do
-    Enum.reduce(game.players, [], fn player, cards -> player.dealt_cards ++ cards end)
-  end
-
-  def ordered_cards_played_in_round(game, round) do
-    all_dealt_cards(game)
-      |> Enum.filter(fn card -> card.played_in_round == round end)
-      |> Enum.sort_by(&(&1.updated_at))
-  end
-
   def display_game_session(edition) do
     case edition do
       "webapp" -> "Cornucopia Web Session:"
@@ -153,4 +143,5 @@ defmodule CopiWeb.PlayerLive.Show do
       _ -> "EoP Session:"
     end
   end
+
 end

lib/copi_web/live/player_live/show.html.heex

@@ -9,16 +9,24 @@
 
   <%= if @player.game.started_at do %>
 
-  <% first_card_played = ordered_cards_played_in_round(@game, @game.rounds_played + 1) |> List.first %>
+  <% first_card_played = Copi.Cornucopia.ordered_cards_played_in_round(@game, @game.rounds_played + 1) |> List.first %>
   <% card_played = card_played_in_round(@player.dealt_cards, @game.rounds_played + 1) %>
+  <% highest_scoring_card = Copi.Cornucopia.highest_scoring_card_in_round(@game, @game.rounds_played + 1) %>
 
   <div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow">
     <div class="px-4 py-4 sm:px-6">
 
 
         <div class="flex flex-row gap-4 place-items-center justify-between">
 
-          <div>Hi <%= @player.name %>, it's round <strong><%= @game.rounds_played + 1 %></strong></div>
+          <div>Hi <%= @player.name %>, it's round <strong><%= @game.rounds_played + 1 %></strong>:
+            <%= if first_card_played do %>
+              <em><%= first_card_played.card.category %></em>
+            <% else %>
+              <em>No lead suit yet</em>
+            <% end %>
+
+          </div>
 
           <div class="flex gap-4 place-items-center">
             <%= if round_closed?(@game) do %>
@@ -38,7 +46,7 @@
     </div>
     <div class="px-4 py-5 sm:p-6">
 
-      <div class="flex flex-row justify-between gap-x-4" id="table">
+      <div class="flex flex-row justify-between gap-x-4 px-1" id="table">
         <%= for player <- @game.players |> player_first(@player) do %>
           <% player_card = card_played_in_round(player.dealt_cards, @game.rounds_played + 1) %>
 
@@ -50,22 +58,34 @@
                     <p>Drop a card here to play it!</p>
                   <% else %>
                     <%= if player_card != nil && Enum.count(player_card.votes) > (Enum.count(@game.players) - 1) / 2 do %>
-                    <p class="font-bold">Your Card Scored!</p> 
+                    <p class="font-bold">Your Card Scored
+                      <%= if highest_scoring_card && highest_scoring_card.id == player_card.id do %>
+                        +2!
+                      <% else %>
+                        +1!
+                      <% end %>
+                    </p> 
                     <% else %>
                         <p>Your Card</p>
                     <% end %>
                   <% end %>
 
                 <% else %>
                 <%= if player_card != nil &&  Enum.count(player_card.votes) > (Enum.count(@game.players) - 1) / 2 do %>
-                <p class="font-bold"> <%= player.name %> Scored!</p> 
+                  <p class="font-bold"> <%= player.name %> Scored
+                    <%= if highest_scoring_card && highest_scoring_card.id == player_card.id do %>
+                      +2!
+                    <% else %>
+                      +1!
+                    <% end %>
+                  </p> 
                 <% else %>
                   <p> <%= player.name %></p> 
                 <% end %>
                 <% end %>
               </div>
 
-              <.card_drop_zone is_current_player={player.id == @player.id} player={player} player_card={player_card} first_card_played={first_card_played}> 
+              <.card_drop_zone is_current_player={player.id == @player.id} player={player} player_card={player_card} first_card_played={first_card_played} highest_scoring_card={highest_scoring_card}> 
                 <CopiWeb.CardHTML.show card={player_card.card} />
               </.card_drop_zone>