1 files changed, 68 insertions, 0 deletions
diff --git a/frontend/site/projects/museum/views/counter.js b/frontend/site/projects/museum/views/counter.js
new file mode 100644
index 0000000..270e61f
--- /dev/null
+++ b/frontend/site/projects/museum/views/counter.js
@@ -0,0 +1,68 @@
+import React, { Component, createRef } from 'react'
+
+import "./counter.css"
+
+export default class Counter extends Component {
+  constructor(props) {
+    super(props)
+    this.ref = createRef()
+    this.update = this.update.bind(this)
+  }
+
+  componentDidMount() {
+    this.update()
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout)
+  }
+
+  update() {
+    this.timeout = setTimeout(this.update, 250)
+    const population = getPopulation()
+    if (this.ref.current) {
+      this.ref.current.innerHTML = commatize(population)
+    }
+  }
+
+  render() {
+    return (
+      <div className="counter">
+        <div className="countValue" ref={this.ref} />
+        <div className="description">
+          CURRENT GLOBAL POPULATION
+        </div>
+      </div>
+    )
+  }
+}
+
+const aprilFirst = new Date(2021, 3, 1)
+
+function getPopulation() {
+  const popAprilFirst = 7855013899
+  const popChangePerDay = 219251.934066
+  const secondsDelta = (new Date() - aprilFirst) / 86400000  // april = month 3
+  const population = popAprilFirst + secondsDelta * popChangePerDay
+  return Math.round(population)
+}
+
+const commatize = (n, radix) => {
+  radix = radix || -1
+  var nums = [], i, counter = 0, r = Math.floor
+  if (radix !== -1 && n > radix) {
+    n /= radix
+    nums.unshift(r((n * 10) % 10))
+    nums.unshift(".")
+  }
+  do {
+    i = r(n % 10)
+    n = r(n / 10)
+    counter += 1
+    if (n && ! (counter % 3))
+      { i = ',' + r(i) }
+    nums.unshift(i)
+  }
+  while (n)
+  return nums.join("")
+}