Add countdown watch

src/components/watch.js

@@ -0,0 +1,32 @@
+AFRAME.registerComponent("watch", {
+    init: function() {
+        this.timer = AFRAME.utils.getUrlParameter('timer')
+        if (!this.timer) this.timer = 300 //5min
+        document.querySelector("#watch").setAttribute("text","value:" + this.formatSeconds(this.timer))
+        this.tick = AFRAME.utils.throttleTick(this.tick, 1000, this);
+        // details https://aframe.io/docs/1.0.0/core/utils.html#aframe-utils-throttle-function-minimuminterval-optionalcontext
+    },
+
+    formatSeconds: function(secs) {
+        function pad(n) {
+            return (n < 10 ? "0" + n : n)
+        }
+
+        var m = Math.floor(secs / 60);
+        var s = Math.floor(secs - m * 60);
+
+        return pad(m) + ":" + pad(s);
+    },
+
+    tick: function (t, dt) {
+        var time = Number( this.timer )
+        console.log(this.timer);
+        if(this.timer > 0){
+            this.timer--
+        } else {
+            this.timer = 0
+            document.querySelector("#endMessage").setAttribute("visible","true")
+        }
+        document.querySelector("#watch").setAttribute("text","value:"+ this.formatSeconds(time))
+    },
+});

src/home.html

@@ -13,7 +13,29 @@
                 material="color: #EF2D5E;">
         </a-mixin>
     </a-assets>
-
+    <!-- Board -->
+    <a-entity
+        position="-1 2 -1"
+        text="color: white; align: center; width: 2; font: exo2semibold;
+              value: To Do"
+      ></a-entity>
+    <a-entity
+      position="0 2 -1"
+      text="color: white; align: center; width: 2; font: exo2semibold;
+            value: Doing"
+    ></a-entity>
+    <a-entity
+      position="1 2 -1"
+      text="color: white; align: center; width: 2; font: exo2semibold;
+            value: Done"
+    ></a-entity>
+    <!-- End message-->
+    <a-entity id="endMessage"
+      position="0 2.2 -1"
+      text="color: #FFCC00; align: center; width: 4; font: exo2semibold;
+            value: SESSION FINISHED" visible="false"
+    ></a-entity>
+    <!-- Stickers -->
     <a-entity position="0 0 -0.5">
         <a-entity class="cube" mixin="cube" position="0.30 1.05 0"></a-entity>
         <a-entity class="cube" mixin="cube" position="0 1.35 0"></a-entity>
@@ -21,6 +43,9 @@
     </a-entity>
 
     <a-entity environment="preset: forest;"></a-entity>
-    <a-entity hand-controls="left" aabb-collider="objects: .cube;" grab></a-entity>
+    <a-entity hand-controls="left" aabb-collider="objects: .cube;" grab>
+        <a-entity watch id="watch"  position="-0.02 -0.005 0.16" rotation="0 -90 180" text="color: white; align: center; width: .5; font: exo2semibold;
+            value: 00:59"></a-entity>
+    </a-entity>
     <a-entity hand-controls="right" aabb-collider="objects: .cube;" grab></a-entity>
 </a-scene>

src/index.js

@@ -8,6 +8,7 @@ require('aframe-event-set-component');
 
 require('./components/aabb-collider');
 require('./components/grab');
+require('./components/watch');
 
 require('./index.css')