+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/node_modules/countup.js/jest.config.js b/node_modules/countup.js/jest.config.js
new file mode 100644
index 0000000..824478e
--- /dev/null
+++ b/node_modules/countup.js/jest.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+ roots: [
+ '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+
+
+ CountUp.js
+
+
+ CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
+Install via npm/yarn using the package name countup.js.
View on Github
+Current stars:
+0
+
+
+
+
+ ' +
+ ' ' +
+ '
';
+
+ countUp = new CountUp('target', 100);
+ resetRAF();
+ });
+
+ describe('constructor', () => {
+
+ it('should create for a valid target, and print startVal', () => {
+ expect(countUp).toBeTruthy();
+ expect(countUp.error.length).toBe(0);
+ expect(getTargetHtml()).toEqual('0');
+ });
+
+ it('should set an error for a bad target', () => {
+ countUp = new CountUp('notThere', 100);
+
+ expect(countUp.error.length).toBeGreaterThan(0);
+ });
+
+ it('should set an error for a bad endVal', () => {
+ const endVal = '%' as any;
+ countUp = new CountUp('target', endVal);
+
+ expect(countUp.error.length).toBeGreaterThan(0);
+ });
+
+ it('should set an error for a bad startVal', () => {
+ const startVal = 'oops' as any;
+ countUp = new CountUp('target', 100, { startVal });
+
+ expect(countUp.error.length).toBeGreaterThan(0);
+ });
+
+ it('should return a value for version', () => {
+ expect(countUp.version).toBeTruthy();
+ });
+ });
+
+ describe('class methods', () => {
+ it('should count when start method is called', () => {
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100');
+ });
+
+ it('should use a callback provided to start', () => {
+ const cb = jest.fn();
+ countUp.start(cb);
+
+ expect(getTargetHtml()).toEqual('100');
+ expect(cb).toHaveBeenCalled();
+ });
+
+ it('should pause when pauseResume is called', () => {
+ countUp.start();
+ // resetRAF();
+ countUp.pauseResume();
+
+ expect(countUp.paused).toBeTruthy();
+ });
+
+ it('should reset when reset is called', () => {
+ countUp.start();
+ countUp.reset();
+
+ expect(getTargetHtml()).toEqual('0');
+ expect(countUp.paused).toBeTruthy();
+ });
+
+ it('should update when update is called', () => {
+ countUp.start();
+ expect(getTargetHtml()).toEqual('100');
+
+ resetRAF();
+ countUp.update(200);
+ expect(getTargetHtml()).toEqual('200');
+ });
+
+ });
+
+ describe('various use-cases', () => {
+ it('should handle large numbers', () => {
+ countUp = new CountUp('target', 6000);
+ const spy = jest.spyOn(countUp, 'determineDirectionAndSmartEasing');
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('6,000');
+ expect(spy).toHaveBeenCalled();
+ });
+
+ it('should not use easing when specified with a large number (auto-smooth)', () => {
+ countUp = new CountUp('target', 6000, { useEasing: false });
+ const spy = jest.spyOn(countUp, 'easingFn');
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('6,000');
+ expect(spy).toHaveBeenCalledTimes(0);
+ });
+
+ it('should count down when endVal is less than startVal', () => {
+ countUp = new CountUp('target', 10, { startVal: 500 });
+ expect(getTargetHtml()).toEqual('500');
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('10');
+ });
+
+ it('should handle negative numbers', () => {
+ countUp = new CountUp('target', -500);
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('-500');
+ });
+
+ it('should properly handle a zero duration', () => {
+ countUp = new CountUp('target', 2000, { duration: 0 });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('2,000');
+ });
+
+ it('should call the callback when finished if there is one', () => {
+ const cb = jest.fn();
+ countUp.start(cb);
+
+ expect(getTargetHtml()).toEqual('100');
+ expect(cb).toHaveBeenCalled();
+ });
+ });
+
+ describe('options', () => {
+ it('should respect the decimalPlaces option', () => {
+ countUp = new CountUp('target', 100, { decimalPlaces: 2 });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100.00');
+ });
+
+ it('should respect the duration option', () => {
+ countUp = new CountUp('target', 100, { duration: 1 });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100');
+ });
+
+ it('should respect the useEasing option', () => {
+ countUp = new CountUp('target', 100, { useEasing: false });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100');
+ });
+
+ it('should respect the useGrouping option', () => {
+ countUp = new CountUp('target', 100000, { useGrouping: false });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100000');
+ resetRAF();
+
+ countUp = new CountUp('target', 1000000, { useGrouping: true });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('1,000,000');
+ });
+
+ it('should respect the useIndianSeparators option', () => {
+ countUp = new CountUp('target', 100000, { useIndianSeparators: true });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('1,00,000');
+ resetRAF();
+
+ countUp = new CountUp('target', 10000000, { useIndianSeparators: true });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('1,00,00,000');
+ });
+
+ it('should respect the separator option', () => {
+ countUp = new CountUp('target', 10000, { separator: ':' });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('10:000');
+ });
+
+ it('should respect the decimal option', () => {
+ countUp = new CountUp('target', 100, { decimal: ',', decimalPlaces: 1 });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100,0');
+ });
+
+ it('should respect the easingFn option', () => {
+ const easeOutQuintic = jest.fn().mockReturnValue(100);
+ countUp = new CountUp('target', 100, { easingFn: easeOutQuintic });
+ countUp.start();
+
+ expect(easeOutQuintic).toHaveBeenCalled();
+ expect(getTargetHtml()).toEqual('100');
+ });
+
+ it('should respect the formattingFn option', () => {
+ const formatter = jest.fn().mockReturnValue('~100~');
+ countUp = new CountUp('target', 100, { formattingFn: formatter });
+ countUp.start();
+
+ expect(formatter).toHaveBeenCalled();
+ expect(getTargetHtml()).toEqual('~100~');
+ });
+
+ it('should respect the prefix option', () => {
+ countUp = new CountUp('target', 100, { prefix: '$' });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('$100');
+ });
+
+ it('should respect the suffix option', () => {
+ countUp = new CountUp('target', 100, { suffix: '!' });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100!');
+ });
+
+ it('should respect the numerals option', () => {
+ const numerals = [')', '!', '@', '#', '$', '%', '^', '&', '*', '('];
+ countUp = new CountUp('target', 100, { numerals });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('!))');
+ });
+
+ it('should respect the onCompleteCallback option', () => {
+ const options = { onCompleteCallback: jest.fn() };
+ const callbackSpy = jest.spyOn(options, 'onCompleteCallback');
+ countUp = new CountUp('target', 100, options);
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('100');
+ expect(callbackSpy).toHaveBeenCalled();
+ });
+
+ it('should respect the plugin option', () => {
+ const plugin: CountUpPlugin = {
+ render: (el, result) => {
+ el.innerHTML = result;
+ }
+ };
+ countUp = new CountUp('target', 1000, {
+ plugin,
+ useGrouping: true
+ });
+ countUp.start();
+
+ expect(getTargetHtml()).toEqual('1,000');
+ });
+ });
+});
diff --git a/node_modules/countup.js/src/countUp.ts b/node_modules/countup.js/src/countUp.ts
new file mode 100644
index 0000000..45372f3
--- /dev/null
+++ b/node_modules/countup.js/src/countUp.ts
@@ -0,0 +1,334 @@
+export interface CountUpOptions { // (default)
+ startVal?: number; // number to start at (0)
+ decimalPlaces?: number; // number of decimal places (0)
+ duration?: number; // animation duration in seconds (2)
+ useGrouping?: boolean; // example: 1,000 vs 1000 (true)
+ useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
+ useEasing?: boolean; // ease animation (true)
+ smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
+ smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
+ separator?: string; // grouping separator (,)
+ decimal?: string; // decimal (.)
+ // easingFn: easing function for animation (easeOutExpo)
+ easingFn?: (t: number, b: number, c: number, d: number) => number;
+ formattingFn?: (n: number) => string; // this function formats result
+ prefix?: string; // text prepended to result
+ suffix?: string; // text appended to result
+ numerals?: string[]; // numeral glyph substitution
+ enableScrollSpy?: boolean; // start animation when target is in view
+ scrollSpyDelay?: number; // delay (ms) after target comes into view
+ scrollSpyOnce?: boolean; // run only once
+ onCompleteCallback?: () => any; // gets called when animation completes
+ plugin?: CountUpPlugin; // for alternate animations
+}
+
+export declare interface CountUpPlugin {
+ render(elem: HTMLElement, formatted: string): void;
+}
+
+// playground: stackblitz.com/edit/countup-typescript
+export class CountUp {
+
+ version = '2.6.0';
+ private defaults: CountUpOptions = {
+ startVal: 0,
+ decimalPlaces: 0,
+ duration: 2,
+ useEasing: true,
+ useGrouping: true,
+ useIndianSeparators: false,
+ smartEasingThreshold: 999,
+ smartEasingAmount: 333,
+ separator: ',',
+ decimal: '.',
+ prefix: '',
+ suffix: '',
+ enableScrollSpy: false,
+ scrollSpyDelay: 200,
+ scrollSpyOnce: false,
+ };
+ private rAF: any;
+ private startTime: number;
+ private remaining: number;
+ private finalEndVal: number = null; // for smart easing
+ private useEasing = true;
+ private countDown = false;
+ el: HTMLElement | HTMLInputElement;
+ formattingFn: (num: number) => string;
+ easingFn?: (t: number, b: number, c: number, d: number) => number;
+ error = '';
+ startVal = 0;
+ duration: number;
+ paused = true;
+ frameVal: number;
+ once = false;
+
+ constructor(
+ target: string | HTMLElement | HTMLInputElement,
+ private endVal: number,
+ public options?: CountUpOptions
+ ) {
+ this.options = {
+ ...this.defaults,
+ ...options
+ };
+ this.formattingFn = (this.options.formattingFn) ?
+ this.options.formattingFn : this.formatNumber;
+ this.easingFn = (this.options.easingFn) ?
+ this.options.easingFn : this.easeOutExpo;
+
+ this.startVal = this.validateValue(this.options.startVal);
+ this.frameVal = this.startVal;
+ this.endVal = this.validateValue(endVal);
+ this.options.decimalPlaces = Math.max(0 || this.options.decimalPlaces);
+ this.resetDuration();
+ this.options.separator = String(this.options.separator);
+ this.useEasing = this.options.useEasing;
+ if (this.options.separator === '') {
+ this.options.useGrouping = false;
+ }
+ this.el = (typeof target === 'string') ? document.getElementById(target) : target;
+ if (this.el) {
+ this.printValue(this.startVal);
+ } else {
+ this.error = '[CountUp] target is null or undefined';
+ }
+
+ // scroll spy
+ if (typeof window !== 'undefined' && this.options.enableScrollSpy) {
+ if (!this.error) {
+ // set up global array of onscroll functions to handle multiple instances
+ window['onScrollFns'] = window['onScrollFns'] || [];
+ window['onScrollFns'].push(() => this.handleScroll(this));
+ window.onscroll = () => {
+ window['onScrollFns'].forEach((fn) => fn());
+ };
+ this.handleScroll(this);
+ } else {
+ console.error(this.error, target);
+ }
+ }
+ }
+
+ handleScroll(self: CountUp): void {
+ if (!self || !window || self.once) return;
+ const bottomOfScroll = window.innerHeight + window.scrollY;
+ const rect = self.el.getBoundingClientRect();
+ const topOfEl = rect.top + window.pageYOffset
+ const bottomOfEl = rect.top + rect.height + window.pageYOffset;
+ if (bottomOfEl < bottomOfScroll && bottomOfEl > window.scrollY && self.paused) {
+ // in view
+ self.paused = false;
+ setTimeout(() => self.start(), self.options.scrollSpyDelay);
+ if (self.options.scrollSpyOnce)
+ self.once = true;
+ } else if (
+ (window.scrollY > bottomOfEl || topOfEl > bottomOfScroll) &&
+ !self.paused
+ ) {
+ // out of view
+ self.reset();
+ }
+ }
+
+ /**
+ * Smart easing works by breaking the animation into 2 parts, the second part being the
+ * smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
+ * by disabling easing for the first part and enabling it on the second part. It is used if
+ * usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
+ */
+ private determineDirectionAndSmartEasing(): void {
+ const end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
+ this.countDown = (this.startVal > end);
+ const animateAmount = end - this.startVal;
+ if (Math.abs(animateAmount) > this.options.smartEasingThreshold && this.options.useEasing) {
+ this.finalEndVal = end;
+ const up = (this.countDown) ? 1 : -1;
+ this.endVal = end + (up * this.options.smartEasingAmount);
+ this.duration = this.duration / 2;
+ } else {
+ this.endVal = end;
+ this.finalEndVal = null;
+ }
+ if (this.finalEndVal !== null) {
+ // setting finalEndVal indicates smart easing
+ this.useEasing = false;
+ } else {
+ this.useEasing = this.options.useEasing;
+ }
+ }
+
+ // start animation
+ start(callback?: (args?: any) => any): void {
+ if (this.error) {
+ return;
+ }
+ if (callback) {
+ this.options.onCompleteCallback = callback;
+ }
+ if (this.duration > 0) {
+ this.determineDirectionAndSmartEasing();
+ this.paused = false;
+ this.rAF = requestAnimationFrame(this.count);
+ } else {
+ this.printValue(this.endVal);
+ }
+ }
+
+ // pause/resume animation
+ pauseResume(): void {
+ if (!this.paused) {
+ cancelAnimationFrame(this.rAF);
+ } else {
+ this.startTime = null;
+ this.duration = this.remaining;
+ this.startVal = this.frameVal;
+ this.determineDirectionAndSmartEasing();
+ this.rAF = requestAnimationFrame(this.count);
+ }
+ this.paused = !this.paused;
+ }
+
+ // reset to startVal so animation can be run again
+ reset(): void {
+ cancelAnimationFrame(this.rAF);
+ this.paused = true;
+ this.resetDuration();
+ this.startVal = this.validateValue(this.options.startVal);
+ this.frameVal = this.startVal;
+ this.printValue(this.startVal);
+ }
+
+ // pass a new endVal and start animation
+ update(newEndVal: string | number): void {
+ cancelAnimationFrame(this.rAF);
+ this.startTime = null;
+ this.endVal = this.validateValue(newEndVal);
+ if (this.endVal === this.frameVal) {
+ return;
+ }
+ this.startVal = this.frameVal;
+ if (this.finalEndVal == null) {
+ this.resetDuration();
+ }
+ this.finalEndVal = null;
+ this.determineDirectionAndSmartEasing();
+ this.rAF = requestAnimationFrame(this.count);
+ }
+
+ count = (timestamp: number): void => {
+ if (!this.startTime) { this.startTime = timestamp; }
+
+ const progress = timestamp - this.startTime;
+ this.remaining = this.duration - progress;
+
+ // to ease or not to ease
+ if (this.useEasing) {
+ if (this.countDown) {
+ this.frameVal = this.startVal - this.easingFn(progress, 0, this.startVal - this.endVal, this.duration);
+ } else {
+ this.frameVal = this.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration);
+ }
+ } else {
+ this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration);
+ }
+
+ // don't go past endVal since progress can exceed duration in the last frame
+ const wentPast = this.countDown ? this.frameVal < this.endVal : this.frameVal > this.endVal;
+ this.frameVal = wentPast ? this.endVal : this.frameVal;
+
+ // decimal
+ this.frameVal = Number(this.frameVal.toFixed(this.options.decimalPlaces));
+
+ // format and print value
+ this.printValue(this.frameVal);
+
+ // whether to continue
+ if (progress < this.duration) {
+ this.rAF = requestAnimationFrame(this.count);
+ } else if (this.finalEndVal !== null) {
+ // smart easing
+ this.update(this.finalEndVal);
+ } else {
+ if (this.options.onCompleteCallback) {
+ this.options.onCompleteCallback();
+ }
+ }
+ }
+
+ printValue(val: number): void {
+ if (!this.el) return;
+ const result = this.formattingFn(val);
+ if (this.options.plugin?.render) {
+ this.options.plugin.render(this.el, result);
+ return;
+ }
+ if (this.el.tagName === 'INPUT') {
+ const input = this.el as HTMLInputElement;
+ input.value = result;
+ } else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
+ this.el.textContent = result;
+ } else {
+ this.el.innerHTML = result;
+ }
+ }
+
+ ensureNumber(n: any): boolean {
+ return (typeof n === 'number' && !isNaN(n));
+ }
+
+ validateValue(value: string | number): number {
+ const newValue = Number(value);
+ if (!this.ensureNumber(newValue)) {
+ this.error = `[CountUp] invalid start or end value: ${value}`;
+ return null;
+ } else {
+ return newValue;
+ }
+ }
+
+ private resetDuration(): void {
+ this.startTime = null;
+ this.duration = Number(this.options.duration) * 1000;
+ this.remaining = this.duration;
+ }
+
+ // default format and easing functions
+
+ formatNumber = (num: number): string => {
+ const neg = (num < 0) ? '-' : '';
+ let result: string, x1: string, x2: string, x3: string;
+ result = Math.abs(num).toFixed(this.options.decimalPlaces);
+ result += '';
+ const x = result.split('.');
+ x1 = x[0];
+ x2 = x.length > 1 ? this.options.decimal + x[1] : '';
+ if (this.options.useGrouping) {
+ x3 = '';
+ let factor = 3, j = 0;
+ for (let i = 0, len = x1.length; i < len; ++i) {
+ if (this.options.useIndianSeparators && i === 4) {
+ factor = 2;
+ j = 1;
+ }
+ if (i !== 0 && (j % factor) === 0) {
+ x3 = this.options.separator + x3;
+ }
+ j++;
+ x3 = x1[len - i - 1] + x3;
+ }
+ x1 = x3;
+ }
+ // optional numeral substitution
+ if (this.options.numerals && this.options.numerals.length) {
+ x1 = x1.replace(/[0-9]/g, (w) => this.options.numerals[+w]);
+ x2 = x2.replace(/[0-9]/g, (w) => this.options.numerals[+w]);
+ }
+ return neg + this.options.prefix + x1 + x2 + this.options.suffix;
+ }
+
+ // t: current time, b: beginning value, c: change in value, d: duration
+ easeOutExpo = (t: number, b: number, c: number, d: number): number =>
+ c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+
+}
diff --git a/node_modules/countup.js/tsconfig.json b/node_modules/countup.js/tsconfig.json
new file mode 100644
index 0000000..47f932c
--- /dev/null
+++ b/node_modules/countup.js/tsconfig.json
@@ -0,0 +1,19 @@
+{
+ "compilerOptions": {
+ "lib": ["es2017", "dom"],
+ "module": "esnext",
+ "moduleResolution": "node",
+ "declaration": true,
+ "outDir": "dist",
+ "target": "es5",
+ "pretty": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ },
+ "compileOnSave": true,
+ "include": ["src"],
+ "exclude": [
+ "node_modules",
+ "**/*.spec.ts"
+ ]
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..25a00fd
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,17 @@
+{
+ "name": "CpuHigherLowerGame",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "dependencies": {
+ "countup.js": "^2.6.0"
+ }
+ },
+ "node_modules/countup.js": {
+ "version": "2.6.0",
+ "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-2.6.0.tgz",
+ "integrity": "sha512-GeORCrCcaFUHP3RNf0/dWK+XQX+fsdtrMO31mNvsbKXNNG+DMTcgZ4dWpIG9BnOS8t5+iJbaRXgaaG9oLs0N4g=="
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..efe0d15
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "countup.js": "^2.6.0"
+ }
+}