heatherbooker/setSolver.html

## setSolver.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.5.5/tachyons.min.css">
</head>
<body class="sans-serif center" style="width:80%; display: flex; justify-content: center; flex-wrap: wrap">

  <div style="width: 100%">
    <button class="bg-orange" style="margin: 30px; height:160px; width: 260px" onclick="playGame()">
      <h1>Check Set</h1>
    </button>

    <button class="bg-gold" style="margin: 30px; height:160px; width: 260px" onclick="playGame(true)">
      <h1>Generate Third</h1>
    </button>
  </div>

  <div style="padding: 10px; border: 1px solid black; height: 500px; width: 300px" class="deckDiv">
    <h2>Cards:</h2>
    <p class="deck"></p>
  </div>

  <div style="padding: 10px; border: 1px solid black; height: 500px; width: 300px" class="resultDiv">
    <h2>Is a set:</h2>
    <p class="result"></p>
  </div>

</body>


<script type="text/javascript">
  function generateThird(card1, card2, props) {
  const newCard = new Card();
  // Checks whether by luck we completed the set.
  if (!isSet([card1, card2, newCard], props)) {
    for (var i = 0; i < props.length; i++) {
      let usedProps = [];
      usedProps.push(card1[props[i]], card2[props[i]])
      if (usedProps[0] === usedProps[1]) {
        // Makes the third match the original two.
        newCard[props[i]] = usedProps[0];
      } else {
        // Finds an unused value to assign to the third card.
        Card.prototype[props[i] + 's'].forEach(prop => {
          if (!usedProps.includes(prop)) {
            newCard[props[i]] = prop;
          }
        });
      }
    }
  }
  return newCard;
}

function isSet(cards, props) {
  for (var i = 0; i < props.length; i++) {
    if (!noDoubles(...cards, props[i])) {
      return false;
    }
  }
  return true;
}

function noDoubles(card1, card2, card3, prop) {
  // noDoubles returns false if a pair (not trio)
  // of matching properties is found.
  if (card1[prop] === card2[prop]) {
    if (card2[prop] === card3[prop]) {
      return true;
    }

  } else if (card2[prop] !== card3[prop]) {
    if (card3[prop] !== card1[prop]) {
      return true;
    }
  }
  return false;
}

function Card(shape, color, num) {
  return {
    shape: shape || this.getRandom(this.shapes),
    color: color || this.getRandom(this.colors),
    num: num || this.getRandom(this.nums)
  };
}

Card.prototype.shapes = ['square', 'star', 'diamond'];
Card.prototype.colors = ['pink', 'green', 'blue'];
Card.prototype.nums = [1, 2, 3];

Card.prototype.getRandom = function (arr) {
  return arr[Math.floor(Math.random()/1 * arr.length)];
}

function Deck(num) {
  const deck = [];
  for (let i = 0; i < num; i++) {
    deck.push(new Card());
  }
  return deck;
}


function playGame(genThird) {
  const props = ['shape', 'color', 'num'];
  var deck = new Deck(3);
  if (genThird) {
    deck[2] = generateThird(deck[0], deck[1], props);
  }
  const isASet = isSet(deck, props);
  document.querySelector('.deck').innerText = JSON.stringify(deck, null, 2);
  document.querySelector('.result').innerText = isASet;
  return {
    deck: deck,
    isSet: isSet
  };
}

</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.5.5/tachyons.min.css">
	</head>
	<body class="sans-serif center" style="width:80%; display: flex; justify-content: center; flex-wrap: wrap">

	<div style="width: 100%">
	<button class="bg-orange" style="margin: 30px; height:160px; width: 260px" onclick="playGame()">
	<h1>Check Set</h1>
	</button>

	<button class="bg-gold" style="margin: 30px; height:160px; width: 260px" onclick="playGame(true)">
	<h1>Generate Third</h1>
	</button>
	</div>

	<div style="padding: 10px; border: 1px solid black; height: 500px; width: 300px" class="deckDiv">
	<h2>Cards:</h2>
	<p class="deck"></p>
	</div>

	<div style="padding: 10px; border: 1px solid black; height: 500px; width: 300px" class="resultDiv">
	<h2>Is a set:</h2>
	<p class="result"></p>
	</div>

	</body>


	<script type="text/javascript">
	function generateThird(card1, card2, props) {
	const newCard = new Card();
	// Checks whether by luck we completed the set.
	if (!isSet([card1, card2, newCard], props)) {
	for (var i = 0; i < props.length; i++) {
	let usedProps = [];
	usedProps.push(card1[props[i]], card2[props[i]])
	if (usedProps[0] === usedProps[1]) {
	// Makes the third match the original two.
	newCard[props[i]] = usedProps[0];
	} else {
	// Finds an unused value to assign to the third card.
	Card.prototype[props[i] + 's'].forEach(prop => {
	if (!usedProps.includes(prop)) {
	newCard[props[i]] = prop;
	}
	});
	}
	}
	}
	return newCard;
	}

	function isSet(cards, props) {
	for (var i = 0; i < props.length; i++) {
	if (!noDoubles(...cards, props[i])) {
	return false;
	}
	}
	return true;
	}

	function noDoubles(card1, card2, card3, prop) {
	// noDoubles returns false if a pair (not trio)
	// of matching properties is found.
	if (card1[prop] === card2[prop]) {
	if (card2[prop] === card3[prop]) {
	return true;
	}

	} else if (card2[prop] !== card3[prop]) {
	if (card3[prop] !== card1[prop]) {
	return true;
	}
	}
	return false;
	}

	function Card(shape, color, num) {
	return {
	shape: shape \|\| this.getRandom(this.shapes),
	color: color \|\| this.getRandom(this.colors),
	num: num \|\| this.getRandom(this.nums)
	};
	}

	Card.prototype.shapes = ['square', 'star', 'diamond'];
	Card.prototype.colors = ['pink', 'green', 'blue'];
	Card.prototype.nums = [1, 2, 3];

	Card.prototype.getRandom = function (arr) {
	return arr[Math.floor(Math.random()/1 * arr.length)];
	}

	function Deck(num) {
	const deck = [];
	for (let i = 0; i < num; i++) {
	deck.push(new Card());
	}
	return deck;
	}


	function playGame(genThird) {
	const props = ['shape', 'color', 'num'];
	var deck = new Deck(3);
	if (genThird) {
	deck[2] = generateThird(deck[0], deck[1], props);
	}
	const isASet = isSet(deck, props);
	document.querySelector('.deck').innerText = JSON.stringify(deck, null, 2);
	document.querySelector('.result').innerText = isASet;
	return {
	deck: deck,
	isSet: isSet
	};
	}

	</script>
	</html>