Search code examples
rubytimershoesgreen-shoes

Ruby green shoes timer


I'm building this popup countdown timer for a game. The issue is I can't figure out how to update the the animate so that the display changes too. It works so far, but you can't see the numbers changing. It blends into the 00:00. I'm pretty positive it works so far just having trouble with this change. This is done with green shoes. Any ideas what I'm doing wrong here?

#Timer button used for creating a countdown timer for the game.
    #Game ends when timer is zero.
    flow width: 80, height: 0.2 do
    button 'Timer', width: 1.0, height: 1.0 do
        window do
        def time_change!
           @clock = '%02d:%02d' % [@second / 60, @second % 60]
           if(@second == 0)
            alert "game is over"
            @clock = '00:00'
                close()
            para @clock, size: 50, stroke: black
           end
         end

         background whitesmoke
         @clock = '00:00'
         para @clock, size: 50, stroke: black


         @second = 10

        animate(1) do
            @second -= 1
            time_change!
            para @clock, size: 50, stroke: black

        end
    end
end

Solution

  • You can replace the text of the current para which displays the clock:

    Shoes.app do
      flow do 
        button 'Timer', width: 100, height: 50 do
          window width: 200, height: 100 do  #Open a child window when the button is clicked
            seconds = 3
            tenths = 0
            clock =  '%02d:%02d'
    
            flow do
              @p = para clock % [seconds, tenths], #Assign the clock para to an instance variable, 
                size: 50,                          #which will make the variable visible outside this block.
                stroke: black
            end
    
            a = animate(10) do  #Upate the clock every 1/10 of a second.
              tenths -= 1
    
              if tenths < 0
                tenths  = 9
                seconds -= 1
              end
    
              @p.text = clock % [seconds, tenths]  #Replace the clock text.
    
              if seconds == 0 and tenths == 0
                a.stop
                alert("game over")
                close   #=>self.close where self is the window whose block contains this code
              end
            end #animate
    
          end #window
        end #button
      end #flow
    end #app
    

    To verify that the clock is actualy showing each time increment, you can slow things down by changing animate(10) to animate(1).