BDO Horse Calculator

by Leon Alvarez Del Canto

HTML

<script type="text/x-template" id="number-picker-template">
	<ul class="number-picker">
		<template v-for="i in range">
			<li v-on:click="select(i)" v-bind:class="{ selected: i == current }">{{i}}</li>
		</template>
	</ul>
</script>

<script type="text/x-template" id="tier-outcome-template">
	<span class="{{className}}">
		<span v-for="outcome in data" v-bind:class="[ 'gender-'+outcome.gender ]"><strong>{{ outcome.tier }}{{ outcome.gender | uppercase }}</strong>({{ outcome.percentage + '%' }})<span class="comma">, </span></span></span>
</script>

<script type="text/x-template" id="horse-skin-picker-template">
	<div class="horse-picker">
		<label>Pattern</label>
		<div v-bind:class="[ 'horse-icon', 'current', 'horse-tier-'+selectedTier]" v-on:click="startSelecting">
				<h4>{{ selectedHorseSkin.tier }}<b>{{ selectedHorseSkin.key }}</b></h4>
				<img v-bind:src="selectedHorseSkin.img">
				<span class="colors">
					<span class="r">{{ selectedHorseSkin.colors.red }}</span>
					<span class="w">{{ selectedHorseSkin.colors.white }}</span>
					<span class="b">{{ selectedHorseSkin.colors.black }}</span>
				</span>
		</div>
	<ul class="horses" v-if="isSelecting">
		<template v-for="horse in skins | filterBy selectedTier in 'tier'">
			<li v-bind:class="[
				'horse-icon',
				'horse-tier-'+horse.tier,
				{ selected: horse.tier == selectedTier &&
				            horse.key == selectedKey } ]"
				v-on:click="pickSkin( horse.key )"
			>
				<h4>{{ horse.tier }}<b>{{ horse.key }}</b></h4>
				<img v-bind:src="horse.img">
				<span class="colors">
					<span class="r">{{ horse.colors.red }}</span>
					<span class="w">{{ horse.colors.white }}</span>
					<span class="b">{{ horse.colors.black }}</span>
				</span>
			</li>
		</template>
	</ul>
	</div>
</script>

<script type="text/x-template" id="quick-result-bar-template">
	<section class="quick-result-bar">
			<p class="outcome">
				<tier-outcome :data="outcomeForCurrentTier"...

SCSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

$horse-tier-1-color: #2491de;
$horse-tier-2-color: #33b7b9;
$horse-tier-3-color: #22a951;
$horse-tier-4-color: #33b921;
$horse-tier-5-color: #97b921;
$horse-tier-6-color: #dedc23;
$horse-tier-7-color: #de7f23;
$horse-tier-8-color: #de2323;

$male-color-light: #90CAF9;
$male-color-dark: #0D47A1;
$female-color-light: #F8BBD0;
$female-color-dark: #880E4F;

$table-hover-color: #FFF;


body {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;    
		background: #FFF;
		margin: 0;
		padding: 0;
}
table {
	font-size: 0.75rem;
}
th {
	color: #B0BEC5;
}
td {
	width: 1.4em;
	min-width: 1rem;
	text-align: center;
	color: rgba(0,0,0,0.6);
	padding:0;
}
td.selected-row {
	border-bottom: 2px solid black !important;
	border-top: 2px solid black !important;
}
td.selected-col {
	border-left: 2px solid black !important;
	border-right: 2px solid black !important;
}

td.selected-col.selected-row {
	font-weight: bold;
	outline: solid red;
}

table.highlighted-col-1 tr td:nth-of-type( 1 ),
table.highlighted-col-2 tr td:nth-of-type( 2 ),
table.highlighted-col-3 tr td:nth-of-type( 3 ),
table.highlighted-col-4 tr td:nth-of-type( 4 ),
table.highlighted-col-5 tr td:nth-of-type( 5 ),
table.highlighted-col-6 tr td:nth-of-type( 6 ),
table.highlighted-col-7 tr td:nth-of-type( 7 ),
table.highlighted-col-8 tr td:nth-of-type( 8 ),
table.highlighted-col-9 tr td:nth-of-type( 9 ),
table.highlighted-col-10 tr td:nth-of-type( 10 ),
table.highlighted-col-11 tr td:nth-of-type( 11 ),
table.highlighted-col-12 tr td:nth-of-type( 12 ),
table.highlighted-col-13 tr td:nth-of-type( 13 ),
table.highlighted-col-14 tr td:nth-of-type( 14 ),
table.highlighted-col-15 tr td:nth-of-type( 15 ),
table.highlighted-col-16 tr td:nth-of-type( 16 ),
table.highlighted-col-17 tr td:nth-of-type( 17 ),
table.highlighted-col-18 tr td:nth-of-type( 18 ),
table.highlighted-col-19 tr td:nth-of-type( 19...

Babel + JSX

/*
Grid Component
Displays a grid of result tiers for the 2 chosen horses
*/
Vue.component('tier-grid', {
  template: '#tier-grid-template',
  props: {
    data: Array,
		maleLevel: 1,
		femaleLevel: 1,
		maleTier: 1,
		femaleTier: 1,
		highlightedMaleLevel: null,
		highlightedFemaleLevel: null,
  },
  methods: {
		highlightTier: function(maleLevel, femaleLevel, tier) {
			this.highlightedMaleLevel = maleLevel;
			this.highlightedFemaleLevel = femaleLevel;
			this.$dispatch('tier-highlighted', tier);
		}
  }
});

Vue.component('tier-outcome', {
	template: '#tier-outcome-template',
	props: {
		className: '',
		data: Array
	}
});

Vue.component('quick-result-bar', {
  template: '#quick-result-bar-template',
  props: {
		maleTier: 1,
		maleLevel: 1,
		maleDeaths: 0,
		femaleTier: 1,
		femaleLevel: 1,
		femaleDeaths: 0
  },
  computed: {
		hasNextTier: function() {
			var res = this.levelsRequiredForNextTier;
			console.log(res);
			return res.length > 0;
		},
		outcomeForCurrentTier: function() {
			var outcomes = breedingOutcomeForResultTier(breedingTier(
		 		this.maleTier,
				this.maleLevel,
				this.maleDeaths,
				this.femaleTier,
				this.femaleLevel,
				this.femaleDeaths
			));
			return outcomes;
		},
		outcomeForNextTier: function() {
			var outcomes = breedingOutcomeForResultTier(breedingTier(
		 		this.maleTier,
				this.maleLevel,
				this.maleDeaths,
				this.femaleTier,
				this.femaleLevel,
				this.femaleDeaths
			)+1);
			return outcomes;
		},
		levelsRequiredForNextTier: function() {
			return getLevelsRequiredForNextTier(
				this.maleTier,
				this.maleLevel,
				this.maleDeaths,
				this.femaleTier,
				this.femaleLevel,
				this.femaleDeaths
			);
		}
	},
	methods: {
		selectNewLevels: function(newMaleLevel,newFemaleLevel) {
			this.maleLevel = newMaleLevel;
			this.femaleLevel = newFemaleLevel;
		}
  }
});

Vue.component('number-picker', {
  template: '#number-picker-template',
  props: {
    current: {
      type: Number,
      default:...