Updating emote app with sit and love emotes. Renaming emotes and adjusting HTML and emote behaviors

scripts/system/emote.js

@@ -16,9 +16,11 @@
 (function() { // BEGIN LOCAL_SCOPE
 
 
-var EMOTE_ANIMATIONS = ['Crying', 'Surprised', 'Dancing', 'Cheering', 'Waving', 'Fall', 'Pointing', 'Clapping'];
+var EMOTE_ANIMATIONS = ['Cry', 'Surprised', 'Dance', 'Cheer', 'Wave', 'Fall', 'Point', 'Clap', 'Sit1', 'Sit2', 'Sit3', 'Love'];
 var ANIMATIONS = Array();
 
+var eventMappingName = "io.highfidelity.away"; // restoreAnimation on hand controller button events, too.
+var eventMapping = Controller.newMapping(eventMappingName);
 
 EMOTE_ANIMATIONS.forEach(function (name) {
     var animationURL = Script.resolvePath("assets/animations/" + name + ".fbx");
@@ -31,7 +33,7 @@ EMOTE_ANIMATIONS.forEach(function (name) {
 var EMOTE_APP_BASE = "html/EmoteApp.html";
 var EMOTE_APP_URL = Script.resolvePath(EMOTE_APP_BASE);
 var EMOTE_LABEL = "EMOTE";
-var EMOTE_APP_SORT_ORDER = 11;
+var EMOTE_APP_SORT_ORDER = 12;
 var FPS = 60;
 var MSEC_PER_SEC = 1000;
 var FINISHED = 3; // see ScriptableResource::State
@@ -71,34 +73,79 @@ function onWebEventReceived(event) {
     }
 
     if (event.type === "click") {
+        
         var emoteName = event.data;
-
+        
-        if (ANIMATIONS[emoteName].resource.state == FINISHED) {
+        if (activeTimer !== false) {
-            if (activeTimer !== false) {
+            Script.clearTimeout(activeTimer);
-                Script.clearTimeout(activeTimer);
+        }
+        
+        // if the activeEmote is different from the chosen emote, then play the new emote. Other wise, 
+        // this is a second click on the same emote as the activeEmote, and we will just stop it.
+        if (activeEmote !== emoteName) {
+            activeEmote = emoteName;
+            
+            // Allow for a random sitting animation when a user selects sit
+            var randSit = Math.floor(Math.random() * 3) + 1;
+            if(emoteName == "Sit"){
+                emoteName = event.data + randSit; // "Sit1, Sit2, Sit3"
             }
-
+            
-            // if the activeEmote is different from the chosen emote, then play the new emote. Other wise, 
+            var frameCount = ANIMATIONS[emoteName].animation.frames.length;
-            // this is a second click on the same emote as the activeEmote, and we will just stop it.
+            
-            if (activeEmote !== emoteName) {
+            // Three types of emotes (non-looping end, non-looping return, looping)
-                activeEmote = emoteName;
+            if(emoteName.match(/^Sit.*$/) || emoteName == "Fall") { // non-looping end
-                var frameCount = ANIMATIONS[emoteName].animation.frames.length;
+            
+                MyAvatar.overrideAnimation(ANIMATIONS[emoteName].url, FPS, false, 0, frameCount);
+                
+            } else if (emoteName == "Love" || emoteName == "Surprised" || emoteName == "Cry"  || emoteName == "Point"){ // non-looping return
+            
                 MyAvatar.overrideAnimation(ANIMATIONS[emoteName].url, FPS, false, 0, frameCount);
-
                 var timeOut = MSEC_PER_SEC * frameCount / FPS;
                 activeTimer = Script.setTimeout(function () {
                     MyAvatar.restoreAnimation();
                     activeTimer = false;
                     activeEmote = false;
                 }, timeOut);
-            } else {
+                
-                activeEmote = false;
+            } else { // looping
-                MyAvatar.restoreAnimation();
+            
+                MyAvatar.overrideAnimation(ANIMATIONS[emoteName].url, FPS, true, 0, frameCount);
+                
             }
+            
+        } else {
+            activeEmote = false;
+            MyAvatar.restoreAnimation();
         }
+        
+
+        
     }
 }
 
+function restoreAnimation() {
+        MyAvatar.restoreAnimation();
+}
+
+Controller.keyPressEvent.connect(restoreAnimation)
+// Note peek() so as to not interfere with other mappings.
+eventMapping.from(Controller.Standard.LeftPrimaryThumb).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.RightPrimaryThumb).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.LeftSecondaryThumb).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.RightSecondaryThumb).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.LT).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.LB).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.LS).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.LeftGrip).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.RT).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.RB).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.RS).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.RightGrip).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.Back).peek().to(restoreAnimation);
+eventMapping.from(Controller.Standard.Start).peek().to(restoreAnimation);
+Controller.enableMapping(eventMappingName);
+
 button.clicked.connect(onClicked);
 tablet.screenChanged.connect(onScreenChanged);
 tablet.webEventReceived.connect(onWebEventReceived);

scripts/system/html/EmoteApp.html

@@ -38,7 +38,7 @@
 
             .content {
                 margin-top: 90px;
-                padding: 30px;
+                padding: 10px 30px;
             }
 
             input[type=button] {
@@ -47,9 +47,9 @@
                 font-size: 20px;
                 text-transform: uppercase;
                 vertical-align: top;
-                height: 105px;
+                height: 90px;
                 min-width: 190px;
-                padding: 0px 18px;
+                padding: 0px 10px;
                 margin-right: 6px;
                 border-radius: 5px;
                 border: none;
@@ -97,15 +97,17 @@
             <h4>Emote App</h4>
         </div>
         <div class="content">
-            <p>Click an emotion to Emote:<p>
+            <p>Choose an emote:<p>
-            <p><input type="button" class="emote-button white" value="Crying">
+            <p><input type="button" class="emote-button white" value="Cry">
                <input type="button" class="emote-button white" value="Surprised"></p>
-            <p><input type="button" class="emote-button white" value="Dancing">
+            <p><input type="button" class="emote-button white" value="Dance">
-               <input type="button" class="emote-button white" value="Cheering"></p>
+               <input type="button" class="emote-button white" value="Cheer"></p>
-            <p><input type="button" class="emote-button white" value="Waving">
+            <p><input type="button" class="emote-button white" value="Wave">
                <input type="button" class="emote-button white" value="Fall"></p>
-            <p><input type="button" class="emote-button white" value="Pointing">
+            <p><input type="button" class="emote-button white" value="Point">
-               <input type="button" class="emote-button white" value="Clapping"></p>
+               <input type="button" class="emote-button white" value="Clap"></p>
+            <p><input type="button" class="emote-button white" value="Sit">
+               <input type="button" class="emote-button white" value="Love"></p>
         </div>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>