Actual UI.
This commit is contained in:
parent
77cd357aaa
commit
2203795902
26
index.html
26
index.html
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
|
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||||||
|
<link href="style.css" rel="stylesheet">
|
||||||
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> -->
|
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> -->
|
||||||
<script src="jquery-2.0.3.min.js"></script>
|
<script src="jquery-2.0.3.min.js"></script>
|
||||||
|
|
||||||
|
@ -17,21 +18,12 @@
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<h1>JS Marketplace</h1>
|
<h1>JS Marketplace</h1>
|
||||||
<p>
|
|
||||||
Hello, world.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
<form class="form-horizontal" name="chat_form">
|
<form class="form-horizontal" name="nym_form">
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<div class="control-group">
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" id="chat_input" name="chat_input" value="">
|
|
||||||
<button id="send_chat">Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label class="control-label" for="nym">Nym:</label>
|
<label class="control-label" for="nym">Nym:</label>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
|
@ -46,6 +38,20 @@
|
||||||
<div id="chat_output" class="span12">
|
<div id="chat_output" class="span12">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<form class="form-horizontal" name="chat_form">
|
||||||
|
<fieldset>
|
||||||
|
<div class="control-group">
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="chat_input" name="chat_input" value="">
|
||||||
|
<button id="send_chat">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
71
index.js
71
index.js
|
@ -1,4 +1,4 @@
|
||||||
Spy///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
// Wire protocol representation of events and actions
|
// Wire protocol representation of events and actions
|
||||||
|
|
||||||
function encodeEvent(e) {
|
function encodeEvent(e) {
|
||||||
|
@ -114,7 +114,7 @@ WebSocketConnection.prototype.aggregateRoutes = function () {
|
||||||
r.metaLevel,
|
r.metaLevel,
|
||||||
r.level));
|
r.level));
|
||||||
}
|
}
|
||||||
console.log("WebSocketConnection", this.label, rs);
|
// console.log("WebSocketConnection", this.label, rs);
|
||||||
return rs;
|
return rs;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -134,7 +134,7 @@ WebSocketConnection.prototype.sendLocalRoutes = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
WebSocketConnection.prototype.handleEvent = function (e) {
|
WebSocketConnection.prototype.handleEvent = function (e) {
|
||||||
console.log("WebSocketConnection.handleEvent", e);
|
// console.log("WebSocketConnection.handleEvent", e);
|
||||||
switch (e.type) {
|
switch (e.type) {
|
||||||
case "routes":
|
case "routes":
|
||||||
this.localRoutes = [];
|
this.localRoutes = [];
|
||||||
|
@ -182,20 +182,34 @@ WebSocketConnection.prototype.reconnect = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
WebSocketConnection.prototype.onopen = function (e) {
|
WebSocketConnection.prototype.onopen = function (e) {
|
||||||
console.log("onopen", e);
|
// console.log("onopen", e);
|
||||||
this.reconnectDelay = DEFAULT_RECONNECT_DELAY;
|
this.reconnectDelay = DEFAULT_RECONNECT_DELAY;
|
||||||
this.sendLocalRoutes();
|
this.sendLocalRoutes();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function subtractRoutes(rs1, rs2) {
|
||||||
|
var toRemove = ({});
|
||||||
|
for (var i = 0; i < rs2.length; i++) {
|
||||||
|
toRemove[rs2[i].toJSON()] = true;
|
||||||
|
}
|
||||||
|
var result = [];
|
||||||
|
for (var i = 0; i < rs1.length; i++) {
|
||||||
|
if (!(rs1[i].toJSON() in toRemove)) {
|
||||||
|
result.push(rs1[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
WebSocketConnection.prototype.onmessage = function (wse) {
|
WebSocketConnection.prototype.onmessage = function (wse) {
|
||||||
console.log("onmessage", wse);
|
// console.log("onmessage", wse);
|
||||||
var j = JSON.parse(wse.data);
|
var j = JSON.parse(wse.data);
|
||||||
var e = decodeAction(j);
|
var e = decodeAction(j);
|
||||||
switch (e.type) {
|
switch (e.type) {
|
||||||
case "routes":
|
case "routes":
|
||||||
if (this.prevPeerRoutesMessage !== wse.data) {
|
if (this.prevPeerRoutesMessage !== wse.data) {
|
||||||
this.prevPeerRoutesMessage = wse.data;
|
this.prevPeerRoutesMessage = wse.data;
|
||||||
this.peerRoutes = e.routes;
|
this.peerRoutes = subtractRoutes(e.routes, this.localRoutes);
|
||||||
World.updateRoutes(this.aggregateRoutes());
|
World.updateRoutes(this.aggregateRoutes());
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
@ -209,7 +223,7 @@ WebSocketConnection.prototype.onmessage = function (wse) {
|
||||||
|
|
||||||
WebSocketConnection.prototype.onclose = function (e) {
|
WebSocketConnection.prototype.onclose = function (e) {
|
||||||
var self = this;
|
var self = this;
|
||||||
console.log("onclose", e);
|
// console.log("onclose", e);
|
||||||
if (this.shouldReconnect) {
|
if (this.shouldReconnect) {
|
||||||
console.log("reconnecting to " + this.wsurl + " in " + this.reconnectDelay + "ms");
|
console.log("reconnecting to " + this.wsurl + " in " + this.reconnectDelay + "ms");
|
||||||
setTimeout(World.wrap(function () { self.reconnect(); }), this.reconnectDelay);
|
setTimeout(World.wrap(function () { self.reconnect(); }), this.reconnectDelay);
|
||||||
|
@ -224,12 +238,38 @@ WebSocketConnection.prototype.onclose = function (e) {
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
// Main
|
// Main
|
||||||
|
|
||||||
|
function updateNymList(rs) {
|
||||||
|
var nyms = [];
|
||||||
|
for (var i = 0; i < rs.length; i++) {
|
||||||
|
var p = rs[i].pattern;
|
||||||
|
if (p[0] === "broker"
|
||||||
|
&& p[1] === 0
|
||||||
|
&& p[2][1] === "says")
|
||||||
|
{
|
||||||
|
nyms.push(p[2][0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(nyms);
|
||||||
|
}
|
||||||
|
|
||||||
|
function outputUtterance(who, what) {
|
||||||
|
var stamp = $("<span/>").text((new Date()).toGMTString()).addClass("timestamp");
|
||||||
|
var nymLabel = $("<span/>").text(who).addClass("nym");
|
||||||
|
var utterance = $("<span/>").text(what).addClass("utterance");
|
||||||
|
var o = $("#chat_output");
|
||||||
|
o.append($("<div/>")
|
||||||
|
.append([stamp, nymLabel, utterance])
|
||||||
|
.addClass("utterance"));
|
||||||
|
o[0].scrollTop = o[0].scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$("#chat_form").submit(function (e) { e.preventDefault(); return false; });
|
$("#chat_form").submit(function (e) { e.preventDefault(); return false; });
|
||||||
|
$("#nym_form").submit(function (e) { e.preventDefault(); return false; });
|
||||||
|
|
||||||
var g = new Ground(function () {
|
var g = new Ground(function () {
|
||||||
console.log('starting ground boot');
|
console.log('starting ground boot');
|
||||||
World.spawn(new Spy());
|
// World.spawn(new Spy());
|
||||||
spawnJQueryDriver();
|
spawnJQueryDriver();
|
||||||
World.spawn(new WebSocketConnection("broker", "ws://localhost:8000/", true));
|
World.spawn(new WebSocketConnection("broker", "ws://localhost:8000/", true));
|
||||||
World.spawn({
|
World.spawn({
|
||||||
|
@ -247,7 +287,11 @@ $(document).ready(function () {
|
||||||
sub(["broker", 0, [__, "says", __]], 0, 1)];
|
sub(["broker", 0, [__, "says", __]], 0, 1)];
|
||||||
},
|
},
|
||||||
handleEvent: function (e) {
|
handleEvent: function (e) {
|
||||||
if (e.type === "message") {
|
switch (e.type) {
|
||||||
|
case "routes":
|
||||||
|
updateNymList(e.routes);
|
||||||
|
break;
|
||||||
|
case "message":
|
||||||
switch (e.message[0]) {
|
switch (e.message[0]) {
|
||||||
case "jQuery":
|
case "jQuery":
|
||||||
switch (e.message[1]) {
|
switch (e.message[1]) {
|
||||||
|
@ -255,7 +299,9 @@ $(document).ready(function () {
|
||||||
var inp = $("#chat_input");
|
var inp = $("#chat_input");
|
||||||
var utterance = inp.val();
|
var utterance = inp.val();
|
||||||
inp.val("");
|
inp.val("");
|
||||||
World.send(["broker", 0, [this.nym(), "says", utterance]]);
|
if (utterance) {
|
||||||
|
World.send(["broker", 0, [this.nym(), "says", utterance]]);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
case "#nym":
|
case "#nym":
|
||||||
World.updateRoutes(this.subscriptions());
|
World.updateRoutes(this.subscriptions());
|
||||||
|
@ -266,11 +312,14 @@ $(document).ready(function () {
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "broker":
|
case "broker":
|
||||||
console.log("Broker message:", e.message[2]);
|
if (e.message[2][1] === "says") {
|
||||||
|
outputUtterance(e.message[2][0], e.message[2][2]);
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
div.utterance span.timestamp {
|
||||||
|
color: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.utterance span.timestamp:after {
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
div.utterance span.nym {
|
||||||
|
color: #00c000;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.utterance span.nym:after {
|
||||||
|
content: ": ";
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat_output {
|
||||||
|
height: 15em;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat_input {
|
||||||
|
width: 80%;
|
||||||
|
}
|
Loading…
Reference in New Issue