counter is alive now

## [0.4.0] - 2021-11-02 ### Added - counter is alive now
ArtemNikolaev · Nov 2, 2021 · ca22ca5 · ca22ca5
1 parent e3ce326
commit ca22ca5
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0] - 2021-11-02
+### Added
+- counter is alive now
+
 ## [0.3.0] - 2021-10-31
 ### Added
 - themes
@@ -30,7 +34,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - initial
 
-[Unreleased]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.3.0...HEAD
+[Unreleased]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.4.0...HEAD
+[0.4.0]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.1.1...v0.2.0
 [0.1.1]: https://github.com/ArtemNikolaev/frame-rate-web-component/compare/v0.1.0...v0.1.1

diff --git a/index.html b/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Frame Rate Web Component Demo</title>
 </head>
 <body>
+<h1>Frame Rate WebComponent Demo</h1>
 <script src="/dist/frame-rate.bundle.js"></script>
 
 <frame-rate></frame-rate>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "frame-rate-web-component",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Frame Rate Web Component",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "webpack"
+    "build": "webpack",
+    "start": "webpack --watch"
   },
   "keywords": [
     "web-component",

diff --git a/src/index.js b/src/index.js
@@ -4,15 +4,74 @@ import generatePostLikeTheme from './themes/post-like';
 class FrameRate extends HTMLElement {
   constructor() {
     super();
-    this.frameRate = 144;
+    this.isInactive = false;
+
+    this.frameAmount = [];
+    this.frameRate = 0;
+    this.frameRateOld = 0;
+
+    this.attachShadow({mode: 'open'});
+    this.shadowRoot.appendChild(styleEl);
+
     this.theme = generatePostLikeTheme(this.frameRate);
 
-    const shadow = this.attachShadow({mode: 'open'});
+    this.render();
+  }
+
+  connectedCallback() {
+    this.on();
+  }
+
+  counter() {
+    if (this.isInactive) {
+      this.framesAmount.splice(0);
 
-    shadow.appendChild(styleEl);
+      return;
+    }
+
+    this.frameAmount = this.frameAmount.filter( dt => dt > Date.now() - 1000);
+    this.frameAmount.push(Date.now());
+
+    const frameRate = this.frameAmount.length;
+
+    if (frameRate !== this.frameRate) {
+      this.frameRateOld = this.frameRate;
+      this.frameRate = frameRate;
+
+      this.render();
+    }
+
+
+    requestAnimationFrame(() => this.counter());
+  }
 
-    this.theme.forEach(node => shadow.appendChild(node));
+  disconnectedCallback() {
+    this.isInactive = true;
   }
+
+  attributeChangedCallback(key, prev, next) {
+
+  }
+
+  render() {
+    this.theme.style.remove();
+    this.theme.el.remove();
+
+    this.theme = generatePostLikeTheme(this.frameRate);
+
+    this.shadowRoot.appendChild(this.theme.style);
+    this.shadowRoot.appendChild(this.theme.el);
+  }
+
+  on() {
+    this.counter();
+  }
+
+  off() {
+    this.isInactive = true;
+  }
+
+  static get observedAttributes() {return ['hide'];}
 }
 
 customElements.define('frame-rate', FrameRate)
diff --git a/src/style/styles.css b/src/style/styles.css
@@ -3,3 +3,7 @@
     top: 0;
     right: 0;
 }
+
+.hide {
+    display: none;
+}
diff --git a/src/themes/post-like/index.js b/src/themes/post-like/index.js
@@ -26,8 +26,8 @@ export default function generatePostLikeTheme(frames) {
       }
     );
 
-  return [
-    themeStyle,
-    div,
-  ]
+  return {
+      style: themeStyle,
+      el: div,
+  };
 }