split sliders into a module (finally!)

.vscode/settings.json

@@ -3,5 +3,6 @@
   "Lua.workspace.library": [
     "${3rd}/love2d/library"
   ],
-  "Lua.workspace.checkThirdParty": false
+  "Lua.workspace.checkThirdParty": false,
+  "Lua.completion.autoRequire": false
 }

dropdown.lua

@@ -103,6 +103,7 @@ function self.createDropdowns()
 
   dropdowns = d
   minEase = (self.kselected('ease1') and ease.eases[self.kselected('ease1')].min == -1) or (self.kselected('ease2') and ease.eases[self.kselected('ease2')].min == -1)
+  mode = dropdown.kget('mode').selected
 end
 
 function self.update(dt)
@@ -124,7 +125,7 @@ end
 function self.render()
   local mx, my = love.mouse.getPosition()
   for i,v in ipairs(dropdowns) do
-    local x, y, w, h = v.x, v.y, v.width, love.graphics.getFont():getHeight() + margin
+    local x, y, w, h = v.x, v.y, v.width, fontHeight + margin
 
     love.graphics.setColor(0.06, 0.06, 0.12, 0.3)
     if love.mouse.getX() > x and love.mouse.getX() < x + w and love.mouse.getY() > y and love.mouse.getY() < y + h then
@@ -184,7 +185,7 @@ end
 function self.mousepressed(x, y, m)
   local clickedDropdown = false
   for i,v in ipairs(dropdowns) do
-    local h = love.graphics.getFont():getHeight() + margin
+    local h = fontHeight + margin
     if self.openDropdown == 0 then
       if x > v.x and x < v.x + v.width and y > v.y and y < v.y + h + margin then
         if m == 1 then
@@ -194,7 +195,7 @@ function self.mousepressed(x, y, m)
           dropdownScrollE = 0
         elseif m == 3 then
           dropdowns[i].selected = math.random(1, #dropdowns[i].options)
-          self.createDropdowns()
+          createUI()
         end
       end
     elseif self.openDropdown == i then
@@ -212,13 +213,13 @@ end
 
 function self.mousereleased(x, y, m)
   for i,v in ipairs(dropdowns) do
-    local h = love.graphics.getFont():getHeight() + margin
+    local h = fontHeight + margin
     if self.openDropdown == i then
       if x > v.x and x < v.x + v.width and y > v.y + h and y < v.y + h * (math.min(#v.options, maxDropdown) + 1) and m == 1 then
         v.selected = math.floor((y - v.y) / h - dropdownScrollE)
         self.openDropdown = 0
         dropdownValueCache[v.name] = {selected = v.selected}
-        self.createDropdowns()
+        createUI()
       end
     end
   end
@@ -230,11 +231,11 @@ function self.wheelmoved(x, y)
   else
     local mx, my = love.mouse.getPosition()
     for i,v in ipairs(dropdowns) do
-      local h = love.graphics.getFont():getHeight() + margin
+      local h = fontHeight + margin
       if mx > v.x and mx < v.x + v.width and my > v.y and my < v.y + h + margin then
         dropdowns[i].selected = dropdowns[i].selected - math.floor(y)
         dropdowns[i].selected = (dropdowns[i].selected - 1) % #dropdowns[i].options + 1
-        self.createDropdowns()
+        createUI()
       end
     end
   end

graph.lua

@@ -62,9 +62,9 @@ function self.render()
     end
 
     -- mixease point
-    if mode == 2 then
+    if mode == 2 and slider.kget('mix') then
       love.graphics.setColor(1, 1, 1, 0.2 + self.touchtimer * 0.6)
-      love.graphics.line(x + margin + oldmixpoint * w, y, x + margin + oldmixpoint * w, y + h)
+      love.graphics.line(x + margin + slider.kvalue('mix') * w, y, x + margin + slider.kvalue('mix') * w, y + h)
     end
 
     -- preview point

main.lua

@@ -5,9 +5,15 @@ end
 
 ease = require 'ease'
 
+slider = require 'slider'
 dropdown = require 'dropdown'
 graph = require 'graph'
 
+function createUI()
+  dropdown.createDropdowns()
+  slider.createSliders()
+end
+
 require 'util' -- exports into global table
 
 -- rendering constants
@@ -16,39 +22,24 @@ padding = 14
 outerpadding = 22
 margin = 6
 dropdownWidth = 106
+fontHeight = love.graphics.getFont():getHeight()
 
--- slider
+-- global for convinience's sake
 
-mixpoint = 0.5
-oldmixpoint = 0.5
-local mixpointtimer = 0 -- easter egg thing
-local mixpointspin = 0
-
--- rendering
+mode = nil
 
 function love.load()
-  dropdown.createDropdowns()
+  fontHeight = love.graphics.getFont():getHeight()
+  createUI()
 end
 
 function love.update(dt)
   graph.update(dt)
-
-  -- slider
-  mixpointtimer = mix(mixpointtimer + math.abs(mixpoint - oldmixpoint), 0, math.min(dt * 8))
-  oldmixpoint = mix(oldmixpoint, mixpoint, math.min(dt * 20, 1))
-
-  if mixpointtimer > 2 then
-    mixpointtimer = mixpointtimer - 2
-    mixpointspin = mixpointspin + 4
-  end
-
-  mixpointspin = mix(mixpointspin, 0, dt * 3)
-
+  slider.update(dt)
   dropdown.update(dt)
 end
 
 function love.draw()
-  mode = dropdown.kget('mode').selected
   local sw, sh = love.graphics.getDimensions()
   local mx, my = love.mouse.getPosition()
 
@@ -58,51 +49,12 @@ function love.draw()
   love.graphics.rectangle('line', 0, 0, sw, sh)
 
   love.graphics.setColor(1, 1, 1, 1)
-  love.graphics.print('Box of Eases by oatmealine', outerpadding, sh - love.graphics.getFont():getHeight() - outerpadding)
+  love.graphics.print('Box of Eases by oatmealine', outerpadding, sh - fontHeight - outerpadding)
 
-  -- sliders
-  -- yeah we do a lil' hardcoding
+  slider.render()
 
-  if mode == 2 then
-    local x, y, w, h = outerpadding, outerpadding * 2 + love.graphics.getFont():getHeight() + margin, dropdownWidth, 32
-
-    love.graphics.setColor(0.7, 0.7, 0.7, 0.4)
-    love.graphics.line(x, y + h/2, x + w, y + h/2)
-
-    local sx, sy = x + w * oldmixpoint, y + h/2
-    local ssize = h * 0.5
-
-    love.graphics.push()
-
-    love.graphics.translate(sx, sy)
-    love.graphics.rotate((mixpoint - oldmixpoint) * 4 + mixpointspin * math.pi * 2)
-
-    love.graphics.setColor(0, 0, 0, 1)
-    if mx > sx - ssize/2 and mx < sx + ssize/2 and my > sy - ssize/2 and my < sy + ssize/2 and dropdown.openDropdown == 0 then
-      love.graphics.setColor(0.2, 0.2, 0.3, 1)
-    end
-    love.graphics.rectangle('fill', -ssize/2, -ssize/2, ssize, ssize)
-    love.graphics.setColor(1, 1, 1, 1)
-    love.graphics.rectangle('line', -ssize/2, -ssize/2, ssize, ssize)
-
-    love.graphics.rotate((mixpoint - oldmixpoint) * -2)
-
-    love.graphics.setColor(1, 1, 1, 1)
-    love.graphics.printf(math.floor(mixpoint * 100)/100, -ssize * 6, ssize - 2, ssize * 12, 'center')
-
-    love.graphics.pop()
-
-    if mx > x and mx < x + w and my > y and my < y + h and love.mouse.isDown(1) and dropdown.openDropdown == 0 then
-      mixpoint = (mx - x) / w
-      graph.touchtimer = 1
-      dropdown.createDropdowns()
-    end
-  end
-
-  -- dropdowns
   dropdown.render()
 
-  -- graph
   graph.render()
 end
 

slider.lua

@@ -0,0 +1,113 @@
+local self = {}
+
+local sliders = {}
+
+function self.get(index)
+  return sliders[index]
+end
+
+function self.value(index)
+  return sliders[index].value
+end
+
+function self.kget(key)
+  for _, v in ipairs(sliders) do
+    if v.name == key then
+      return v
+    end
+  end
+end
+
+function self.kvalue(key)
+  return self.kget(key).oldvalue
+end
+
+local sliderId
+local function insertSlider(tab, f)
+  sliderId = sliderId + 1
+  f.value = (self.kget(f.name) or {value = f.default}).value
+  f.oldvalue = (self.kget(f.name) or {oldvalue = f.value}).oldvalue
+  f.spintimer = (self.kget(f.name) or {spintimer = 0}).spintimer
+  f.spin = (self.kget(f.name) or {spin = 0}).spin
+  return table.insert(tab, f)
+end
+function self.createSliders()
+  local s = {}
+  sliderId = 0
+
+  if mode == 2 then -- mix eases
+    insertSlider(s, {
+      x = outerpadding,
+      y = outerpadding + fontHeight + padding,
+      width = dropdownWidth,
+      min = 0,
+      max = 1,
+      default = 0.5,
+      name = 'mix',
+      displayname = 'Mix'
+    })
+  end
+
+  sliders = s
+end
+
+function self.update(dt)
+  for i, v in ipairs(sliders) do
+    v.spintimer = mix(v.spintimer + math.abs(v.value - v.oldvalue), 0, math.min(dt * 8))
+    v.oldvalue = mix(v.oldvalue, v.value, math.min(dt * 20, 1))
+
+    if v.spintimer > 2 then
+      v.spintimer = v.spintimer - 2
+      v.spin = v.spin + 4
+    end
+
+    v.spin = mix(v.spin, 0, dt * 3)
+  end
+end
+
+function self.render()
+  local mx, my = love.mouse.getPosition()
+
+  for i, v in ipairs(sliders) do
+    local x, y, w, h = v.x, v.y, v.width, 32
+
+    love.graphics.setColor(0.7, 0.7, 0.7, 0.4)
+    love.graphics.line(x, y + h/2, x + w, y + h/2)
+
+    local sx, sy = x + w * v.oldvalue, y + h/2
+    local ssize = h * 0.5
+
+    love.graphics.push()
+
+    love.graphics.translate(sx, sy)
+    love.graphics.rotate((v.value - v.oldvalue) * 4 + v.spin * math.pi * 2)
+
+    local hovering = mx > sx - ssize/2 and mx < sx + ssize/2 and my > sy - ssize/2 and my < sy + ssize/2 and dropdown.openDropdown == 0
+    local dragging = mx > x and mx < x + w and my > y and my < y + h and love.mouse.isDown(1) and dropdown.openDropdown == 0
+
+    love.graphics.setColor(0, 0, 0, 1)
+    if hovering or dragging then
+      love.graphics.setColor(0.2, 0.2, 0.3, 1)
+    end
+    love.graphics.rectangle('fill', -ssize/2, -ssize/2, ssize, ssize)
+    love.graphics.setColor(1, 1, 1, 1)
+    love.graphics.rectangle('line', -ssize/2, -ssize/2, ssize, ssize)
+
+    love.graphics.rotate((v.value - v.oldvalue) * -2)
+
+    love.graphics.setColor(1, 1, 1, 1)
+    love.graphics.printf(math.floor(v.value * 100)/100, -ssize * 6, ssize - 2, ssize * 12, 'center')
+
+    love.graphics.pop()
+
+    love.graphics.printf(v.displayname, v.x + margin * 2 - ssize * 6, v.y - 5, ssize * 12, 'center')
+
+    if dragging then
+      v.value = (mx - x) / w
+      graph.touchtimer = 1
+      createUI()
+    end
+  end
+end
+
+return self