Any way to restrict JQuery input to only unique characters that haven't been input previously

Question

I have a simple JQuery/JS Hangman game and I've spent alot of time making it work and I've run into one issue that messes up my logic and running of the game - when the player enters repeated chars (either right or wrong).

The way I've made the game work, starting with empty arrays I'm pushing into, I thought that I could create a function to only push unique chars into the array function

unique(array) {
    var result = [];
    $.each(array, function(i, e) {
        if ($.inArray(e, result) == -1) result.push(e);
    });
    return result;
    }
    var uniqueRightGuesses = unique(rightGuesses);
    var uniqueWrongGuesses = unique(wrongGuesses);

But this doesn't work because w/the inner workings of my game, the repeated input chars are still getting displayed & messing up the way winning & loosing is input (even though I'm calculating winning w/the sum of an additional array I've created to take care of a letter that repeats multiple times in a word). I've tried alot of various things at various parts of the game/in various functions and I've figured out that the easiest way to take care of this issue would be to somehow prevent the player from inputing a char if they've already input in the course of the game, in this function:

$(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val().toLowerCase();
      play(space);
      $(this).val('');
      endGame();
      return false;
    }
  });

I've searched online for a way to do this, I've found jQuery.unique() but I don't think that it'd work here as it's only on DOM objects in an array (& I just want the input to not register/not be allowed if the player has already entered that letter, if it's right or wrong guess- if I take care of this problem at this spot in the game, I won't have to mess w/my arrays or the variables I'm displaying but I don't know how to simply do this. If anyone has any suggestions or knows if this is even possible, I'd really appreciate it- I've found alot online about restricting special chars & numbers in this way but nothing about ones that have already been entered & I don't know if this is even possible (this is the first time I've ever even used .keypress() so I'm sort of new to it. Any suggestions would be much appreciated. Thanks! Here's my entire game code:

var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var answer = [];
var wrongGuesses = [];
var rightGuesses = [];
var right = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var y = 0;
var i = 1;
$(document).ready(function() {
  function randomWord() {
    var random = Math.floor(Math.random() * wordBank.length);
    var toString = wordBank[random];
    console.log(toString);
    word = toString.split("");
    console.log(word);
  }
  randomWord();

  function wordSpaces() {
    for (var i = 0; i < word.length; i++) {
      $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
    }
  }
  wordSpaces();

  function play(space) {
    //indexOf()==inArray() 
    var rightCount = 0;
    var lIndex = jQuery.inArray(space, word);
    console.log(lIndex);
    if (lIndex == -1) {
      wrongGuesses.push(space);
      var wrong = wrongGuesses.length;
      console.log('wrong ' + wrong);
      $('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);

      //      $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
      $(images[i - 1]).hide();
      $(images[i]).show();
      i++;
      $("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
      console.log(word);
    } else {
      var totalRight = 0;
      console.log(word + "word");
      console.log(space + "space");

      function getInstances(word, space) {
        var indexes = [],
          w;
        for (w = 0; w < word.length; w++)
          if (word[w] === space)
            indexes.push(w);

        return indexes;
      }
      console.log(word + "word");
      console.log(space + "space");
      var indexes = getInstances(word, space);
      console.log("indexes", indexes);
      indexes.forEach(function(index) {
        //      answer[index] = space;
        rightCount++
      });
      console.log(rightCount + "rightcount");
      console.log("answer", answer);
      //    rightGuesses.push(space);
      console.log(rightGuesses);
      //    var right = rightGuesses.length;
      indexes.forEach(function(index) {
        $(".word-spaces tbody tr td:nth-of-type(" + (index + 1) + ")").css('color', 'black');
      });
      rightGuesses.push(space);
      right.push(rightCount);
      console.log(right + "right");
      //    rightGuesses.push(space);
      //  totalRight =  totalRight + rightCount;
      // totalRight++;
      //   console.log(totalRight + 'totalRight');
    }
  }
  console.log(right + "right");
  $(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val().toLowerCase();
      play(space);
      $(this).val('');
      endGame();
      return false;
    }
  });


  function endGame() {
    var sumRight = right.reduce(add, 0);

    function add(a, b) {
      return a + b;
    }
    if (sumRight == word.length) {
      $(images[i]).hide();
      $("#victory").show();
      $("body").css("background-color", "#8AFBFF");
      $(".form-control").prop('disabled', true);
      $("body").animate({
        backgroundColor: "#0C0D86"
      }, 2000);
      $("body").animate({
        backgroundColor: "transparent"
      }, 2000);
    } else if (wrongGuesses.length >= 10) {
      $("body").css("background-color", "#ff4500");
      $(".form-control").prop('disabled', true);
      $("body").animate({
        backgroundColor: "#000000"
      }, 2000);
      $("body").animate({
        backgroundColor: "transparent"
      }, 2000);
    }
  }

});

Answer 1

Use Array.indexOf(). No need for jQuery.

Do a check to see if the key pressed is contained in the wrongGuess or rightGuess array and if it is alert the user.

$(".form-control").keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == 13) {
          var space = $(this).val().toLowerCase();

          if (!(wrongGuess.indexOf(space) > -1 || rightGuess.indexOf(space) > -1)) {
            play(space);
            $(this).val('');
            endGame();
            return false;
          }
          else
            window.alert("You already guessed this letter.");

        }
      });