diff --git a/.gitignore b/.gitignore index 98e6ef6..48eb927 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ *.db +.sass-cache diff --git a/main.rb b/main.rb index 6d1f400..7dfc58e 100644 --- a/main.rb +++ b/main.rb @@ -1,12 +1,29 @@ -%w[sinatra dm-core dm-migrations slim sass].each{ |lib| require lib } +%w[sinatra dm-core dm-migrations haml sass].each{ |lib| require lib } DataMapper.setup(:default, File.join("sqlite3://",settings.root,"development.db")) class Robot include DataMapper::Resource property :id, Serial - property :top, Integer, default: proc { |m,p| 1+rand(6) } - property :mid, Integer, default: proc { |m,p| 1+rand(4) } - property :bot, Integer, default: proc { |m,p| 1+rand(5) } + property :top, Integer, default: proc { |m,p| 1+rand(6) } + property :middle, Integer, default: proc { |m,p| 1+rand(4) } + property :bottom, Integer, default: proc { |m,p| 1+rand(5) } end DataMapper.finalize + +get ('/styles.css'){ scss :styles } + +get '/' do + @robots = Robot.all + haml :index +end + +post '/build/robot' do + robot = Robot.create + redirect to('/') +end + +delete '/delete/robot/:id' do + Robot.get(params[:id]).destroy + redirect to('/') +end diff --git a/views/index.haml b/views/index.haml new file mode 100644 index 0000000..a77f80f --- /dev/null +++ b/views/index.haml @@ -0,0 +1,9 @@ +%h1 Robot Factory +%form.build{ action:"/build/robot", method:"POST" } + %input.button{ type:"submit", value:"Build A Robot!" } +-if @robots.any? + %ul#robots + - @robots.each do |robot| + = render(:haml, :robot, locals: { robot: robot }) +-else + %h2 You Need To Build Some Robots! diff --git a/views/layout.haml b/views/layout.haml new file mode 100644 index 0000000..083300d --- /dev/null +++ b/views/layout.haml @@ -0,0 +1,15 @@ +!!! 5 +%html + %head + %meta{ charset: "utf-8" } + %title Robot Factory + %link{ rel: "shortcut icon", href: "/fav.ico" } + %link{ rel: "stylesheet", + href: "http://fonts.googleapis.com/css?family=Ubuntu|Megrim" } + %link{ rel: "stylesheet", href: "/styles.css" } + /[if lt IE 9] + %script{ src: "http://html5shiv.googlecode.com/svn/trunk/html5.js" } + %body + = yield + #footer + %p Building Quality Robots since 2011 diff --git a/views/robot.haml b/views/robot.haml new file mode 100644 index 0000000..8a443f0 --- /dev/null +++ b/views/robot.haml @@ -0,0 +1,7 @@ +%li.robot + %img{ src:"https://s3.amazonaws.com/daz4126/top#{robot.top}.png" } + %img{ src:"https://s3.amazonaws.com/daz4126/middle#{robot.middle}.png" } + %img{ src:"https://s3.amazonaws.com/daz4126/bottom#{robot.bottom}.png" } + %form.destroy{ action:"/delete/robot/#{robot.id}", method:"POST" } + %input{ type:"hidden", name:"_method", value:"DELETE" } + %input{ type:"submit", value:"×" } diff --git a/views/styles.scss b/views/styles.scss new file mode 100644 index 0000000..fb4f570 --- /dev/null +++ b/views/styles.scss @@ -0,0 +1,75 @@ +html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote, pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt, dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article, aside, canvas, details,figcaption,figure,footer,header,hgroup,menu,nav,section, summary,time,mark,audio,video { + margin:0; + padding:0; + border:0; + outline:0; + font-size:100%; + vertical-align: + baseline; + background:transparent; + line-height:1; +} +body{font-family:ubuntu,sans;} +#footer { + display:block; + margin-top:20px; + border-top:3px solid #4b947d; + padding:10px; +} +h1 { + color:#95524C; + margin:5px 40px; + font-size:72px; + font-weight:bold; + font-family:Megrim,sans; +} +.button { + background:#4b7194; + color:#fff; + text-transform:uppercase; + border-radius:12px; + border:none; + font-weight:bold; + font-size:16px; + padding: 6px 12px; + margin-left:40px; + cursor:pointer; + &:hover{background:#54A0E7;} +} +#robots { + list-style:none; + overflow:hidden; + margin:20px; +} +.robot { + float:left; + width:100px; + padding:10px 0; + position:relative; + form { + display:none; + position:absolute; + top:0; + right:0; + } + &:hover form { + display:block; + } + form input { + background:rgba(#000,0.7); + padding:0 4px; + color:white; + cursor:pointer; + font-size:32px; + font-weight:bold; + text-decoration:none; + border-radius:16px; + line-height:0.8; + border:none; + } + img { + display:block; + padding:0 10px; + } +} +