Commits

Ivan Vučica committed 0b8cf84

Began work on invitations UI.

Comments (0)

Files changed (4)

 <title>TVZ Pong</title>
 <link rel="stylesheet" href="style.css">
 <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
+<script src="zxmpp/jquery.min.js"></script>
 <script src="pong-network.js"></script>
+<script src="pong-invitations.js"></script>
 <?php
 if(file_exists("defaults.php")) include_once 'defaults.php';
 zxmpp_headers();
 ?>
+<script type="text/javascript">
+zxmppConsole = function(){};
+zxmppConsole.log = function(msg){}
+zxmppConsole.warn = function(msg){}
+zxmppConsole.error = function(msg){}
+</script>
 </head>
 <body>
 
 	<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>

pong-invitations.js

+var pongInvitations = {}
+
+
+function pongInvitation_receiveDemand(fullJid)
+{
+    var invitation = pongInvitations[fullJid];
+    if(!invitation)
+    {
+        invitation = new Object();
+        invitation.fullJid = fullJid;
+        pongInvitations[fullJid] = invitation;
+    }
+    invitation.state = "gotdemand";
+    console.log("--- added, and now refreshing");
+    pongInvitationUI_refreshNotifications();
+}
+function pongInvitation_receiveAccept(fullJid)
+{
+}
+function pongInvitation_receiveDecline(fullJid)
+{
+    
+}
+
+
+//////////// outgoing ///////////
+function pongInvitation_sendDemand(fullJid)
+{
+    
+}
+function pongInvitation_sendAccept(fullJid)
+{
+}
+function pongInvitation_sendDecline(fullJid)
+{
+}
+
+//////////// ui ////////////////
+
+function pongInvitationUI_refreshNotifications()
+{
+    console.error("REFRESHING");
+    for(var fullJid in pongInvitations)
+    {
+        var invitation = pongInvitations[fullJid];
+        
+        if(invitation.state == "gotdemand")
+        {
+            console.log("got demand " + fullJid);
+            var notification = pongInvitationUI_notificationNodeForJid(fullJid);
+            
+            var newStatusText = "You received an invitation from " + fullJid + ".";
+            newStatusText += "<button>Accept</button>";
+            newStatusText += "<button>Decline</button>";
+            notification.innerHTML = newStatusText;
+        }
+    }
+}
+
+function pongInvitationUI_notificationNodeForJid(fullJid)
+{
+    var safeJid = pong_safeJid(fullJid);
+    if($(".invitations > #" + safeJid).length)
+    {
+        return $(".invitations > #" + safeJid)[0];
+    }
+    
+    var newNode = $("<div/>", { id: safeJid, class: "invitation" });
+    newNode.appendTo(".invitations");
+    return newNode;
+}
                     /*
                     zxmppZ_onMessage(sender, fakeMessage);
                      */
-                    alert("Invitation from " + messageStanza.from);
-		    pong_talkTo = messageStanza.from;
+                    //alert("Invitation from " + messageStanza.from);
+                    //pong_talkTo = messageStanza.from;
+                    pongInvitation_receiveDemand(messageStanza.from);
                     break;
 		case "http://tvzpong.vucica.net/protocol/+data":
                     //net_handler(child.firstChild.nodeValue);
 
 }
 
+
+function pong_safeJid(jid)
+{
+    var safejid = jid.replace(/[^a-zA-Z 0-9]+/g,'');
+    return safejid;
+}
+
+/************* basics *************/
 body
 {
 	background-color: black;
 	text-align: center;
     font-size: 36pt;
 }
+
+input.button
+{
+	padding-top: 10px;
+	font-family: 'Luckiest Guy', cursive;
+}
+::-webkit-input-placeholder, :-moz-placeholder, ::placeholder, :input-placeholder
+{
+    /* ... should change color */
+}
+
+
+/************** loginbox ************/
 .loginbox
 {
 	margin-left: auto;
 	font-size: 18pt;
 }
 
-input.button
-{
-	padding-top: 10px;
-	font-family: 'Luckiest Guy', cursive;
-}
-::-webkit-input-placeholder, :-moz-placeholder, ::placeholder, :input-placeholder
-{
-    /* ... should change color */
-}
+/********* roster ****************/
 
 .roster
 {
 {
     color: #777;
     display: none;
-}
+}
+
+
+/************** invitations ***********/
+
+.invitations
+{
+    width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.invitations .invitation
+{
+    background-color: #ffff44;
+    color: black;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+
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.