From: Jason Woofenden Date: Sun, 23 Oct 2011 08:55:26 +0000 (-0400) Subject: coffeescript, html, less, server X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-cgt.git;a=commitdiff_plain;h=3a8a99fd78775bdd7f71470443858e19b09dc2ed coffeescript, html, less, server --- diff --git a/client.coffee b/client.coffee new file mode 100644 index 0000000..8c1abd0 --- /dev/null +++ b/client.coffee @@ -0,0 +1,14 @@ +$table = null + +add_card = (text, x, y) -> + $table.append $ "

#{text}

" + +init = -> + $table = $ '#table' + add_card "card 1", 100, 20 + add_card "two", 250, 20 + add_card "third card", 290, 50 + +$ -> + init() + diff --git a/index.html b/index.html new file mode 100644 index 0000000..f654f36 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + Card Table + + + + + + +

Card Table

+ + diff --git a/server.coffee b/server.coffee new file mode 100644 index 0000000..fad6347 --- /dev/null +++ b/server.coffee @@ -0,0 +1,48 @@ +listen_port = 8333 +sys = require 'sys' +fs = require 'fs' +http = require 'http' +url = require 'url' +less = require 'less' +coffee = require 'coffee-script' + +css_handler = (args, out, request, url_parts) -> + fs.readFile 'style.less', 'utf8', (err, data) -> + if err + return out.end 'Server failed to read style.less' + less.render data, (err, css) -> + if err + return out.end "Server failed to make css: #{err}" + out.end css + +js_handler = (args, out, request, url_parts) -> + fs.readFile 'client.coffee', 'utf8', (err, data) -> + if err + return out.end 'Server failed to read client.coffee' + out.end coffee.compile data + +html_handler = (args, out, request, url_parts) -> + fs.readFile 'index.html', 'utf8', (err, data) -> + if err + return out.end 'Server failed to read index.html' + out.end data + + +http_server = http.createServer (req, res) -> + url_parts = url.parse req.url, true + if url_parts.query is undefined + url_parts.query = {} + + rel_path = url_parts.pathname.substr 1 + + if rel_path.substr(rel_path.length - 4) is '.css' + res.writeHead 200, 'Content-Type': 'text/css' + return css_handler url_parts.query, res, req, url_parts + else if rel_path.substr rel_path.length - 3 is '.js' + res.writeHead 200, 'Content-Type': 'text/javascript' + return js_handler url_parts.query, res, req, url_parts + + return html_handler url_parts.query, res, req, url_parts + +http_server.listen listen_port, "127.0.0.1" +console.log "Server running at http://127.0.0.1:#{listen_port}/" diff --git a/style.less b/style.less new file mode 100644 index 0000000..91ce8bc --- /dev/null +++ b/style.less @@ -0,0 +1,43 @@ +@card-width: 100px; +@card-height: 140px; + +.shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { + @val: @x @y @blur rgba(0, 0, 0, @alpha); + box-shadow: @val; + -webkit-box-shadow: @val; + -moz-box-shadow: @val; +} + +body { + color: black; + background: #ccc; + font-size: 11px; + margin: 0; + padding: 10px; +} + +h1 { + margin-top: 0; + font: bold 20px 'Verdana'; + color: blue; +} + +#table { + height: 600px; + width: 860px; + background: #eee; + position: relative; + .shadow(2px, 2px, 10px, 0.4); + border: 2px solid #468; +} + +.card { + width: @card-width; + height: @card-height; + padding: 2px; + position: absolute; + background: #fff; + border: 2px solid #fff; + .shadow(1px, 1px, 8px, 0.4); + border-radius: 4px; +}