Created
September 22, 2022 12:02
-
-
Save mrdotb/00863f176dbba0eec0f79e54cec5ed83 to your computer and use it in GitHub Desktop.
row_component.ex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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