init wip

prototypes/examples/app-bar.moon

@@ -0,0 +1,53 @@
+-- based on http://www.material-ui.com/#/components/app-bar
+
+{
+  toolbar: {
+    width: 1
+    -- height not defined, it will be defined by largest sub-element (in this case, the text)
+    -- sub-items' heights will be equal, widths according to aspect ratio
+    padding: 5
+    {
+      dropdown: {
+        toggle: "click" -- vs hover (default)
+        background: hamburger -- a drawable hamburger icon
+        background: { hamburger, close_x } -- idea: first is default state, second is when activated
+        {} -- sub-items (not shown unless activated)
+      }
+    }
+    {
+      text: "Title"
+      clicked: (btn, x, y) ->
+        -- func that replaces (switch method?) toolbar w one defined below
+    }
+    {
+      align: "right"
+      dropdown: {
+        toggle: "click"
+        background: down_arrow
+        {} -- sub-items (not shown unless activated)
+      }
+    }
+  }
+}
+
+{
+  toolbar: {
+    padding: 5
+    {
+      background: close_x
+    }
+    {
+      textinput: {
+        name: "title" -- something to make it easier to access whatever value is stored here currently ?
+        value: "Title"
+        -- something to style it to just be the text
+      }
+    }
+    {
+      align: "right"
+      text: "SAVE"
+      clicked: (btn, x, y) ->
+        -- do something to save what has been put in the textinput
+    }
+  }
+}

prototypes/examples/badge.moon

@@ -0,0 +1,14 @@
+-- reference http://www.material-ui.com/#/components/badge
+
+{
+  background: some_image -- or could be text or something
+  badge: {
+    -- can be any kind of element, will be sized and offset to top-right
+    --  but will have a circular outer display color for whatever it is
+    --  (so really should use transparent circular items or text only)
+    -- this example: a count of 2 with a background color of red and text color white
+    text: 2
+    background: {255, 0, 0, 255}
+    color: {255, 255, 255, 255}
+  }
+}

prototypes/examples/bottom-navigation.moon

@@ -0,0 +1,20 @@
+-- from http://www.material-ui.com/#/components/bottom-navigation
+
+{
+  toolbar: {
+    width: 0.5
+    padding: 3
+    {
+      -- default align is top-left (we want left, but in this case, vertical alignment doesn't mean anything)
+      background: recents_icon
+    }
+    {
+      align: "center"
+      background: favorites_icon
+    }
+    {
+      align: "right"
+      background: nearby_icon
+    }
+  }
+}

prototypes/examples/buttons.moon

@@ -0,0 +1,23 @@
+{
+  text: "click me"
+  -- define a clicked fn here
+}
+{
+  padding: 3
+  text: "button"
+  background: {0, 255, 255, 255} -- teal
+  color: {255, 255, 255, 255} -- white
+}
+{
+  padding: 8
+  text: "+"
+  background: {0, 255, 255, 255} -- teal
+  color: {255, 255, 255, 255} -- white
+  round: true -- to make a rounded button (like a badge)
+  round: 5    -- round the background box by this percent/pixels
+}
+{
+  background: some_image
+  clicked: (btn, x, y) -> -- now its a button! :D
+  hovered: (x, y) ->      -- with optional hoverable capability
+}

prototypes/examples/chip.moon

@@ -0,0 +1,20 @@
+-- http://www.material-ui.com/#/components/chip
+
+{
+  rounded: 5
+  background: some_color
+  padding: {right: 5}
+  -- somehow this knows to expand to size of children horizontally, but not vertically...
+  {
+    rounded: true -- full circle instead of special pixel count
+    background: an_image
+  }
+  {
+    text: "Colored Chip"
+  }
+  {
+    width: 0.8 -- 80% size of parent
+    rounded: true
+    background: an_x_image
+  }
+}

prototypes/examples/divider.moon

@@ -0,0 +1,10 @@
+-- http://www.material-ui.com/#/components/divider
+
+{
+  text: "some text"
+}
+{ -- makes a horizontal rule effectively
+  newline: true
+  height: 1.0001
+  background: dark_grey
+}

prototypes/examples/todo.txt

@@ -0,0 +1,23 @@
+http://www.material-ui.com/#/components/card
+http://www.material-ui.com/#/components/date-picker
+http://www.material-ui.com/#/components/dialog -- like a window
+http://www.material-ui.com/#/components/drawer
+http://www.material-ui.com/#/components/grid-list
+http://www.material-ui.com/#/components/list  -- like a vertical toolbar ? (menu alias ?)
+http://www.material-ui.com/#/components/paper -- is a drop-shadow effect around itself
+http://www.material-ui.com/#/components/circular-progress -- a spinner (note: should be able to show specific amount too)
+http://www.material-ui.com/#/components/linear-progress   -- a slider / progressbar
+http://www.material-ui.com/#/components/refresh-indicator -- a specialized spinner
+http://www.material-ui.com/#/components/select-field
+http://www.material-ui.com/#/components/checkbox
+http://www.material-ui.com/#/components/toggle   -- a short slider turned into boolean
+http://www.material-ui.com/#/components/snackbar -- a little notification from bottom
+http://www.material-ui.com/#/components/stepper
+http://www.material-ui.com/#/components/subheader
+http://www.material-ui.com/#/components/table      -- grid
+http://www.material-ui.com/#/components/tabs       -- like my tabs, except allows any content for 'name' of tabs
+http://www.material-ui.com/#/components/text-field -- textinput
+http://www.material-ui.com/#/components/time-picker
+http://www.material-ui.com/#/components/toolbar    -- a little more advanced than mine?
+
+Templates and theming are important. Being able to set all colors for a chunk of UI at once is a good thing.

prototypes/scp-clicker/main.moon

@@ -0,0 +1,104 @@
+import graphics from love
+
+slab = {
+  types: { "menu", "spinner" }
+  screen: { x: 0, y: 0, width: graphics.getWidth!, height: graphics.getHeight! }
+}
+
+slab.generic = class
+  new: (element={}, parent=slab.screen) =>
+    for k,v in pairs element
+      @[k] = v
+
+    if @width
+      if @width <= 1
+        @w = parent.w * @width
+      else
+        @w = @width
+
+    if @height
+      if @height <= 1
+        @h = parent.h * @height
+      else
+        @h = @height
+
+slab.menu = class
+  new: (parent=slab.screen) =>
+    for child in *@
+      if @menu.width
+        child.width = @menu.width
+      if @menu.height
+        child.height = @menu.height
+      if @menu.align
+        child.align = @menu.align
+
+    -- TODO menus are a vertical structure
+
+slab.make = (element={}, parent=slab.screen) ->
+  element = slab.generic element, parent
+  for t in *slab.types
+    element = slab[t](parent) if element[t]
+  return element
+
+-- b = slab.make sample_value: true
+-- print(b.sample_value)
+
+clickers = {
+  width: 1/3
+  height: 1
+  menu: { -- block elements default to minimum space required
+    height: 1/3 -- defined here applies to children
+    align: "center" -- defined here means the children are aligned this way
+    {
+      name: "cash_clicker"
+      clicked: (btn, x, y) ->
+        -- stuff
+      spinner: {
+        value: 0 -- a defined value means it is set instead of just spinning constantly ?
+        {
+          width: 0.8
+          align: "center"
+          background: graphics.newImage "gfx/banknote.png"
+        }
+        {
+          align: "bottom-left"
+          text: "Lv. 0"
+        }
+      }
+    }
+    {
+      name: "danger_clicker"
+      clicked: (btn, x, y) ->
+        -- stuff
+      spinner: {
+        value: 0
+        {
+          width: 0.8
+          align: "center"
+          background: graphics.newImage "gfx/hazard-sign.png"
+        }
+        {
+          align: "bottom-left"
+          text: "Lv. 0"
+        }
+      }
+    }
+    {
+      name: "research_clicker"
+      clicked: (btn, x, y) ->
+        -- stuff
+      spinner: {
+        value: 0
+        {
+          width: 0.8
+          align: "center"
+          background: graphics.newImage "gfx/fizzing-flask.png"
+        }
+        {
+          align: "bottom-left"
+          text: "Lv. 0"
+        }
+      }
+    }
+  }
+}

prototypes/slab.moon

@@ -0,0 +1,59 @@
+props = {
+  "toolbar"
+  "window"
+  "tabs"
+  "area"
+  "grid"
+  "spinner"
+  "dial"
+  "slider"
+  "title"
+  "text"
+  "checkbox"
+  "radio"
+  "class"
+  "align"
+  "clicked"
+  "hovered"
+  "wheelmoved"
+  "mousepressed"
+  "mousereleased"
+  "textinput"
+  "keypressed"
+  "keyreleased"
+  "margin"
+  "padding"
+  "border"
+  "width"
+  "height"
+  "size"
+  "background"
+  "color"
+  "tooltip"
+}
+
+-- all_handlers = { "update", "draw", "errhand" }
+-- for handler in pairs love.handlers
+--   table.insert all_handlers, handler
+--
+-- null = ->
+
+slab = {
+  -- load: (handlers=all_handlers) ->
+  --   for handler in *handlers
+  --     current = love[handler] or null
+  --     love[handler] = (...) ->
+  --       current(...)
+  --       return slab[handler](...)
+}
+
+-- return a table w __call for building the UI ?
+-- considering the way I am handling this library is by a bunch of properties that can be mixed, perhaps a
+--  ECS system might help manage things ?
+
+-- Method: add (adds new elements, possibly triggering a reflow)
+-- Method: replace (removes all inner elements and adds new elements, possibly triggering a reflow)
+-- dropdown (essentially a btn w hover or click -> and a vertical toolbar (menu?)), textinput
+-- Enumeration: colors (red, blue, green, teal, black, white, etc -- for convienence)
+
+return slab