diff options
Diffstat (limited to 'modules/poke')
-rw-r--r-- | modules/poke/poke.html | 125 | ||||
-rw-r--r-- | modules/poke/poke.js | 47 |
2 files changed, 172 insertions, 0 deletions
diff --git a/modules/poke/poke.html b/modules/poke/poke.html new file mode 100644 index 0000000..de9ce1f --- /dev/null +++ b/modules/poke/poke.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Poke</title> +<script src="/socket.io/socket.io.js"></script> +<script> +var socket=io("/poke"); +var conns=[]; +var self_info={id:-1,nick:"",status:""}; + +function pokeLink(cOrId){ + var c; + if(typeof cOrId=="number"){ + for(var i=0;i<conns.length;i++)if(conns[i].id==cOrId)break; + if(i==conns.length)return document.createElement("span"); + c=conns[i]; + } else c=cOrId; + var span=document.createElement("span"); + if(c.id==self_info.id)span.classList.add("pokelink_self"); + else span.classList.add("pokelink"); + span.appendChild(document.createTextNode(c.nick)); + if(c.id!=self_info.id){ + span.addEventListener("click",function(ev){socket.emit("poke",c.id);}); + } + return span; +} + +socket.on("reset",function(){ + conns=[]; + var ul=document.getElementById("connectionlist"),l=ul.children; + for(var i=l.length-1;i>=0;i--)ul.removeChild(l[i]); + ul=document.getElementById("notificationlist");l=ul.children; + for(var i=l.length-1;i>=0;i--)ul.removeChild(l[i]); +}); +socket.on("self",function(s_i){ + self_info=s_i; +}); +socket.on("connection add",function(c){ + conns.push(c); + var li=document.createElement("li"); + li.classList.add("connection"); + li.setAttribute("poke_id",c.id); + li.appendChild(pokeLink(c)); + var span=document.createElement("span"); + span.classList.add("connectionstatus"); + span.appendChild(document.createTextNode("")); + li.appendChild(span); + document.getElementById("connectionlist").appendChild(li); +}); +socket.on("connection remove",function(id){ + var i; + for(i=0;i<conns.length;i++)if(conns[i].id==id)break; + if(i==conns.length)return; //? + conns.splice(i,1); + var ul=document.getElementById("connectionlist"),l=ul.children; + for(i=0;i<l.length;i++)if(l[i].getAttribute("poke_id")==id)break; + if(i==l.length)return; //? + ul.removeChild(l[i]); +}); +socket.on("status",function(obj){ + var id=obj.id,st=obj.status; + var i; + for(i=0;i<conns.length;i++)if(conns[i].id==id)break; + if(i==conns.length)return; + conns[i].status=st; + var ul=document.getElementById("connectionlist"),l=ul.children; + for(i=0;i<l.length;i++)if(l[i].getAttribute("poke_id")==id)break; + if(i==l.length)return; //? + l[i].children[1].firstChild.nodeValue=st?"("+st+")":""; +}); +socket.on("poke",function(id){ + var notiflist=document.getElementById("notificationlist"); + var li=document.createElement("li"); + li.classList.add("notification"); + var span=document.createElement("span"); + span.appendChild(document.createTextNode("Poke from ")); + span.appendChild(pokeLink(id)); + li.appendChild(span); + notiflist.appendChild(li); + setTimeout(function(){ + notiflist.removeChild(li); + },3000); +}); + +function changeStatus(st){ + socket.emit("status",st); +} +</script> +<style> +body{ + font-family:Monaco,Monospace; +} +span.pokelink{ + color:#44f; + cursor:pointer; + transition:color .3s; +} +span.pokelink:hover{ + color:#77f; +} +ul#notificationlist{ + list-style-type:none; +} +span.connectionstatus{ + font-size:small; + margin-left:10px; + font-style:italic; +} +</style> +</head> +<body> +<table style="width:100%"><tbody><tr> + <td style="vertical-align:top"> + <h2>Users</h2> + <ul id="connectionlist"></ul> + </td> + <td style="vertical-align:top;text-align:right"> + <h2>Notifications</h2> + <ul id="notificationlist"></ul> + </td> +</tr></tbody></table> +<input type="text" placeholder="change status..." size="30" style="margin-top:20px" onkeypress="if(event.keyCode!=13)return true;changeStatus(this.value);this.value=''"> +</body> +</html>
\ No newline at end of file diff --git a/modules/poke/poke.js b/modules/poke/poke.js new file mode 100644 index 0000000..af0285d --- /dev/null +++ b/modules/poke/poke.js @@ -0,0 +1,47 @@ +var cmn=require("../$common.js"), + fs=require("fs"), + Naampje=require("naampje").name; + +var conns=[]; + +var uniqid=(function(){ + var id=0; + return function(){return id++;}; +})(); + +module.exports=function(app,io,moddir){ + var ioNsp=io.of("/poke"); + app.get("/poke",function(req,res){ + res.sendFile(moddir+"/poke.html"); + }); + ioNsp.on("connection",function(socket){ + var id=uniqid(); + var nick=Naampje(); + var status=""; + socket.emit("reset",null); + socket.emit("self",{id:id,nick:nick}); + conns.forEach(function(c){ + socket.emit("connection add",{id:c.id,nick:c.nick}); + socket.emit("status",{id:c.id,status:c.status}); + }); + ioNsp.emit("connection add",{id:id,nick:nick}); + conns.push({id:id,nick:nick,status:"",socket:socket}); + socket.on("disconnect",function(){ + for(var i=0;i<conns.length;i++)if(conns[i].id==id)break; + if(i!=conns.length)conns.splice(i,1); + ioNsp.emit("connection remove",id); + }); + socket.on("status",function(newst){ + status=newst.toString(); + for(var i=0;i<conns.length;i++)if(conns[i].id==id)break; + if(i==conns.length)return; //? + conns[i].status=status; + ioNsp.emit("status",{id:id,status:status}); + }); + socket.on("poke",function(target){ + for(var i=0;i<conns.length;i++)if(conns[i].id==target)break; + if(i==conns.length)return; //hah. + conns[i].socket.emit("poke",id); + }); + }); +}; |