Merge in new lobby styling

References #22

assets/css/phoenix.css

@@ -569,3 +569,8 @@ select {
 .red-team-awards {
   background-color: red;
 }
+
+#player-info-text {
+  top: 16px;
+  right: 16px;
+}

assets/js/app.js

@@ -18,6 +18,24 @@ import topbar from "topbar"
 import {LiveSocket} from "phoenix_live_view"
 
 let Hooks = {}
+Hooks.header = {
+    mounted() {
+        this.handleEvent("updateHeader", (payload) => {
+            var playerInfo = document.getElementById("player-info");
+            var playerInfoText = document.getElementById("player-info-text");
+            playerInfo.className = "";
+            let team = payload.team.charAt(0).toUpperCase() + payload.team.slice(1);
+            let role = "Player";
+            if (payload.is_admin) {
+                role = "Game Admin";
+            } else if (payload.team_leader == "red" || payload.team_leader == "blue") {
+                role = "Team Leader";
+            }
+            playerInfoText.textContent = "Player: " + payload.name + " | Team: " + team + " | Role: " + role;
+        })
+    }
+}
+
 Hooks.Spinner = {
 
     beforeUpdate() {
@@ -36,7 +54,6 @@ let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_t
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
 window.addEventListener("phx:page-loading-start", info => topbar.show())
 window.addEventListener("phx:page-loading-stop", info => topbar.hide())
-
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 

lib/dream_up/players.ex

@@ -5,6 +5,7 @@ defmodule DreamUp.Players do
 
   import Ecto.Query, warn: false
   alias DreamUp.Repo
+  import Phoenix.LiveView
 
   alias DreamUp.Players.Player
 
@@ -144,4 +145,9 @@ defmodule DreamUp.Players do
       -1
     end
   end
+
+  def push_header_event(socket, player) do
+    push_event(socket, "updateHeader", %{name: player.name, team: player.team, team_leader: player.team_leader, is_admin: player.game_admin})
+  end
+
 end

lib/dream_up_web/live/awards_live.ex

@@ -28,7 +28,7 @@ defmodule DreamUpWeb.AwardsLive do
     if status !== :ok do
       {:noreply, redirect(new_socket, to: route)}
     else
-      {:noreply, new_socket}
+      {:noreply, Players.push_header_event(new_socket, new_socket.assigns.player)}
     end
   end
 

lib/dream_up_web/live/awards_live.html.leex

@@ -65,7 +65,7 @@
   </div>
 </div>
 <% end %>
-<div class="grid sm:grid-cols-3 lg:grid-cols-5 gap-4">
+<div phx-hook="header" class="grid sm:grid-cols-3 lg:grid-cols-5 gap-4">
   <%= for card <- @cards do %>
     <%= if card.type == "Award" do %>
       <div class="card award">

lib/dream_up_web/live/board_live.ex

@@ -30,17 +30,17 @@ defmodule DreamUpWeb.BoardLive do
       {:noreply, redirect(socket, to: route)}
     else
       if game.round_number === 0 do
-        socket = assign(socket, player: player, game: game, method_card: nil)
+        socket = assign(Players.push_header_event(socket, player), player: player, game: game, method_card: nil)
         if player.game_admin do
           {:noreply, countdown(socket)}
         else
           {:noreply, socket}
         end
       else
         if player.game_admin do
-          {:noreply, countdown(assign(socket, player: player, game: game, method_card: Cards.get_card!(Enum.at(Games.get_method_card_list(game), game.round_number - 1)), method_cards: method_cards))}
+          {:noreply, countdown(assign(Players.push_header_event(socket, player), player: player, game: game, method_card: Cards.get_card!(Enum.at(Games.get_method_card_list(game), game.round_number - 1)), method_cards: method_cards))}
         else
-          {:noreply, assign(socket, player: player, game: game, method_card: Cards.get_card!(Enum.at(Games.get_method_card_list(game), game.round_number - 1)), method_cards: method_cards)}
+          {:noreply, assign(Players.push_header_event(socket, player), player: player, game: game, method_card: Cards.get_card!(Enum.at(Games.get_method_card_list(game), game.round_number - 1)), method_cards: method_cards)}
         end
       end
     end

lib/dream_up_web/live/board_live.html.leex

@@ -1,4 +1,4 @@
-<div id="board">
+<div id="board" phx-hook="header">
   <div class="grid md:grid-cols-3 gap-4">
     <div>
       <div class="py-2 mb-2 text-center border-2 border-indigo-600 rounded">
@@ -200,15 +200,4 @@
       </div>
     <% end %>
   </div>
-</div>
-
-<script>
-  window.addEventListener("phx:page-loading-stop", info => topbar.hide())
-  animate_spinner(class_to_add) {
-    var spinner = document.getElementById("spinner");
-    spinner.style.animation = 'none';
-    spinner.offsetHeight;
-    spinner.style.animation = null;
-    spinner.className = class_to_add;
-  }
-</script>
+</div>

lib/dream_up_web/live/home_live.html.leex

@@ -1,4 +1,4 @@
-<div class="grid grid-cols-2 gap-4">
+<div id="header" phx-hook="header" class="grid grid-cols-2 gap-4">
     <div class="px-8">
         <h1 class="font-bold text-4xl pb-12">
             Enter Game Code:

lib/dream_up_web/live/lobby_live.ex

@@ -66,7 +66,7 @@ defmodule DreamUpWeb.LobbyLive do
         if status !== :ok do
           {:noreply, redirect(socket, to: route)}
         else
-          {:noreply, socket}
+          {:noreply, Players.push_header_event(socket, player)}
         end
       {:error, %Ecto.Changeset{} = changeset} ->
         socket = assign(socket, changest: changeset)
@@ -86,8 +86,7 @@ defmodule DreamUpWeb.LobbyLive do
 
     players = Players.list_players_in_game(socket.assigns.game_id)
 
-    socket = assign(socket, players: players, editing: false)
-    {:noreply, socket}
+    {:noreply, assign(Players.push_header_event(socket, Players.get_player!(socket.assigns.id)), players: players, editing: false)}
   end
 
   def handle_event("editing", %{"editing" => editing}, socket) do
@@ -119,8 +118,7 @@ defmodule DreamUpWeb.LobbyLive do
 
     players = Players.list_players_in_game(socket.assigns.game_id)
 
-    socket = assign(socket, players: players)
-    {:noreply, socket}
+    {:noreply, assign(Players.push_header_event(socket, Players.get_player!(id)), players: players)}
   end
 
   def handle_event("begin-setup", _, socket) do