diff --git a/assets/css/phoenix.css b/assets/css/phoenix.css index f95e1f6..708752f 100644 --- a/assets/css/phoenix.css +++ b/assets/css/phoenix.css @@ -569,3 +569,8 @@ select { .red-team-awards { background-color: red; } + +#player-info-text { + top: 16px; + right: 16px; +} \ No newline at end of file diff --git a/assets/js/app.js b/assets/js/app.js index 71012d0..73b0dab 100644 --- a/assets/js/app.js +++ b/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() diff --git a/lib/dream_up/players.ex b/lib/dream_up/players.ex index cd0fab4..3c99166 100644 --- a/lib/dream_up/players.ex +++ b/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 diff --git a/lib/dream_up_web/live/awards_live.ex b/lib/dream_up_web/live/awards_live.ex index 63cd257..2c6f756 100644 --- a/lib/dream_up_web/live/awards_live.ex +++ b/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 diff --git a/lib/dream_up_web/live/awards_live.html.leex b/lib/dream_up_web/live/awards_live.html.leex index 6e35c61..084a321 100644 --- a/lib/dream_up_web/live/awards_live.html.leex +++ b/lib/dream_up_web/live/awards_live.html.leex @@ -65,7 +65,7 @@ <% end %> -
+ Enter your name. +
++ If you know which color team you want to join, select that color. If you do not, pick a random color. Once everyone has joined, teams can be rebalanced as needed. +
+ <%#+ Pick a Character card that you feel best expresses your personality, working style, or skills. +
%> +The Maker
+The Rebel
+The Dreamer
+The Writer
+The Planner
+The Listener
+The Artist
+The Thinker
+The Storyteller
++ As the two teams are formed, you will see the members of the teams listed. The team leaders' names will be in bold. +
++ Check to see if teams need to be rebalanced (in terms of numbers of people and characters selected). +
++ Try to mix people who identify as introverted and extroverted; who are more analytical and who are more expressive; who are more linear and exploratory. When relevant, try to make teams with differing professional experiences (doctor, engineer and chef; artist, accountant and teacher). Also look for a diversity of skills: those who frequently create or make things, those who love to tell stories and share their thoughts in public forums, those who love meeting new people and make connections. Try to create a team with diverse life experiences -- think about age, where you grew up, where you have lived, changes or transitions in work, school or life, etc. +
+ When teams are balanced properly, continue to the next page. + + + Or... Instead of the above approach, split teams up randomly. Have each person draw a role card and then take on that role, whether it comes naturally to them or not! + +- Enter your name. -
-- If you know which color team you want to join, select that color. If you do not, pick a random color. Once everyone has joined, teams can be rebalanced as needed. -
- <%#- Pick a Character card that you feel best expresses your personality, working style, or skills. -
%> -The Maker
-The Rebel
-The Dreamer
-The Writer
-The Planner
-The Listener
-The Artist
-The Thinker
-The Storyteller
-- As the two teams are formed, you will see the members of the teams listed. The team leaders' names will be in bold. -
-- Check to see if teams need to be rebalanced (in terms of numbers of people and characters selected). -
-- Try to mix people who identify as introverted and extroverted; who are more analytical and who are more expressive; who are more linear and exploratory. When relevant, try to make teams with differing professional experiences (doctor, engineer and chef; artist, accountant and teacher). Also look for a diversity of skills: those who frequently create or make things, those who love to tell stories and share their thoughts in public forums, those who love meeting new people and make connections. Try to create a team with diverse life experiences -- think about age, where you grew up, where you have lived, changes or transitions in work, school or life, etc. -
- When teams are balanced properly, continue to the next page. - - - Or... Instead of the above approach, split teams up randomly. Have each person draw a role card and then take on that role, whether it comes naturally to them or not! - -+ +
+