My Rock, Pape, Scissors JQuery Код нелогичен

Question

Я создаю Jquery версию RPS. Я бросаю вызов, что я делаю, чтобы развивать свои навыки Front End Development. Все шло хорошо, пока Javascript не пришлось интегрировать. В частности, код, который определяет, кто является победителем и какой текст отображать. Я покажу весь код, чтобы вы могли понять, что происходит.

/*-----OPEN RULES MENU-----*/

$(document).ready(function() {
  $("#rules-btn").click(function() {
    $("#rules-overlay").css("display", "flex");
  })
})

/*-----CLOSE RULES MENU-----*/

$(document).ready(function() {
  $("#close").click(function() {
    $("#rules-overlay").css("display", "none");
  })
})

/*-----USERS CHOICE-----*/

var rock = "<div id='rock' class='container-outside'><div class='container-inside'><img id='rock-icon' src='images/icon-rock.svg' alt='rock_icon'></div></div>";

var paper = "<div id='paper' class='container-outside'><div class='container-inside'><img id='paper-icon' src='images/icon-paper.svg' alt='paper_icon'></div></div>";

var scissors = "<div id='scissors' class='container-outside'><div class='container-inside'><img id='scissors-icon' src='images/icon-scissors.svg' alt='scissors_icon'></div></div>";

var houseChoice = function() {
  var random = Math.random();
  if (random < 0.333) {
    return rock;
  } else if (random < 0.67777) {
    return paper;
  } else {
    return scissors;
  }
}

$(document).ready(function() {
  $("#paper").click(function() {
    $("#game").hide();
    $("#game-in-progress").show();
    $("#user-choice").html(paper);
    $("#house-choice").html(houseChoice());
    if (houseChoice() === rock) {
      $("#who-won").text("You Win");
    } else if (houseChoice() === scissors) {
      $("#who-won").text("You Lose");
    } else if (houseChoice() === paper) {
      $("#who-won").text("You Tied");
    }
  })
})
$(document).ready(function() {
  $("#rock").click(function() {
    $("#game").hide();
    $("#game-in-progress").show();
    $("#user-choice").html(rock);
    $("#house-choice").html(houseChoice());
    if (houseChoice() === rock) {
      $("#who-won").text("You Tied");
    } else if (houseChoice() === scissors) {
      $("#who-won").text("You Win");
    } else if (houseChoice() === paper) {
      $("#who-won").text("You Lose");
    }
  })
})
$(document).ready(function() {
  $("#scissors").click(function() {
    $("#game").hide();
    $("#game-in-progress").show();
    $("#user-choice").html(scissors);
    $("#house-choice").html(houseChoice());
    if (houseChoice() === rock) {
      $("#who-won").text("You Lose");
    } else if (houseChoice() === scissors) {
      $("#who-won").text("You Tied");
    } else if (houseChoice() === paper) {
      $("#who-won").text("You Win");
    }
  })
})

$(document).ready(function() {
  $("#play-again").click(function() {
    if ($("#who-won").text() === "You Win") {

    }
  })
})

body {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient(hsl(214, 47%, 23%), hsl(237, 49%, 15%));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

h3 {
  line-height: 1;
}

/*-----SCORE-----*/

#header-box {
  width: 60%;
  height: 125px;
  border: 2px solid hsl(217, 16%, 45%);
  border-radius: 10px;
  margin: 30px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  color: white;
  margin: 0px 20px;
  text-transform: uppercase;
  font-size: 26px;
}

#score-tracker {
  height: 100px;
  width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  margin: 0px 20px;
  border-radius: 10px;
}

#score-title {
  color: hsl(229, 64%, 46%);
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0px;
}

#score {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 50px;
  color: hsl(229, 25%, 31%);
  margin: 0px;
}


/*-----GAMEBOARD-----*/

#game {
  height: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  background-image: url("images/bg-triangle.svg");
  background-repeat: no-repeat;
  background-position: 50% 60%;
  background-size: 250px;
}

#game-top,
#game-btm {
  height: 175px;
  width: 350px;
  display: flex;
  align-items: center;
}

#game-top {
  justify-content: space-between;
}

#game-btm {
  justify-content: center;
}

#paper {
  background-image: linear-gradient(hsl(230, 89%, 62%), hsl(230, 89%, 65%));
}

#scissors {
  background-image: linear-gradient(hsl(39, 89%, 49%), hsl(40, 84%, 53%));
}

#rock {
  background-image: linear-gradient(hsl(349, 71%, 52%), hsl(349, 70%, 56%));
}

#rock-icon,
#paper-icon,
#scissors-icon {
  transition: transform .3s;
}

#rock:hover #rock-icon,
#scissors:hover #scissors-icon,
#paper:hover #paper-icon {
  transform: rotate(30deg);
}


/*-----GAME IN PROGRESS-----*/

#game-in-progress {
  height: 300px;
  display: none;
}

#selections {
  display: flex;
  justify-content: center;
  height: 300px;
  align-items: center;
}

#user-selection,
#house-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 300px;
  width: 250px;
  margin: 0px 20px;
  transition: transform .3s;
}

#user-choice,
#house-choice {
  height: 250px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#results {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100px;
  width: 200px;
  margin: 0px 25px;
}

#who-won {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  color: white;
  text-align: center;
  font-size: 40px;
  text-transform: uppercase;
  margin: 5px 0px;
}

#play-again {
  height: 40px;
  width: 150px;
  background: white;
  border-radius: 5px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  border: none;
  letter-spacing: 2px;
  color: hsl(229, 64%, 46%);
  cursor: pointer;
}


/*-----RULES-----*/

#rules {
  width: 100%;
  height: 40px;
  margin: 30px 0px;
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#rules-btn {
  margin: 0px 50px;
  width: 100px;
  height: 35px;
  background: inherit;
  border: 1px solid hsl(217, 16%, 45%);
  border-radius: 7px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

#rules-overlay {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, .5);
}

#rules-box {
  height: 350px;
  width: 300px;
  border-radius: 10px;
  background: white;
}

#rules-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  padding: 0px 10%;
}

#rules-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
  color: hsl(229, 25%, 31%);
  font-size: 24px;
}

#close {
  color: hsl(229, 25%, 31%);
  cursor: pointer;
}

#rules-img {
  width: 250px;
  display: block;
  margin: 25px auto;
}


/*CLASSES*/

.container-outside {
  height: 150px;
  width: 150px;
  background: white;
  border-radius: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px -5px 0px rgba(0, 0, 0, .2);
  cursor: pointer;
}

.container-inside {
  height: 115px;
  width: 115px;
  background: white;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 5px 0px rgba(0, 0, 0, .2);
}

.selection-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
}

.bg-circle {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, .3);
  position: absolute;
  z-index: -1;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  margin-left: -50px;
}

<div id="rules-overlay">
  <div id="rules-box">
    <div id="rules-nav">
      <h3 id="rules-title">Rules</h3>
      <i id="close" class="fas fa-times fa-lg"></i>
    </div>
    <img id="rules-img" src="images/image-rules.svg" alt="rules">
  </div>
</div>
<header id="header-box">
  <div>
    <h3 id="title">Rock<br>Paper<br>Scissors</h3>
  </div>
  <div id="score-tracker">
    <h5 id="score-title">Score</h5>
    <h2 id="score">00</h2>
  </div>
</header>

<!--GAME BOARD-->
<div id="game">
  <div id="game-top">
    <div id="paper" class="container-outside">
      <div class="container-inside">
        <img id="paper-icon" src="images/icon-paper.svg" alt="paper_icon">
      </div>
    </div>
    <div id="scissors" class="container-outside">
      <div class="container-inside">
        <img id="scissors-icon" src="images/icon-scissors.svg" alt="scissors_icon">
      </div>
    </div>
  </div>
  <div id="game-btm">
    <div id="rock" class="container-outside">
      <div class="container-inside">
        <img id="rock-icon" src="images/icon-rock.svg" alt="rock_icon">
      </div>
    </div>
  </div>
</div>

<!--GAME IN PROGRESS-->
<div id="game-in-progress">
  <div id="selections">
    <div id="user-selection">
      <h3 class="selection-title">You Picked</h3>
      <div id="user-choice">
        <div class="bg-circle"></div>
      </div>
    </div>
    <div id="results">
      <h1 id="who-won"></h1>
      <button id="play-again">Play Again</button>
    </div>
    <div id="house-selection">
      <h3 class="selection-title">The House Picked</h3>
      <div id="house-choice">
        <div class="bg-circle"></div>
      </div>
    </div>
  </div>
</div>

<!--RULES-->
<div id="rules">
  <button id="rules-btn">Rules</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Проблема начинается с логики c игры «камень, ножницы по бумаге». Может кто-нибудь проверить это javascript и сказать мне, что я делаю не так. Благодаря.