Enhance UX

Auto-complete turned off
Form is disabled if current Lv equals target Lv
Pokémon input is cleared when re-selected
Pokémon input may now be in lowercase
Candy names are hidden on overflow
This commit is contained in:
richi3f 2019-12-09 23:44:21 +01:00
parent ce0ba5be3d
commit 4f43fd0ee6
3 changed files with 32 additions and 14 deletions

View File

@ -18,7 +18,7 @@
<p>A calculator for <abbr title="Experience">Exp.</abbr> Candy optimization in Pokémon Sword &amp; Shield. Read the <a href="#faq">FAQ</a> for more information.</p>
<form>
<form autocomplete="off">
<dl class="input">
<dt><label for="pokemon">Pokémon</label></dt>
<dd>

View File

@ -52,14 +52,20 @@ function log( mssg = false ) {
}
function validate() {
var disable = false;
var currentLv, targetLv, disable = false;
$( 'form [id^=result]' ).each(function() {
$(this).val('-');
});
if ( !( $( 'input[name=curve]' ).val().length ) ) {
disable = 'Fill out the Pokémon species field.';
} else if ( parseInt( $( 'input[name=target]' ).val() ) < parseInt( $( 'input[name=current]' ).val() ) ) {
disable = 'Current Level cannot exceed Target Level.';
} else {
currentLv = parseInt( $( 'input[name=current]' ).val() ),
targetLv = parseInt( $( 'input[name=target]' ).val() );
if ( currentLv == targetLv ) {
disable = 'Current Level cannot be equal to Target Level.';
} else if ( currentLv > targetLv ) {
disable = 'Current Level cannot exceed Target Level.';
}
}
log( disable );
$( '[type=submit]' ).prop( 'disabled', disable.length > 0 );
@ -105,7 +111,7 @@ $( document ).ready(function() {
var i, len, target, template, $template;
// read candy MILP problem
$.get('problem.txt', function( problemTemplate ) {
$.get('https://richi3f.github.io/candy-calc/problem.txt', function( problemTemplate ) {
// read Pokémon names and experience curves
$.getJSON( 'https://plan.pokemonteams.io/static/pokemon.json', function( pokemonData ) {
@ -127,18 +133,29 @@ $( document ).ready(function() {
// show the experience curve when a Pokémon name is typed
$( '#pokemon' ).on( 'input', function() {
var value;
var value, $match;
value = this.value;
if ( $( 'datalist option' ).filter(function() {
$match = $( 'datalist option' ).filter(function() {
return this.value.toUpperCase() == value.toUpperCase();
}).length ) {
value = $( 'datalist option[value="' + value + '"]' ).attr( 'data-exp-curve' );
});
if ( $match.length ) {
value = $( 'datalist option[value="' + $match.val() + '"]' ).attr( 'data-exp-curve' );
$( 'input[name=curve]' ).val( value );
} else {
$( 'input[name=curve]' ).val( '' );
}
validate();
});
// clear input on select
$('#pokemon').click(function() {
var $curve = $( 'input[name=curve]' );
if ( $curve.val() ) {
$(this).val('');
$curve.val('');
validate();
}
});
});
// create rows for candy in bag
@ -198,7 +215,7 @@ $( document ).ready(function() {
expDiff = expCurrent - expDiff;
if ( expDiff > 0 ) {
log( 'Solution found with a surplus of ' + fmtNum( expDiff ) + ' Exp Points.' );
log( 'Solution found with a surplus of ' + fmtNum( expDiff ) + ' Exp. Points.' );
} else if ( expDiff == 0 ) {
log( 'Optimal solution found! ' )
.append( $( '<a href="#">Click here to reset.</a>' ).click(function(evt) {

View File

@ -181,8 +181,7 @@ input {
.input dt, .input dd,
.math dt, .math dd {
float: left;
display: inline-block
float: left
}
.input dt {
@ -267,9 +266,11 @@ tr th[rowspan] {
}
#calc table label {
text-indent: 2.5em;
text-indent: 2.25em;
display: inline-block;
background: url(candy.png) no-repeat
background: url(candy.png) no-repeat;
height: 2em;
overflow: hidden
}
#calc table label[for$=-s] {