diff --git a/README.md b/README.md
index 590697c..8ef655b 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,120 @@
-## aframe-stats-in-vr-component
+# features
+- get stats component data in VR, while you're actually using your app
+- high performance, just one canvas texture for all stats (each though each graph is its own canvas)
+- uses existing stats component under the hood
+- pick which stats you want to track
+- throttle to as smooth or as performance sensitive as you want
+- pick background color, opacity
+- include some, all, or no charts
+- attach to camera by default, but attach anywhere you want
+- default behavior is to display when enter-vr, and hide and show `stats` when exit-vr, but behavior can be customized
+- easy-peasy
+
+## yet another necro component pulled into service
+
+This one is revived from back in the olden days! A-Frame 0.4.0 is close to as old as I've seen (pretty sure I have pulled a library somewhere that had a demo on 0.3.0?). Very cool that this 5 year old code can still be called into service.
+
+I've wanted this for a while, but I googled, found this, and then found what looked like a [promising pull request](https://github.com/chenzlabs/stats-in-vr/pull/1
+).
+
+Which, with just one tiny bug fix, was found to work even on A-Frame 1.2.0!
+
+~~though it seems the bars may not be working properly and that they perhaps used to. perhaps some more tinkering is in order?~~ Got the bars working again. :D Also spent a few hours going over it, refactoring stuff in the process. ~~I now realize it adds about 40-50 draw calls or so, because it works by adding a ton of images with canvas with text as textures for every value.~~ NM, fixed that too. Now all text stats are rendered as one buttery smooth image with canvas texture.
+
+I spent time working on the code, but not yet the repo. It's got all the usual boilerplate, now fallen way out of date. I just use the 'stats-in-vr.js' file and ignore the rest for now, may clean up rest of repo later.
+
+You can access it through jsdelivr's cdn here: https://cdn.jsdelivr.net/gh/kylebakerio/stats-in-vr@1.1.0/stats-in-vr.js
+
+**AGAIN, Note that the build/dist files are NOT up to date with this one file listed above--they wouldn't build because of the ES6 syntax used in my bug fix, and the build tools are just that old.**
stats-in-vr component for [A-Frame](https://aframe.io).
-
-The stats-in-vr component allows the A-Frame scene stats component to be visible in VR.
+
+
-## Example
+## Examples
+
+### default behavior:
+when you enter VR, full stats get attached to your face, about half a meter down and forward from you. When you are not in VR, you see the normal 2d stats.
```html
```
-## Value
+### just want fps and tirangles, including their graphs
+```html
+
+```
+
+### no graphs, just numbers please
+```html
+
+```
+
+### only fps graph, but all numbers
+```html
+
+```
+
+### attach translucent stats to your left hand when you enter vr:
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### make it a permanent fixture in your scene, vr or not:
+stick a VR panel somewhere you want in the scene, and make it stay there, whether you're in VR or not.
+```html
+
+
+
+
+```
-| Property | Description | Default Value |
-|----------------------|----------------------------------------------------|----------------------|
-| enabled | Whether enabled or not. | true |
-| position | Position of camera-locked stats panel. | '0 -0.35 -0.5' |
-| scale | Scale of camera-locked stats panel. | '0.5 0.5 1' |
+## Glitch
+https://glitch.com/edit/#!/stats-in-vr?path=index.html%3A17%3A30
-## Events
+## params
+```js
-| Event Name | Description |
-| ---------- | ----------- |
+ schema: {
+ enabled: { type: "boolean", default: true },
+ debug: { type: "boolean", default: false },
+ position: { type: "string", default: "0 -1.1 -1" },
+ rotation: { type: "string", default: "-20 0 0" },
+ scale: { type: "string", default: "1 .8 1" },
+ throttle: { type: "number", default: 20 },
+ fillstyle: { type:"color", default: "white"}, // for opacity, you can try "rgba(255, 255, 255, 0.5)"
+ show2dstats: { type: "boolean", default: true }, // show the built-in 'stats' component
+ alwaysshow3dstats: { type: "boolean", default: false }, // show the built-in 'stats' component
+ anchorel: { type: "selector", default: "[camera]" }, // anchor in-vr stats to something other than the camera
+ showalllabels: { type: "boolean", default: true },
+ showlabels: {type: 'array', default:[]}, // e.g., ['raf','fps','calls','entities']
+ showallgraphs: { type: "boolean", default: true },
+ showgraphs: {type: 'array', default:[]}, // e.g., ['raf','fps','calls','entities']
+ },
+```
### Installation
#### Browser
-Install and use by directly including the [browser files](dist):
+Install and use by directly including the [browser file](https://cdn.jsdelivr.net/gh/kylebakerio/stats-in-vr@1.2.2/stats-in-vr.js):
```html
My A-Frame Scene
-
-
+
+
@@ -42,17 +122,3 @@ Install and use by directly including the [browser files](dist):
```
-#### npm
-
-Install via npm:
-
-```bash
-npm install aframe-stats-in-vr-component
-```
-
-Then register and use.
-
-```js
-require('aframe');
-require('aframe-stats-in-vr-component');
-```
diff --git a/dist/.gitkeep b/dist/.gitkeep
deleted file mode 100644
index d9186ea..0000000
--- a/dist/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-`npm run dist` to generate browser files.
diff --git a/dist/aframe-stats-in-vr-component.js b/dist/aframe-stats-in-vr-component.js
deleted file mode 100644
index ff890d8..0000000
--- a/dist/aframe-stats-in-vr-component.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/******/ (function(modules) { // webpackBootstrap
-/******/ // The module cache
-/******/ var installedModules = {};
-
-/******/ // The require function
-/******/ function __webpack_require__(moduleId) {
-
-/******/ // Check if module is in cache
-/******/ if(installedModules[moduleId])
-/******/ return installedModules[moduleId].exports;
-
-/******/ // Create a new module (and put it into the cache)
-/******/ var module = installedModules[moduleId] = {
-/******/ exports: {},
-/******/ id: moduleId,
-/******/ loaded: false
-/******/ };
-
-/******/ // Execute the module function
-/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
-/******/ // Flag the module as loaded
-/******/ module.loaded = true;
-
-/******/ // Return the exports of the module
-/******/ return module.exports;
-/******/ }
-
-
-/******/ // expose the modules object (__webpack_modules__)
-/******/ __webpack_require__.m = modules;
-
-/******/ // expose the module cache
-/******/ __webpack_require__.c = installedModules;
-
-/******/ // __webpack_public_path__
-/******/ __webpack_require__.p = "";
-
-/******/ // Load entry module and return exports
-/******/ return __webpack_require__(0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ function(module, exports, __webpack_require__) {
-
- __webpack_require__(1);
-
-
-/***/ },
-/* 1 */
-/***/ function(module, exports) {
-
- /* globals AFRAME */
-
- /**
- * Show scene stats in VR.
- */
- AFRAME.registerComponent('stats-in-vr', {
- dependencies: ['stats'],
-
- schema: {
- enabled: {type:'boolean', default: true},
- position: {type:'string', default: '0 -0.35 -0.5'},
- scale: {type:'string', default: '0.5 0.5 1'},
- updateIntervalMillis: {type:'number', default: 500}
- },
-
- init: function () {
- var scene = this.el;
- var statsEl = scene.components['stats'].statsEl;
-
- // hide the DOM stats panel
- statsEl.style = 'display: none !important;';
- statsEl.className = 'a-hidden';
-
- // once we start rendering, create VR stats panel
- if (scene.renderStarted) { this.createStatsPanel(); } else {
- scene.addEventListener('renderstart', this.createStatsPanel.bind(this));
- }
- },
-
- createStatsPanel: function () {
- var self = this;
-
- // attached to scene element, so inject stats panel into camera
- self.statspanel = document.createElement('a-entity');
- self.statspanel.setAttribute('id', 'statspanel');
- self.statspanel.setAttribute('position', self.data.position);
- self.statspanel.setAttribute('scale', self.data.scale);
- self.statspanel.setAttribute('visible', self.data.enabled ? 'true' : 'false');
- self.el.camera.el.appendChild(self.statspanel);
-
- // set up the VR stats panel
- self.valuecanvases = [];
- self.rsids = [];
- self.rsvalues = [];
- },
-
- updateStatsPanel: function () {
- var self = this;
- if (!self.statspanel || !self.rsids) { return; }
- var scene = this.el;
- var statsEl = scene.components['stats'].statsEl;
- var rscanvases = document.querySelectorAll('.rs-canvas');
- for (var i = 0; i < rscanvases.length; i++) {
- var rsparent = rscanvases[i].parentElement;
- var rsid = rsparent.querySelector('.rs-counter-id').innerText;
- if (self.rsids.indexOf(rsid) >= 0) { continue; }
-
- // remember labels and value elements
- self.rsids.push(rsid);
- self.rsvalues.push(rsparent.querySelector('.rs-counter-value'));
-
- // inject id values for rstats canvases
- var idsuffix = self.rsids[i].replace(' ', '_');
- rscanvases[i].id = 'rstats-' + idsuffix;
-
- var y = (1.25 - i * 0.025) + ' 0';
-
- // create the image for the rstats canvas
- var stats = document.createElement('a-image');
- stats.setAttribute('position', '-0.08 ' + y);
- stats.setAttribute('width', '0.34');
- stats.setAttribute('height', '0.025');
- stats.setAttribute('src', '#' + rscanvases[i].id);
- self.statspanel.appendChild(stats);
-
- // create the canvas for the value
- var valuecanvas = document.createElement('canvas');
- valuecanvas.setAttribute('id', 'value-' + idsuffix);
- valuecanvas.setAttribute('width', '160');
- valuecanvas.setAttribute('height', '20');
- valuecanvas.setAttribute('crossorigin', 'anonymous');
- self.valuecanvases.push(valuecanvas);
-
- // add the value canvas
- statsEl.appendChild(self.valuecanvases[i]);
-
- // create the image for the value canvas
- var value = document.createElement('a-image');
- value.setAttribute('position', '0.17 ' + y);
- value.setAttribute('width', '0.16');
- value.setAttribute('height', '0.025');
- value.setAttribute('src', '#' + self.valuecanvases[i].id);
- self.statspanel.appendChild(value);
- }
- },
-
- update: function () {
- if (!this.statspanel) { return; }
- this.statspanel.setAttribute('position', this.data.position);
- this.statspanel.setAttribute('scale', this.data.scale);
- return (!this.data.enabled) ? this.hide() : this.show();
- },
-
- remove: function () {
- var scene = this.el;
- var statsEl = scene.components['stats'].statsEl;
-
- statsEl.parentNode.removeChild(statsEl);
- },
-
- tick: function () {
- // periodically update the value canvases
- var now = Date.now();
- if (now < this.lastTime + this.data.updateIntervalMillis) { return; }
- this.lastTime = now;
- this.updateStatsPanel();
- if (this.valuecanvases) {
- for (var i = 0; i < this.valuecanvases.length; i++) {
- var ctx = this.valuecanvases[i].getContext('2d');
- ctx.font = '16px monospace';
- ctx.fillStyle = 'gray';
- ctx.fillRect(0, 0, 160, 20);
- ctx.fillStyle = 'black';
- ctx.fillText(this.rsvalues[i].innerText + ' ' + this.rsids[i], 2, 16);
- }
- }
- },
-
- hide: function () {
- if (this.statspanel) { this.statspanel.object3D.visible = false; }
- },
-
- show: function () {
- if (this.statspanel) { this.statspanel.object3D.visible = true; }
- }
-
- });
-
-
-/***/ }
-/******/ ]);
\ No newline at end of file
diff --git a/dist/aframe-stats-in-vr-component.min.js b/dist/aframe-stats-in-vr-component.min.js
deleted file mode 100644
index 59871d4..0000000
--- a/dist/aframe-stats-in-vr-component.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(t){function e(a){if(s[a])return s[a].exports;var i=s[a]={exports:{},id:a,loaded:!1};return t[a].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var s={};return e.m=t,e.c=s,e.p="",e(0)}([function(t,e,s){s(1)},function(t,e){AFRAME.registerComponent("stats-in-vr",{dependencies:["stats"],schema:{enabled:{type:"boolean",default:!0},position:{type:"string",default:"0 -0.35 -0.5"},scale:{type:"string",default:"0.5 0.5 1"},updateIntervalMillis:{type:"number",default:500}},init:function(){var t=this.el,e=t.components.stats.statsEl;e.style="display: none !important;",e.className="a-hidden",t.renderStarted?this.createStatsPanel():t.addEventListener("renderstart",this.createStatsPanel.bind(this))},createStatsPanel:function(){var t=this;t.statspanel=document.createElement("a-entity"),t.statspanel.setAttribute("id","statspanel"),t.statspanel.setAttribute("position",t.data.position),t.statspanel.setAttribute("scale",t.data.scale),t.statspanel.setAttribute("visible",t.data.enabled?"true":"false"),t.el.camera.el.appendChild(t.statspanel),t.valuecanvases=[],t.rsids=[],t.rsvalues=[]},updateStatsPanel:function(){var t=this;if(t.statspanel&&t.rsids)for(var e=this.el,s=e.components.stats.statsEl,a=document.querySelectorAll(".rs-canvas"),i=0;i=0)){t.rsids.push(r),t.rsvalues.push(n.querySelector(".rs-counter-value"));var l=t.rsids[i].replace(" ","_");a[i].id="rstats-"+l;var o=1.25-.025*i+" 0",u=document.createElement("a-image");u.setAttribute("position","-0.08 "+o),u.setAttribute("width","0.34"),u.setAttribute("height","0.025"),u.setAttribute("src","#"+a[i].id),t.statspanel.appendChild(u);var d=document.createElement("canvas");d.setAttribute("id","value-"+l),d.setAttribute("width","160"),d.setAttribute("height","20"),d.setAttribute("crossorigin","anonymous"),t.valuecanvases.push(d),s.appendChild(t.valuecanvases[i]);var c=document.createElement("a-image");c.setAttribute("position","0.17 "+o),c.setAttribute("width","0.16"),c.setAttribute("height","0.025"),c.setAttribute("src","#"+t.valuecanvases[i].id),t.statspanel.appendChild(c)}}},update:function(){if(this.statspanel)return this.statspanel.setAttribute("position",this.data.position),this.statspanel.setAttribute("scale",this.data.scale),this.data.enabled?this.show():this.hide()},remove:function(){var t=this.el,e=t.components.stats.statsEl;e.parentNode.removeChild(e)},tick:function(){var t=Date.now();if(!(t
-
- A-Frame stats-in-vr Component - Basic
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-