game_live.html.leex

<div class="visible-elements-container">
  <div class="username-manager-container">
    <h1>
      Hello, <%= @username %>!
    </h1>

    <%= f = form_for :username, "#", [phx_submit: :change_username] %>
      <%= label f, :value, "Change username:" %>
      <%= text_input f, :value, required: true %>

      <div class="username-chooser-btn">
        <%= submit "Submit" %>
      </div>
    </form>
  </div>

  <div class="status-message-container">
    <h1>
      <%= @status_message %>
    </h1>
  </div>

  <div class="game-grid-wrapper">
    <div class="game-grid">
      <%= for cell_num <- 0..8 do %>
        <div class="game-cell" phx-click="click_cell" phx-value-cell-num="<%= cell_num %>">
          <%= case Enum.at(@game.board, cell_num) do %>
            <% :empty -> %>
            <% :x -> %>X
            <% :o -> %>O
          <% end %>
        </div>
      <% end %>
    </div>
  </div>

  <div class="new-game-button-container">
    <button class="new-game-button" phx-click="new_game">
      Start New Game
    </button>
  </div>

  <div class="user-list-container">
    <h1>
      User List:
    </h1>
    <ul class="user-list">
      <%= for name <- @all_names do %>
        <li>
          <%= name %>
        </li>
      <% end %>
    </ul>
  </div>
</div>