Console visible without dev-tools

A-M-T · Nov 28, 2013 · 0d7ecde · 0d7ecde
1 parent 8348be5
commit 0d7ecde
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/static/client.js b/static/client.js
@@ -1,3 +1,37 @@
+Element.prototype.fadeOut = function() {
+  var element = this;
+  var op = 1;
+  var timer = setInterval(function () {
+    if (op <= 0.05){
+      clearInterval(timer);
+      element.remove();
+    }
+    element.style.opacity = op;
+    element.style.filter = 'alpha(opacity=' + op * 100 + ")";
+    op -= op * 0.1;
+  }, 50);
+};
+
+(function(old_log) {
+  var make_logger = function(style, command) {
+    return function() {
+      var c = document.getElementById('console');
+      var m = document.createElement('div');
+      if(style) m.classList.add(style);
+      var t = Array.prototype.join.call(arguments, ' ');
+      m.innerText = t;
+      c.appendChild(m);
+      setTimeout(function() {
+        m.fadeOut();
+      }, 3000 + 100 * t.length);
+      command.apply(this, arguments);
+    }
+  };
+  console.log = make_logger(null, console.log);
+  console.info = make_logger('info', console.info);
+  console.warn = make_logger('warn', console.warn);
+  console.error = make_logger('error', console.error);
+})();
 
 // Welcome to SpaceBots, game where robots controlled by AI and human
 // players compete to create thriving industry, accumulate resources

diff --git a/static/index.html b/static/index.html
@@ -262,6 +262,14 @@
   top: 0;
   right: 0;
 }
+#console {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+#console div {
+  padding: 3px;
+}
 </style>
 <body>
 <!-- Welcome to SpaceBots. For complete tutorial click on a link to client.js -->
@@ -283,6 +291,8 @@
 <div id="scripts">
   <span class="button" onclick="script_new()">+</span>
 </div>
+<div id="console">
+</div>
 <audio src="/freestylemix_-_hisboyelroy_-_Revolve.mp3" controls autoplay loop id="music"></audio>
 <template id="details">
   <div class="details">