From 89cb9cf8d7d13626ffefbb35d0af88a5128dea12 Mon Sep 17 00:00:00 2001 From: Domingo Dirutigliano Date: Wed, 23 Oct 2024 20:23:22 +0200 Subject: [PATCH] add: wheel of fortune improves --- .astro/settings.json | 2 +- package-lock.json | 311 ++++++++++++++++++++++++++++ package.json | 4 +- src/react/pages/app/LeaderBoard.tsx | 53 +++-- src/react/pages/app/QRScan.tsx | 4 +- src/react/utils/index.ts | 2 +- 6 files changed, 353 insertions(+), 23 deletions(-) diff --git a/.astro/settings.json b/.astro/settings.json index 7659deb..c2dd080 100644 --- a/.astro/settings.json +++ b/.astro/settings.json @@ -1,5 +1,5 @@ { "_variables": { - "lastUpdateCheck": 1728564110579 + "lastUpdateCheck": 1729703777494 } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c6aa0b3..f9b9d1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "astro-robots-txt": "^1.0.0", "firebase": "^10.13.1", "react": "^18.2.0", + "react-confetti-explosion": "^2.1.2", "react-daisyui": "^5.0.4", "react-dom": "^18.2.0", "react-icons": "^5.3.0", @@ -591,6 +592,21 @@ "tslib": "^2.4.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "0.7.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==", + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -3681,6 +3697,17 @@ "node": ">= 8" } }, + "node_modules/css-jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.10.0.tgz", + "integrity": "sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "^10.10.0", + "jss-preset-default": "^10.10.0" + } + }, "node_modules/css-selector-tokenizer": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", @@ -3690,6 +3717,16 @@ "fastparse": "^1.1.2" } }, + "node_modules/css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -4759,6 +4796,15 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/html-escaper": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", @@ -4811,6 +4857,12 @@ "node": ">= 6" } }, + "node_modules/hyphenate-style-name": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz", + "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==", + "license": "BSD-3-Clause" + }, "node_modules/idb": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", @@ -4990,6 +5042,12 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==", + "license": "MIT" + }, "node_modules/is-inside-container": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz", @@ -5135,6 +5193,172 @@ "node": ">=6" } }, + "node_modules/jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz", + "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/jss" + } + }, + "node_modules/jss-plugin-camel-case": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz", + "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-compose": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.10.0.tgz", + "integrity": "sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-default-unit": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz", + "integrity": "sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-expand": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.10.0.tgz", + "integrity": "sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-extend": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz", + "integrity": "sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-global": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz", + "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-nested": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz", + "integrity": "sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-props-sort": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz", + "integrity": "sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0" + } + }, + "node_modules/jss-plugin-rule-value-function": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz", + "integrity": "sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-rule-value-observable": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.10.0.tgz", + "integrity": "sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "symbol-observable": "^1.2.0" + } + }, + "node_modules/jss-plugin-template": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.10.0.tgz", + "integrity": "sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "tiny-warning": "^1.0.2" + } + }, + "node_modules/jss-plugin-vendor-prefixer": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz", + "integrity": "sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.10.0" + } + }, + "node_modules/jss-preset-default": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.10.0.tgz", + "integrity": "sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "jss": "10.10.0", + "jss-plugin-camel-case": "10.10.0", + "jss-plugin-compose": "10.10.0", + "jss-plugin-default-unit": "10.10.0", + "jss-plugin-expand": "10.10.0", + "jss-plugin-extend": "10.10.0", + "jss-plugin-global": "10.10.0", + "jss-plugin-nested": "10.10.0", + "jss-plugin-props-sort": "10.10.0", + "jss-plugin-rule-value-function": "10.10.0", + "jss-plugin-rule-value-observable": "10.10.0", + "jss-plugin-template": "10.10.0", + "jss-plugin-vendor-prefixer": "10.10.0" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -5228,6 +5452,12 @@ "node": ">=8" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, "node_modules/lodash.camelcase": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", @@ -7202,6 +7432,20 @@ "node": ">=0.10.0" } }, + "node_modules/react-confetti-explosion": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-confetti-explosion/-/react-confetti-explosion-2.1.2.tgz", + "integrity": "sha512-4UzDFBajAGXmF9TSJoRMO2QOBCIXc66idTxH8l7Mkul48HLGtk+tMzK9HYDYsy7Zmw5sEGchi2fbn4AJUuLrZw==", + "license": "MIT", + "dependencies": { + "lodash": "^4.17.21", + "react-jss": "^10.9.2" + }, + "peerDependencies": { + "react": "^18.x", + "react-dom": "^18.x" + } + }, "node_modules/react-daisyui": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/react-daisyui/-/react-daisyui-5.0.4.tgz", @@ -7213,6 +7457,12 @@ "tailwindcss": ">=3.2.7" } }, + "node_modules/react-display-name": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz", + "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg==", + "license": "MIT" + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -7238,6 +7488,28 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-jss": { + "version": "10.10.0", + "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.10.0.tgz", + "integrity": "sha512-WLiq84UYWqNBF6579/uprcIUnM1TSywYq6AIjKTTTG5ziJl9Uy+pwuvpN3apuyVwflMbD60PraeTKT7uWH9XEQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.3.1", + "@emotion/is-prop-valid": "^0.7.3", + "css-jss": "10.10.0", + "hoist-non-react-statics": "^3.2.0", + "is-in-browser": "^1.1.3", + "jss": "10.10.0", + "jss-preset-default": "10.10.0", + "prop-types": "^15.6.0", + "shallow-equal": "^1.2.0", + "theming": "^3.3.0", + "tiny-warning": "^1.0.2" + }, + "peerDependencies": { + "react": ">=16.8.6" + } + }, "node_modules/react-number-format": { "version": "5.4.2", "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.2.tgz", @@ -7893,6 +8165,12 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==", + "license": "MIT" + }, "node_modules/sharp": { "version": "0.33.5", "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz", @@ -8294,6 +8572,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tabbable": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", @@ -8375,6 +8662,24 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/theming": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz", + "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==", + "license": "MIT", + "dependencies": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.8", + "react-display-name": "^0.2.4", + "tiny-warning": "^1.0.2" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": ">=16.3" + } + }, "node_modules/thenify": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", @@ -8394,6 +8699,12 @@ "node": ">=0.8" } }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", + "license": "MIT" + }, "node_modules/tinyexec": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz", diff --git a/package.json b/package.json index 4cef035..edc5782 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "astro-robots-txt": "^1.0.0", "firebase": "^10.13.1", "react": "^18.2.0", + "react-confetti-explosion": "^2.1.2", "react-daisyui": "^5.0.4", "react-dom": "^18.2.0", "react-icons": "^5.3.0", @@ -43,7 +44,6 @@ "devDependencies": { "daisyui": "^4.12.10", "prettier": "^3.3.3", - "prettier-plugin-astro": "^0.14.1" + "prettier-plugin-astro": "^0.14.1" } } - diff --git a/src/react/pages/app/LeaderBoard.tsx b/src/react/pages/app/LeaderBoard.tsx index a38dde6..92e63d5 100644 --- a/src/react/pages/app/LeaderBoard.tsx +++ b/src/react/pages/app/LeaderBoard.tsx @@ -1,15 +1,18 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState, type CSSProperties } from "react"; import { useAppRouter } from "../../utils/store"; import { Button, Checkbox } from "react-daisyui"; import { IoMdArrowRoundBack } from "react-icons/io"; -import { capitalizeFirstLetter, colorConverter, shuffle, useLeaderboard, type LeaderBoardUser } from "../../utils"; +import { capitalizeFirstLetter, colorConverter, COLORS_LIST, shuffle, useLeaderboard, type LeaderBoardUser } from "../../utils"; import { TitleBar } from "../../components/TitleBar"; -import { Box, MultiSelect, NumberInput, Button as MantineButton, Modal, Chip, Container } from "@mantine/core"; +import { Box, MultiSelect, NumberInput, Button as MantineButton, Modal, Chip, Container, Space } from "@mantine/core"; +import ConfettiExplosion from 'react-confetti-explosion'; +import { PiNavigationArrowDuotone } from "react-icons/pi"; + +const UserRow = ({ user, pos, style }: { user: LeaderBoardUser, pos?: number, style?: CSSProperties }) => { -const UserRow = ({ user, pos }: { user: LeaderBoardUser, pos?: number }) => { return
{ const [wheelTrigger, setWheelTrigger] = useState(false) const [lastSpeed, setLastSpeed] = useState(0) + const selectedQuizNum = Math.floor(spinningArray.length/2) + useEffect(() => { if (wheelStatus == "spinning") { const copyOfArray = filteredAndSortedUsers.copyWithin(0,filteredAndSortedUsers.length) - setSpinningArray(shuffle(copyOfArray).splice(0, 6)) + setSpinningArray(shuffle(copyOfArray).splice(0, 5)) setLastSpeed(0) setWheelTrigger(!wheelTrigger) } @@ -59,13 +64,17 @@ export const LeaderBoard = () => { useEffect(() => { if (!showWheel || wheelStatus != "spinning") return - setLastSpeed(lastSpeed + (lastSpeed < 150 ? 2 : lastSpeed < 300 ? 5 : lastSpeed < 500 ? 10 : 30)) - const nextElement = shuffle(filteredAndSortedUsers.copyWithin(0,filteredAndSortedUsers.length))[0] - if (lastSpeed >= 800) { + setLastSpeed(lastSpeed + (lastSpeed < 80 ? 2 : lastSpeed < 150 ? 8 : lastSpeed < 300 ? 20 : 30)) + if (lastSpeed >= 500) { setWheelStatus("stopped") - setSpinningArray([nextElement]) return } + let nextElement:LeaderBoardUser + while (true){ + nextElement = shuffle(filteredAndSortedUsers.copyWithin(0,filteredAndSortedUsers.length))[0] + const elementToDelete = spinningArray[spinningArray.length-1] + if (nextElement == elementToDelete || !spinningArray.includes(nextElement)) break + } setSpinningArray((prev) => [nextElement, ...prev.splice(0, prev.length-1)]) setTimeout(()=>setWheelTrigger(!wheelTrigger), lastSpeed) }, [wheelTrigger]) @@ -174,7 +183,7 @@ export const LeaderBoard = () => { {leaderBoard == null &&
Loading...
} { selectedLeaderboard == "users"? filteredAndSortedUsers.map((user, i) => ( - + )) : selectedLeaderboard == "groups" ? sortedGroups.map((group, i) => { return
@@ -193,22 +202,32 @@ export const LeaderBoard = () => {
setShowWheel(false)} fullScreen className="flex justify-center items-center h-full">

Wheel of Fortune 🍀

+ + {wheelStatus == "stopped" && colorConverter(ele))} zIndex={10000} width={4000} height={"350vh"}/>} + - {usersToShow != -1 && {`Top ${usersToShow} users`}} - {groupFilter.length > 0 && {`Groups: ${groupFilter.join(", ")}`}} + {usersToShow != -1 && {`Top ${usersToShow} users`}} + {groupFilter.length > 0 && {`Groups: ${groupFilter.map(ele => capitalizeFirstLetter(ele)).join(", ")}`}} { wheelStatus != "not-started" && {wheelStatus == "spinning" &&

Spinning...

} {wheelStatus == "stopped" &&

🎉 The winner is ...

} {spinningArray.map((user, i) => ( - + + + {i == selectedQuizNum && <> + + + } + + + ))}
} - - {wheelStatus != "spinning" && setWheelStatus("spinning")}> + {wheelStatus != "spinning" && setWheelStatus("spinning")} disabled={filteredAndSortedUsers.length == 0}> {wheelStatus == "stopped"? "Spin the wheel again": "Spin the wheel"} } diff --git a/src/react/pages/app/QRScan.tsx b/src/react/pages/app/QRScan.tsx index d5dd30f..f1c7ce6 100644 --- a/src/react/pages/app/QRScan.tsx +++ b/src/react/pages/app/QRScan.tsx @@ -2,7 +2,6 @@ import { IoMdArrowRoundBack } from "react-icons/io" import { TitleBar } from "../../components/TitleBar" import { Button, Input, Loading } from "react-daisyui" import { useAppRouter } from "../../utils/store" -import { FaPlus } from "react-icons/fa" import { Scanner } from '@yudiel/react-qr-scanner'; import { FaCamera } from "react-icons/fa"; import { FiCameraOff } from "react-icons/fi" @@ -14,6 +13,7 @@ import { addPointsToUsers, colorConverter } from "../../utils" import { FaTrashAlt } from "react-icons/fa"; import { notifications } from "@mantine/notifications" import { useQueryClient } from "@tanstack/react-query" +import { FaCheck } from "react-icons/fa"; const UserRowInfo = ({ uid, removeUser }: { uid: string, removeUser: (uid: string) => void }) => { const user = useUserProfile(uid) @@ -135,7 +135,7 @@ export const QRScan = () => { } }} > - + ]} /> diff --git a/src/react/utils/index.ts b/src/react/utils/index.ts index 1b55bf6..8e27e94 100644 --- a/src/react/utils/index.ts +++ b/src/react/utils/index.ts @@ -168,7 +168,7 @@ export const useLeaderboard = () => { return leaderboardData } - +export const COLORS_LIST = ["green", "blue", "red", "yellow"] export const colorConverter = (color: string) => { if (color === "green") { return "#34A853"