This commit is contained in:
Paul Liverman III
2018-04-05 15:43:24 -07:00
commit f0a9da387a
13 changed files with 328 additions and 0 deletions

2
main.moon Normal file
View File

@@ -0,0 +1,2 @@
for k in pairs love.handlers
print k

View File

@@ -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
}
}
}

View File

@@ -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}
}
}

View File

@@ -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
}
}
}

View File

@@ -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
}

View File

@@ -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
}
}

View File

@@ -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
}

View File

@@ -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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -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"
}
}
}
}
}

59
prototypes/slab.moon Normal file
View File

@@ -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