# Calculating number of chips and determining chip denominations for players

I have a large JavaScript function to calculate the number of chips, and which denomination of chips to show as the players chip stack. It's done on the base of 10.

I have chip denominations worth 1, 10, 100, 1000, 10000, 100000, 1000000. For a total of 7 different chip values, and 7 for loops in my JavaScript code.

Here's an example of how the 100,000 chips look when there is 5 in that spot:

Any John Nash's in here want to help me get this down to like one or two for loops? Any other improvements you'd like to mention?

Also, I use $('.chips').remove(); right before the next hand, so that all the chips are removed and then recalculated again by a call to chipStack();. So that way it doesn't just add to the existing chips and show an incorrect stack of chips. But also means that every hand the below JavaScript is getting ran. JavaScript: function chipStack() { var a = hand1.cChips.toString(); //this gets the current chip amount in a string var c = parseInt(a.substr(-1)); //this is the first 0-9 var d = parseInt(a.substr(-2, 1)); //second 0-9, in the tenth's spot var e = parseInt(a.substr(-3, 1)); // etc etc etc var f = parseInt(a.substr(-4, 1)); var g = parseInt(a.substr(-5, 1)); var h = parseInt(a.substr(-6, 1)); var j = parseInt(a.substr(-7, 1)); // this is the millionth spot if (c > 0) { // if the last number is 0, doesn't run, so doesn't show any chips eett = 4; // this is for css style bottom: number, for stack like appearance for (var x = 0; x < c; x++) {$('.chip1c').prepend('<div class="chip1 chips" style="bottom: -' + eett + 'px;"></div>');
eett += 4;
}
}
if (d > 0) {
eett = 4;
for (var x = 0; x < d; x++) {
$('.chip10c').prepend('<div class="chip10 chips" style="bottom: -' + eett + 'px;"></div>'); eett += 4; } } if (e > 0) { eett = 4; for (var x = 0; x < e; x++) {$('.chip100c').prepend('<div class="chip100 chips" style="bottom: -' + eett + 'px;"></div>');
eett += 4;
}
}
if (f > 0) {
eett = 4;
for (var x = 0; x < f; x++) {
$('.chip1kc').prepend('<div class="chip1000 chips" style="bottom: -' + eett + 'px;"></div>'); eett += 4; } } if (g > 0) { eett = 4; for (var x = 0; x < g; x++) {$('.chip10kc').prepend('<div class="chip10000 chips" style="bottom: -' + eett + 'px;"></div>');
eett += 4;
}
}
if (h > 0) {
eett = 4;
for (var x = 0; x < h; x++) {
$('.chip100kc').prepend('<div class="chip100000 chips" style="bottom: -' + eett + 'px;"></div>'); eett += 4; } } if (j > 0) { eett = 4; for (var x = 0; x < j; x++) {$('.chip1mc').prepend('<div class="chip1000000 chips" style="bottom: -' + eett + 'px;"></div>');
eett += 4;
}
}
}


CSS:

.chips { width: 40px; height: 40px; border-radius: 100px; position: absolute; }

.ccont { position: absolute; width: 40px; height: 40px; }
.chip1c { right: 0; bottom: -30px; }
.chip10c { right: 50px; bottom: -35px; }
.chip100c { right: 100px; bottom: -40px; }
.chip1kc { right: 150px; bottom: -40px; }
.chip10kc { right: 200px; bottom: -38px; }
.chip100kc { right: 250px; bottom: -35px; }
.chip1mc { right: 300px; bottom: -30px; }


HTML:

<div class="chip1mc ccont"></div>
<div class="chip100kc ccont"></div>
<div class="chip10kc ccont"></div>
<div class="chip1kc ccont"></div>
<div class="chip100c ccont"></div>
<div class="chip10c ccont"></div>
<div class="chip1c ccont"></div>

• 7 for loops, 9 variables, 7 if statements, and one function - doesn't it sound like you need more functions? – Mathieu Guindon Dec 29 '13 at 22:05

## 2 Answers

All the cases should be handled generically; the variables should be in an array. The class names, such as chip10kc, should be renamed to chip10000c.

I would also split the calculation from the presentation.

/**
* Decomposes a value as a sum of differently denominated chips.
* The value must be a nonnegative integer.
* Returns a seven-element array with the number of one-chips, ten-chips, …
* million-chips.  (Some of those elements may have undefined values.)
*/
function chipCounts(value) {
var chips = ('' + value).split('').reverse().map(function (e) { return parseInt(e) });

// Handle value < 1 million or value >= 10 million
chips.length = 7;
chips[6] = Math.floor(value / 1000000);

return chips;
}

function chipStack(chipCounts) {
for (var exp = 0, denom = 1; exp < chipCounts.length; exp++, denom *= 10) {
var $div =$('.chip' + denom + 'c');
for (var c = 0, eett = 4; c < chipCounts[exp]; c++, eett += 4) {
\$div.prepend('<div class="chip' + denom + ' chips" style="bottom: -' + eett + 'px;"></div>');
}
}
}

// Test case
chipStack(chipCounts(31415));


Perhaps you can use the mod operator (%)? Something along this line (I don't really know JavaScript; below is just the concept):

value = parsetInt( chips.toString() );
base = 0.1;

while( value > 0 ){
stack = value % 10;
value = Math.floor( value / 10 );
base *= 10

eett = 4
for( var x = 0; x < stack; x++){
// add stack with class = "chip"+unit+" chips"
eett += 4;
}
}