Update options menu. Reorganize ui into proper folder. Add text input widget.

src/client/assets/strings.lua

@@ -7,4 +7,5 @@ return setmetatable({
   ["option_name"] = "Player Name",
   ["option_pron"] = "Player Pronouns",
   ["option_tint"] = "Player Colour",
+  ["option_keybinds"] = "Edit Keybindings",
 }, {__index = function( t, k ) return k end } )

src/client/options.lua

@@ -1,108 +0,0 @@
-local lg = assert( love.graphics )
-local love = assert( love )
-local scene = assert( require 'client.scene' )
-local strings = assert( require 'client.assets.strings' )
-local button = assert( require 'client.button' )
-local menu = {}
-
-local t = 0
-local wWidth = 800
-local wHeight = 600
-
-local selectedButtonIdx = nil
-
-local buttons = 
-  {
-    button{ 
-      x = 15, w = 400, h = 50,
-      y = 115,
-      text = strings.option_name,
-      color = { 0.5, 0.7, 0.5, 1 },
-      callback = function() print("Adjust Name") end },
-    
-    button{ 
-      x = 15, w = 400, h = 50,
-      y = 115 + 55,
-      text = strings.option_pron,
-      color = { 0.5, 0.7, 0.5, 1 },
-      callback = function() print("Adjust Name") end },
-    
-    button{ 
-      x = 15, w = 400, h = 50,
-      y = 115 + 55 * 2,
-      text = strings.option_tint,
-      color = { 0.5, 0.7, 0.5, 1 },
-      callback = function() print("Adjust Colour") end },
-    
-    button{
-      x = 15, w = 400, h = 50,
-      y = 115 + 55 * 3,
-      text = strings.mainmenu_button,
-      color = { 0.5, 0.7, 0.5, 1 },
-      callback = function() print("Adjust Name") return scene.mainmenu() end },
-  }
-
-function menu.onLoad()
-end
-
-function menu.draw()
-  for id, button in pairs( buttons ) do button:draw( ) end
-end
-
-function menu.update( dt )
-  t = t + dt
-end
-
-function menu.resize( w, h )
-  wWidth, wHeight = w, h
-end
-
-function menu.mousemoved( x, y, dx, dy, istouch )
-  if selectedButtonIdx then
-    buttons[selectedButtonIdx].selected = false
-    selectedButtonIdx = nil
-  end
-  for id, menuButton in ipairs( buttons ) do
-    if menuButton:contains( x, y ) then
-      menuButton.selected = true
-      selectedButtonIdx = id
-      break
-    end
-  end
-end
-
-function menu.mousepressed( x, y, button, istouch, presses )
-  if not selectedButtonIdx then return end
-  local uiButton = buttons[selectedButtonIdx]
-  if uiButton:contains( x, y ) then return uiButton() end
-end
-
-function menu.keypressed( key, code, isrepeat )
-  
-  if code == "escape" then
-    return scene.mainmenu()
-  end
-  
-  if code == "return" and selectedButtonIdx then
-    return buttons[selectedButtonIdx]()
-  end
-  
-  if code == "down" or code == "tab" or code == "up" then
-    local sbi = (selectedButtonIdx or 1)
-    buttons[sbi].selected = false
-    
-    --Increment / decrement
-    sbi = sbi + ((code == "up") and -1 or 1)
-    if sbi > #buttons then sbi = 1 end
-    if sbi < 1 then sbi = #buttons end
-    
-    --Assign
-    print( "selecting button: ", sbi )
-    selectedButtonIdx = sbi
-    buttons[selectedButtonIdx].selected = true
-  end
-  
-end
-
-scene.options = menu
-return menu

src/client/ui/button.lua

@@ -31,8 +31,6 @@ function button:draw( )
   if self.selected then 
     lg.setColor( 1, 1, 1, 0.8 )
     lg.rectangle( "fill", self.x + 3, self.y + 3, self.w - 6, self.h - 6, 10 )
-  else
-    lg.setColor( 0, 0, 0, 0.7 )
   end
 
 lg.setColor( 0, 0, 0, 0.7 )

src/client/ui/menu.lua

@@ -2,7 +2,7 @@ local lg = assert( love.graphics )
 local love = assert( love )
 local scene = assert( require 'client.scene' )
 local strings = assert( require 'client.assets.strings' )
-local button = assert( require 'client.button' )
+local button = assert( require 'client.ui.button' )
 local menu = {}
 
 local t = 0
@@ -119,11 +119,9 @@ function menu.mousemoved( x, y, dx, dy, istouch )
     if menuButton:contains( x, y ) then
       menuButton.selected = true
       selectedButtonIdx = id
-      break
+      return menu.paint()
     end
   end
-  
-  return menu.paint()
 end
 
 function menu.mousepressed( x, y, button, istouch, presses )

src/client/ui/options.lua

@@ -0,0 +1,174 @@
+local lg = assert( love.graphics )
+local love = assert( love )
+local scene = assert( require 'client.scene' )
+local strings = assert( require 'client.assets.strings' )
+local button = assert( require 'client.ui.button' )
+local menu = {}
+
+local t = 0
+local wWidth = 800
+local wHeight = 600
+local canvas = lg.newCanvas()
+
+local selectedButtonIdx = nil
+
+local gradientQuad = lg.newMesh{
+  {	0, 0,	0, 0,	0.4, 0.1, 0.4, 0.0 },
+  {	1, 0, 1, 0,	0.8, 0.3, 0.1, 1.0 },
+  {	1, 1,	1, 1,	0.7, 0.4, 0.1, 1.0 },
+  {	0, 1,	0, 1,	0.4, 0.1, 0.3, 0.0 }, 
+}
+
+local buttons = 
+{
+  button{ 
+    x = 15, w = 400, h = 50,
+    y = 115,
+    text = strings.option_name,
+    color = { 0.5, 0.2, 0.2, 0.6 },
+    callback = function() print("Adjust Name") end },
+
+  button{ 
+    x = 15, w = 400, h = 50,
+    y = 115 + 55,
+    text = strings.option_pron,
+    color = { 0.5, 0.2, 0.4, 0.6 },
+    callback = function() print("Adjust Name") end },
+
+  button{ 
+    x = 15, w = 400, h = 50,
+    y = 115 + 55 * 2,
+    text = strings.option_tint,
+    color = { 0.5, 0.2, 0.6, 0.6 },
+    callback = function() print("Adjust Colour") end },
+
+  button{
+    x = 15, w = 400, h = 50,
+    y = 115 + 55 * 3,
+    text = strings.mainmenu_button,
+    color = { 0.5, 0.2, 0.8, 0.6 },
+    callback = function() print("Adjust Name") return scene.mainmenu() end },
+  
+  button{
+    x = 15, w = 400, h = 50,
+    y = 115 + 55 * 4,
+    text = strings.keybinding_button,
+    color = { 0.8, 0.0, 0.4, 0.8 },
+    callback = function() end,
+    }
+}
+
+--[[local keybindButtons = {
+  button{
+    x = wWidth / 2, w = 400, h = 50
+    y = 115,
+    text = options:get( 'forward_key' ),
+    color = { 0.8, 0.0, 0.4, 0.8 },
+    callback = function() options:set( 'forward_key' ) end,
+  },
+  
+  button{
+    x = wWidth / 2, w = 400, h = 50
+    y = 115,
+    text = strings.backward_key,
+    color = { 0.8, 0.0, 0.4, 0.8 },
+    callback = function() return setOption( 'backward_key' ) end,
+  }
+  
+}]]
+
+function menu.onLoad()
+  lg.setNewFont( "client/assets/SitkaB.ttc", 28 )
+  return menu.resize( lg.getDimensions() )
+end
+
+function menu.draw()
+  lg.setCanvas()
+  lg.setColor( 1,1,1,1 )
+  lg.draw( canvas )
+end
+
+function menu.paint()
+
+  lg.setCanvas( canvas )
+
+  --bg
+  lg.setColor( 0.8, 0.6, 0.3, 1 )
+  lg.rectangle( "fill", 0, 0, wWidth, wHeight )
+
+  --buttons
+  for id, button in pairs( buttons ) do button:draw( ) end
+
+  --gradient
+  lg.setColor( 1, 1, 1, 1 )
+  lg.draw( gradientQuad, 0, 0, 0, wWidth, wHeight )
+  lg.setCanvas()
+
+end
+
+function menu.update( dt )
+  t = t + dt
+end
+
+function menu.resize( w, h )
+  wWidth, wHeight = w, h
+  canvas = lg.newCanvas()
+  for id, uiButton in pairs( buttons ) do
+    uiButton.w = wWidth
+  end
+  return menu.paint()
+end
+
+function menu.mousemoved( x, y, dx, dy, istouch )
+  if selectedButtonIdx then
+    buttons[selectedButtonIdx].selected = false
+    selectedButtonIdx = nil
+  end
+  for id, menuButton in ipairs( buttons ) do
+    if menuButton:contains( x, y ) then
+      menuButton.selected = true
+      selectedButtonIdx = id
+      return menu.paint()
+    end
+  end
+  
+end
+
+function menu.mousepressed( x, y, button, istouch, presses )
+  if not selectedButtonIdx then return end
+  local uiButton = buttons[selectedButtonIdx]
+  if uiButton:contains( x, y ) then return uiButton() end
+  
+  return menu.paint()
+end
+
+function menu.keypressed( key, code, isrepeat )
+
+  if code == "escape" then
+    return scene.mainmenu()
+  end
+
+  if code == "return" and selectedButtonIdx then
+    return buttons[selectedButtonIdx]()
+  end
+
+  if code == "down" or code == "tab" or code == "up" then
+    local sbi = (selectedButtonIdx or 1)
+    buttons[sbi].selected = false
+
+    --Increment / decrement
+    sbi = sbi + ((code == "up") and -1 or 1)
+    if sbi > #buttons then sbi = 1 end
+    if sbi < 1 then sbi = #buttons end
+
+    --Assign
+    print( "selecting button: ", sbi )
+    selectedButtonIdx = sbi
+    buttons[selectedButtonIdx].selected = true
+  end
+
+  return menu.paint()
+end
+
+scene.options = menu
+return menu

src/client/ui/textinput.lua

@@ -0,0 +1,69 @@
+local love = assert( love )
+local lk = assert( love.keyboard )
+local lg = assert( love.graphics )
+
+local utf8 = assert( require 'utf8' )
+local string = assert( string )
+
+
+local _lt
+local _lkp
+
+
+local textInput = { }
+local __mt = { __index = textInput }
+local activeWidget
+
+function textInput.new()
+  return setmetatable( {text = ""}, __mt )
+end
+
+--This is only called when a text input widget is active.
+function textInput.keypressed(key, code, isRepeat)
+  assert( activeWidget )
+  if code == "escape" then return textInput.escape() end
+  if code == "return" then return textInput.return() end
+  
+  local text = activeWidget.text
+  if code == "backspace" then
+    local byteoffset = utf8.offset(text, -1)
+
+    if byteoffset then
+        -- remove the last UTF-8 character.
+        -- string.sub operates on bytes rather than UTF-8 characters, so we couldn't do string.sub(text, 1, -2).
+        text = string.sub(text, 1, byteoffset - 1)
+    end
+  end
+end
+
+function textInput:draw()
+  lg.rectangle(  )
+  lg.print(self.text, self.x or 0, self.y or 0)
+end
+
+function textInput:getText()
+  return self.text
+end
+
+function textInput.textInput( s )
+  activeWidget.text = activeWidget.text..s
+end
+
+function textInput:enable()
+  _lt = love.textinput
+  _lkp = love.keypressed
+  love.textinput = textInput.textInput
+  love.keypressed = textInput.keypressed
+  activeWidget = self
+end
+
+function textInput:clear()
+  
+end
+
+function textInput.disable()
+  love.textinput = _lt
+  love.
+end
+
+return textInput

src/main.lua

@@ -4,9 +4,9 @@ local love = assert( love )
 
 function love.load()
   local scenes = assert( require 'client.scene' )
-  assert( require 'client.menu' )
+  assert( require 'client.ui.menu' )
-  assert( require 'client.browser' )
+  assert( require 'client.ui.browser' )
   assert( require 'client.game' )
-  assert( require 'client.options' )
+  assert( require 'client.ui.options' )
   scenes.mainmenu()
 end