diff --git a/lib/cube/client/boards.js b/lib/cube/client/boards.js
new file mode 100644
index 00000000..c15d3984
--- /dev/null
+++ 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
index 50415d62..4096bb28 100644
--- 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
new file mode 100644
index 00000000..56696aae
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/lib/cube/client/home.html b/lib/cube/client/home.html
new file mode 100644
index 00000000..574a29d5
--- /dev/null
+++ b/lib/cube/client/home.html
@@ -0,0 +1,27 @@
+
+
+
+ Cube
+
+
+
+
+
+
+ Cube
+
+ Boards
+
+
+ New Board
+
+
+
+
diff --git a/lib/cube/server/visualizer.js b/lib/cube/server/visualizer.js
index 5ad28c5d..1e11a042 100644
--- 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 = {},