detailed-recipes.html

---
title: Detailed Combo Recipes
weight: 12
---
<style type="text/css">
	cb-card { font-size: 34%; cursor: pointer; }
	.jumbotron { text-align: center; width: 12em; height: 19em; }
</style>
<div class="panel panel-default">
	<div class="panel-heading">
		Detailed Combo stats for two selected cards
	</div>
	<div class="panel-body">
		<form onsubmit="return false;">
			<fieldset class="form-group">
				<div class="col-md-6">
					<label class="form-label" for="first">First card</label>
					<input class="form-control" id=first placeholder="Please wait for cards to load..."
						   data-cards="deck, -precombo" data-target-button=".first-button" data-target="#character">
					<input class="form-control" placeholder="Select card level" pattern='^(\d+|\^)\s*[*]{0,2}$' name="level">
					<button class="btn btn-default first-button" type="submit" disabled>
						<span class="glyphicon glyphicon-plus"></span> Set first card
					</button>
				</div>

				<div class="col-md-6">
					<label class="form-label" for="second">Second card</label>
					<input class="form-control" id=second placeholder="Please wait for cards to load..."
						   data-cards="deck, -precombo" data-target-button=".second-button" data-target="#item">
					<input class="form-control" placeholder="Select card level" pattern='^(\d+|\^)\s*[*]{0,2}$' name="level">
					<button class="btn btn-default second-button" type="submit" disabled>
						<span class="glyphicon glyphicon-plus"></span> Set second card
					</button>
				</div>

			</fieldset>

		</form>
	</div>

	<table class="table">
		<tbody>
			<tr>
				<td id="character"></td>
				<td id="item"></td>
				<td id="result"></td>
			</tr>
		</tbody>
	</table>

	<script>require(['cartoon-battle', 'cartoon-battle/util'], function (getCards, util) {
		var first = document.getElementById('first');
		var second = document.getElementById('second');

		var character = document.getElementById('character');
		var item = document.getElementById('item');
		var result = document.getElementById('result');

		function showResult(cards) {
			var items = [character.querySelector('cb-card'), item.querySelector('cb-card')]
					.filter(function (x) { return !!x; })
					.map(function (card) { return card.card; });

			while (result.firstChild) result.removeChild(result.firstChild);

			var title = items.map(function (card) {
				return card.name + " " + card.getLevelString();
			}).join(" + ");

			window.history.pushState({}, title ? title + " — " + originalTitle : originalTitle, "?" + title);
			setTitle(title);

			var combo = items.length == 2 && cards.getCombo.apply(cards, items);

			if (!combo) {
				return result
						.appendChild(document.createElement('div'))
						.appendChild(document.createElement('h2'))
						.appendChild(document.createTextNode('n/a'))
						.parentNode.parentNode.className = 'jumbotron';
			}

			result.appendChild(cards.forLevel(combo.result).node);
		}

		function showCard(cards, e) {
			e.preventDefault();

			var target = document.querySelector(this.dataset.target);
			var level = this.parentNode.querySelector('[name="level"]').value;

			try {
				var card = e.detail ? cards.forLevel(e.detail, level) : null;

				while (target.firstChild) target.removeChild(target.firstChild);

				card && target.appendChild(card.node);

				showResult(cards);

			} catch (E) {
				showMessage(E, 'danger');
			}
		}

		getCards(function (cards) {
			first.addEventListener('card', showCard.bind(first, cards));
			second.addEventListener('card', showCard.bind(second, cards));

			function deferred_combos() {
				if (!first.find) { // wait for other scripts to attach to the input
					setTimeout(deferred_combos, 250);
					return ;
				}

				var targets = [first, second];

				decodeURIComponent(window.location.search.substr(1)).split(/\s*\+\s*/).map(function (s) {
					return s.match(util.card_with_level_re).slice(1, 3);
				}).forEach(function (card, idx) {
					var target = targets[idx];

					if (target) {
						target.value = card.shift();
						target.parentNode.querySelector('[name="level"]').value = card.shift() || "1";
						target.form.querySelector(target.dataset.targetButton).onclick();
					}
				});

			}

			window.onpopstate = deferred_combos;

			deferred_combos();

		});
	});</script>

</div>