cursor that follows mouse

1 files changed, 38 insertions, 0 deletions

diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
new file mode 100644
index 0000000..842e871
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -0,0 +1,38 @@
+
+var HelpCursor = View.extend({
+	el: "#helpCursor",
+	
+	messages: {
+	  start: "Welcome to Vvalls!",
+	  move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.",
+	},
+	shown: {},
+
+  initialize: function(){
+    $(window).mousemove(function(e){
+      this.el.style.left = e.pageX + "px"
+      this.el.style.top = e.pageY + "px"
+    }.bind(this))
+    this.show("start")
+  },
+
+  show: function(name){
+    if (name) this.showMessage(name)
+    this.$el.show()
+  },
+
+  hide: function(){
+    this.$el.hide()
+  },
+
+  showMessage: function(name){
+    if (+(this.shown[name] || 0) < 2) {
+      this.$el.html(this.messages[name])
+      this.shown[name] = (+this.shown[name] || 0) + 1
+    }
+    else {
+      this.$el.html("")
+    }
+  },
+
+})