@page
@model PongModel
@{
  ViewData["Title"] = "Pong";
}

<div class="text-center">
  <h1 class="display-4">Pong</h1>
  <h3 id="connection">Connection Status</h3>

  <button id="createlobby" class="btn btn-primary mb-3">Create Room</button>
  <button id="leavelobby" class="btn btn-primary mb-3 d-none">Leave Room</button>

  <div id="joinroomdiv" class="input-group mb-3">
    <input id="roomid" type="text" class="form-control" placeholder="Room ID" aria-label="Room ID" aria-describedby="joinroom">
    <button id="joinroom" class="btn btn-outline-secondary" type="button">Join Room</button>
  </div>

  <div class="input-group mb-3 has-validation">
    <input id="username" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="setusername">
    <button id="setusername" class="btn btn-outline-secondary" type="button">Set Username</button>
    <div id="usernameerror" class="invalid-feedback"></div>
  </div>

  <div>
    <h4>Room <span id="connectedroomid"></span></h4>
    <div id="canvas-container" class="mb-3"></div>
  </div>
</div>

<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
<script src="~/lib/signalr/dist/browser/signalr-protocol-msgpack.min.js"></script>
<script src="~/lib/pixi/dist/pixi.min.js"></script>
<script src="~/js/pong.js"></script>