From 0c3e3549b0c0c5a25f32dddba2ec2ae0073ecc30 Mon Sep 17 00:00:00 2001 From: riyu <66673988+riyuzenn@users.noreply.github.com> Date: Wed, 28 Sep 2022 06:15:02 +0800 Subject: [PATCH] Add confetti animation (#3607) riyuzenn * include confetti sound * include confetti-canvas * include canvas-confetti * include confetti sound * create confetti func * import confetti sound * add confetti * add confetti to daily leaderboard * change confetti color * revert to main color * save exact version * updated confetti parameters added one more color made duration shorter more particles higher spread * removed sound * only showing confetti if user already has a pb (doesn't show on the first pb) * regenerated package lock * not showing confetti if timer is slow Co-authored-by: Miodec --- frontend/package-lock.json | 36 +++++++++++++++++++++++++++--- frontend/package.json | 2 ++ frontend/src/ts/test/result.ts | 34 ++++++++++++++++++++++++++++ frontend/src/ts/test/test-logic.ts | 6 +++++ 4 files changed, 75 insertions(+), 3 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8616541c3..2040d2fe1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,8 +9,8 @@ "version": "1.14.3", "license": "GPL-3.0", "dependencies": { - "@types/throttle-debounce": "2.1.0", "axios": "0.21.4", + "canvas-confetti": "1.5.1", "chart.js": "3.7.1", "chartjs-adapter-date-fns": "2.0.0", "chartjs-plugin-annotation": "1.4.0", @@ -29,6 +29,7 @@ "throttle-debounce": "3.0.1" }, "devDependencies": { + "@types/canvas-confetti": "1.4.3", "@types/chartjs-plugin-trendline": "1.0.1", "@types/damerau-levenshtein": "1.0.0", "@types/grecaptcha": "3.0.4", @@ -36,6 +37,7 @@ "@types/jquery": "3.5.14", "@types/object-hash": "2.2.1", "@types/select2": "4.0.55", + "@types/throttle-debounce": "2.1.0", "@types/tinycolor2": "1.4.3", "buffer": "6.0.3", "circular-dependency-plugin": "5.2.2", @@ -951,6 +953,12 @@ "@types/node": "*" } }, + "node_modules/@types/canvas-confetti": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.4.3.tgz", + "integrity": "sha512-UwFPTsW1ZwVyo/ETp4hPSikSD7yl2V42E3VWBF5P/0+DHO4iajyceWv7hfNdZ2AX5tkZnuViiBWOqyCPohU2FQ==", + "dev": true + }, "node_modules/@types/chartjs-plugin-trendline": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/chartjs-plugin-trendline/-/chartjs-plugin-trendline-1.0.1.tgz", @@ -1158,7 +1166,8 @@ "node_modules/@types/throttle-debounce": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz", - "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==" + "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==", + "dev": true }, "node_modules/@types/tinycolor2": { "version": "1.4.3", @@ -2548,6 +2557,15 @@ "url": "https://opencollective.com/browserslist" } }, + "node_modules/canvas-confetti": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz", + "integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==", + "funding": { + "type": "donate", + "url": "https://www.paypal.me/kirilvatev" + } + }, "node_modules/centra": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/centra/-/centra-1.0.1.tgz", @@ -15157,6 +15175,12 @@ "@types/node": "*" } }, + "@types/canvas-confetti": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@types/canvas-confetti/-/canvas-confetti-1.4.3.tgz", + "integrity": "sha512-UwFPTsW1ZwVyo/ETp4hPSikSD7yl2V42E3VWBF5P/0+DHO4iajyceWv7hfNdZ2AX5tkZnuViiBWOqyCPohU2FQ==", + "dev": true + }, "@types/chartjs-plugin-trendline": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/chartjs-plugin-trendline/-/chartjs-plugin-trendline-1.0.1.tgz", @@ -15364,7 +15388,8 @@ "@types/throttle-debounce": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz", - "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==" + "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==", + "dev": true }, "@types/tinycolor2": { "version": "1.4.3", @@ -16453,6 +16478,11 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz", "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==" }, + "canvas-confetti": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.5.1.tgz", + "integrity": "sha512-Ncz+oZJP6OvY7ti4E1slxVlyAV/3g7H7oQtcCDXgwGgARxPnwYY9PW5Oe+I8uvspYNtuHviAdgA0LfcKFWJfpg==" + }, "centra": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/centra/-/centra-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 633a75ff8..a00b3005a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "npm": "8.1.2" }, "devDependencies": { + "@types/canvas-confetti": "1.4.3", "@types/chartjs-plugin-trendline": "1.0.1", "@types/damerau-levenshtein": "1.0.0", "@types/grecaptcha": "3.0.4", @@ -55,6 +56,7 @@ }, "dependencies": { "axios": "0.21.4", + "canvas-confetti": "1.5.1", "chart.js": "3.7.1", "chartjs-adapter-date-fns": "2.0.0", "chartjs-plugin-annotation": "1.4.0", diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts index 84c51e0bc..286d3c9fa 100644 --- a/frontend/src/ts/test/result.ts +++ b/frontend/src/ts/test/result.ts @@ -18,11 +18,13 @@ import * as AdController from "../controllers/ad-controller"; import * as TestConfig from "./test-config"; import { Chart } from "chart.js"; import { Auth } from "../firebase"; +import * as SlowTimer from "../states/slow-timer"; // eslint-disable-next-line no-duplicate-imports -- need to ignore because eslint doesnt know what import type is import type { PluginChartOptions, ScaleChartOptions } from "chart.js"; import type { AnnotationOptions } from "chartjs-plugin-annotation"; import Ape from "../ape"; +import confetti from "canvas-confetti"; let result: MonkeyTypes.Result; let maxChartVal: number; @@ -343,6 +345,38 @@ export function showCrown(): void { PbCrown.show(); } +export function showConfetti(): void { + if (SlowTimer.get()) return; + const style = getComputedStyle(document.body); + const colors = [ + style.getPropertyValue("--main-color"), + style.getPropertyValue("--text-color"), + style.getPropertyValue("--sub-color"), + ]; + const duration = Date.now() + 125; + + (function f(): void { + confetti({ + particleCount: 5, + angle: 60, + spread: 75, + origin: { x: 0 }, + colors: colors, + }); + confetti({ + particleCount: 5, + angle: 120, + spread: 75, + origin: { x: 1 }, + colors: colors, + }); + + if (Date.now() < duration) { + requestAnimationFrame(f); + } + })(); +} + export function hideCrown(): void { PbCrown.hide(); $("#result .stats .wpm .crown").attr("aria-label", ""); diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts index 5b766129e..99988e585 100644 --- a/frontend/src/ts/test/test-logic.ts +++ b/frontend/src/ts/test/test-logic.ts @@ -1738,6 +1738,11 @@ async function saveResult( if (response?.data?.isPb) { //new pb + if ( + DB.getSnapshot()?.personalBests?.[Config.mode]?.[completedEvent.mode2] + ) { + Result.showConfetti(); + } Result.showCrown(); Result.updateCrown(); DB.saveLocalPB( @@ -1768,6 +1773,7 @@ async function saveResult( if (!response?.data?.dailyLeaderboardRank) { $("#result .stats .dailyLeaderboard").addClass("hidden"); } else { + Result.showConfetti(); $("#result .stats .dailyLeaderboard") .css({ maxWidth: "13rem",