Merge branch 'add-board-list' of https://github.com/movableink/cube

ChrisLundquist · Apr 6, 2012 · 05d9e4d · 05d9e4d
2 parents 5d12ab5 + 5842dba
commit 05d9e4d
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 8 deletions.
diff --git a/lib/cube/client/boards.js b/lib/cube/client/boards.js
@@ -0,0 +1,58 @@
+cube.boards = function(url) {
+  var socket,
+      interval;
+
+  var boardList = document.getElementById("boards");
+
+  function message(message) {
+    var data = JSON.parse(message.data);
+
+    switch(data.type) {
+      case "add": {
+        var board = data.board;
+        var id = board._id.toString(36);
+
+        var li = document.createElement("li");
+
+        var selection = d3.select(li)
+          .attr("class", "board-item");
+
+
+        var link = selection.append("a")
+          .text(id)
+          .attr("href", "http://" + document.location.host + "/" + id);
+
+        var count = selection.append("span")
+          .text(" (" + board.pieces.length + ")");
+
+        boardList.appendChild(selection.node());
+      }
+    }
+  }
+
+  function reopen() {
+    if (socket) {
+      socket.close();
+    }
+    socket = new WebSocket(url);
+    socket.onopen = load;
+    socket.onmessage = message;
+    if (!interval) interval = setInterval(ping, 5000);
+  }
+
+  function ping() {
+    if (socket.readyState == 1) {
+      socket.send(JSON.stringify({type: "ping"}));
+    } else if (socket.readyState > 1) {
+      reopen();
+    }
+  }
+
+  function load() {
+    if (socket && socket.readyState == 1) {
+      socket.send(JSON.stringify({type: "load"}));
+    }
+  }
+
+  reopen();
+};
diff --git a/lib/cube/client/header.js b/lib/cube/client/header.js
@@ -10,14 +10,21 @@ cube.header = function(board) {
       .attr("class", "left");
 
   left.append("a")
-      .attr("href", "/" + board.id)
+      .attr("href", "/")
     .append("button")
-      .text("View");
+      .text("Home");
 
-  left.append("a")
-      .attr("href", "/" + board.id + "/edit")
-    .append("button")
-      .text("Edit");
+  if (mode == "edit") {
+    left.append("a")
+        .attr("href", "/" + board.id)
+      .append("button")
+        .text("View");
+  } else {
+    left.append("a")
+        .attr("href", "/" + board.id + "/edit")
+      .append("button")
+        .text("Edit");
+  }
 
   var viewers = selection.append("div")
       .attr("class", "right");

diff --git a/lib/cube/client/home.css b/lib/cube/client/home.css
@@ -0,0 +1,20 @@
+body {
+  position: relative;
+  font-family: "Helvetica Neue";
+  width: 960px;
+  margin: auto;
+  text-rendering: optimizeLegibility;
+}
+
+h1 {
+  margin: 40px 0;
+  font-size: 72pt;
+  font-family: "Yanone Kaffeesatz";
+  position: relative;
+  border-bottom: 1px solid #000;
+}
+
+h2 {
+  font-family: "Yanone Kaffeesatz";
+  position: relative;
+}
diff --git a/lib/cube/client/home.html b/lib/cube/client/home.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cube</title>
+    <script type="text/javascript" src="/d3/d3.js"></script>
+    <script type="text/javascript" src="/cube.js"></script>
+    <style type="text/css">
+      @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+    </style>
+    <link type="text/css" rel="stylesheet" href="/home.css"/>
+  </head>
+  <body>
+    <h1>Cube</h1>
+
+    <h2>Boards</h2>
+    <ol id="boards"></ol>
+
+    <a href="/new">New Board</a>
+
+    <script type="text/javascript">
+
+      var mode = "list",
+          boards = cube.boards("ws://" + location.host + "/boards");
+
+    </script>
+  </body>
+</html>
diff --git a/lib/cube/server/visualizer.js b/lib/cube/server/visualizer.js
@@ -4,10 +4,12 @@ var url = require("url"),
 
 exports.register = function(db, endpoints) {
   endpoints.ws.push(
-    endpoint.exact("/board", viewBoard(db))
+    endpoint.exact("/board", viewBoard(db)),
+    endpoint.exact("/boards", listBoards(db))
   );
   endpoints.http.push(
-    endpoint.exact("/", createBoard(db)),
+    endpoint.exact("/", home(db)),
+    endpoint.exact("/new", createBoard(db)),
     endpoint.re(/^\/[0-9][0-9a-z]{5}(\/edit)?$/, loadBoard(db)),
     endpoint.exact("/cube.js", endpoint.file(
       resolve("start.js"),
@@ -19,6 +21,7 @@ exports.register = function(db, endpoints) {
       resolve("palette.js"),
       resolve("squares.js"),
       resolve("board.js"),
+      resolve("boards.js"),
       resolve("header.js"),
       resolve("end.js")
     )),
@@ -28,6 +31,7 @@ exports.register = function(db, endpoints) {
       resolve("board.css"),
       resolve("piece.css")
     )),
+    endpoint.exact("/home.css", endpoint.file(resolve("home.css"))),
     endpoint.exact("/d3/d3.js", endpoint.file(
       resolve("../../../node_modules/d3/d3.min.js"),
       resolve("semicolon.js"),
@@ -42,6 +46,14 @@ exports.register = function(db, endpoints) {
   );
 };
 
+function home(db) {
+  var file = endpoint.file(resolve("home.html"));
+
+  return function random(request, response) {
+    file(request, response);
+  };
+};
+
 function createBoard(db) {
   var boards, max = parseInt("9zzzzy", 36);
 
@@ -87,6 +99,35 @@ function loadBoard(db) {
   };
 }
 
+function listBoards(db) {
+  var boards;
+
+  db.collection("boards", function(error, collection) {
+    boards = collection;
+  });
+
+  function dispatch(request, callback) {
+    switch (request.type) {
+      case "load": load(request, callback); break;
+      default: callback({type: "error", status: 400}); break;
+    }
+  }
+
+  function load(request, callback) {
+    boards.find({}, function(error, cursor) {
+      if(error) { throw error; }
+
+      cursor.each(function(error, board) {
+        if(board && board.pieces) {
+          callback({type: "add", board: board});
+        }
+      });
+    });
+  }
+
+  return dispatch;
+}
+
 function viewBoard(db) {
   var boards,
       boardsByCallback = {},