commit f0a9da387a9fd0e673e5d3e24f12b70114009d37 Author: Paul Liverman III Date: Thu Apr 5 15:43:24 2018 -0700 init wip diff --git a/main.moon b/main.moon new file mode 100644 index 0000000..e458fea --- /dev/null +++ b/main.moon @@ -0,0 +1,2 @@ +for k in pairs love.handlers + print k diff --git a/prototypes/examples/app-bar.moon b/prototypes/examples/app-bar.moon new file mode 100644 index 0000000..023fdd8 --- /dev/null +++ b/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 + } + } +} diff --git a/prototypes/examples/badge.moon b/prototypes/examples/badge.moon new file mode 100644 index 0000000..0ce5b0b --- /dev/null +++ b/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} + } +} diff --git a/prototypes/examples/bottom-navigation.moon b/prototypes/examples/bottom-navigation.moon new file mode 100644 index 0000000..11f4be5 --- /dev/null +++ b/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 + } + } +} diff --git a/prototypes/examples/buttons.moon b/prototypes/examples/buttons.moon new file mode 100644 index 0000000..daf3f93 --- /dev/null +++ b/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 +} diff --git a/prototypes/examples/chip.moon b/prototypes/examples/chip.moon new file mode 100644 index 0000000..cd2cfe0 --- /dev/null +++ b/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 + } +} diff --git a/prototypes/examples/divider.moon b/prototypes/examples/divider.moon new file mode 100644 index 0000000..f8fcd45 --- /dev/null +++ b/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 +} diff --git a/prototypes/examples/todo.txt b/prototypes/examples/todo.txt new file mode 100644 index 0000000..0129570 --- /dev/null +++ b/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. diff --git a/prototypes/scp-clicker/gfx/banknote.png b/prototypes/scp-clicker/gfx/banknote.png new file mode 100644 index 0000000..a20a791 Binary files /dev/null and b/prototypes/scp-clicker/gfx/banknote.png differ diff --git a/prototypes/scp-clicker/gfx/fizzing-flask.png b/prototypes/scp-clicker/gfx/fizzing-flask.png new file mode 100644 index 0000000..0a8cd51 Binary files /dev/null and b/prototypes/scp-clicker/gfx/fizzing-flask.png differ diff --git a/prototypes/scp-clicker/gfx/hazard-sign.png b/prototypes/scp-clicker/gfx/hazard-sign.png new file mode 100644 index 0000000..ddd8b5b Binary files /dev/null and b/prototypes/scp-clicker/gfx/hazard-sign.png differ diff --git a/prototypes/scp-clicker/main.moon b/prototypes/scp-clicker/main.moon new file mode 100644 index 0000000..b2fcf26 --- /dev/null +++ b/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" + } + } + } + } +} diff --git a/prototypes/slab.moon b/prototypes/slab.moon new file mode 100644 index 0000000..5f4875f --- /dev/null +++ b/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