random anim state on click in guestbook

call/static/call/guestbook.js

@@ -11,6 +11,7 @@ var ANIMS = {
     run_left: a("2,5"),
     run_right: a("2f,5f"),
 }
+var ANIM_NAMES = Object.keys(ANIMS);
 
 class Creature {
     constructor(img) {
@@ -20,6 +21,8 @@ class Creature {
         } else {
             img.addEventListener("load", this.init.bind(this));
         }
+        this.interval_id = null;
+        this.currentAnimName = "stand";
     }
     init () {
         this.div = document.createElement("div");
@@ -45,7 +48,6 @@ class Creature {
         this.div.appendChild(this.centerbottom);
         this.centerbottom.appendChild(this.caption_div);
         this.caption.textContent = this.img.title;
-        this.currentAnimName = "stand";
         this.canvas.addEventListener("click", this.click.bind(this));
     }
     animate(){
@@ -69,9 +71,16 @@ class Creature {
         ctx.restore();
     }
     click () {
-        console.log("click", this);
-        this.currentAnimName = "run_front";
-        window.setInterval(this.animate.bind(this), 16);
+        // console.log("click", this);
+        var index = ANIM_NAMES.indexOf(this.currentAnimName);
+        // this.currentAnimName = ANIM_NAMES[index + 1] || ANIM_NAMES[0];
+        var oldState = this.currentAnimName;
+        while (this.currentAnimName == oldState) {
+            this.currentAnimName = ANIM_NAMES[Math.floor(Math.random() * ANIM_NAMES.length)];
+        }
+        if (!this.interval_id) {
+            this.interval_id = window.setInterval(this.animate.bind(this), 16);
+        }      
     }
 }