Counter that shows only at the end in HaxeFlixel

Question

I'm doing a simple counter ( that counts from 1 to 10 seconds ) and is working but not on the screen. It does the counting (1, 2,..., 10) in seconds but only 10 appears on screen when it reaches 10!

Here's the function where the counter text is added :

public function updateCounter(counter:Int)
    {
        background.drawRect(0, 19, FlxG.width, 1, FlxColor.CYAN);
        add(background);
        textcounter.text = Std.string(counter);
        textcounter.x = textcounter.width - 4;
        add(textcounter);
        trace("In updateCounter:" + counter);
    }

The function is called from here:

override public function update(elapsed:Float)
    {
        super.update(elapsed);
        while (counterStarted == true && count < 10)
        {
            if (second == lastSecond)
            {
                today = Date.now();
                second = today.getSeconds();
            }
            if (second != lastSecond)
            {
                lastSecond = second;
                count++;
                counter++;
                counterHud.updateCounter(counter);
                trace(count);
                trace("secound was != last second");
            }
        }
    }

This is the function for the button where counterStarted is set to true or false :

function clickPlay()
    {
        if (counterStarted == true)
        {
            counterStarted = false;
            counterStoped = true;
        }
        else
        {
            counterStarted = true;
        }
    }

I'm trying to have the counter count from 1 to 10 on the screen.

Answer 1

The while in your update() is forcing the execution of all the code in a single frame: this would cause the draw() function to only show the last value of the counter. You should change it to be executed over many frames.

Try changing it to an if:

override public function update(elapsed:Float)
    {
        super.update(elapsed);
        if (counterStarted == true && count < 10) // <-- change this line
        {
            if (second == lastSecond)
            {
                today = Date.now();
                second = today.getSeconds();
            }
            if (second != lastSecond)
            {
                lastSecond = second;
                count++;
                counter++;
                counterHud.updateCounter(counter);
                trace(count);
                trace("secound was != last second");
            }
        }
    }

This way, each time the update() function is called (that is, every frame) the checks are being run and the counter updated.