Skip to content

Instantly share code, notes, and snippets.

@mrdotb
Created September 22, 2022 12:02
Show Gist options
  • Save mrdotb/00863f176dbba0eec0f79e54cec5ed83 to your computer and use it in GitHub Desktop.
Save mrdotb/00863f176dbba0eec0f79e54cec5ed83 to your computer and use it in GitHub Desktop.
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.assigns.participant.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.assigns.game) ->
socket
is_nil(socket.assigns.game) ->
send_update(__MODULE__, id: socket.assigns.id, action: :query_game)
assign(socket, load_game?: true)
end
{:noreply, socket}
end
def render(assigns) do
~H"""
<div
class={[if(@participant.win, 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-#{@participant.id}")}
phx-target={@myself}
class={[if(@participant.win, do: "border-blue-500", else: "border-red-500"), "hover:bg-gray-100 hover:cursor-pointer w-full grid-participants "]}>
<.time_ago participant_id={@participant.id} game_creation={@participant.game.creation} />
<.pro_name pro_name={@participant.summoner.pro.name} />
<.versus game_version={@participant.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={@participant.game.version} summoners={@participant.summoners} />
<.items game_version={@participant.game.version} items={@participant.items} />
<.ellipsis />
</div>
<%= cond do %>
<% @load_game? -> %>
<.spinner load?={@load_game?} />
<% is_struct(@game) -> %>
<.game_detail participant={@participant} game={@game} />
<% true -> %>
<% end %>
</div>
"""
end
defp game_detail(assigns) do
~H"""
<div id={"participant-detail-#{@participant.id}"}>
<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 p.win 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(p.id == @participant.id, do: "bg-gray-200"), "w-full grid-team-participants py-1 px-2 rounded-md"]}>
<.summoner_champion
game_version={@participant.game.version}
champion_id={p.champion_id}
summoner_name={p.summoner.name} />
<.summoners game_version={@participant.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={@participant.game.version} items={p.items} />
</div>
<% end %>
</div>
</div>
"""
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment