} }) => {
21 | setName(e.target.value);
22 | window.history.pushState({}, "", `?name=${e.target.value}`);
23 | },
24 | [setName]
25 | );
26 |
27 | useEffect(() => {
28 | const queryString = window.location.search;
29 | const urlParams = new URLSearchParams(queryString);
30 | const nameParam = urlParams.get("name");
31 | if (nameParam !== null) {
32 | setName(nameParam);
33 | }
34 | }, [setName]);
35 |
36 | return (
37 |
49 | 0 ? "block" : "none",
69 | }
70 | : {}),
71 | },
72 | value: name,
73 | onChange,
74 | disabled: shareMode || playing || run,
75 | readOnly: shareMode || playing || run,
76 | spellCheck: false,
77 | autoFocus: true,
78 | placeholder: "Enter your name",
79 | ...rest,
80 | }}
81 | />
82 |
83 | );
84 | }
85 | );
86 |
--------------------------------------------------------------------------------
/src/assets/fonts/Montserrat/README.txt:
--------------------------------------------------------------------------------
1 | Montserrat Variable Font
2 | ========================
3 |
4 | This download contains Montserrat as both variable fonts and static fonts.
5 |
6 | Montserrat is a variable font with this axis:
7 | wght
8 |
9 | This means all the styles are contained in these files:
10 | Montserrat-VariableFont_wght.ttf
11 | Montserrat-Italic-VariableFont_wght.ttf
12 |
13 | If your app fully supports variable fonts, you can now pick intermediate styles
14 | that aren’t available as static fonts. Not all apps support variable fonts, and
15 | in those cases you can use the static font files for Montserrat:
16 | static/Montserrat-Thin.ttf
17 | static/Montserrat-ExtraLight.ttf
18 | static/Montserrat-Light.ttf
19 | static/Montserrat-Regular.ttf
20 | static/Montserrat-Medium.ttf
21 | static/Montserrat-SemiBold.ttf
22 | static/Montserrat-Bold.ttf
23 | static/Montserrat-ExtraBold.ttf
24 | static/Montserrat-Black.ttf
25 | static/Montserrat-ThinItalic.ttf
26 | static/Montserrat-ExtraLightItalic.ttf
27 | static/Montserrat-LightItalic.ttf
28 | static/Montserrat-Italic.ttf
29 | static/Montserrat-MediumItalic.ttf
30 | static/Montserrat-SemiBoldItalic.ttf
31 | static/Montserrat-BoldItalic.ttf
32 | static/Montserrat-ExtraBoldItalic.ttf
33 | static/Montserrat-BlackItalic.ttf
34 |
35 | Get started
36 | -----------
37 |
38 | 1. Install the font files you want to use
39 |
40 | 2. Use your app's font picker to view the font family and all the
41 | available styles
42 |
43 | Learn more about variable fonts
44 | -------------------------------
45 |
46 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
47 | https://variablefonts.typenetwork.com
48 | https://medium.com/variable-fonts
49 |
50 | In desktop apps
51 |
52 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc
53 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
54 |
55 | Online
56 |
57 | https://developers.google.com/fonts/docs/getting_started
58 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
59 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
60 |
61 | Installing fonts
62 |
63 | MacOS: https://support.apple.com/en-us/HT201749
64 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
65 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
66 |
67 | Android Apps
68 |
69 | https://developers.google.com/fonts/docs/android
70 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
71 |
72 | License
73 | -------
74 | Please read the full license text (OFL.txt) to understand the permissions,
75 | restrictions and requirements for usage, redistribution, and modification.
76 |
77 | You can use them in your products & projects – print or digital,
78 | commercial or otherwise.
79 |
80 | This isn't legal advice, please consider consulting a lawyer and see the full
81 | license for all details.
82 |
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Deploy and Tag Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | tags:
8 | - "*"
9 |
10 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
11 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
12 | concurrency:
13 | group: "deloy"
14 | cancel-in-progress: false
15 |
16 | jobs:
17 | update_version_build_and_deploy_production:
18 | if: startsWith(github.ref, 'refs/tags/')
19 | runs-on: ubuntu-latest
20 | steps:
21 | - name: Checkout repository
22 | uses: actions/checkout@v4
23 |
24 | - name: Reset Git working directory
25 | run: git reset --hard
26 |
27 | - name: Detect package manager
28 | id: detect-package-manager
29 | run: |
30 | if [ -f "${{ github.workspace }}/yarn.lock" ]; then
31 | echo "manager=yarn" >> $GITHUB_OUTPUT
32 | echo "command=install" >> $GITHUB_OUTPUT
33 | echo "runner=yarn" >> $GITHUB_OUTPUT
34 | exit 0
35 | elif [ -f "${{ github.workspace }}/package.json" ]; then
36 | echo "manager=npm" >> $GITHUB_OUTPUT
37 | echo "command=ci" >> $GITHUB_OUTPUT
38 | echo "runner=npx --no-install" >> $GITHUB_OUTPUT
39 | exit 0
40 | else
41 | echo "Unable to determine package manager"
42 | exit 1
43 | fi
44 |
45 | - name: Setup Node
46 | uses: actions/setup-node@v4
47 | with:
48 | node-version: "20"
49 |
50 | - name: Update Version in package.json
51 | id: update_version
52 | if: startsWith(github.ref, 'refs/tags/')
53 | run: |
54 | new_version=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,')
55 | npm version $new_version --no-git-tag-version
56 | echo "Updated version to $new_version in package.json"
57 | echo "new_version=${new_version}" >> $GITHUB_ENV
58 |
59 | - name: Commit Version Change
60 | if: startsWith(github.ref, 'refs/tags/')
61 | run: |
62 | git config --local user.email "action@github.com"
63 | git config --local user.name "GitHub Action"
64 | git add package.json
65 | git commit -m "Update version to ${new_version}"
66 | git push origin HEAD:main
67 |
68 | - name: Restore cache
69 | uses: actions/cache@v4
70 | with:
71 | path: |
72 | .next/cache
73 | # Generate a new cache whenever packages or source files change.
74 | key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
75 | # If source files changed but packages didn't, rebuild from a prior cache.
76 | restore-keys: |
77 | ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
78 |
79 | - name: Install dependencies
80 | run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
81 |
82 | - name: Build
83 | run: ${{ steps.detect-package-manager.outputs.runner }} npx run build
84 |
85 | - name: Deploy to Vercel (Production)
86 | uses: amondnet/vercel-action@v25 #deploy
87 | with:
88 | vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
89 | github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
90 | vercel-args: "--prod" #Optional
91 | vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} #Required
92 | vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} #Required
93 | github-comment: false
--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/CakeActions/index.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from "react/jsx-runtime";
2 | import {
3 | TbPlayerPlayFilled,
4 | TbPlayerPauseFilled,
5 | TbPlayerStopFilled,
6 | TbInfoCircleFilled,
7 | TbFlame,
8 | TbFlameOff,
9 | TbShare3,
10 | } from "react-icons/tb";
11 | import { useCallback } from "react";
12 | import { CopyToClipboard } from "react-copy-to-clipboard";
13 | import { toast } from "react-toastify";
14 |
15 | const buttonStyle = {
16 | color: "#ffffff",
17 | opacity: 0.9,
18 | borderWidth: 0,
19 | display: "flex",
20 | justifyContent: "center",
21 | alignItems: "center",
22 | backgroundColor: "#000000",
23 | };
24 |
25 | export const CakeActions = ({
26 | run,
27 | start,
28 | pause,
29 | stop,
30 | toggleLightCandle,
31 | setRun,
32 | playing,
33 | paused,
34 | candleVisible,
35 | }: // eslint-disable-next-line @typescript-eslint/no-explicit-any
36 | any) => {
37 | const guide = useCallback(() => setRun(true), [setRun]);
38 |
39 | const actions = useCallback(() => {
40 | return (
41 |
42 | {!playing || paused ? (
43 |
47 | ) : null}
48 | {playing && !paused ? (
49 |
53 | ) : null}
54 | {playing ? (
55 |
59 | ) : null}
60 |
68 | {!playing ? (
69 |
73 | ) : null}
74 | toast("Copied to clipboard!")}
77 | >
78 |
81 |
82 |
83 | );
84 | }, [
85 | candleVisible,
86 | guide,
87 | pause,
88 | paused,
89 | playing,
90 | start,
91 | stop,
92 | toggleLightCandle,
93 | ]);
94 |
95 | const guideActions = useCallback(() => {
96 | return (
97 |
98 |
102 |
106 |
110 |
119 |
122 |
123 | );
124 | }, [candleVisible, pause, run, start, stop, toggleLightCandle]);
125 |
126 | return (
127 |
138 | {run ? guideActions() : actions()}
139 |
140 | );
141 | };
142 |
--------------------------------------------------------------------------------
/src/assets/fonts/Montserrat/OFL.txt:
--------------------------------------------------------------------------------
1 | Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
2 |
3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
4 | This license is copied below, and is also available with a FAQ at:
5 | https://openfontlicense.org
6 |
7 |
8 | -----------------------------------------------------------
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 |
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded,
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 |
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 |
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 |
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 |
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 |
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 |
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 |
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 |
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 |
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 |
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 |
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 |
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 |
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | // display: flex;
28 | // place-items: center;
29 | min-width: 320px;
30 | height: 100dvh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | button {
39 | border-radius: 8px;
40 | border: 1px solid transparent;
41 | padding: 0.6em 1.2em;
42 | font-size: 1em;
43 | font-weight: 500;
44 | font-family: inherit;
45 | background-color: #1a1a1a;
46 | cursor: pointer;
47 | transition: border-color 0.25s;
48 | }
49 | button:hover {
50 | border-color: #646cff;
51 | }
52 | button:focus,
53 | button:focus-visible {
54 | outline: 4px auto -webkit-focus-ring-color;
55 | }
56 |
57 | @media (prefers-color-scheme: light) {
58 | :root {
59 | color: #213547;
60 | background-color: #ffffff;
61 | }
62 | a:hover {
63 | color: #747bff;
64 | }
65 | button {
66 | background-color: #f9f9f9;
67 | }
68 | }
69 |
70 | $vanilla: #f0e4d0;
71 | $chocolate: #553c13;
72 |
73 | body {
74 | background-color: #333;
75 | }
76 |
77 | @mixin foodColoring($color) {
78 | background-color: $color;
79 | box-shadow:
80 | 0 2px 0px lighten($color, 5%),
81 | 0 4px 0px darken($color, 8.2%),
82 | 0 6px 0px darken($color, 8.4%),
83 | 0 8px 0px darken($color, 8.6%),
84 | 0 10px 0px darken($color, 8.8%),
85 | 0 12px 0px darken($color, 9%),
86 | 0 14px 0px darken($color, 9.2%),
87 | 0 16px 0px darken($color, 9.4%),
88 | 0 18px 0px darken($color, 9.6%),
89 | 0 20px 0px darken($color, 9.8%),
90 | 0 22px 0px darken($color, 10%),
91 | 0 24px 0px darken($color, 10.2%),
92 | 0 26px 0px darken($color, 10.4%),
93 | 0 28px 0px darken($color, 10.6%),
94 | 0 30px 0px darken($color, 10.8%);
95 | }
96 |
97 | .cake {
98 | position: absolute;
99 | width: 250px;
100 | height: 200px;
101 | top: 50%;
102 | left: 50%;
103 | margin-top: -70px;
104 | margin-left: -125px;
105 | }
106 |
107 | .plate {
108 | width: 270px;
109 | height: 110px;
110 | position: absolute;
111 | bottom: -10px;
112 | left: -10px;
113 | background-color: #ccc;
114 | border-radius: 50%;
115 | box-shadow:
116 | 0 2px 0 darken(#ccc, 10%),
117 | 0 4px 0 darken(#ccc, 10%),
118 | 0 5px 40px rgba(black, 0.5);
119 | }
120 |
121 | .cake > * {
122 | position: absolute;
123 | }
124 |
125 | .layer {
126 | position: absolute;
127 | display: block;
128 | width: 250px;
129 | height: 100px;
130 | border-radius: 50%;
131 | @include foodColoring($chocolate);
132 | }
133 |
134 | .layer-top {
135 | top: 0px;
136 | }
137 | .layer-middle {
138 | top: 33px;
139 | }
140 | .layer-bottom {
141 | top: 66px;
142 | }
143 |
144 | .icing {
145 | top: 2px;
146 | left: 5px;
147 | background-color: $vanilla;
148 | width: 240px;
149 | height: 90px;
150 | border-radius: 50%;
151 | &:before {
152 | content: "";
153 | position: absolute;
154 | top: 4px;
155 | right: 5px;
156 | bottom: 6px;
157 | left: 5px;
158 | background-color: lighten($vanilla, 3%);
159 | box-shadow:
160 | 0 0 4px lighten($vanilla, 5%),
161 | 0 0 4px lighten($vanilla, 5%),
162 | 0 0 4px lighten($vanilla, 5%);
163 | border-radius: 50%;
164 | z-index: 1;
165 | }
166 | }
167 |
168 | .drip {
169 | display: block;
170 | width: 50px;
171 | height: 60px;
172 | border-bottom-left-radius: 25px;
173 | border-bottom-right-radius: 25px;
174 | background-color: $vanilla;
175 | }
176 |
177 | .drip1 {
178 | top: 53px;
179 | left: 5px;
180 | transform: skewY(15deg);
181 | height: 48px;
182 | width: 40px;
183 | }
184 |
185 | .drip2 {
186 | top: 69px;
187 | left: 181px;
188 | transform: skewY(-15deg);
189 | }
190 |
191 | .drip3 {
192 | top: 54px;
193 | left: 90px;
194 | width: 80px;
195 | border-bottom-left-radius: 40px;
196 | border-bottom-right-radius: 40px;
197 | }
198 |
199 | .candle {
200 | background-color: #7b020b;
201 | width: 16px;
202 | height: 50px;
203 | border-radius: 8px / 4px;
204 | top: -20px;
205 | left: 50%;
206 | margin-left: -8px;
207 | z-index: 10;
208 | &:before {
209 | content: "";
210 | position: absolute;
211 | top: 0;
212 | left: 0;
213 | width: 16px;
214 | height: 8px;
215 | border-radius: 50%;
216 | background-color: lighten(#7b020b, 10%);
217 | }
218 | }
219 |
220 | .flame {
221 | position: absolute;
222 | background-color: orange;
223 | width: 15px;
224 | height: 35px;
225 | border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
226 | top: -34px;
227 | left: 50%;
228 | margin-left: -7.5px;
229 | z-index: 10;
230 | box-shadow:
231 | 0 0 10px rgba(orange, 0.5),
232 | 0 0 20px rgba(orange, 0.5),
233 | 0 0 60px rgba(orange, 0.5),
234 | 0 0 80px rgba(orange, 0.5);
235 | transform-origin: 50% 90%;
236 | animation: flicker 1s ease-in-out alternate infinite;
237 | }
238 |
239 | @keyframes flicker {
240 | 0% {
241 | transform: skewX(5deg);
242 | box-shadow:
243 | 0 0 10px rgba(orange, 0.2),
244 | 0 0 20px rgba(orange, 0.2),
245 | 0 0 60px rgba(orange, 0.2),
246 | 0 0 80px rgba(orange, 0.2);
247 | }
248 | 25% {
249 | transform: skewX(-5deg);
250 | box-shadow:
251 | 0 0 10px rgba(orange, 0.5),
252 | 0 0 20px rgba(orange, 0.5),
253 | 0 0 60px rgba(orange, 0.5),
254 | 0 0 80px rgba(orange, 0.5);
255 | }
256 | 50% {
257 | transform: skewX(10deg);
258 | box-shadow:
259 | 0 0 10px rgba(orange, 0.3),
260 | 0 0 20px rgba(orange, 0.3),
261 | 0 0 60px rgba(orange, 0.3),
262 | 0 0 80px rgba(orange, 0.3);
263 | }
264 | 75% {
265 | transform: skewX(-10deg);
266 | box-shadow:
267 | 0 0 10px rgba(orange, 0.4),
268 | 0 0 20px rgba(orange, 0.4),
269 | 0 0 60px rgba(orange, 0.4),
270 | 0 0 80px rgba(orange, 0.4);
271 | }
272 | 100% {
273 | transform: skewX(5deg);
274 | box-shadow:
275 | 0 0 10px rgba(orange, 0.5),
276 | 0 0 20px rgba(orange, 0.5),
277 | 0 0 60px rgba(orange, 0.5),
278 | 0 0 80px rgba(orange, 0.5);
279 | }
280 | }
281 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | // import reactLogo from "./assets/react.svg";
2 | // import viteLogo from "/vite.svg";
3 | import {
4 | KeyboardEvent,
5 | useCallback,
6 | useEffect,
7 | useLayoutEffect,
8 | useRef,
9 | useState,
10 | } from "react";
11 | import "@dotlottie/player-component";
12 | import "./App.css";
13 | import { Cake } from "./components/Cake";
14 | import { CakeActions } from "./components/CakeActions";
15 | import { Name } from "./components/Name";
16 | import Joyride, { ACTIONS, CallBackProps } from "react-joyride";
17 |
18 | // const version = import.meta.env.PACKAGE_VERSION;
19 |
20 | const src = new URL("/assets/hbd2.mp3", import.meta.url).href;
21 |
22 | const steps = [
23 | {
24 | target: "#name",
25 | content: "This is the input to enter the name.",
26 | placement: "bottom",
27 | disableBeacon: true,
28 | },
29 | {
30 | target: "#candle",
31 | content: "Blow on the Lightning port to extinguish the candle.",
32 | placement: "bottom",
33 | },
34 | {
35 | target: "#start",
36 | content: "Press start to play music and light the candle.",
37 | placement: "top",
38 | },
39 | {
40 | target: "#pause",
41 | content: "Press pause if you want the music to pause temporarily.",
42 | placement: "top",
43 | },
44 | {
45 | target: "#stop",
46 | content: "Press stop if you want to cancel temporarily.",
47 | placement: "top",
48 | },
49 | {
50 | target: "#toggle-candle",
51 | content: "Press button if you want to light or blow out the candle.",
52 | placement: "top",
53 | },
54 | {
55 | target: "#share",
56 | content: "Change the name and click 'Share' to send the gift to anyone.",
57 | placement: "top",
58 | },
59 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
60 | ] as any;
61 |
62 | const sharedSteps = [
63 | {
64 | target: "#start",
65 | content: "Click here",
66 | placement: "top",
67 | disableBeacon: true,
68 | },
69 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
70 | ] as any;
71 |
72 | function App() {
73 | const [candleVisible, setCandleVisible] = useState(false);
74 |
75 | const audioRef = useRef(new Audio(src));
76 | const microphoneStreamRef = useRef(undefined);
77 |
78 | const [playing, setPlaying] = useState(false);
79 | const [paused, setPaused] = useState(false);
80 | const [run, setRun] = useState(true);
81 | const [shareMode, setShareMode] = useState(false);
82 |
83 | const [name, setName] = useState("");
84 | const nameRef = useRef(null);
85 |
86 | const visibility = shareMode || playing
87 |
88 | const lightCandle = useCallback(() => setCandleVisible(true), []);
89 |
90 | const turnOffTheCandle = useCallback(() => setCandleVisible(false), []);
91 |
92 | const toggleLightCandle = useCallback(
93 | () => setCandleVisible((prevState) => !prevState),
94 | []
95 | );
96 |
97 | const startAudio = useCallback(() => {
98 | setPlaying(true);
99 | audioRef.current.load();
100 | audioRef.current.play();
101 | setPaused(false);
102 | }, []);
103 |
104 | const pause = useCallback(() => {
105 | audioRef.current.pause();
106 | setPaused(true);
107 | }, []);
108 |
109 | const stopAudio = useCallback(() => {
110 | setPlaying(false);
111 | audioRef.current.pause();
112 | audioRef.current.currentTime = 0;
113 | setPaused(false);
114 | }, []);
115 |
116 | const start = useCallback(() => {
117 | startAudio();
118 | lightCandle();
119 | }, [lightCandle, startAudio]);
120 |
121 | const stop = useCallback(() => {
122 | stopAudio();
123 | turnOffTheCandle();
124 | setTimeout(() => {
125 | nameRef.current ? nameRef.current.focus() : undefined;
126 | }, 0);
127 | }, [stopAudio, turnOffTheCandle]);
128 |
129 | const blowCandles = useCallback(async (stream: MediaStream) => {
130 | try {
131 | microphoneStreamRef.current = stream;
132 |
133 | const audioContext = new AudioContext();
134 | const source = audioContext.createMediaStreamSource(stream);
135 | const analyser = audioContext.createAnalyser();
136 | source.connect(analyser);
137 | analyser.fftSize = 2048;
138 |
139 | const bufferLength = analyser.frequencyBinCount;
140 | const dataArray = new Uint8Array(bufferLength);
141 |
142 | const detectBlow = () => {
143 | analyser.getByteFrequencyData(dataArray);
144 | const average =
145 | dataArray.reduce((acc, val) => acc + val, 0) / bufferLength;
146 | const threshold = 43;
147 |
148 | if (average > threshold) {
149 | setCandleVisible(false);
150 | }
151 | };
152 |
153 | setInterval(detectBlow, 100);
154 | } catch (error) {
155 | console.error("Error accessing microphone:", error);
156 | }
157 | }, []);
158 |
159 | const handleJoyrideCallback = useCallback(
160 | (data: CallBackProps) => {
161 | const { action } = data;
162 | if (action === ACTIONS.RESET || action === ACTIONS.CLOSE) {
163 | // do something
164 | setRun(false);
165 | setTimeout(() => {
166 | nameRef.current ? nameRef.current.focus() : undefined;
167 | }, 0);
168 | }
169 | },
170 | [setRun]
171 | );
172 |
173 | const onEnded = useCallback(() => { }, []);
174 |
175 | const onKeyPress = (event: KeyboardEvent) => {
176 | if (event.key === "Enter") {
177 | setTimeout(() => {
178 | nameRef.current ? nameRef.current.blur() : undefined;
179 | }, 0);
180 | }
181 | };
182 |
183 | useEffect(() => {
184 | (async () => {
185 | try {
186 | const stream = await navigator.mediaDevices.getUserMedia({
187 | audio: true,
188 | });
189 |
190 | if (stream) {
191 | blowCandles(stream);
192 | }
193 | } catch (error) {
194 | console.error("Error accessing microphone:", error);
195 | }
196 | })();
197 |
198 | return () => {
199 | if (microphoneStreamRef.current) {
200 | microphoneStreamRef.current
201 | .getTracks()
202 | .forEach((track) => track.stop());
203 | }
204 | };
205 | }, [blowCandles]);
206 |
207 | useLayoutEffect(() => {
208 | const queryString = window.location.search;
209 | const urlParams = new URLSearchParams(queryString);
210 | const sharedParam = urlParams.get("shared");
211 | if (sharedParam) {
212 | setCandleVisible(true);
213 | setShareMode(true);
214 | }
215 | }, []);
216 |
217 | return (
218 |
227 |
255 |
283 |
284 |
285 |
286 |
287 |
298 |
299 |
300 |
301 |
309 |
319 |
320 |
321 |
329 |
339 |
340 |
341 |
349 |
362 |
363 |
364 | {/*
373 | {version}
374 |
*/}
375 |