<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lingo</title>
<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="style.css">
<script src="//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/@stomp/stompjs@5.4.4/bundles/stomp.umd.min.js"></script>
</head>
<body>
  <div id="vue-app" v-cloak>
    <div class="main column">
      <div class="header row">Lingo</div>
      <div class="body row nofooter">
        <div v-show="!username" class="form">
          <h2>What is your name?</h2>
          <input id="nicknameInput" type="text" class="form-control" maxlength="16">
          <p class="error-message">{{ usernameError }}</p>
        </div>
        <div v-show="username">
          <div v-bind:class="{ primary: !inStartedGame }" class="lobby column">
            <div class="body row noheader nofooter scroll-y">
              <div class="panel">
                <div class="panel-heading">
                  <h3 class="panel-title">Games</h3>
                </div>
                <div class="list-group">
                  <div v-if="games.length === 0" class="list-group-item">There are no games</div>
                  <template v-for="game in games">
                    <div v-if="game.started" v-bind:id="'game-' + game.id" class="list-group-item">
                      <strong>{{ game.playerOne }}</strong> vs. <strong>{{ game.playerTwo }}</strong>
                    </div>
                    <button v-else v-bind:id="'game-' + game.id" @click="joinGame" type="button" v-bind:disabled="inGame" class="list-group-item">
                      <strong>{{ game.playerOne }}</strong> wants to play a {{ game.wordLength }}-letter game
                    </button>
                  </template>
                </div>
              </div>
              <button v-show="inGame" @click="leaveGame" type="button" class="leave button">Leave game</button>
              <button v-show="!inGame" @click="hostGame5" type="button" class="create button">Create 5-letter game</button>
              <button v-show="!inGame" @click="hostGame6" type="button" class="create button">Create 6-letter game</button>
              <div class="panel">
                <div class="panel-heading">
                  <h3 class="panel-title">Players</h3>
                </div>
                <div class="list-group">
                  <div v-if="players.length === 0" class="list-group-item">There are no players</div>
                  <template v-for="player in players">
                    <div class="list-group-item user" v-if="player.username === username">{{ player.username }}</div>
                    <div class="list-group-item" v-else>{{ player.username }}</div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div v-bind:class="{ primary: inStartedGame }" class="game column">
            <div class="body row noheader nofooter">
              <div v-show="inStartedGame" @keydown="onCanvasKeydown" @keypress="onCanvasKeypress">
                <canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat column">
      <div class="header row">Chat</div>
      <div v-autoscroll class="body row scroll-y">
        <div v-for="message in messages" class="message-item" :class="{ log: !message.sender }">
          <strong v-if="message.sender">{{ message.sender }}</strong>
          <span>{{ message.body }}</span>
        </div>
      </div>
      <div class="footer row">
        <textarea @keypress="onChatKeypress" placeholder="Send a message" tabindex="2"></textarea>
      </div>
    </div>
  </div>

  <script src="client.js"></script>
</body>
</html>
