Web Tutorial: Pill Puzzle (Part 4/4)

We've developed the ability to place pills on either side of the scale, and return them to their original positions if required. Time to work on using the scale. For that, we ensure that the weigh() method is invoked when the button is clicked.

<div><button id="btnWeigh" onclick="pillgame.weigh()">WEIGH</button></div>

Then we work on this method. We begin with that return statement at the end. Then we exit early if playerStatus is not "ill".

weigh: function()
{
  if (this.playerStatus != "ill") return;

  return;
},

We also run setWeightTimes(), as we should.

weigh: function()
{
  if (this.playerStatus != "ill") return;
  this.setWeightTimes(this.weighTimes + 1);

  return;
},

Next, we define leftWeight. What we do is use the map() method to iterate through all the values of pills_left, which are indexes into the pills array, in effect making a new array based on all the weights of the pills that are in pills_left.

weigh: function()
{
  if (this.playerStatus != "ill") return;
  this.setWeightTimes(this.weighTimes + 1);

  const leftWeight = this.pills_left
  .map((x) => this.pills[x])

  return;
},

Then we use the reduce() method, totalling all the values.

weigh: function()
{
  if (this.playerStatus != "ill") return;
  this.setWeightTimes(this.weighTimes + 1);

  const leftWeight = this.pills_left
  .map((x) => this.pills[x])
  .reduce((sum, weight) => sum + weight, 0);

  return;
},

We do something similar for rightWeight. And after that, we have three If blocks to handle the various outcomes.

weigh: function()
{
  if (this.playerStatus != "ill") return;

  this.setWeightTimes(this.weighTimes + 1);
  const leftWeight = this.pills_left
  .map((x) => this.pills[x])
  .reduce((sum, weight) => sum + weight, 0);

  const rightWeight = this.pills_right
  .map((x) => this.pills[x])
  .reduce((sum, weight) => sum + weight, 0);

  if (leftWeight == rightWeight)
  {
    return;
  }

  if (leftWeight > rightWeight)
  {
    return;
  }

  if (leftWeight < rightWeight)
  {
    return;
  }

  return;
},

If leftWeight is heavier than rightWeight, pnlWeighPillsContainerLeft should go down and pnlWeighPillsContainerRight should go up, thus the justify-content properties of both need to be adjusted accordingly - pnlWeighPillsContainerLeft to flex-end (to sink to the "bottom") and pnlWeighPillsContainerRight to flex-start (to float to the "top"). The opposite is true for if rightWeight is heavier than leftWeight. And if both are equally heavy, both pnlWeighPillsContainerLeft and pnlWeighPillsContainerRight sink to the bottom.

weigh: function()
{
  if (this.playerStatus != "ill") return;
  this.setWeightTimes(this.weighTimes + 1);

  const leftWeight = this.pills_left
  .map((x) => this.pills[x])
  .reduce((sum, weight) => sum + weight, 0);

  const rightWeight = this.pills_right
  .map((x) => this.pills[x])
  .reduce((sum, weight) => sum + weight, 0);

  if (leftWeight == rightWeight)
  {
    $("#pnlWeighPillsContainerLeft").css("justifyContent", "flex-end");
    $("#pnlWeighPillsContainerRight").css("justifyContent", "flex-end");

    return;
  }

  if (leftWeight > rightWeight)
  {
    $("#pnlWeighPillsContainerLeft").css("justifyContent", "flex-end");
    $("#pnlWeighPillsContainerRight").css("justifyContent", "flex-start");

    return;
  }

  if (leftWeight < rightWeight)
  {
    $("#pnlWeighPillsContainerLeft").css("justifyContent", "flex-start");
    $("#pnlWeighPillsContainerRight").css("justifyContent", "flex-end");

    return;
  }

  return;
},

Let's try this! Place pill 1 on the left and pill 2 on the right.

Then click WEIGH button. See that it now indicates that the scale has been used once! In all likelihood, both pills are equal in weight, so both scale bowls should sink.

Refresh. Now place pill 1 on the left and pill 2 on the right... and then add pills 3 and 4 on the left.

Now weigh. The left side will sink and the right side will rise! And now the display says you have used the scale once.

Now place the rest of the pills on the right side...

...and weigh. The right side should sink and the left should float. The display should say you have used the scale twice, and the button should disappear.

Now for the final part!

Feeding any given pill to the mouth. For this, add a click action to the face. It should call placePill(), with "mouth" passed in as an argument.

<div id="playerFace" onclick="pillgame.placePill('mouth')"></div>

There are only two scenarios here - success or failure. That depends on the weight of the pill selected. We derive that by using the value of pill_selected as an index into pills. And this leads into the two If blocks.

if (slot == "mouth")
{
  if (this.pills[this.pill_selected] == 1)
  if (this.pills[this.pill_selected] == 10)

  return;
}

If the pill is light, we use setPlayerState() to set the player state to "well". If it's a heavy pill, then it's poison and you just killed the patient. Either way, we run gameOver() because the game is effectively over at this point.

if (slot == "mouth")
{
  if (this.pills[this.pill_selected] == 1) this.setPlayerState("well");
  if (this.pills[this.pill_selected] == 10) this.setPlayerState("dead");
  this.gameOver();

  return;
}

Now for the final method, gameOver(). We basically return stuff to factory settings, visually.

gameOver: function()
{
  $("#btnWeigh").hide();
  $(".pnlWeighPillsContainer").css("justifyContent", "center");
  this.pills_middle = [];
  this.pills_left = [];
  this.pills_right = [];
  this.renderPills();

  return;
}

Now remove the red lines and we're all set.

div {outline: 0px solid red;}

Final test!

It's easy to fail. Select any pill at random and click on the face. There's an 87.5% chance that you kill the patient.

But to cure the patient is the crux of how this puzzle is solved. Place pills 1, 2 and 3 on the left. Pills 4, 5 and 6 go on the right.

Weigh. You see that Pills 1, 2 and 3 are lighter, so the cure is definitely in that group.

Return pills 4, 5 and 6.

Return pills 2 and 3.

Place pill 2 on the right side of the scale, and weigh. Looks like pill 2 is still heavier.

Which makes pill 1 the cure. Feed it to the face, and you win!

We're done! Not too shabby, eh?

Fare "well",
T___T