rewrites existing UI to luigi

src/draw.lua

@@ -1,10 +1,6 @@
-local Terebi  = require 'lib.terebi'
 local Luigi   = require 'lib.luigi.layout'
 
 local background
-local font
-local screen
-local status
 
 local C = Class:extend()
 
@@ -12,40 +8,23 @@ local layout = Luigi(require 'layout')
 layout:setStyle(require 'style')
 
 function C:setup()
-  Terebi.initializeLoveDefaults()
-  screen = Terebi.newScreen(320, 240, 2)
   background = lg.newImage('assets/background.png')
-  font = lg.newFont('assets/monogram_extended.ttf', 16)
-  font:setFilter('nearest', 'nearest', 1)
-  status = "Drag and drop your Cave Story folder here."
+  self:setStatus("Drag and drop your Cave Story folder here.")
 end
 
-local function _print(text, x, y, align)
-  align = align or 'center'
-  lg.setFont(font)
-  local limit = 320 - (x * 2)
-  lg.setColor(0, 0, 0)
-  lg.printf(text, x + 1, y + 1, limit, align)
-  lg.setColor(1, 1, 1)
-  lg.printf(text, x, y, limit, align)
-end
+layout.version.text = 'Cave Story Randomizer [Open Mode] v' .. VERSION
+layout.author.text  = 'by shru and duncathan'
+layout.twitter.text = '(@shruuu and @duncathan_salt)'
 
-local function _draw()
-  lg.draw(background, 0, 0)
-  _print('Cave Story Randomizer [Open Mode] v' .. VERSION, 0, 10)
-  _print('by shru and duncathan', 0, 22)
-  _print('(@shruuu and @duncathan_salt)', 0, 34)
-  _print(status, 10, 65)
-  _print('Original randomizer:\r\nshru.itch.io/cave-story-randomizer', 10, 200, 'left')
-end
+layout.footer.text = 'Original randomizer:\r\nshru.itch.io/cave-story-randomizer'
 
 function C:draw()
-  screen:draw(_draw)
+  lg.draw(background, 0, 0)
   layout:show()
 end
 
 function C:setStatus(text)
-  status = text
+  layout.status.text = text
 end
 
 return C

src/layout.lua

@@ -1,44 +1,58 @@
 return { id = 'window',
   { flow = 'y',
-    { height = 360 },
-    { flow = 'x',
+    {
+      type = 'panel',
+      id = 'header',
+      height = 100,
+      style = 'panel',
+      align = 'top center',
+      { height = 10 },
+      { id = 'version', text = "" },
+      { id = 'author', text = ""  },
+      { id = 'twitter', text = "" },
+      { height = 10 }
+    },
+    {
+      type = 'panel',
+      id = 'status',
+      height = 260,
+      style = 'panel',
+      align = 'top center',
+      margin = 24,
+      wrap = true,
+    },
+    { 
+      flow = 'x',
+      height = '40',
       { width = false },
+      --[[
       {
         type = 'button',
-        id = 'exampleButton',
-        text = 'Press me!',
+        id = 'settings',
+        text = 'Settings',
         width = 100,
         height = 32,
       },
       {
         type = 'button',
-        id = 'exampleButton2',
-        text = 'Press me',
-        width = 100,
-        height = 32,
-      },
-      {
-        type = 'button',
-        id = 'exampleButton3',
-        text = 'Press me',
-        width = 100,
-        height = 32,
-      },
-      {
-        type = 'button',
-        id = 'exampleButton4',
-        text = 'Press me',
-        width = 100,
-        height = 32,
-      },
-      {
-        type = 'button',
-        id = 'exampleButton5',
-        text = 'Press me',
+        id = 'go',
+        text = 'Randomize',
         width = 100,
         height = 32,
       },
+      ]]
       { width = false }
+    },
+    {
+      flow = 'x',
+      { width = 20 },
+      {
+        type = 'panel',
+        id = 'footer',
+        height = 80,
+        style = 'panel',
+        align = 'centre left',
+      }
     }
   }
 }

src/style.lua

@@ -1,6 +1,9 @@
 return {
   panel = {
-    background = {0,0,0,0}
+    background = {0,0,0,0},
+    font = 'assets/monogram_extended.ttf',
+    size = 32,
+    color = {255,255,255},
   },
   button = {
     align = 'centre middle'