merge changes to lobby and setup html

assets/css/phoenix.css

@@ -123,12 +123,6 @@ body {
   padding: 0 2em;
 }
 
-/* .button button {
-  background-color: #B6CBF4;
-  width: 100%;
-  display: block;
-} */
-
 input[type=button], input[type=submit], input[type=reset] {
   color: #1E3A8A;
   background-color: rgba(129, 140, 248);
@@ -218,7 +212,36 @@ select {
   text-align: center;
   font-weight: 800;
 }
+/* lobby */
+.character {
+  margin: auto;
+  padding: 10px;
+  width: 200px;
+  height: 225px;
+  border: solid #2b327b 2px;
+  border-radius: 5%;
+}
+
+.character > p {
+  text-align: center;
+  color: #2b327b;
+  border: solid #2b327b 2px;
+}
+
+.lobby-instructions {
+  margin: auto;
+  padding: 10px;
+  width: 50%;
+  border: 2px solid black;
+  border-radius: 5px;
+}
+
+.lobby-instructions-container {
+  margin: auto;
+  padding: 10px;
+}
 
+/* cards */
 .card {
   position: relative;
   margin: auto;

lib/dream_up/players/player.ex

@@ -17,6 +17,6 @@ defmodule DreamUp.Players.Player do
   def changeset(player, attrs) do
     player
     |> cast(attrs, [:name, :game_id, :team, :team_leader, :character, :game_admin])
-    |> validate_required([:name, :game_id, :team, :character])
+    |> validate_required([:name, :game_id, :team])
   end
 end

lib/dream_up_web/live/lobby_live.html.leex

@@ -5,7 +5,7 @@
     <br>
     <h1 class="text-blue-900 text-4xl font-bold text-center">Join Game</h1>
     <div class=" m-auto max-w-xl p-4">
-        <%= if !@id do %>
+        <%= unless @id do %>
             <%= f = form_for @changeset, "#",
                             phx_submit: "save" %>
                 <div class="bg-white max-w-lg m-auto">
@@ -20,7 +20,7 @@
                                     ["Red": "red", "Blue": "blue"],
                                     value: input_value(f, :team)
                     %>
-                    <label for="player_character"> Character </label>
+                    <%# <label for="player_character"> Character </label>
                     <%= select f, :character,
                                     ["Artist": "artist", "Storyteller": "storyteller", "Dreamer": "dreamer", "Planner": "planner", "Listener": "listener", "Maker": "maker", "Rebel": "rebel", "Writer": "writer", "Thinker": "thinker" ],
                                     value: input_value(f, :character)
@@ -86,6 +86,83 @@
         <button class="defaultButton mt-12 text-blue-900 border-2 px-8 text-center" phx-click="begin-setup">Start Game</button>
     </div>
     <% end %>
+    <%= unless @id do%>
+         <%#instructions - pre join %>
+        <div class="lobby-instructions-container">
+            <div class="lobby-instructions">
+                <h1>Instructions:</h1>
+                <p>
+                Enter your name.
+                </p>
+                <p>
+                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.
+                </p>
+                <%# <p>
+                Pick a Character card that you feel best expresses your personality, working style, or skills.
+                </p> %>
+            </div>
+        </div>
+        <%# character image grid %>
+        <%# <div class="grid gap-4 md:grid-cols-3">
+            <div class="character">
+                <img src="/images/characters/maker.png">
+                <p>The Maker</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/rebel.png">
+                <p>The Rebel</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/dreamer.png">
+                <p>The Dreamer</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/writer.png">
+                <p>The Writer</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/planner.png">
+                <p>The Planner</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/listener.png">
+                <p>The Listener</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/artist.png">
+                <p>The Artist</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/thinker.png">
+                <p>The Thinker</p>
+            </div>
+            <div class="character">
+                <img src="/images/characters/storyteller.png">
+                <p>The Storyteller</p>
+            </div>
+        </div> %>
+    <% else %>
+        <%# instructions - post join %>
+        <div class="lobby-instructions-container">
+            <div class="lobby-instructions">
+                <h1>Instructions:</h1>
+                <p>
+                As the two teams are formed, you will see the members of the teams listed. The team leaders' names will be in bold. 
+                </p>
+                <p>
+                Check to see if teams need to be rebalanced (in terms of numbers of people and characters selected). 
+                </p>
+                <p>
+                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.
+                </p>
+                When teams are balanced properly, continue to the next page.
+                </p>
+                </p>
+                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! 
+                </p>
+            </div>
+        </div>
+    <% end %>
 </div>
 
 <script>

lib/dream_up_web/live/setup_live.html.leex

@@ -1,12 +1,12 @@
-<h1 phx-hook="header" class="text-blue-900 text-5xl font-bold">Setup</h1>
-<h2 class="text-blue-900 text-4xl font-bold mb-4">Hello <%= @player.name %>,
+<h1 phx-hook="header" class="text-blue-900 text-5xl font-bold p-4">Setup</h1>
+<h2 class="text-blue-900 text-4xl font-bold mb-4 p-4">Hello <%= @player.name %>,
   <%= if @is_single_team_game do %>
     you are on the only team.
   <% else %>
     you are on <%= @player.team %> team.
   <% end %>
 </h2>
-<h2 class="text-blue-900 text-4xl font-bold mb-4">
+<h2 class="text-blue-900 text-4xl font-bold mb-4 p-4">
   <%= if @player.team_leader === "blue" || @player.team_leader === "red" do %>
     <%= if @is_single_team_game do %>
       You are the team lead. Pick a Design Challenge for your team.
@@ -21,6 +21,9 @@
     <% end %>
   <% end %>
 </h2>
+<h2 class="text-blue-900 text-3xl font-bold mb-4 p-4">
+The goal of this game is that your team will DreamUp a solution for the OTHER team. Each team will pick the design challenge that they want the other team to work on FOR them. Once each team has picked the design challenge, they will annouce their assignment for the other team and answer the following questions: Why did your team choose this challenge? Have one or two members of your team share a story from their life about how this challenge affects them.
+</h2>
 <div id="selected-cards" class=
   <%= if @is_single_team_game do %>
     "mb-4"
@@ -30,7 +33,7 @@
 >
   <%= if !@is_single_team_game || @player.team === "red" do %>
     <div class="red-team team-box">
-      <p>
+      <p class="text-blue-900 text-3xl font-bold mb-4">
         <%= if @is_single_team_game do %>
           Your
         <% else %>