Making a selector switch with multiple positions

[Ptruptrucea]

I'm trying to make a difficulty selector with 4 positions (easy, medium, hard, all of the above).

Making it the long and stupid way around is easy. Just draw the required rectangles for the positions' pips, a thick line to connect them and another rectangle that's slightly larger than the pips to represent the currently selected position. When you click on a different position, the selector moves to that position and the code upgrades or downgrades the variables that control difficulty. Simple.

However, I want to make reusable code. I want to put the entire code for the selector in its own file and call it with a function when needed, while providing parameters according to what I need (how many positions it should have, its x and y, name etc). It's useful if you need more of these and don't want to rewrite the code every time.

I decided to do it as an object, using the 'classic' library. Again, the drawing of the base was easy. I used a while loop to draw the pips according to the provided parameters. However, the selector can't work with this. Or can it? Here's the code:

Code: Select all

local Toggler = Object:extend() --creating a new class called "Toggler" for the switch


function Toggler:new(x, y, positions, name) --creating the object, its parameters and properties
  self.x, self.y = x, y --the x and y position of the switch
  self.positions = 0 or positions --the number of positions it should have
  self.name = nil or name --its name
  self.pipWidth = 30 --width of the base pip
  self.pipHeight = 30 --height of the base pip
  self.spacing = 0 --distance from the start of a pip to the start of the next
  self.selectorX = self.x - 5 --x of the selector rectangle (starts on the leftmost position)
  self.selectorY = self.y - 5 --y of the selector switch
end


function Toggler:update(dt)

end


function Toggler:draw()  
  --using a while loop to draw the base pips according to the "positions" parameter
  local i = 0
  while i < self.positions
    love.graphics.rectangle('fill', self.x + (self.spacing * i), self.y, self.pipWidth, self.pipHeight)
    if i < self.positions - 1 then
      love.graphics.rectangle('fill', self.x + self.pipWidth, self.y + self.pipHeight/2 - 5, 20, 10)
    end
    i = i + 1
    self.spacing = 50
  end
  love.graphics.rectangle('fill', self.selectorX, self.selectorY, 40, 40) --drawing the selector switch
end


function Toggler:mousepressed(x, y, button)
  
end

return Toggler

My question is - How do I make the selector switch work? I think I need to put the pips in a table and iterate through it somehow when the user clicks on another position, so the switch would move to the correct spot. I just can't think of an obvious way to do it. It's probably something stupid I'm missing.

[airstruck]

Just to be clear, the part you're getting stuck on is handling events from library code, is that correct?

One option would be to forget about events and use things like love.mouse.isDown and love.mouse.getPosition, but that's not perfect. The user could click and release the mouse button fast enough that love.mouse.isDown doesn't detect the click. Apart from that, you'll have more work to do, since you'll have to keep track of the mouse state, for example to distinguish a "press" from a "hold."

Another option is to expand the API of your switch to include functions that tell it about each type of event it cares about, and then call those functions from inside Love's event handlers. It would have its own "mousepressed" function, and you'd call that from love.mousepressed. It would have its own "mousereleased" function, and you'd call that from love.mousereleased. You'd do the same for mousemoved. If you want keyboard input, you'd do something similar for keypressed and keyreleased, and so on.

A third option is to "hook" any love callbacks that already existed by replacing them with your own function, which does its thing and also calls the function that it replaced. This saves you from having a small API explode into something double the size. If you plan to distribute this as a library, I can tell you from experience that people will complain about this.

If you're thinking none of those options seem very good, I agree with you. For a brief, shining moment, Love had a more robust event system to deal with cases like this. Unfortunately it was scrapped. If anyone knows of a better way to handle this, I would love to hear about it.

[Positive07]

If you plan to distribute this as a library, I can tell you from experience that people will complain about this.

Hey that's me! Hello!! Make it optional and it will be fine. The second method is the best one, you basically define one function per event then call those functions from their respective callbacks.

I don't really see a problem with the code you posted, you just need to code whatever goes inside Toggler:mousepressed

[Ref]

Sorry, off topic but just couldn't resist 'selector switch'.
Edit: That was so much fun, I made another unrelated one. Sorry