JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
coffeescript, html, less, server
authorJason Woofenden <jason@jasonwoof.com>
Sun, 23 Oct 2011 08:55:26 +0000 (04:55 -0400)
committerJason Woofenden <jason@jasonwoof.com>
Sun, 23 Oct 2011 08:55:26 +0000 (04:55 -0400)
client.coffee [new file with mode: 0644]
index.html [new file with mode: 0644]
server.coffee [new file with mode: 0644]
style.less [new file with mode: 0644]

diff --git a/client.coffee b/client.coffee
new file mode 100644 (file)
index 0000000..8c1abd0
--- /dev/null
@@ -0,0 +1,14 @@
+$table = null
+
+add_card = (text, x, y) ->
+       $table.append $ "<div class=\"card\" style=\"left: #{x}px; top: #{y}px\">#{text}</div>"
+       
+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 (file)
index 0000000..f654f36
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+       <title>Card Table</title>
+       <meta charset="utf-8" />
+       <link rel="stylesheet" href="style.css" />
+       <script src="http://127.0.0.1/javascript/jquery/jquery.min.js"></script>
+       <script src="client.js"></script>
+</head>
+<body>
+       <h1>Card Table</h1>
+       <div id="table"></div>
+</body>
+</html>
diff --git a/server.coffee b/server.coffee
new file mode 100644 (file)
index 0000000..fad6347
--- /dev/null
@@ -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 (file)
index 0000000..91ce8bc
--- /dev/null
@@ -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;
+}