Commits

Ivan Vučica  committed 0f59c38

Added notifications. Displaying the disconnect error via notification. Reduced traffic by not sending an update all the time, only when the paddle moved after previous update; otherwise delays update until paddle moves.

  • Participants
  • Parent commits 19fd2dd

Comments (0)

Files changed (6)

 <script src="zxmpp/jquery.min.js"></script>
 <script src="pong-network.js"></script>
 <script src="pong-invitations.js"></script>
+<script src="pong-notifications.js"></script>
 <script src="pong-game.js"></script>
 <?php
 if(file_exists("defaults.php")) include_once 'defaults.php';
 
 <h1>TVZ Pong</h1>
 
+<div class="invitations" id="invitations">
+</div>
+<div class="notifications" id="notifications">
+</div>
+
 <div class="loginbox" id="loginbox">
 	<label>Server: <input id="pongServer" class="server" value="<?=$pong_server?>"></label>
 	<label>Username: <input id="pongUsername" class="username" placeholder="marcus@gmail.com" value="<?=$pong_user?>"></label>
 	<input type="button" value="Log in" class="button" onclick="pongLogin(document.getElementById('pongServer').value, document.getElementById('pongUsername').value, document.getElementById('pongPassword').value);">
 </div>
 
-<div class="invitations" id="invitations">
-</div>
 
 <div class="roster" id="roster">
 </div>

File pong-game.js

 var pongGame_talkTo = false;
 
+var pongGame_previouslySentPaddle1X = 0;
+var pongGame_needToSendOnMove = false;
+
 function pongGame_start(fullJid)
 {
     pongGame_talkTo = fullJid;
     pongGame_sendUpdate();
 }
 
+
 function pongGame_sendUpdate()
 {
+    
+    var paddle1X = $('#paddle1')[0].style.left;
+    paddle1X = paddle1X.substr(0, paddle1X.length - 2); // remove 'px'
+    
+    if(pongGame_previouslySentPaddle1X == paddle1X)
+    {
+        // no update needed right now
+        pongGame_needToSendOnMove = true;
+        return; 
+    }
+    /////////////////////
+    pongGame_previouslySentPaddle1X = paddle1X;
+    pongGame_needToSendOnMove = false;
     var packet = new zxmpp.packet(zxmpp);
     
     var invitationNode = packet.xml.createElementNS("http://tvzpong.vucica.net/protocol/", "update");
     var iq = new zxmpp.stanzaIq(zxmpp);
     iq.appendIqToPacket(packet, /*id base name*/"pongupdate", "set", pongGame_talkTo);
     
-    var content = $('#paddle1')[0].style.left;
-    content = content.substr(0, content.length - 2); // remove 'px'
-    var contentnode = packet.xml.createTextNode(content);
+    var contentnode = packet.xml.createTextNode(paddle1X);
     invitationNode.appendChild(contentnode);
     
     var replyHandler = function pongInvitation_sendDemandReplyHandler(zxmpp, original, response)
     
     $('#paddle1')[0].style.left = newX + 'px';
     //$('#paddle2')[0].style.left = newX + 'px';
+    
+    if(pongGame_needToSendOnMove)
+    {
+        pongGame_sendUpdate();
+    }
 }
 function pongGame_positionOpponentPaddle(pos)
 {

File pong-invitations.js

 }
 function pongInvitationUI_removeNotificationForJid(fullJid)
 {
-    pongInvitationUI_notificationNodesForJid(fullJid).slideUp().remove();
+    pongInvitationUI_notificationNodesForJid(fullJid).slideUp();
+    setTimeout(function(){
+                pongInvitationUI_notificationNodesForJid(fullJid).remove();
+                delete pongInvitations[fullJid];
+               }, 3000);
 }
 function pongInvitationUI_notificationNodesForJid(fullJid)
 {

File pong-network.js

     document.getElementById("roster").innerHTML = "<div style='text-align: center;'><img src='spinner.gif'><br>Logging in...</div>";
     //$('#roster').hide().slideDown();
     //document.getElementById("loginbox").style.display = 'none';
-    $('#loginbox').slideUp().hide();
+    $('#loginbox').slideUp();
 }
 
 ///////////////////////////////
 
 function pongZXMPP_onConnectionTerminate(sender, code, humanreadable)
 {
-    alert("Disconnected.\n\Reason: " + humanreadable + "\n\nCode: " + code);
+    $('#loginbox').slideDown();
+    $('#roster').slideUp().hide();
+    $('#playfield').slideUp().hide();
+    pongNotification_show("Disconnected.\n\nReason: " + humanreadable + "\n\nCode: " + code);
 }
 
 function pongZXMPP_onPresenceUpdate(sender, presence)

File pong-notifications.js

+var pongNotifications = {}
+var pongNotification_maxId = 0;
+
+function pongNotification_show(txt)
+{
+    var id = pongNotification_maxId;
+    pongNotification_maxId++;
+    
+    
+    pongNotifications[id] = txt;
+    pongNotificationUI_refreshNotifications();
+    
+    setTimeout(function(){
+                pongNotificationUI_removeNotificationForId(id);
+               }, 3000);
+}
+
+
+function pongNotificationUI_refreshNotifications()
+{
+    for(var id in pongNotifications)
+    {        
+        var notification = pongNotificationUI_notificationNodeForId(id);
+        
+        notification.innerHTML = pongNotifications[id];
+        
+    }
+}
+function pongNotificationUI_removeNotificationForId(id)
+{
+    pongNotificationUI_notificationNodesForId(id).slideUp();
+    setTimeout(function(){
+                delete pongNotifications[id];
+                pongNotificationUI_notificationNodesForId(id).remove();
+               }, 3000);
+}
+function pongNotificationUI_notificationNodesForId(id)
+{
+    if($(".notifications > #notif" + id).length)
+    {
+        return $(".notifications > #notif" + id);
+    }
+    
+    var newNode = $("<div/>", { id: "notif" + id, class: "notification" });
+    newNode.appendTo(".notifications");
+    newNode.hide().slideDown();
+    return newNode;
+}
+function pongNotificationUI_notificationNodeForId(id)
+{
+    return pongNotificationUI_notificationNodesForId(id)[0];
+}
     padding-bottom: 5px;
 }
 
+/************** notifications ***********/
+
+.notifications
+{
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.notifications .notification
+{
+    background-color: #ffff44;
+    color: black;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
 /*********** playfield ************/
 
 .playfield