<div class="game-header">
  <h2>The Word Guessing Game</h2>
  <p id="game_intro">The game that insults you, whether you win or lose!</p>
</div>
<form id="user_info" method="_POST">
  <div class="form_container" id="user_info_container">
    <div class="form_container" id="splash_screen">
      <div class="formField">
        <label for="user_name">Please enter your name</label>
        <input type="text" name="user_name" id="user_name" maxlength="32"  value="Guest" />
      </div>
      <div class="formField">
        <input type="submit" id="save_user_button" value="Guest" />
      </div>
    </div>
  </div>
</form>
<form id="game_form" method="_POST">
  <div class="form_container" id="gameplay_container">
    <div id="game-howto">
      <p class="center-text">
        Please enter a single alphabetical character (A-Z) into the input
        box belowand and click &quot;Guess&quot; to see if the letter
        exists in the hidden word.</p>
      </p>
    </div>
    <div><p id="notifications"></p></div>
    <div class="formField word-display-field">
      <ul id="current_word"></ul>
    </div>
    <div id="alphabet_container" class="alphabet-grid">
      </div>
    <div id="guess_letter_container" class="formField">
      <p>Guess a letter:</p>
      <input
        type="text"
        name="guess_letter"
        id="guess_letter"
        size="1"
        maxlength="1"
        pattern="[a-zA-Z]"
        value=""
        required
        placeholder="?"
      />
    </div>
    <div id="game_metrics">
      <div class="formField metric_group">
        <span class="label">Attempts</span>
        <input type="number" step="1" id="guess_count" value="0" disabled />
      </div>
      <div class="formField">
        <span class="label">Guesses</span>
        <ul id="guesses"></ul>
      </div>
    </div>
    <div class="submitField">
      <input
        type="submit"
        id="guess_button"
        name="guess_button"
        value="Guess"
      />
    </div>
  </div>
</form>
<div id="scoreboard_overlay">
  <div>
    <div>Total words completed</div>
    <div id="total_words_completed"></div>
  </div>
  <div>
    <div>Total incorrect guesses</div>
    <div id="total_incorrect_guesses"></div>
  </div>
  <div>
    <div>Average guesses per word</div>
    <div id="average_guesses_per_word"></div>
  </div>
  <div>
    <div>Average time per word</div>
    <div id="average_time_per_word"></div>
  </div>
</div>
</main>