implement no JS war card game, claude 3.7 sonnet thinking, one shot with light follow up

.cursorrules

···
 
 Do not provide code samples. Edit files directly and input the proper contents there.
 
-After a response, provide three follow-up questions worded as if I'm asking you to work through the logic as my pair.
-
-Format in bold as Q1, Q2, Q3. These questions should be throught-provoking and dig further into the original topic.
-
 If my response starts with "XX", give the most succinct, concise, shortest answer possible
 
 Code Style and Structure
···
   - Implement responsive design with Tailwind CSS.
   - Implement subtle javascript microinteractions as appropriate using Tailwind + Phoenix.LiveView.JS
   - Use Phoenix view helpers and templates to keep views DRY using @core_components.ex.
-  
+
 Performance Optimization
   - Use database indexing effectively.
   - Implement caching strategies using Nebulex
   - Use Ecto's preload to avoid N+1 queries.
   - Optimize database queries using preload, joins, or select.
-  
+
 Testing
   - Write comprehensive tests using ExUnit.
   - Follow TDD practices.
   - Use ExMachina for test data generation.
-  
+
 Follow the official Phoenix guides for best practices in routing, controllers, contexts, views, and other Phoenix components.
 
 Reuse code as appropriate, but also remember that premature abstraction and DRY can be problematic in their own right.  If we are going to reuse code, we should do our best to not need to modify existing interfaces

lib/blog/application.ex

···
       # Start the Wordle stores
       Blog.Wordle.WordStore,
       Blog.Wordle.GameStore,
+      # Start the Presence service for real-time user tracking
+      BlogWeb.Presence,
     ]
 
     # Pre-load the Games modules to ensure they're available
···
         # Start the Wordle stores
         Blog.Wordle.WordStore,
         Blog.Wordle.GameStore,
+        # Start the Presence service for real-time user tracking
+        BlogWeb.Presence,
       ]
 
       opts = [strategy: :one_for_one, name: Blog.Supervisor]
···
     Enum.each([
       {:reddit_links, [:ordered_set, :public, read_concurrency: true]},
       {:bookmarks_table, [:set, :public, read_concurrency: true]},
-      {:pong_games, [:set, :public]}
+      {:pong_games, [:set, :public]},
+      {:war_players, [:set, :public, read_concurrency: true, write_concurrency: true]}
     ], fn {table_name, table_opts} ->
       # Only create if it doesn't exist
       if :ets.whereis(table_name) == :undefined do

lib/blog_web/live/war_live.ex

···
+defmodule BlogWeb.WarLive do
+  use BlogWeb, :live_view
+  alias BlogWeb.Presence
+  require Logger
+
+  @topic "war:lobby"
+  @ping_interval 5000
+  @ets_table :war_players
+
+  @impl true
+  def mount(_params, session, socket) do
+    # For testing purposes, generate a unique random ID for each tab
+    # Use the timestamp + random number to ensure uniqueness
+    timestamp = DateTime.utc_now() |> DateTime.to_unix()
+    random_suffix = :rand.uniform(1000)
+    tab_unique_id = "user_#{timestamp}_#{random_suffix}"
+
+    # Either use existing user_id from session or create a new unique one
+    user_id = session["user_id"] || tab_unique_id
+
+    # Generate a random display name for this user as default
+    display_name = generate_display_name()
+
+    if connected?(socket) do
+      # Subscribe to presence updates and ping topic
+      Phoenix.PubSub.subscribe(Blog.PubSub, @topic)
+
+      # Track user in presence with a unique mnemonic name for easier testing
+      {:ok, _} = Presence.track(self(), @topic, user_id, %{
+        online_at: timestamp,
+        status: "available",
+        display_name: display_name
+      })
+
+      # Also store in ETS for persistence across all sessions
+      store_player_in_ets(user_id, %{
+        online_at: timestamp,
+        status: "available",
+        display_name: display_name
+      })
+
+      # Broadcast player joined to ensure all clients update
+      Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:player_joined, user_id})
+
+      # Set up ping interval to keep presence fresh
+      :timer.send_interval(@ping_interval, :ping)
+    end
+
+    # Get ALL players from ETS
+    all_players = get_all_players_from_ets()
+
+    socket = socket
+      |> assign(:user_id, user_id)
+      |> assign(:players, all_players)
+      |> assign(:game_state, nil)
+      |> assign(:invitations, %{})
+      |> assign(:sent_invitations, %{})
+      |> assign(:card_deck, nil)
+      |> assign(:edit_name, false)
+      |> assign(:name_form, %{"display_name" => display_name})
+
+    {:ok, socket}
+  end
+
+  # Generate a random display name for easier identification during testing
+  defp generate_display_name do
+    # Lists of adjectives and animals to create a readable identifier
+    adjectives = ~w(Red Blue Green Yellow Purple Orange Tiny Big Fast Slow Happy Silly Smart Brave Wild Calm)
+    animals = ~w(Lion Tiger Bear Wolf Fox Panda Koala Eagle Shark Dolphin Rabbit Turtle Elephant Giraffe Kangaroo)
+
+    adjective = Enum.random(adjectives)
+    animal = Enum.random(animals)
+
+    "#{adjective}#{animal}"
+  end
+
+  # Helper function to get the display name for a player
+  def player_display_name(nil), do: "Unknown Player"
+  def player_display_name(player) when is_map(player) do
+    Map.get(player, :display_name, "Player")
+  end
+
+  # View helper functions for card display
+  def card_color("hearts"), do: "text-red-600"
+  def card_color("diamonds"), do: "text-red-600"
+  def card_color("clubs"), do: "text-gray-800"
+  def card_color("spades"), do: "text-gray-800"
+
+  def display_card_value("jack"), do: "J"
+  def display_card_value("queen"), do: "Q"
+  def display_card_value("king"), do: "K"
+  def display_card_value("ace"), do: "A"
+  def display_card_value(value), do: value
+
+  def display_card_suit("hearts"), do: "♥"
+  def display_card_suit("diamonds"), do: "♦"
+  def display_card_suit("clubs"), do: "♣"
+  def display_card_suit("spades"), do: "♠"
+
+  def time_ago(timestamp) do
+    now = DateTime.utc_now() |> DateTime.to_unix()
+    diff = now - timestamp
+
+    cond do
+      diff < 60 -> "#{diff} seconds"
+      diff < 3600 -> "#{div(diff, 60)} minutes"
+      diff < 86400 -> "#{div(diff, 3600)} hours"
+      true -> "#{div(diff, 86400)} days"
+    end
+  end
+
+  # Store player in ETS for persistence across all sessions
+  defp store_player_in_ets(user_id, player_data) do
+    :ets.insert(@ets_table, {user_id, player_data})
+  end
+
+  # Remove player from ETS
+  defp remove_player_from_ets(user_id) do
+    :ets.delete(@ets_table, user_id)
+  end
+
+  # Get all players from ETS
+  defp get_all_players_from_ets do
+    case :ets.tab2list(@ets_table) do
+      [] -> %{}
+      players ->
+        players
+        |> Enum.map(fn {user_id, data} -> {user_id, data} end)
+        |> Map.new()
+    end
+  end
+
+  # Handle name editing
+  @impl true
+  def handle_event("toggle_edit_name", _, socket) do
+    {:noreply, assign(socket, :edit_name, !socket.assigns.edit_name)}
+  end
+
+  @impl true
+  def handle_event("change_name_form", %{"display_name" => display_name}, socket) do
+    {:noreply, assign(socket, :name_form, %{"display_name" => display_name})}
+  end
+
+  @impl true
+  def handle_event("save_display_name", %{"display_name" => display_name}, socket) do
+    # Validate name is not empty
+    display_name = String.trim(display_name)
+    display_name = if display_name == "", do: generate_display_name(), else: display_name
+
+    # Update presence with new name
+    user_id = socket.assigns.user_id
+    current_meta = Map.get(socket.assigns.players, user_id, %{})
+
+    updated_meta = Map.put(current_meta, :display_name, display_name)
+
+    # Update in Presence
+    {:ok, _} = Presence.update(self(), @topic, user_id, updated_meta)
+
+    # Update in ETS
+    store_player_in_ets(user_id, updated_meta)
+
+    # Broadcast name change to all clients
+    Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:name_changed, user_id, display_name})
+
+    # Update local assigns
+    all_players = get_all_players_from_ets()
+
+    socket = socket
+      |> assign(:players, all_players)
+      |> assign(:edit_name, false)
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("invite_player", %{"id" => player_id}, socket) do
+    invitation = %{
+      from: socket.assigns.user_id,
+      to: player_id,
+      timestamp: DateTime.utc_now() |> DateTime.to_unix()
+    }
+
+    # Broadcast invitation - only the recipient will store it
+    Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:invitation, invitation})
+
+    # Add a sent_invitations list to track outgoing invitations for UI feedback
+    sent_invitations = Map.get(socket.assigns, :sent_invitations, %{})
+    socket = socket
+      |> assign(:sent_invitations, Map.put(sent_invitations, player_id, invitation))
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("accept_invitation", %{"from" => from_id}, socket) do
+    # Get invitation
+    invitation = socket.assigns.invitations[from_id]
+
+    if invitation do
+      # Start new game
+      game_state = start_new_game(from_id, socket.assigns.user_id)
+
+      # Broadcast game start
+      Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:game_started, game_state})
+
+      # Update socket
+      socket = socket
+        |> assign(:game_state, game_state)
+        |> assign(:invitations, Map.drop(socket.assigns.invitations, [from_id]))
+
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_event("decline_invitation", %{"from" => from_id}, socket) do
+    # Remove invitation
+    socket = socket
+      |> assign(:invitations, Map.drop(socket.assigns.invitations, [from_id]))
+
+    # Broadcast decline
+    Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:invitation_declined, %{
+      from: from_id,
+      to: socket.assigns.user_id
+    }})
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("play_card", _params, socket) do
+    game_state = socket.assigns.game_state
+
+    if game_state do
+      # Update game state based on card play
+      updated_game = play_round(game_state, socket.assigns.user_id)
+
+      # Broadcast game update
+      Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:game_updated, updated_game})
+
+      socket = socket |> assign(:game_state, updated_game)
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_event("continue_round", _params, socket) do
+    game_state = socket.assigns.game_state
+
+    if game_state && game_state.scoring_phase do
+      # Now resolve the round
+      updated_game = resolve_round(game_state)
+
+      # Broadcast game update
+      Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:game_updated, updated_game})
+
+      socket = socket |> assign(:game_state, updated_game)
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_info({:name_changed, user_id, _display_name}, socket) do
+    # When any player changes their name, refresh the player list
+    all_players = get_all_players_from_ets()
+
+    socket = socket |> assign(:players, all_players)
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_info({:player_joined, _user_id}, socket) do
+    # When any player joins, refresh the complete player list from ETS
+    all_players = get_all_players_from_ets()
+    socket = socket |> assign(:players, all_players)
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_info({:player_left, _user_id}, socket) do
+    # When any player leaves, refresh the complete player list from ETS
+    all_players = get_all_players_from_ets()
+    socket = socket |> assign(:players, all_players)
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_info({:invitation, invitation}, socket) do
+    # Only process invitations sent to this user
+    if invitation.to == socket.assigns.user_id do
+      socket = socket
+        |> assign(:invitations, Map.put(socket.assigns.invitations, invitation.from, invitation))
+
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_info({:invitation_declined, invitation}, socket) do
+    # Only process invitations sent by this user
+    if invitation.from == socket.assigns.user_id do
+      socket = socket
+        |> assign(:sent_invitations, Map.drop(socket.assigns.sent_invitations, [invitation.to]))
+
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_info({:game_started, game_state}, socket) do
+    # Only process game starts that involve this user
+    if game_state.player1 == socket.assigns.user_id || game_state.player2 == socket.assigns.user_id do
+      socket = socket
+        |> assign(:game_state, game_state)
+        |> assign(:invitations, %{})
+        |> assign(:sent_invitations, %{})
+
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_info({:game_updated, game_state}, socket) do
+    # Only process game updates for the current game
+    if socket.assigns.game_state && game_state.id == socket.assigns.game_state.id do
+      socket = socket |> assign(:game_state, game_state)
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_info(%Phoenix.Socket.Broadcast{event: "presence_diff", payload: diff}, socket) do
+    # Handle leaves first - remove from ETS
+    if map_size(diff.leaves) > 0 do
+      for {user_id, _} <- diff.leaves do
+        # Remove from ETS
+        remove_player_from_ets(user_id)
+        # Broadcast player left
+        Phoenix.PubSub.broadcast!(Blog.PubSub, @topic, {:player_left, user_id})
+      end
+
+      # Clean up invitations for players who left
+      socket = update_invitations_after_players_left(socket, Map.keys(diff.leaves))
+    end
+
+    # Handle joins - update ETS with new player data
+    if map_size(diff.joins) > 0 do
+      for {user_id, %{metas: [meta | _]}} <- diff.joins do
+        # Add to ETS
+        store_player_in_ets(user_id, meta)
+      end
+    end
+
+    # Update socket with fresh player list
+    all_players = get_all_players_from_ets()
+    socket = socket |> assign(:players, all_players)
+
+    # Also update game state if needed - if a player in the game left
+    socket = check_game_state_for_disconnects(socket, diff.leaves)
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_info(:ping, socket) do
+    {:noreply, socket}
+  end
+
+  # Check if any player who left was in the current game
+  defp check_game_state_for_disconnects(socket, leaves) do
+    game_state = socket.assigns.game_state
+
+    if game_state do
+      player_left = Enum.any?(Map.keys(leaves), fn user_id ->
+        user_id == game_state.player1 || user_id == game_state.player2
+      end)
+
+      if player_left do
+        assign(socket, :game_state, nil)
+      else
+        socket
+      end
+    else
+      socket
+    end
+  end
+
+  # Remove invitations for players who left
+  defp update_invitations_after_players_left(socket, left_user_ids) do
+    # Remove invitations TO users who left
+    # Remove invitations FROM users who left
+    updated_invitations = socket.assigns.invitations
+      |> Map.drop(left_user_ids)
+      |> Enum.reject(fn {_, inv} -> Enum.member?(left_user_ids, inv.from) end)
+      |> Map.new()
+
+    # Also clean up sent invitations to users who left
+    updated_sent_invitations = socket.assigns.sent_invitations
+      |> Map.drop(left_user_ids)
+
+    socket
+      |> assign(:invitations, updated_invitations)
+      |> assign(:sent_invitations, updated_sent_invitations)
+  end
+
+  # Private functions
+
+  defp start_new_game(player1, player2) do
+    deck = create_deck() |> shuffle_deck()
+    {player1_cards, player2_cards} = deal_cards(deck)
+
+    %{
+      id: "game_#{:rand.uniform(1000000)}",
+      player1: player1,
+      player2: player2,
+      player1_cards: player1_cards,
+      player2_cards: player2_cards,
+      player1_card: nil,
+      player2_card: nil,
+      war_pile: [],
+      war_in_progress: false,
+      scoring_phase: false,
+      winner: nil,
+      status: "playing"
+    }
+  end
+
+  defp create_deck do
+    suits = ["hearts", "diamonds", "clubs", "spades"]
+    values = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "jack", "queen", "king", "ace"]
+
+    for suit <- suits, value <- values do
+      %{
+        suit: suit,
+        value: value,
+        rank: card_rank(value)
+      }
+    end
+  end
+
+  defp card_rank(value) do
+    case value do
+      "2" -> 2
+      "3" -> 3
+      "4" -> 4
+      "5" -> 5
+      "6" -> 6
+      "7" -> 7
+      "8" -> 8
+      "9" -> 9
+      "10" -> 10
+      "jack" -> 11
+      "queen" -> 12
+      "king" -> 13
+      "ace" -> 14
+    end
+  end
+
+  defp shuffle_deck(deck) do
+    Enum.shuffle(deck)
+  end
+
+  defp deal_cards(deck) do
+    {player1_cards, player2_cards} = Enum.split(deck, div(length(deck), 2))
+    {player1_cards, player2_cards}
+  end
+
+  defp play_round(game, user_id) do
+    # If a war is in progress, explain that cards have already been played automatically
+    if game.war_in_progress do
+      game  # Return game unchanged - war is handled automatically
+    else
+      # If we're in scoring phase, don't allow additional card plays
+      if game.scoring_phase do
+        game
+      else
+        # Only proceed if it's this player's turn or if waiting for both cards
+        if game.player1_card == nil || game.player2_card == nil do
+          cond do
+            user_id == game.player1 && game.player1_card == nil && length(game.player1_cards) > 0 ->
+              [card | rest] = game.player1_cards
+              game = %{game | player1_card: card, player1_cards: rest}
+              check_round_completion(game)
+
+            user_id == game.player2 && game.player2_card == nil && length(game.player2_cards) > 0 ->
+              [card | rest] = game.player2_cards
+              game = %{game | player2_card: card, player2_cards: rest}
+              check_round_completion(game)
+
+            true ->
+              game
+          end
+        else
+          game
+        end
+      end
+    end
+  end
+
+  defp check_round_completion(game) do
+    if game.player1_card != nil && game.player2_card != nil do
+      # When both cards are played, enter scoring phase rather than
+      # immediately resolving
+      %{game | scoring_phase: true}
+    else
+      game
+    end
+  end
+
+  defp resolve_round(game) do
+    player1_rank = game.player1_card.rank
+    player2_rank = game.player2_card.rank
+
+    war_pile = [game.player1_card, game.player2_card | game.war_pile]
+
+    cond do
+      # Player 1 wins the round
+      player1_rank > player2_rank ->
+        player1_cards = game.player1_cards ++ war_pile
+        %{game |
+          player1_cards: player1_cards,
+          player2_cards: game.player2_cards,
+          player1_card: nil,
+          player2_card: nil,
+          war_pile: [],
+          war_in_progress: false,
+          scoring_phase: false,
+          winner: check_for_winner(player1_cards, game.player2_cards)
+        }
+
+      # Player 2 wins the round
+      player2_rank > player1_rank ->
+        player2_cards = game.player2_cards ++ war_pile
+        %{game |
+          player1_cards: game.player1_cards,
+          player2_cards: player2_cards,
+          player1_card: nil,
+          player2_card: nil,
+          war_pile: [],
+          war_in_progress: false,
+          scoring_phase: false,
+          winner: check_for_winner(game.player1_cards, player2_cards)
+        }
+
+      # War! (equal cards)
+      true ->
+        handle_war(game, war_pile)
+    end
+  end
+
+  defp handle_war(game, war_pile) do
+    # Check if either player doesn't have enough cards for war
+    cond do
+      # If player 1 has fewer than 2 cards, they lose (need 1 face down, 1 face up)
+      length(game.player1_cards) < 2 ->
+        %{game |
+          player1_cards: [],
+          player2_cards: game.player2_cards ++ war_pile,
+          player1_card: nil,
+          player2_card: nil,
+          war_pile: [],
+          war_in_progress: false,
+          scoring_phase: false,
+          winner: "player2"
+        }
+
+      # If player 2 has fewer than 2 cards, they lose (need 1 face down, 1 face up)
+      length(game.player2_cards) < 2 ->
+        %{game |
+          player1_cards: game.player1_cards ++ war_pile,
+          player2_cards: [],
+          player1_card: nil,
+          player2_card: nil,
+          war_pile: [],
+          war_in_progress: false,
+          scoring_phase: false,
+          winner: "player1"
+        }
+
+      true ->
+        # Each player places one card face down
+        [face_down_1 | rest_1] = game.player1_cards
+        [face_down_2 | rest_2] = game.player2_cards
+
+        # Each player places one card face up (automated)
+        [face_up_1 | new_rest_1] = rest_1
+        [face_up_2 | new_rest_2] = rest_2
+
+        # Add face down cards to war pile
+        updated_war_pile = [face_down_1, face_down_2 | war_pile]
+
+        # Compare the face up cards
+        face_up_1_rank = face_up_1.rank
+        face_up_2_rank = face_up_2.rank
+
+        cond do
+          # Player 1 wins the war
+          face_up_1_rank > face_up_2_rank ->
+            # Player 1 gets all cards including face up cards
+            player1_cards = new_rest_1 ++ [face_up_1, face_up_2 | updated_war_pile]
+            %{game |
+              player1_cards: player1_cards,
+              player2_cards: new_rest_2,
+              player1_card: nil,
+              player2_card: nil,
+              war_pile: [],
+              war_in_progress: false,
+              scoring_phase: false,
+              winner: check_for_winner(player1_cards, new_rest_2)
+            }
+
+          # Player 2 wins the war
+          face_up_2_rank > face_up_1_rank ->
+            # Player 2 gets all cards including face up cards
+            player2_cards = new_rest_2 ++ [face_up_1, face_up_2 | updated_war_pile]
+            %{game |
+              player1_cards: new_rest_1,
+              player2_cards: player2_cards,
+              player1_card: nil,
+              player2_card: nil,
+              war_pile: [],
+              war_in_progress: false,
+              scoring_phase: false,
+              winner: check_for_winner(new_rest_1, player2_cards)
+            }
+
+          # Another war! (face up cards are equal)
+          true ->
+            # Add the face up cards to the war pile and continue
+            new_war_pile = [face_up_1, face_up_2 | updated_war_pile]
+            # Recursive call to handle the next war
+            handle_war(
+              %{game |
+                player1_cards: new_rest_1,
+                player2_cards: new_rest_2,
+                war_pile: new_war_pile,
+                war_in_progress: true
+              },
+              []
+            )
+        end
+    end
+  end
+
+  defp check_for_winner(player1_cards, player2_cards) do
+    cond do
+      Enum.empty?(player1_cards) -> "player2"
+      Enum.empty?(player2_cards) -> "player1"
+      true -> nil
+    end
+  end
+end

lib/blog_web/live/war_live.html.heex

···
+<div class="mx-auto max-w-6xl px-4 py-8">
+  <h1 class="mb-8 text-3xl font-bold text-center">War Card Game</h1>
+
+  <div class="mb-6 bg-slate-100 rounded-lg p-4 shadow-md">
+    <div class="bg-blue-100 border border-blue-300 p-3 rounded-md mb-4 text-blue-800">
+      <div class="flex items-center justify-between">
+        <div>
+          <p><strong>Test Mode:</strong> Open this page in multiple tabs to play against yourself.</p>
+          <p class="text-xs text-blue-600 font-mono mt-1">ID: <%= @user_id %></p>
+        </div>
+        <div class="flex items-center">
+          <%= if @edit_name do %>
+            <form phx-submit="save_display_name" phx-change="change_name_form" class="flex items-center">
+              <input type="text" name="display_name" value={@name_form["display_name"]}
+                class="px-2 py-1 border border-blue-400 rounded mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter name"
+                autofocus
+                maxlength="20" />
+              <button type="submit" class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600 transition-colors duration-200">
+                Save
+              </button>
+            </form>
+          <% else %>
+            <div class="flex items-center mr-2">
+              <span class="font-semibold mr-2">Your name:</span>
+              <span class="text-blue-700 font-medium"><%= player_display_name(@players[@user_id]) %></span>
+            </div>
+            <button phx-click="toggle_edit_name" class="text-sm bg-blue-200 text-blue-800 px-2 py-1 rounded hover:bg-blue-300 transition-colors duration-200">
+              Change Name
+            </button>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <%= if @game_state do %>
+      <div class="p-4 mb-4 bg-white rounded-lg shadow-inner">
+        <div class="flex justify-between items-center mb-4">
+          <div class="text-lg">
+            <span class="font-bold">Player 1:</span>
+            <span class={if @game_state.player1 == @user_id, do: "text-blue-600 font-bold", else: ""}>
+              <%= player_display_name(@players[@game_state.player1]) %>
+            </span>
+            <span class="ml-2 text-sm">(<%= length(@game_state.player1_cards) %> cards)</span>
+            <%= if @game_state.player1 == @user_id do %>
+              <span class="ml-1 text-xs font-semibold bg-blue-100 px-1 py-0.5 rounded-full text-blue-800">YOU</span>
+            <% end %>
+          </div>
+          <div class="text-lg">
+            <span class="font-bold">Player 2:</span>
+            <span class={if @game_state.player2 == @user_id, do: "text-blue-600 font-bold", else: ""}>
+              <%= player_display_name(@players[@game_state.player2]) %>
+            </span>
+            <span class="ml-2 text-sm">(<%= length(@game_state.player2_cards) %> cards)</span>
+            <%= if @game_state.player2 == @user_id do %>
+              <span class="ml-1 text-xs font-semibold bg-blue-100 px-1 py-0.5 rounded-full text-blue-800">YOU</span>
+            <% end %>
+          </div>
+        </div>
+
+        <div class="flex justify-center mb-6">
+          <%= if @game_state.winner do %>
+            <div class="text-center bg-yellow-100 p-4 rounded-lg w-full">
+              <h3 class="text-2xl font-bold mb-2">
+                Game Over!
+              </h3>
+              <p class="text-xl">
+                <%= if @game_state.winner == "player1" do %>
+                  <%= player_display_name(@players[@game_state.player1]) %> wins!
+                <% else %>
+                  <%= player_display_name(@players[@game_state.player2]) %> wins!
+                <% end %>
+              </p>
+            </div>
+          <% else %>
+            <div class="text-center mb-4">
+              <%= if @game_state.war_in_progress do %>
+                <div class="bg-red-100 p-4 rounded-lg mb-2 text-red-700 font-bold text-xl">
+                  WAR!
+                </div>
+                <p>Each player has placed one card face down and one card face up</p>
+                <div class="text-sm mt-2">
+                  <%= length(@game_state.war_pile) %> cards in war pile
+                </div>
+                <div class="text-sm italic mt-2 text-gray-600">
+                  In a war, each player automatically puts one card face down and one card face up.
+                  The player with the higher face up card wins all cards. If they tie again, another war is triggered.
+                </div>
+              <% end %>
+
+              <%= if @game_state.scoring_phase do %>
+                <div class="mt-4">
+                  <div class="mb-2">
+                    <%= cond do %>
+                      <% @game_state.player1_card && @game_state.player2_card && @game_state.player1_card.rank > @game_state.player2_card.rank -> %>
+                        <div class="text-green-600 font-semibold">
+                          <%= player_display_name(@players[@game_state.player1]) %> wins this round!
+                        </div>
+                      <% @game_state.player1_card && @game_state.player2_card && @game_state.player2_card.rank > @game_state.player1_card.rank -> %>
+                        <div class="text-green-600 font-semibold">
+                          <%= player_display_name(@players[@game_state.player2]) %> wins this round!
+                        </div>
+                      <% @game_state.player1_card && @game_state.player2_card -> %>
+                        <div class="text-red-600 font-semibold">
+                          Cards are equal! War is triggered!
+                        </div>
+                      <% true -> %>
+                        <div class="text-gray-600 font-semibold">
+                          Resolving round...
+                        </div>
+                    <% end %>
+                  </div>
+                  <button phx-click="continue_round" class="mt-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors duration-200">
+                    Continue
+                  </button>
+                </div>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="flex justify-center items-center gap-8 mb-6">
+          <!-- Player 1's card -->
+          <div class="w-32 h-44 rounded-lg relative">
+            <%= if @game_state.player1_card do %>
+              <div class="absolute inset-0 bg-white border-2 border-gray-300 rounded-lg shadow-lg flex flex-col justify-center items-center p-2">
+                <div class={["text-3xl font-bold", card_color(@game_state.player1_card.suit)]}>
+                  <%= display_card_value(@game_state.player1_card.value) %>
+                </div>
+                <div class={["text-4xl mt-2", card_color(@game_state.player1_card.suit)]}>
+                  <%= display_card_suit(@game_state.player1_card.suit) %>
+                </div>
+              </div>
+            <% else %>
+              <%= if !@game_state.winner && !@game_state.scoring_phase && @game_state.player1 == @user_id && length(@game_state.player1_cards) > 0 do %>
+                <button phx-click="play_card" class="absolute inset-0 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-lg flex flex-col justify-center items-center transition-colors duration-200">
+                  <div class="text-xl font-bold">Play Card</div>
+                </button>
+              <% else %>
+                <div class="absolute inset-0 bg-gray-200 border-2 border-gray-300 rounded-lg flex justify-center items-center">
+                  <span class="text-gray-500 text-lg">
+                    <%= cond do %>
+                      <% @game_state.winner -> %>
+                        Game Over
+                      <% @game_state.scoring_phase -> %>
+                        Awaiting Continue
+                      <% true -> %>
+                        Waiting...
+                    <% end %>
+                  </span>
+                </div>
+              <% end %>
+            <% end %>
+          </div>
+
+          <!-- VS -->
+          <div class="text-2xl font-bold text-gray-600">VS</div>
+
+          <!-- Player 2's card -->
+          <div class="w-32 h-44 rounded-lg relative">
+            <%= if @game_state.player2_card do %>
+              <div class="absolute inset-0 bg-white border-2 border-gray-300 rounded-lg shadow-lg flex flex-col justify-center items-center p-2">
+                <div class={["text-3xl font-bold", card_color(@game_state.player2_card.suit)]}>
+                  <%= display_card_value(@game_state.player2_card.value) %>
+                </div>
+                <div class={["text-4xl mt-2", card_color(@game_state.player2_card.suit)]}>
+                  <%= display_card_suit(@game_state.player2_card.suit) %>
+                </div>
+              </div>
+            <% else %>
+              <%= if !@game_state.winner && !@game_state.scoring_phase && @game_state.player2 == @user_id && length(@game_state.player2_cards) > 0 do %>
+                <button phx-click="play_card" class="absolute inset-0 bg-blue-500 hover:bg-blue-600 text-white rounded-lg shadow-lg flex flex-col justify-center items-center transition-colors duration-200">
+                  <div class="text-xl font-bold">Play Card</div>
+                </button>
+              <% else %>
+                <div class="absolute inset-0 bg-gray-200 border-2 border-gray-300 rounded-lg flex justify-center items-center">
+                  <span class="text-gray-500 text-lg">
+                    <%= cond do %>
+                      <% @game_state.winner -> %>
+                        Game Over
+                      <% @game_state.scoring_phase -> %>
+                        Awaiting Continue
+                      <% true -> %>
+                        Waiting...
+                    <% end %>
+                  </span>
+                </div>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+
+        <div class="flex justify-between">
+          <!-- Player 1's deck -->
+          <div class="w-24 h-32 relative">
+            <%= if length(@game_state.player1_cards) > 0 do %>
+              <div class="absolute inset-0 bg-blue-700 rounded-lg shadow-md flex justify-center items-center">
+                <div class="text-white text-sm font-bold">
+                  <%= length(@game_state.player1_cards) %> cards
+                </div>
+              </div>
+            <% else %>
+              <div class="absolute inset-0 border-2 border-dashed border-gray-300 rounded-lg flex justify-center items-center">
+                <div class="text-gray-400 text-sm">Empty</div>
+              </div>
+            <% end %>
+          </div>
+
+          <!-- Player 2's deck -->
+          <div class="w-24 h-32 relative">
+            <%= if length(@game_state.player2_cards) > 0 do %>
+              <div class="absolute inset-0 bg-blue-700 rounded-lg shadow-md flex justify-center items-center">
+                <div class="text-white text-sm font-bold">
+                  <%= length(@game_state.player2_cards) %> cards
+                </div>
+              </div>
+            <% else %>
+              <div class="absolute inset-0 border-2 border-dashed border-gray-300 rounded-lg flex justify-center items-center">
+                <div class="text-gray-400 text-sm">Empty</div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% else %>
+      <!-- Lobby -->
+      <div class="bg-white p-4 rounded-lg">
+        <h3 class="text-xl font-bold mb-4">Lobby</h3>
+
+        <!-- Incoming invitations -->
+        <%= if map_size(@invitations) > 0 do %>
+          <div class="mb-4">
+            <h4 class="font-bold text-lg mb-2">Invitations:</h4>
+            <div class="space-y-2">
+              <%= for {from_id, invitation} <- @invitations do %>
+                <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200">
+                  <div>
+                    <span class="font-medium"><%= player_display_name(@players[from_id]) %></span> has invited you to play
+                  </div>
+                  <div class="flex space-x-2">
+                    <button phx-click="accept_invitation" phx-value-from={invitation.from} class="px-3 py-1 bg-green-500 hover:bg-green-600 text-white rounded transition-colors duration-200">
+                      Accept
+                    </button>
+                    <button phx-click="decline_invitation" phx-value-from={invitation.from} class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded transition-colors duration-200">
+                      Decline
+                    </button>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+
+        <h4 class="font-bold text-lg mb-2">Players Online:</h4>
+        <%= if map_size(@players) > 1 do %>
+          <div class="space-y-2">
+            <%= for {player_id, meta} <- @players do %>
+              <%= if player_id != @user_id do %>
+                <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg border border-slate-200">
+                  <div>
+                    <span class="font-medium"><%= player_display_name(meta) %></span>
+                    <span class="text-xs text-gray-500 ml-2">
+                      online for <%= time_ago(meta.online_at) %>
+                    </span>
+                  </div>
+                  <%= if Map.has_key?(@sent_invitations, player_id) do %>
+                    <div class="text-orange-500 text-sm italic">
+                      Invitation sent
+                    </div>
+                  <% else %>
+                    <button phx-click="invite_player" phx-value-id={player_id} class="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded transition-colors duration-200">
+                      Invite to Play
+                    </button>
+                  <% end %>
+                </div>
+              <% end %>
+            <% end %>
+          </div>
+        <% else %>
+          <div class="p-4 text-center text-gray-500 italic">
+            Waiting for other players to join...
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

lib/blog_web/router.ex

···
     live "/generative-art", GenerativeArtLive, :index
     # live "/breakout", BreakoutLive, :index
     live "/blackjack", BlackjackLive, :index
+    live "/war", WarLive, :index
   end
 
   # Other scopes may use custom stacks.