monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-16 02:26:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add confetti animation (#3607) riyuzenn

Browse source 
* 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 <jack@monkeytype.com>
This commit is contained in:
riyu 2022-09-28 06:15:02 +08:00 • committed by GitHub
parent d98ec08ca5
commit 0c3e3549b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/package-lock.json generated
View file

@ -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",

2
frontend/package.json
View file

@ -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",

34
frontend/src/ts/test/result.ts
View file

@ -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<MonkeyTypes.Mode>;
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", "");

6
frontend/src/ts/test/test-logic.ts
View file

@ -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",