create show hours

we-are-x-days/.firebase/hosting.YnVpbGQ.cache

@@ -1,11 +1,11 @@
-asset-manifest.json,1604295877267,6227dab8ba650adba0f5fff6027e9b1a6f0fca1aacbdcede675029f6a98313d4
-index.html,1604295877267,264ad6155628fc8e7c8e4136f5f53916c3812674469d2e2908ee25e89730b735
-static/css/main.58eeb6f9.chunk.css,1604295877268,b7a2d7a44b68f3f56c2be17030b86f669fbbb21b04d389ad155bd71ae2d4dea6
-static/css/main.58eeb6f9.chunk.css.map,1604295877284,8532ec3c9530f19fa947562e1c074c719775d60fbeae209dace36e6e92a07eb3
-static/js/2.3dede0ec.chunk.js.LICENSE.txt,1604295877284,a53366d938ef04a895ba48587a7321457f7ede2ae32a40f5a018c32e840ca096
-static/js/main.3c2b1a43.chunk.js,1604295877271,0e3141490451782385bfbf0d38f419ea4975af84d522135f0a5ae3b575c9010a
-static/js/main.3c2b1a43.chunk.js.map,1604295877285,35ac89b5dddad5d5f13127fd95c8010945e8a21ba9c5e1a9bbb5b507c09b85bb
-static/js/runtime-main.40f63ab8.js,1604295877284,00d521aabb84335338b51dd4fbb1d596ad2a5c5dd308c12689ba55dd57be66b6
-static/js/runtime-main.40f63ab8.js.map,1604295877285,dcc14fb0e77c8d0e2f129f50404810f32ce9f44b80b89a87dc83ea83cd9cd105
-static/js/2.3dede0ec.chunk.js,1604295877284,6c4c2b5018437879d2a0383c12de9ecb95c840ae15ee4a90a6d0548ae01e314b
-static/js/2.3dede0ec.chunk.js.map,1604295877285,89ed0c1399da728b5b68833b7ed15cd326307c163bc51806093af17c672acd5a
+asset-manifest.json,1604328408989,c697fddab59c60afb45c7d7f36149ed0bac0c92d2195421735a03ea198eb945f
+index.html,1604328408989,1eb3d116684503cec20d9fd707fe02a3981fc4e981c7d9dd1b025e5a559665e5
+static/css/main.deb78623.chunk.css,1604328408990,5fb531dad8a00be00df48f034d6d3d5bd55837e6aefc065dbf6475942242d2cf
+static/css/main.deb78623.chunk.css.map,1604328409006,e3423e5685e1d304bf009a516546c92a89db31b5b914c4b9ed55d3b4eb53bee3
+static/js/2.983d7268.chunk.js.LICENSE.txt,1604328409006,a53366d938ef04a895ba48587a7321457f7ede2ae32a40f5a018c32e840ca096
+static/js/runtime-main.40f63ab8.js,1604328409006,00d521aabb84335338b51dd4fbb1d596ad2a5c5dd308c12689ba55dd57be66b6
+static/js/main.ab83e882.chunk.js,1604328408989,b4bfa561511be7697c99ca8f07566100f9cb25118291e79d5fe86fbcd5518a6b
+static/js/main.ab83e882.chunk.js.map,1604328409006,3188dc0b28d29d5681a26ee0db0529797ba35333823000755d22f4e30936cafc
+static/js/runtime-main.40f63ab8.js.map,1604328409006,dcc14fb0e77c8d0e2f129f50404810f32ce9f44b80b89a87dc83ea83cd9cd105
+static/js/2.983d7268.chunk.js,1604328409006,421a70454af31df33c771938185856683cc15753c2c0b6429d3678dce27966cf
+static/js/2.983d7268.chunk.js.map,1604328409007,7e730b07546bf2db5ed77550b973e4a679bb4abfb056ce30e21808b378236e8a

we-are-x-days/src/Site.js

@@ -6,23 +6,42 @@ class Site extends React.Component {
 
   constructor(props){
     super(props);
-    this.state = {days: 0, message: '', id: this.props.location.search.split('=')[1]};
+    this.state = {days: 0, message: '', id: this.props.location.search.split('=')[1], hours: false, seconds: 0};
     this.reset = this.reset.bind(this);
+    this.changeShow = this.changeShow.bind(this);
   }
 
   componentDidMount(){
     this.getDays();
     this.getMessage();
+    this.timerID = setInterval(
+      () => this.setState({
+        seconds: this.state.seconds + 1
+      }),
+      1000
+    );
+  }
+
+  formatTime(s){
+    var fm = [
+      Math.floor(s / 60 / 60 / 24), // DAYS
+      Math.floor(s / 60 / 60) % 24, // HOURS
+      Math.floor(s / 60) % 60, // MINUTES
+      s % 60 // SECONDS
+    ];
+    return `"${fm[0]}:${fm[1]}:${fm[2]}:${fm[3]}"`
   }
 
   async getDays() {
     var sitesRef = await db.collection("sites");
     var query = await sitesRef.doc(this.state.id).get();
     const last_reset = query.data().last_reset
     //to change to days use the number 86400000
-    const days = Math.floor((Date.now() - last_reset.toDate())/1000)
+    const days = Math.floor((Date.now() - last_reset.toDate())/86400000)
+    const seconds = Math.floor((Date.now() - last_reset.toDate())/1000)
     this.setState({
-      days: days
+      days: days,
+      seconds: seconds
     }, () => console.log(`days`, this.state))
   }
 
@@ -35,20 +54,30 @@ class Site extends React.Component {
     }, () => console.log(this.state))
   }
 
+  changeShow() {
+    this.setState({
+      hours: this.state.hours ? false : true
+    })
+  }
+
   async reset() {
     var sitesRef = await db.collection("sites");
     await sitesRef.doc(this.state.id).update({last_reset: new Date(Date.now())});
 
     this.setState({
-      days: 0
+      days: 0,
+      seconds: 0
     }, () => console.log(`reset`, this.state))
   }
 
   render() {
     return (
       <div className="total-days">
         <div className="main-message">
-          <h1>We are {this.state.days} seconds without {this.state.message} </h1>
+          <h1>We are {this.state.hours ? this.formatTime(this.state.seconds) : this.state.days + " days"} without {this.state.message} </h1>
+        </div>
+        <div className="show-button" onClick={this.changeShow}>
+          {this.state.hours ? "Show Days" : "Show Hours"}
         </div>
         <div className="reset-button" onClick={this.reset}>
           Reset

we-are-x-days/src/styles/Site.css

@@ -38,4 +38,12 @@
 
 .reset-button:hover{
     background-position: right;
+}
+
+.show-button{
+    transform: translate(-50%,-50%);
+    position: absolute;
+    top: 55%;
+    left: 50%;
+    cursor: pointer;
 }