FastFoodie - Phaser JS Final Project - Timer meter

Hi… I’m on step 45 of “Fast Foodie” project project-info

Where the task # 45 consist in:

Customers won’t wait forever to be served. Express the concept of customers’ patience in your game using a timed meter that goes down to zero.

  • Draw a background for each customer’s timer meter under the fullness meter
  • Draw a bar to represent the timer
  • Create a timer once the customer has moved up to the chef.
  • Shrink the timer bar as the customer loses patience
  • Change the color of the timer as the customer is closer to leaving: green (0x3ADB40) when there’s lots of time, orange (0xFF9D00) at the 25% mark, and red (0xDB533A) if the timer is 75% complete.
  • Automatically run moveCustomerLine() when the timer reaches zero.
  • Remove the timer if the customer has been manually served before time runs out.

So far I implemented this:

// Add timer countdown meter body - step 45
        let meterWidthHelper = meterWidth;
        let color = 0x3ADB40;
        
        const fillMeterBody = () => {
            meterWidthHelper--;

            if (meterWidthHelper <= meterWidth * 0.75) {
                color =  0xFF9D00;
            }

            if (meterWidthHelper <= meterWidth * 0.25) {
                color =  0xDB533A;
            }

            if (meterWidthHelper === 0) {
                this.moveCustomerLine();
            }

            customerContainer.timerMeterBody = this.add.rectangle(customerContainer.meterBase.x + 22, customer.y + 1, meterWidth + 4, 12, color).setOrigin(0);
            customerContainer.timerMeterBody.angle = -90;
            customerContainer.meterContainer.add(customerContainer.timerMeterBody);
        }

        gameState.patience = this.time.addEvent({
            delay: 300,
            callback: fillMeterBody,
            loop: true
        });

But I saw that the meter keep the value of the last customer and send it to the next customer.

You can find the full code in here

PD: I was doing the last project of the Phaser path, honestly I felt a little stuck so stop trying for a long time, but I still want to finish it so I’ll appreciate all your help.

Are you starting all the timers at once? (when generating a wave)
A bit of printing out what’s being done could help.

      const fillMeterBody = () => {
        meterWidthHelper--
        console.log(`timer for customer #${i}: ${meterWidthHelper}`)
1 Like

Hi… yes, I remember I did it once and it looks like inside the loop is reading all customers at the same time.

Maybe i have to create another for loop next to the one that is iterating through the customer’s array.

I’m not convinced that would be any different. Isn’t the problem that they shouldn’t be started?
Maybe you only need one timer, since there’s only one customer at a time.

1 Like

Yes, when i used the timer inside the function fillMeterBody , I commented the previous timer… but is taking a timer for a customerContainer

I’m not sure what’s going on any more, but:

There’s probably some place in your code that makes the next customer walk in. You could start the timer there.
You could remove it where a customer is satisfied.

The place in your code that sets up the current round wouldn’t be a good place because that only happens once – a timer should be started on each new customer.