Probuild Ex Part five

cover for article Probuild Ex Part five

In Part four we implemented the search feature on our liveview. In this fifth and final part we are going to:

  • Create a new query to fetch_game with details in our context App
  • Create a bunch of function components to origanise and reuse markups
  • Create a live component RowComponent

Part five assumes that you have already gone through Part four and have the code at a point where we can jump right in. If you want to checkout the companion code and fast forward to this point, do the following:

git clone cd probuild_ex git checkout eb78ead3d201c1c74478001e728de3198c8b5a7b

Table of contents

App fetch_game in details - commit

Edit lib/probuild_ex/app.ex

defmodule ProbuildEx.App do ... alias ProbuildEx.Games.{Game, Participant} ... @doc """ Fetch game complete per game_id. """ def fetch_game(game_id) do query = from game in Game, left_join: participants in assoc(game, :participants), left_join: summoners in assoc(participants, :summoner), preload: [ participants: {participants, summoner: summoners} ], where: == ^game_id, order_by: [ asc: participants.team_id, asc: fragment( "array_position(ARRAY['TOP', 'JUNGLE', 'MIDDLE', 'TOP', 'UTILITY'], ?)", participants.team_position ) ] case do nil -> {:error, :not_found} game -> {:ok, game} end end end

The idea here is to get a game with the ten participants and their summoner organized by team_id and team_position. We are using postgres array_position in a ecto fragment to sort per team_position.

Let's add some simple test to our fetch_game/1 function. Edit test/probuild_ex/app_test.exs

defmodule ProbuildEx.AppTest do ... describe "game" do ... test "fetch_game/1 should return a game" do {:ok, multi} = create_weiwei_game() assert {:ok, _game} = App.fetch_game( end test "fetch_game/1 should return an error" do assert {:error, :not_found} = App.fetch_game(1337) end end end

App game details - commit

We will do the game details that appear when a row is clicked. But first because we we can reuse some markup for game details we will create two modules of dumb components DdragonComponent and GridElementComponent.

Simple components

Create game_live/ddragon_component.ex

defmodule ProbuildExWeb.GameLive.DdragonComponent do @moduledoc false use Phoenix.Component alias ProbuildEx.Ddragon def champion(assigns) do ~H""" <div class="w-8 h-8 rounded-full overflow-hidden bg-gray-900"> <img src={Ddragon.get_champion_image(@game_version, @champion_id)} class="w-full" /> </div> """ end def summoner(assigns) do ~H""" <div class="w-8 h-8 rounded-full overflow-hidden bg-gray-900"> <img src={Ddragon.get_summoner_image(@game_version, @summoner_key)} class="w-full" /> </div> """ end def item(assigns) do ~H""" <div class="bg-gray-900 w-8 h-8 border border-gray-400"> <%= if src = Ddragon.get_item_image(@game_version, @item_key) do %> <img src={src} class="w-full" /> <% end %> </div> """ end def spinner(assigns) do ~H""" <img class={if not @load?, do: "invisible"} src="" /> """ end end

We put all the components related to Ddragon. Other than that nothing fancy it's simple Phoenix.Component than return markup.

Create game_live/grid_element_component.ex

defmodule ProbuildExWeb.GameLive.GridElementComponent do @moduledoc false use Phoenix.Component import ProbuildExWeb.GameLive.DdragonComponent def time_ago(assigns) do ~H""" <div class="grid-area-creation flex md:justify-center items-center"> <time id={["time", to_string(@participant_id)]} phx-hook="TimeAgo" datetime={@game_creation}></time> </div> """ end def pro_name(assigns) do ~H""" <div class="grid-area-player flex items-center"> <!-- Heroicon name: user-circle --> <svg xmlns="" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8"> <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" /> </svg> <span class="flex-1 ml-1 text-ellipsis overflow-hidden"> <%= @pro_name %> </span> </div> """ end def versus(assigns) do ~H""" <div class="grid-area-versus flex justify-center items-center space-x-1"> <.champion game_version={@game_version} champion_id={@champion_id} /> <span>vs</span> <.champion game_version={@game_version} champion_id={@opponent_champion_id} /> </div> """ end def kda(assigns) do ~H""" <div class="grid-area-kda flex justify-center items-center"> <span class="font-medium"> <%= @kills %> </span> / <span class="font-medium text-red-500"> <%= @deaths %> </span> / <span class="font-medium"> <%= @assists %> </span> </div> """ end def summoners(assigns) do ~H""" <div class="grid-area-summoners flex justify-center items-center space-x-1"> <%= for summoner_key <- @summoners do %> <.summoner game_version={@game_version} summoner_key={summoner_key} /> <% end %> </div> """ end def items(assigns) do ~H""" <div class="grid-area-build flex justify-center items-center space-x-1"> <%= for item_key <- @items do %> <.item game_version={@game_version} item_key={item_key} /> <% end %> </div> """ end def ellipsis(assigns) do ~H""" <div class="grid-area-ellipsis hidden md:flex flex-1 justify-center items-center"> <!-- Heroicon name: ellipsis-vertical --> <svg xmlns="" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M4.5 12a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd" /> </svg> </div> """ end def champion_block(assigns) do ~H""" <div class="grid-area-champion"> <.champion game_version={@game_version} champion_id={@champion_id} /> </div> """ end def summoner_champion(assigns) do ~H""" <div class="grid-area-summoner-name flex items-center"> <.champion game_version={@game_version} champion_id={@champion_id} /> <span class="ml-1 text-ellipsis overflow-hidden whitespace-nowrap"> <%= @summoner_name %> </span> </div> """ end def gold_earned(assigns) do ~H""" <div class="grid-area-gold flex justify-center items-center text-yellow-600"> <%= @gold_earned %> </div> """ end end

We break up each element in our row into a function, some elements can be used in Game and Game details. Other than that it's simple Phoenix.Component again.


For game details we will need another css grid.

Replace your assets/css/app.css

/* This file is for your main application CSS */ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; /* Custom grids */ .grid-participants-header { display: none; } @media (min-width: theme('')) { .grid-participants-header { display: grid; grid-template-columns: 11% 17% 12% 10% 10% 35% 4%; } .grid-team-participants-header { display: grid; grid-template-columns: 25% 11% 12% 12% 40%; } } .grid-participants { display: grid; grid-gap: 12px 0px; grid-template-rows: auto auto; grid-template-columns: 20% 20% 60%; grid-template-areas: 'player kda versus' 'creation summoners build'; } .grid-team-participants { display: grid; grid-gap: 3px 0px; grid-template-rows: auto auto; grid-template-columns: 60% 20% 20%; grid-template-areas: 'summoner-champion kda summoners' 'build . gold'; } @media (min-width: theme('')) { .grid-participants { grid-gap: 0px; grid-template-columns: 11% 17% 12% 10% 10% 35% 4%; grid-template-areas: 'creation player versus kda summoners build ellipsis'; } .grid-team-participants { grid-gap: 0px; grid-template-columns: 25% 11% 12% 12% 40%; grid-template-areas: 'summoner-champion summoners kda gold build '; } } .grid-area-creation { grid-area: creation; } .grid-area-player { grid-area: player; } .grid-area-versus { grid-area: versus; } .grid-area-kda { grid-area: kda; } .grid-area-summoners { grid-area: summoners; } .grid-area-build { grid-area: build; } .grid-area-ellipsis { grid-area: ellipsis; } .grid-area-summoner-champion { grid-area: summoner-champion; } .grid-area-gold { grid-area: gold; } /* Alerts and form errors used by */ .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert p { margin-bottom: 0; } .alert:empty { display: none; } .invalid-feedback { color: #a94442; display: block; margin: -1rem 0 2rem; } /* LiveView specific classes for your customization */ .phx-no-feedback.invalid-feedback, .phx-no-feedback .invalid-feedback { display: none; } .phx-click-loading { opacity: 0.5; transition: opacity 1s ease-out; } .phx-loading { cursor: wait; } .phx-modal { opacity: 1 !important; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .phx-modal-content { background-color: #fefefe; margin: 15vh auto; padding: 20px; border: 1px solid #888; width: 80%; } .phx-modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .phx-modal-close:hover, .phx-modal-close:focus { color: black; text-decoration: none; cursor: pointer; } .fade-in-scale { animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys; } .fade-out-scale { animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys; } .fade-in { animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys; } .fade-out { animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys; } @keyframes fade-in-scale-keys { 0% { scale: 0.95; opacity: 0; } 100% { scale: 1; opacity: 1; } } @keyframes fade-out-scale-keys { 0% { scale: 1; opacity: 1; } 100% { scale: 0.95; opacity: 0; } } @keyframes fade-in-keys { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out-keys { 0% { opacity: 1; } 100% { opacity: 0; } }

I use grid-area again it simplify the responsive version but it's not supported by tailwind yet so we need to add some extra css.

Create game_live/row_component.ex

defmodule ProbuildExWeb.GameLive.RowComponent do use ProbuildExWeb, :live_component alias Phoenix.LiveView.JS alias ProbuildEx.App import ProbuildExWeb.GameLive.GridElementComponent import ProbuildExWeb.GameLive.DdragonComponent @defaults %{ load_game?: false, game: nil, action: nil } def update(%{action: :query_game}, socket) do game_id = socket = case App.fetch_game(game_id) do {:ok, game} -> assign(socket, action: nil, game: game, load_game?: false) {:error, :not_found} -> socket end {:ok, socket} end def update(assigns, socket) do socket = socket |> assign(@defaults) |> assign(assigns) {:ok, socket} end def handle_event("load-game", _params, socket) do socket = cond do is_struct( -> socket is_nil( -> send_update(__MODULE__, id:, action: :query_game) assign(socket, load_game?: true) end {:noreply, socket} end def render(assigns) do ~H""" <div class={[if(, do: "border-blue-500", else: "border-red-500"), "hover:bg-gray-100 border-l-8 w-full max-w-3xl px-1 py-2 bg-white rounded-lg overflow-hidden shadow"]}> <div role="button" tabIndex="0" phx-click={JS.push("load-game") |> JS.toggle(to: "#participant-detail-#{}")} phx-target={@myself} class={[if(, do: "border-blue-500", else: "border-red-500"), "hover:bg-gray-100 hover:cursor-pointer w-full grid-participants "]}> <.time_ago participant_id={} game_creation={} /> <.pro_name pro_name={} /> <.versus game_version={} champion_id={@participant.champion_id} opponent_champion_id={@participant.opponent_participant.champion_id} /> <.kda kills={@participant.kills} deaths={@participant.deaths} assists={@participant.assists} /> <.summoners game_version={} summoners={@participant.summoners} /> <.items game_version={} items={@participant.items} /> <.ellipsis /> </div> <%= cond do %> <% @load_game? -> %> <div class="w-full flex justify-center"> <.spinner load?={@load_game?} /> </div> <% is_struct(@game) -> %> <.game_detail participant={@participant} game={@game} /> <% true -> %> <% end %> </div> """ end defp game_detail(assigns) do ~H""" <div id={"participant-detail-#{}"}> <div class="game-detail px-2 py-1 space-y-1"> <%= for {p, player_index} <- Enum.with_index(@game.participants, 1) do %> <%= if player_index in [1, 6] do %> <div class="px-2 w-full grid-team-participants-header text-xs"> <div> <%= if do %> <span class="text-blue-500 font-medium">Victory</span> <% else %> <span class="text-red-500 font-medium">Defeat</span> <% end %> <%= if(player_index == 1, do: "Blue side") %> <%= if(player_index == 6, do: "Red side") %> </div> <div class="hidden md:flex justify-center">Summoners</div> <div class="hidden md:flex justify-center">KDA</div> <div class="hidden md:flex justify-center">Gold earned</div> <div class="hidden md:flex justify-center">Build</div> </div> <% end %> <div class={[if( ==, do: "bg-gray-200"), "w-full grid-team-participants py-1 px-2 rounded-md"]}> <.summoner_champion game_version={} champion_id={p.champion_id} summoner_name={} /> <.summoners game_version={} summoners={p.summoners} /> <.kda kills={p.kills} deaths={p.deaths} assists={p.assists} /> <.gold_earned gold_earned={p.gold_earned} /> <.items game_version={} items={p.items} /> </div> <% end %> </div> </div> """ end end

This time it's a smart compononent aka live_component

The component should achieve the following:

  • When we click on the row we should fetch the game details and display it
  • While it's loading we should put our loading animation <.spinner />
  • If the row is clicked again we should hide the game details
  • If the row is clicked again we should display the game details without refetching the game details

In GameLive.Index we used send() with handle_info() to do a asynchronous loading while showing the <.spinner/>. For a live_component to achieve the same behavior we will use send_update with a specific action and a pattern match on this action on the update function.

The flow for a click on RowComponent is the following, notice we are using JS.push and JS.toggle

The render function:

  • We make usage of our GridElementComponent
  • Notice the phx-click with the phx-target @myself that call JS.push and JS.toggle shown in the diagram.
  • The cond to check if we should display the <.spinner/> or the <.game_detail />

The game_detail function:

  • We iterate over our participants and we add an index with Enum.with_index
  • Our participants are ordered per team and role so using the index we can split them in two blocks of five easily
  • We make usage of our GridElementComponent

GameLive view

Now we need to make our GameLive use our new RowComponent.

Edit game_live/index.html.heex at the top of the file add the alias and the import

defmodule ProbuildExWeb.GameLive.Index do ... alias ProbuildExWeb.GameLive.RowComponent import ProbuildExWeb.GameLive.DdragonComponent ...

Edit game_live/index.html.heex

<div class="flex flex-col"> <.form let={f} for={@changeset} phx-change="filter" phx-submit="filter"> <div class="flex justify-center"> <div class="md:max-w-3xl w-full"> <div class="px-2 md:px-0"> <div class="w-full mt-1 relative rounded-full shadow-sm"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <!-- Heroicon name: magnifying-glass --> <svg class="h-5 w-5 text-gray-400" xmlns="" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /> </svg> </div> <%= search_input(f, :search, phx_debounce: 300, class: "py-4 px-5 focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-full", placeholder: "Seach for a Champion or Pro Player") %> </div> </div> </div> </div> <div class="mt-3 flex flex-wrap justify-center"> <span class="relative z-0 inline-flex shadow-sm rounded-md"> <button phx-click="team_position" phx-value-position="" type="button" class="relative inline-flex items-center px-3 py-1 md:px-4 md:py-2 rounded-l-md border border-gray-300 bg-white text-xs md:text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">All Roles</button> <button phx-click="team_position" phx-value-position="TOP" type="button" class="-ml-px relative inline-flex items-center px-3 py-1 md:px-4 md:py-2 border border-gray-300 bg-white text-xs md:text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Top</button> <button phx-click="team_position" phx-value-position="JUNGLE" type="button" class="-ml-px relative inline-flex items-center px-3 py-1 md:px-4 md:py-2 border border-gray-300 bg-white text-xs md:text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Jungle</button> <button phx-click="team_position" phx-value-position="MIDDLE" type="button" class="-ml-px relative inline-flex items-center px-3 py-1 md:px-4 md:py-2 border border-gray-300 bg-white text-xs md:text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Middle</button> <button phx-click="team_position" phx-value-position="UTILITY" type="button" class="-ml-px relative inline-flex items-center px-3 py-1 md:px-4 md:py-2 border border-gray-300 bg-white text-xs md:text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Utility</button> <button phx-click="team_position" phx-value-position="BOTTOM" type="button" class="-ml-px relative inline-flex items-center px-3 py-1 md:px-4 md:py-2 rounded-r-md border border-gray-300 bg-white text-xs md:text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">Bottom</button> </span> <div> <%= select(f, :platform_id, App.Search.platform_options(), prompt: "All regions", class: "mt-1 md:mt-0 ml-2 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-xs md:text-sm rounded-md") %> </div> </div> </.form> <div class="mt-4 flex flex-col items-center space-y-1"> <%= cond do %> <% @loading? -> %> <div class="w-full max-w-3xl py-2 flex justify-center"> <.spinner load?={@loading?} /> </div> <% length(@participants) == 0 -> %> <div class="w-full max-w-3xl py-2 flex justify-center"> <div>No results...</div> </div> <% true -> %> <div class="w-full max-w-3xl grid-participants-header px-1 py-2 text-xs"> <div></div> <div>Pro player</div> <div class="flex justify-center">Matchup</div> <div class="flex justify-center">KDA</div> <div class="flex justify-center">Summoners</div> <div class="flex justify-center">Build</div> </div> <div id="participants" phx-update={@update} class="w-full max-w-3xl flex-1 flex flex-col items-center space-y-1"> <%= for participant <- @participants do %> <.live_component id={} module={RowComponent} participant={participant} /> <% end %> </div> <% end %> <div id="infinite-scroll" phx-hook="InfiniteScroll" data-page={@page.page_number} class="w-full max-w-3xl py-2 flex justify-center"> <.spinner load?={@load_more?} /> </div> </div> </div>

In the view we replaced the spinner images with our <.spinner/> components and we call our RowComponent in the participants loop.

Visit http://localhost:4000 we should see

Add game in realtime - commit

Now we want to add game in realtime to our dashboard, Phoenix come with PubSub.

Config PubSub

Edit config/config.exs replace the :pubsub_server key with the atom :pbx_pubsub

config :probuild_ex, ProbuildExWeb.Endpoint, url: [host: "localhost"], render_errors: [view: ProbuildExWeb.ErrorView, accepts: ~w(html json), layout: false], pubsub_server: :pbx_pubsub, live_view: [signing_salt: "0VmmhuEM"]

I prefer to use an atom over a module that does not exist.

Edit lib/probuild_ex/application.ex replace the :name key

# Start the PubSub system {Phoenix.PubSub, name: :pbx_pubsub},

Broadcast new pro participant

We will add some code to broadcast a game when the multi that create game is successfull.

Edit lib/probuild_ex/games.ex

defmodule ProbuildEx.Games do ... alias Phoenix.PubSub ... def create_game_complete(platform_id, match_data, summoners_list) do multi = Multi.insert(, :game, change_game(match_data)) multi = Enum.reduce(summoners_list, multi, fn summoner, multi -> reduce_put_or_create_summoner(platform_id, summoner, multi) end) participants = get_in(match_data, ["info", "participants"]) multi = Enum.reduce(participants, multi, &reduce_create_participant/2) multi = Enum.reduce(participants, multi, &reduce_set_opponent_participant/2) multi |> Repo.transaction() |> maybe_broadcast_game() end ... defp maybe_broadcast_game(multi_result) defp maybe_broadcast_game({:ok, multi}) do for {{:summoner, pro_puuid}, %{pro_id: pro_id}} when is_integer(pro_id) <- multi do participant = Map.get(multi, {:update_participant, pro_puuid}) PubSub.broadcast(:pbx_pubsub, "pro_participant:new", {:participant_id,}) end {:ok, multi} end defp maybe_broadcast_game(multi_result), do: multi_result end

We check the result of the multi and if it's a successfull we broadcast on the topic pro_participant:new a message with the new participant_id of pro players.

It's possible that a game have many pro players and in this case we should broadcast one message per pro_player.

Here is a diagram flow

Add a fetch_pro_participant in app context

Because we broadcast participant_id we need a function to retrieve the participant detail in the database. Edit lib/probuild_ex/games.ex

defmodule ProbuildEx.Games do ... def fetch_pro_participant(search_opts) do query = Enum.reduce(search_opts, pro_participant_base_query(), &reduce_pro_participant_opts/2) case do nil -> {:error, :not_found} participant -> {:ok, participant} end end ... defp reduce_pro_participant_opts({:participant_id, participant_id}, query) do from participant in query, where: == ^participant_id end ... end

We use the same pro_participant_base_query() as in the list_* we also add a reduce clause to be able to filter per participant_id

Subscribe to the topic in the GameLive

We want to add a button to subscribe / unsubscribe to the topic.

Edit game_live/index.ex

defmodule ProbuildExWeb.GameLive.Index do ... alias Phoenix.PubSub ... @defaults %{ page_title: "Listing games", update: "append", changeset: App.Search.changeset(), search: %App.Search{}, page: %Scrivener.Page{}, participants: [], loading?: true, load_more?: false, subscribed?: false } ... def handle_event("subscribe", _params, socket) do subscribed? = if socket.assigns.subscribed? do unsubscribe() else subscribe() end socket = assign(socket, :subscribed?, subscribed?) {:noreply, socket} end ... def handle_info({:participant_id, participant_id}, socket) do opts = |> App.Search.to_map() |> Map.put(:participant_id, participant_id) socket = case App.fetch_pro_participant(opts) do {:ok, participant} -> assign(socket, update: "prepend", participants: [participant]) {:error, _} -> socket end {:noreply, socket} end ... defp subscribe do case PubSub.subscribe(:pbx_pubsub, "pro_participant:new") do :ok -> true {:error, _} -> false end end defp unsubscribe do PubSub.unsubscribe(:pbx_pubsub, "pro_participant:new") false end end

Edit game_live/index.html.heex

<div class="mt-3 flex flex-wrap justify-center"> <button phx-click="subscribe" type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"> <div class="flex items-center"> <span class="font-medium"> Live <%= if(@subscribed?, do: "on", else: "off") %> </span> <span class="ml-1 flex h-3 w-3 relative"> <span class={[if(@subscribed?, do: "bg-sky-400", else: "bg-red-500"), "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"]}></span> <span class={[if(@subscribed?, do: "bg-sky-400", else: "bg-red-500"), "relative inline-flex rounded-full h-3 w-3"]}></span> </span> </div> </button> <span class="ml-2 relative z-0 inline-flex shadow-sm rounded-md">

We added:

  • a boolean subscribed? to the @default assigns.
  • a handle_event for the subscribe / unsubscribe and set the boolean in assign
  • a handle_info that will receive the broadcasted message with the participant_id and fetch it using the current search options (if it does not match the current search it will no be prepend)

I subscribed to the topic by clicking on the button then I filter by TOP position it also filter the real time game.

Perfomance wise it's not the best, it does to much db query but I want to keep it simple.

Deploy on - commit

You need to register on

Open a shell at the root of probuild_ex

# Install $ curl -L | sh # Login $ flyctl auth login # Setup the app and db $ fly launch Detected a Phoenix app ? App Name (leave blank to use an auto-generated name): ? Select organization: mrdotb (personal) ? Select region: cdg (Paris, France) Created app billowing-resonance-7078 in organization personal Set secrets on billowing-resonance-7078: SECRET_KEY_BASE Preparing system for Elixir builds Installing application dependencies Running Docker release generator Wrote config file fly.toml # Answer yes ? Would you like to set up a Postgresql database now? Yes For pricing information visit: ? Select configuration: Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk Creating postgres cluster billowing-resonance-7078-db in organization personal Postgres cluster billowing-resonance-7078-db created Username: postgres Password: 09c62867ee8e810ee0342d4294f25869220ee11310626101 Hostname: billowing-resonance-7078-db.internal Proxy Port: 5432 PG Port: 5433 Save your credentials in a secure place -- you won t be able to see them again! Monitoring Deployment 1 desired, 1 placed, 1 healthy, 0 unhealthy [health checks: 3 total, 3 passing] --> v0 deployed successfully # Wait a bit Connect to postgres Any app within the personal organization can connect to postgres using the above credentials and the hostname "billowing-resonance-7078-db.internal." For example: postgres://postgres:09c62867ee8e810ee0342d4294f25869220ee11310626101@billowing-resonance-7078-db.internal:5432 Now that you ve set up postgres, here s what you need to understand: Postgres cluster billowing-resonance-7078-db is now attached to billowing-resonance-7078 The following secret was added to billowing-resonance-7078: DATABASE_URL=postgres://billowing_resonance_7078:rtLepbpsreALuRO@top2.nearest.of.billowing-resonance-7078-db.internal:5432/billowing_resonance_7078 Postgres cluster billowing-resonance-7078-db is now attached to billowing-resonance-7078 # Answer no ? Would you like to deploy now? No Your Phoenix app should be ready for deployment!. If you need something else, post on our community forum at When you re ready to deploy, use 'fly deploy'.

We need to add our riot token to the generated runtime.exs On config/runtime.exs add

if config_env() == :prod do ... config :probuild_ex, ProbuildEx.RiotApi, token: System.get_env("RIOT_TOKEN") end

Open the shell again

# We add our RIOT_TOKEN to the secrets don't forget to refresh it if it's a development key $ fly secrets set RIOT_TOKEN=RGAPI-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Secrets are staged for the first deployment # Deploy $ fly deploy # After deployment is done $ fly open

It should open the url and start collecting data

Closing thoughts

Well done and thanks for sticking with me to the end! We covered quite a lot of ground and hopefully you picked up a couple of cool tips and tricks along the way. I encourage you to continue there still a lot that we can do with all those data. Examples:

  • A new liveview to display the most picked champions of pro player per patch / role/ region
  • A new liveview to display the best / worst champions winrate
  • Add new source to add pro player / streamers
  • Your ideas ...

I will try to keep the project running on If you want to show me what you did fork the repo and open an issue.

Be sure to sign up to the newsletter so that you won't miss my next article. Feel free to leave comments or feedback especially if you did the whole series. I also appreciate if you can star ⭐ the companion code repo.

Until Next Time !

Stay up to date

Sign up for the mailing list and get notified via email when new blog posts come out.