Ivan Vučica avatar 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.

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>
 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)
 {

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)
 {
     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)

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
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.