Improve LOL activity to play against another user using presence

activities/LastOneLoses.activity/css/activity.css

@@ -25,6 +25,40 @@
   background-image: url(../icons/switch-player.svg);
 }
 
+#main-toolbar #network-button {
+  background-image: url(../lib/sugar-web/graphics/icons/actions/zoom-home.svg);
+}
+
+#private-button {
+  background-image: url(../lib/sugar-web/graphics/icons/actions/zoom-home.svg);
+  width: 47px;
+  height: 47px;
+  margin: 4px 2px;
+  color: white;
+  color: transparent;
+  background-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 0;
+  border-radius: 5.5px;
+}
+
+#shared-button {
+  background-image: url(../lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg);
+  width: 47px;
+  height: 47px;
+  margin: 4px 2px;
+  color: white;
+  color: transparent;
+  background-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border: 0;
+  border-radius: 5.5px;
+}
+
 @media screen and (max-width: 620px) {
 	.toolbar {
 		padding-left: 10px;

activities/LastOneLoses.activity/index.html

@@ -32,7 +32,7 @@
       <button class="toolbutton" id="level-easy-button" title="Level easy"></button>
       <button class="toolbutton" id="level-medium-button" title="Level medium"></button>
 	  <button class="toolbutton" id="level-hard-button" title="Level hard"></button>
-
+      <button class="toolbutton" id="network-button" title="Network"></button>
 	  <button class="toolbutton" id="switch-player-button" title="Switch player"></button>
 
       <button class="toolbutton pull-right" id="stop-button" title="Stop"></button>

activities/LastOneLoses.activity/js/activity.js

@@ -1,4 +1,121 @@
 
+define(["sugar-web/activity/activity", "sugar-web/env", "sugar-web/graphics/icon", "webL10n","sugar-web/graphics/presencepalette"], function (activity, env, icon, webL10n, presencepalette) {
+	// Link presence palette
+	var presence = null;
+	var palette = new presencepalette.PresencePalette(document.getElementById("network-button"), undefined);
+	palette.addEventListener('shared', function() {
+		palette.popDown();
+		console.log("Want to share");
+		presence = activity.getPresenceObject(function(error, network) {
+			if (error) {
+				console.log("Sharing error");
+				return;
+			}
+			network.createSharedActivity('org.sugarlabs.LOL', function(groupId) {
+				console.log("Activity shared");
+			});
+			network.onDataReceived(onNetworkDataReceived);
+		});
+	});
+
+	// Handle click on add
+	document.getElementById("add-button").addEventListener('click', function (event) {
+
+		LOL.push(currentenv.user.colorvalue);
+		drawLOL();
+
+		document.getElementById("user").innerHTML = "<h1>"+webL10n.get("Played", {name:currentenv.user.name})+"</h1>";
+
+		if (presence) {
+			presence.sendMessage(presence.getSharedInfo().id, {
+				user: presence.getUserInfo(),
+				content: currentenv.user.colorvalue
+			});
+		}
+	});
+
+	env.getEnvironment(function(err, environment) {
+		currentenv = environment;
+
+		// Set current language to Sugarizer
+		...
+
+		// Load from datatore
+		if (!environment.objectId) {
+			...
+		}
+
+		// Shared instances
+		if (environment.sharedId) {
+			console.log("Shared instance");
+			presence = activity.getPresenceObject(function(error, network) {
+				network.onDataReceived(onNetworkDataReceived);
+			});
+		}
+	});
+
+	var onNetworkDataReceived = function(msg) {
+		if (presence.getUserInfo().networkId === msg.user.networkId) {
+			return;
+		}
+		switch (msg.content.action) {
+			case 'init':
+				LOL = msg.content.data;
+				drawLOL();
+				break;
+			case 'update':
+				LOL.push(msg.content.data);
+				drawLOL();
+				document.getElementById("user").innerHTML = "<h1>"+webL10n.get("Played", {name:msg.user.name})+"</h1>";
+				break;
+		}
+	};
+
+	network.onSharedActivityUserChanged(onNetworkUserChanged);
+
+	var onNetworkUserChanged = function(msg) {
+		console.log("User "+msg.user.name+" "+(msg.move == 1 ? "join": "leave"));
+	};
+
+	presence.sendMessage(presence.getSharedInfo().id, {
+		user: presence.getUserInfo(),
+		content: {
+			action: 'update',
+			data: currentenv.user.colorvalue
+		}
+	});
+
+	var onNetworkUserChanged = function(msg) {
+		if (isHost) {
+			presence.sendMessage(presence.getSharedInfo().id, {
+				user: presence.getUserInfo(),
+				content: {
+					action: 'init',
+					data: LOL
+				}
+			});
+		}
+		console.log("User "+msg.user.name+" "+(msg.move == 1 ? "join": "leave"));
+	};
+
+	var isHost = false;
+	palette.addEventListener('shared', function() {
+		palette.popDown();
+		console.log("Want to share");
+		presence = activity.getPresenceObject(function(error, network) {
+			if (error) {
+				console.log("Sharing error");
+				return;
+			}
+			network.createSharedActivity('org.sugarlabs.LOL', function(groupId) {
+				console.log("Activity shared");
+				isHost = true;
+			});
+			network.onDataReceived(onNetworkDataReceived);
+			network.onSharedActivityUserChanged(onNetworkUserChanged);
+		});
+	});
+
 define(["sugar-web/activity/activity", "sugar-web/graphics/radiobuttonsgroup"], function (activity, radioButtonsGroup) {
 	var app;