online users

apps/web/priv/static/doc/svg.js

@@ -37,7 +37,6 @@ function handle_web_socket(body) {
             break;
         case 'roster_group':
             var list     = dec(body).value[0][1];
-            console.log(list);
             for (var i=0;i<list.length;i++) {
                 var item       = list[i];
                 var id       = item.value[0][0].value;
@@ -51,6 +50,20 @@ function handle_web_socket(body) {
             mouseWheelHandler({'detail':5,'wheelDelta':5});
             onlineHoverOut();
             break;
+        case 'online':
+            var id = dec(body).value[0][1].value;
+            var name = dec(body).value[0][2].value;
+            var surname = dec(body).value[0][3].value;
+            removeOnlineUser(id);
+            addOnlineUser(id,name+" "+surname,"insertTop");
+            break;
+        case 'offline':
+            var id = dec(body).value[0][1].value;
+            var name = dec(body).value[0][2].value;
+            var surname = dec(body).value[0][3].value;
+            removeOnlineUser(id);
+            addOnlineUser(id,name+" "+surname,"appendChild");
+            break;
         case 'online_number':
             var number = dec(body).value[0][1];
             document.getElementById("723").textContent = number.toString(); 
@@ -476,25 +489,47 @@ function chatEditor(evt) {
     mouseWheelHandler({'detail':scroll,'wheelDelta':scroll});
 }
 
+function shiftTranslate(name,shiftValue) {
+    var rect = document.getElementById(name);
+    if (null == rect) return;
+    var remove = rect.parentNode.parentNode;
+    var children = document.getElementById("Online-List").childNodes;
+    var removeIndex = -1;
+    for(var i = 0; i<children.length; ++i) { 
+        var child = children[i];
+        if (child == remove) removeIndex = i;
+        if (removeIndex != -1 && i>=removeIndex)
+            child.setAttribute("transform","translate(0,"+(parseFloat(i)+parseFloat(shiftValue))
+                *remove.getBBox().height+")");
+    }
+    return rect.parentNode.parentNode;
+}
+
+function removeOnlineUser(name) {
+    shiftTranslate(name,-2).remove();
+}
+
 function addOnlineUser(name,full_name,insertMode) {
     var listElement = document.getElementById("Online-List");
-    var y = listElement.getBBox().height;
-//    console.log(y);
+    var color = insertMode == "insertTop" ? "red" : "green";
+    var y = (insertMode == "insertTop") ? "0" : listElement.getBBox().height;
     var html = '<g xmlns="http://www.w3.org/2000/svg" height="60" transform="translate(0, '+y+')">' +
             '<g xmlns:data="'+name+'"fill="#DBEBED" onmouseover="onlineHoverColor(evt);" onmouseout="onlineHoverOutColor(evt);">' +
-            '    <rect xmlns:data="'+name+'"fill="#DBEBED" id="'+name+'" x="10" y="0" width="196" height="48" onmouseover="onlineHoverColor(evt);" onmouseout="onlineHoverOutColor(evt);"></rect></g>' +
+            '    <rect xmlns:data="'+name+'" fill="#DBEBED" id="'+name+'" x="10" y="0" width="196" height="48" onmouseover="onlineHoverColor(evt);" onmouseout="onlineHoverOutColor(evt);"></rect></g>' +
             '<text xmlns:data="'+name+'" onmouseover="onlineHoverColor(evt);" onmouseout="onlineHoverOutColor(evt);" '+
             'font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18"'+
             ' fill="#3B5998">' + 
-                '<tspan xmlns:data="'+name+'" font-weight="normal" fill="green" x="19" y="22">'+full_name+'</tspan>' + 
+                '<tspan xmlns:data="'+name+'" font-weight="normal" fill="'+color+'" x="19" y="22">'+full_name+'</tspan>' + 
                 '<tspan xmlns:data="'+name+'" font-size="14" x="19" y="40">Score: 1043 Pos: 13</tspan></text>'+
             '<rect onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);"'+
             '  x="10" y="48" width="196" height="8"></rect></g>';
     var element = svg(html);
-//    element.setAttribute("mouseover","onlineHoverColor(evt);");
-//    element.setAttribute("mouseout","onlineHoverOutColor(evt);");
-//    console.log(element);
-    listElement.appendChild(element);
+    if (insertMode == "insertTop") {
+        var firstElement = listElement.firstElementChild;
+        var first = firstElement.firstElementChild.getAttribute("xmlns:data");
+        shiftTranslate(first,0);
+        listElement.insertBefore(element,firstElement);
+    } else listElement.appendChild(element);
 }
 
 chatMessage("1","Maxim2","Joe:\nHello There!".encodeHTML());

apps/web/src/okey.erl

@@ -51,7 +51,6 @@ user() ->
                         _ -> new_user() end;
                 _ -> new_user() end,
             wf:user(X),
-            send_roster(),
             X;
         U-> U end.
 
@@ -135,7 +134,12 @@ body() ->
     #button   { id = pause,      body = "Pause",       postback = pause},
     #button   { id = info,       body = "PlayerInfo",  postback = player_info} ].
 
-event(terminate) -> wf:info(?MODULE,"terminate");
+already_online(Pid) -> [ Pid ! {user_online,User} || {_,_,{_,User}} <- game:online() ].
+
+event(terminate) -> 
+    User = user(),
+    wf:send(broadcast,{user_offline,User}),
+    wf:info(?MODULE,"terminate");
 
 event(init) -> 
     js_session:ensure_sid([],?CTX),
@@ -147,7 +151,7 @@ event(init) ->
     wf:update(games_ids,#dropdown{id = games_ids, value = ?GAMEID, options = 
       [#option{label = wf:to_list(GameId), value = wf:to_list(GameId)} || GameId <- GamesIds]}),
 
-    send_roster(),
+    wf:info(?MODULE,"Istaka on Started:"),
     event(attach),
     event(join);
 
@@ -173,6 +177,10 @@ event(attach) ->
     {ok,GamePid} = game_session:start_link(self()),
     wf:session(<<"game_pid">>,GamePid),
     User = user(),
+    gproc:set_value({p,l,broadcast},{wf:peer(?REQ),User}),
+    wf:send(broadcast,{user_online,User}),
+    wf:info(?MODULE,"Games Online: ~p",[game:online()]),
+    send_roster(),
     put(okey_im, User#user.id),
     wf:wire(wf:f("document.user = '~s';",[User#user.id])),
     wf:info(?MODULE,"Session User: ~p",[User]),
@@ -180,6 +188,8 @@ event(attach) ->
     put(okey_game_id, GameId),
     Token = auth_server:generate_token(GameId,User),
     wf:wire(protocol:attach(wf:f("'~s'",[Token]))),
+    Pid = self(),
+    spawn(fun() -> already_online(Pid) end),
     ok;
 
 event(discard) -> 
@@ -254,7 +264,6 @@ event({server, {game_event, _, okey_game_started, Args}}) ->
         _ -> ok end,
     put(game_okey_tiles, TilesList),
     put(game_okey_pause, resume),
-    wf:info(?MODULE,"Istaka on Started:"),
     redraw_istaka(TilesList);
 
 event({server, {game_event, _, okey_game_player_state, Args}}) ->
@@ -406,6 +415,8 @@ event({server,{game_event, _, okey_next_turn, Args}}) ->
 event({register,User}) -> wf:info(?MODULE,"Register: ~p",[User]), kvs:add(User), wf:user(User);
 event({login,User}) -> wf:info(?MODULE,"Login: ~p",[User]), kvs:put(User), wf:user(User), event(init);
 event({counter,Res}) -> self() ! {server,{online_number,Res}};
+event({user_online,User}) -> wf:info(?MODULE,"User ~p goes Online",[User#user.id]), self() ! {server,{online,User#user.id,User#user.names,User#user.surnames}};
+event({user_offline,User}) -> self() ! {server,{offline,User#user.id,User#user.names,User#user.surnames}};
 event(_Event) -> ok. % wf:info(?MODULE,"Event: ~p", [_Event]).
 
 api_event(X,Y,Z) -> avz:api_event(X,Y,Z).