init wip
This commit is contained in:
53
prototypes/examples/app-bar.moon
Normal file
53
prototypes/examples/app-bar.moon
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
14
prototypes/examples/badge.moon
Normal file
14
prototypes/examples/badge.moon
Normal 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}
|
||||||
|
}
|
||||||
|
}
|
20
prototypes/examples/bottom-navigation.moon
Normal file
20
prototypes/examples/bottom-navigation.moon
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
23
prototypes/examples/buttons.moon
Normal file
23
prototypes/examples/buttons.moon
Normal 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
|
||||||
|
}
|
20
prototypes/examples/chip.moon
Normal file
20
prototypes/examples/chip.moon
Normal 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
|
||||||
|
}
|
||||||
|
}
|
10
prototypes/examples/divider.moon
Normal file
10
prototypes/examples/divider.moon
Normal 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
|
||||||
|
}
|
23
prototypes/examples/todo.txt
Normal file
23
prototypes/examples/todo.txt
Normal 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.
|
BIN
prototypes/scp-clicker/gfx/banknote.png
Normal file
BIN
prototypes/scp-clicker/gfx/banknote.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.1 KiB |
BIN
prototypes/scp-clicker/gfx/fizzing-flask.png
Normal file
BIN
prototypes/scp-clicker/gfx/fizzing-flask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
prototypes/scp-clicker/gfx/hazard-sign.png
Normal file
BIN
prototypes/scp-clicker/gfx/hazard-sign.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
104
prototypes/scp-clicker/main.moon
Normal file
104
prototypes/scp-clicker/main.moon
Normal 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
59
prototypes/slab.moon
Normal 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
|
Reference in New Issue
Block a user