4
\$\begingroup\$

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:

100000 chips

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>
\$\endgroup\$
  • 2
    \$\begingroup\$ 7 for loops, 9 variables, 7 if statements, and one function - doesn't it sound like you need more functions? \$\endgroup\$ – Mathieu Guindon Dec 29 '13 at 22:05
3
\$\begingroup\$

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));
\$\endgroup\$
0
\$\begingroup\$

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;
    }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.