Merge pull request #4 from alexwolf47/alex/tidying-up-all-ui

Alex/tidying up all ui

assets/css/homepage.css

@@ -144,4 +144,16 @@ input[type='text'] {
 
 .row {
     margin-bottom: 0px;
+}
+
+.play-game-title {
+    text-align: center;
+    font-size: 48px;
+    background-image: linear-gradient(109deg, rgba(34, 219, 231, 1) -0.9%, rgba(52, 118, 246, 1) 88.7%);
+    transition: all 0.25s ease-in-out;
+}
+
+.play-game-title:hover {
+    transform: scale(0.97);
+    background-image: linear-gradient(118deg, rgba(34, 219, 231, 1) -0.9%, rgba(52, 118, 246, 1) 88.7%);
 }

lib/phoenix_royale/application.ex

@@ -14,7 +14,8 @@ defmodule PhoenixRoyale.Application do
       PhoenixRoyaleWeb.Endpoint,
       # Starts a worker by calling: PhoenixRoyale.Worker.start_link(arg)
       # {PhoenixRoyale.Worker, arg},
-      PhoenixRoyale.GameCoordinator
+      PhoenixRoyale.GameCoordinator,
+      PhoenixRoyale.GameChat
     ]
 
     # See https://hexdocs.pm/elixir/Supervisor.html

lib/phoenix_royale/game/game_chat.ex

@@ -0,0 +1,36 @@
+defmodule PhoenixRoyale.GameChat do
+  use GenServer
+
+  @server_name {:global, __MODULE__}
+
+  def start_link(_init_args) do
+    # you may want to register your server with `name: __MODULE__`
+    # as a third argument to `start_link`
+    GenServer.start_link(__MODULE__, %{messages: []}, name: @server_name)
+  end
+
+  def init(server) do
+    {:ok, server}
+  end
+
+  def state() do
+    GenServer.call(@server_name, :state)
+  end
+
+  def new_message(author, content) do
+    GenServer.cast(@server_name, {:new_message, author, content})
+  end
+
+  def handle_call(:state, _from, state) do
+    {:reply, state, state}
+  end
+
+  def handle_cast({:new_message, author, content}, state) do
+    if content == "" do
+      {:noreply, state}
+    else
+      message = {author, content}
+      {:noreply, %{state | messages: [message | state.messages]}}
+    end
+  end
+end

lib/phoenix_royale_web/live/dashboard_live.ex

@@ -1,6 +1,6 @@
 defmodule PhoenixRoyaleWeb.DashboardLive do
   use Phoenix.LiveView
-  alias PhoenixRoyale.{Account, GameStats}
+  alias PhoenixRoyale.{Account, GameStats, GameChat}
 
   def render(assigns) do
     Phoenix.View.render(PhoenixRoyaleWeb.DashboardView, "index.html", assigns)
@@ -9,6 +9,7 @@ defmodule PhoenixRoyaleWeb.DashboardLive do
   def mount(session, socket) do
     account = Account.by_id(session.account_id)
     :timer.send_after(3000, self(), :update)
+    :timer.send_after(500, self(), :chat_update)
     stats = GameStats.fetch_stats()
     live_games = GameStats.live_games()
 
@@ -17,18 +18,29 @@ defmodule PhoenixRoyaleWeb.DashboardLive do
        account_id: session.account_id,
        account: account,
        stats: stats,
-       live_games: live_games
+       live_games: live_games,
+       chat_messages: GameChat.state().messages
      )}
   end
 
   def handle_event("logout", _arg, socket) do
     {:noreply, socket}
   end
 
+  def handle_event("new_message", %{"message" => message}, socket) do
+    GameChat.new_message(socket.assigns.account.name, message)
+    {:noreply, assign(socket, chat_messages: GameChat.state().messages)}
+  end
+
   def handle_info(:update, socket) do
     :timer.send_after(3000, self(), :update)
     stats = GameStats.fetch_stats()
     live_games = GameStats.live_games()
     {:noreply, assign(socket, stats: stats, live_games: live_games)}
   end
+
+  def handle_info(:chat_update, socket) do
+    :timer.send_after(500, self(), :chat_update)
+    {:noreply, assign(socket, chat_messages: GameChat.state().messages)}
+  end
 end

lib/phoenix_royale_web/templates/dashboard/index.html.leex

@@ -230,7 +230,22 @@
 
                 </div>
             </div>
- <div class="dashboardBox">
+            <div class="dashboardBox">
+                  <a href="/play">
+                    <div>
+                      <div class="row">
+                          <div class="col s12 m12">
+                            <div class="card play-game-title" style="border-radius: 4px;">
+                              <div class="card-content white-text">
+                                <span class="card-title" style="font-size: 48px; padding: 32px 0px; color: #fff; font-weight: 800;">Play a game!</span>
+                              </div>
+
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                  </a>
+
                 <div>
                  <div class="row">
                     <div class="col s12 m12">
@@ -242,7 +257,7 @@
                             <% Enum.count(@live_games) == 0 -> %>
                             There are no games being played right now :(
 
-                          <% Enum.count(@live_games) <= 20 -> %>
+                          <% Enum.count(@live_games) <= 12 -> %>
                             <ul class="collection" style="margin-top: 32px; font-size: 16px;">
                               <%= for game <- @live_games do %>
 
@@ -253,12 +268,12 @@
 
 
                             <ul class="collection" style="margin-top: 32px; font-size: 16px;">
-                              <%= for game <- Enum.slice(@live_games, 0..19) do %>
+                              <%= for game <- Enum.slice(@live_games, 0..11) do %>
 
                                 <li class="collection-item blue-grey darken-4 "><span style="font-weight: 300; font-size: 12px;">Total:</span> <%= game.player_count %> <span style="font-weight: 300; font-size: 12px;">Alive:</span> <%= game.alive_count %></li>                          
                               <% end %>
                             </ul>
-                            There are more than 20 games being played right now!
+                            There are more than 12 games being played right now!
 
 
                           <% end %>
@@ -270,13 +285,44 @@
                   </div>
 
 
+                </div>
+            </div>
+            <div class="dashboardBox">
+                <div>
+                 <div class="row">
+                    <div class="col s12 m12">
+                      <div class="card blue-grey darken-4">
+                        <div class="card-content white-text">
+                          <span class="card-title">Chat</span>
+                            <%= unless @chat_messages == [] do %>
+                            <ul class="collection" style="margin-top: 32px; font-size: 16px;">
+
+                                <%= for {author, content} <- Enum.slice(@chat_messages, 0..12) do %>
+                                  <li class="collection-item blue-grey darken-4 "><span style="font-weight: 300; font-size: 12px; color: #E84855;"><%= author %>:</span> <%= content %></li>                          
+                                <% end %>
+
+                            </ul>
+                          <% end %>
+                          <%= f = form_for :message, "#", [phx_submit: :new_message] %>
+                          <input id="message" name="message"" type="text" value="" class="chatInput grey lighten-3" style="padding: 8px 0px; color: #E84855;">
+                          <%= submit "enter" %>
+                          </form>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+                    
+    
                 </div>
             </div>
         </div>
     </div>
 </div>
 
 
+
+
     <div class="dashboard-footer">
     <footer class="page-footer grey darken-4 dashboard-footer">
           <div class="container">

priv/static/css/app.css

@@ -348,6 +348,18 @@ input[type='text'] {
 .row {
     margin-bottom: 0px;
 }
+
+.play-game-title {
+    text-align: center;
+    font-size: 48px;
+    background-image: linear-gradient(109deg, rgba(34, 219, 231, 1) -0.9%, rgba(52, 118, 246, 1) 88.7%);
+    transition: all 0.25s ease-in-out;
+}
+
+.play-game-title:hover {
+    transform: scale(0.97);
+    background-image: linear-gradient(118deg, rgba(34, 219, 231, 1) -0.9%, rgba(52, 118, 246, 1) 88.7%);
+}
 /* This file is for your main application css. */
 body {
     margin: 0px;