[BDO] Horse Calculator

by fffam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script type="text/x-template" id="status-message-template">
	<section class="status-message" v-show="!hidden">
		<div class="status-message-inner">
		<span class="close" v-on:click="hide"><b>✕</b> Hide</span>
		<p style="line-height: 2"><span class="pulse-off"></span> <b style="border-bottom: 1px solid rgba(255,255,255,0.3); padding-right: 5px;">Change Breeding Rate in top right if there is an active breeding event, or you are in a region which has a lower default breeding rate.</b></p>
	</section>
</script>

<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>(<em class="pct" v-bind:title="outcome.percentage_precise | pct 3">{{ outcome.percentage + '%' }}</em>)<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-if="selectedHorseSkin" 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>
        <span class="gamecode" v-if="horse.gamecode">{{horse.tier}}-{{horse.gamecode}}</span>
		</div>
	<ul class="horses" v-if="isSelecting">
		<template v-for="horse in...

CSS

@charset "UTF-8";

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

body {
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	background: #FFF;
	margin: 0;
	padding: 0;
}

.site-message {
  background: #D32F2F;
  color: white;
  padding: 1em 10em 1em;
}
.site-message a {
  color: white;
}

.other-modes a {
	color: #999;
}

.other-modes img {
	width: 22px;
	border: none;
}

.other-modes {
	text-align: center;
	color: #999;
}

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),
table.highlighted-col-20 tr td:nth-of-type(20),
table.highlighted-col-21 tr td:nth-of-type(21),
table.highlighted-col-22 tr...

Babel + JSX

//             _|\ _/|_,
//          ,((\\``-\\\\_
//        ,(())      `))\
//      ,(()))       ,_ \
//     ((())'   |        \
//     )))))     >.__     \
//     ((('     /    `-. .c|
//             /        `-`'

var rate = 16;

// You can also provide a rate by going ?rate=13 on the URL
var url = (window.location != window.parent.location) ? document.referrer : document.location.href;

function getParameterByName(name, url) {
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

if( getParameterByName('rate',url) ) {
	rate = getParameterByName('rate',url) * 1;
}    
            

Vue.filter('pct', function (value, precision) {
  return value.toFixed(precision || 2) + "%";
})

/*
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,
    rate: 1
  },
  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('status-message', {
	template: '#status-message-template',
	props: {
		hidden: false
	},
	methods: {
		hide: function() {
			this.hidden = true;
		}
	}
});

Vue.component('quick-result-bar', {
  template: '#quick-result-bar-template',
  props: {
		maleTier: 1,
		maleLevel: 1,
		maleDeaths: 0,
		femaleTier: 1,
		femaleLevel: 1,
		femaleDeaths: 0,
		masteryIncrease: 0,
    rate: rate
  },
  computed: {
		hasNextTier:...