Add visuals to settings

game/database/settings/user-preferences.json

@@ -2,11 +2,11 @@
   "bgm-volume": {
     "default": 100,
     "range": [0, 100],
-    "step": 5
+    "step": 10
   },
   "sfx-volume": {
     "default": 100,
     "range": [0, 100],
-    "step": 5
+    "step": 10
   }
 }

game/domain/definitions/colors.lua

@@ -16,7 +16,7 @@ COLORS.EXIT = Color.fromInt {0x77, 0xba, 0x99, 0xff}
 COLORS.FLOOR1 = Color.fromInt {25, 73, 95, 0xff}
 COLORS.FLOOR2 = Color.fromInt {25, 73, 95 + 20, 0xff}
 
-COLORS.EMPTY = Color:new {0.2, .15, 0.05}
+COLORS.EMPTY = Color:new {0.2, .15, 0.05, 1}
 COLORS.WARNING = Color:new {1, 0.8, 0.2, 1}
 COLORS.VALID = Color:new {0, 0.7, 1, 1}
 COLORS.NOTIFICATION = Color.fromInt {0xD9, 0x53, 0x4F, 0xff}

game/gamestates/settings.lua

@@ -4,7 +4,7 @@ local INPUT        = require 'input'
 local DIRECTIONALS = require 'infra.dir'
 local PROFILE      = require 'infra.profile'
 local PLAYSFX      = require 'helpers.playsfx'
-local SettingsInputView = require 'view.settings_input'
+local SettingsView = require 'view.settings'
 
 local state = {}
 
@@ -49,6 +49,8 @@ function state:enter(from, ...)
     PROFILE.setPreference(field, _original[field])
   end
   _changes = setmetatable({}, { __index = original })
+  _view = SettingsView(_fields)
+  _view:addElement("GUI")
 end
 
 function state:update(dt)
@@ -63,17 +65,17 @@ function state:update(dt)
   elseif DIRECTIONALS.wasDirectionTriggered("UP") then
     PLAYSFX 'select-menu'
     _selection = (_selection - 2 + _fieldcount) % _fieldcount + 1
+    _view:setFocus(_selection)
   elseif DIRECTIONALS.wasDirectionTriggered("DOWN") then
     PLAYSFX 'select-menu'
     _selection = (_selection % _fieldcount) + 1
+    _view:setFocus(_selection)
   elseif DIRECTIONALS.wasDirectionTriggered("LEFT") then
     PLAYSFX 'ok-menu'
-    local field = _fields[_selection]
-    _changeField(field, -1)
+    _changeField(_fields[_selection], -1)
   elseif DIRECTIONALS.wasDirectionTriggered("RIGHT") then
     PLAYSFX 'ok-menu'
-    local field = _fields[_selection]
-    _changeField(field, 1)
+    _changeField(_fields[_selection], 1)
   end
 end
 
@@ -87,6 +89,7 @@ function state:leave()
       PROFILE.setPreference(field, value)
     end
   end
+  _view:destroy()
 end
 
 function state:draw()

game/view/settings.lua

@@ -0,0 +1,75 @@
+
+local COLORS = require 'domain.definitions.colors'
+local PROFILE = require 'infra.profile'
+local FONT = require 'view.helpers.font'
+
+local fmod = math.fmod
+local sin = math.sin
+
+local _PI = math.pi
+
+local _font
+
+local SettingsView = Class{
+  __includes = { ELEMENT }
+}
+
+local _getPreference = PROFILE.getPreference
+
+function SettingsView:init(fields)
+  ELEMENT.init(self)
+  self.fields = fields
+  self.focus = 1
+  _font = FONT.get("Text", 20)
+end
+
+function SettingsView:setFocus(idx)
+  self.focus = idx
+end
+
+function SettingsView:draw()
+  local g = love.graphics
+  local focus = self.focus
+  local width = 256
+  local height = 10
+  local mx, my = 8, 8
+  local font_height = 20
+  local lw = 4
+  local base_y = 256
+  local x = 320
+  -- draw one settings input type
+  FONT.set("Title", 32)
+  g.setColor(COLORS.NEUTRAL)
+  g.print("SETTINGS", x, base_y - 80)
+  _font:set()
+  for i, field in ipairs(self.fields) do
+    local y = base_y + (i - 1) * (height + 4*my + font_height)
+    local percentage = _getPreference(field) / 100
+    local is_focused = (i == focus)
+    g.push()
+    g.translate(x, y)
+
+    -- field name
+    g.setColor(is_focused and COLORS.NEUTRAL or COLORS.HALF_VISIBLE)
+    g.print(field:gsub("[-]", " "):upper(), 0, -font_height)
+    g.translate(0, font_height)
+
+    -- line width offset
+    g.translate(0, lw)
+
+    -- trail
+    g.setLineWidth(lw)
+    g.setColor(is_focused and COLORS.EMPTY or COLORS.DARKER)
+    g.line(0, 0, width, 0)
+
+    -- value progression
+    g.setColor(is_focused and COLORS.NEUTRAL or COLORS.HALF_VISIBLE)
+    g.line(0, 0, percentage * width, 0)
+    g.ellipse("fill", percentage * width, 0, height, height)
+
+    g.pop()
+  end
+end
+
+return SettingsView
+