From 055bcdb0225fcaf47670e7faf18e9f7920519d28 Mon Sep 17 00:00:00 2001 From: Tyler Liu Date: Sun, 3 Mar 2024 14:48:41 -0600 Subject: [PATCH 1/4] fixed bugs in view page --- .DS_Store | Bin 8196 -> 8196 bytes src/Components/View.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.DS_Store b/.DS_Store index d82bfb917f92927ab5a3af85768bd5e573e2063e..f155cef73e1ce54318d295f100b1af4f24cf2501 100644 GIT binary patch delta 352 zcmZp1XmOa}FDk;oz`)4BAi%(o$DqfM%uviw?3uH%a2or>2Hwr=94s7+B9rF{?9}7| z%I7nrFr+fXGvtCY0HC6)_|yl@}L4C3hqh zBn1{L;LXVzAy|hy+I#CkJP|fJAk*v4xS2f~mQA zt&T#qrICS-f{C$NZ7nBxP|A=C zRs&bXPz2-`Fk}Gr=mF_GhIG%I{N$vZ{3M_bpn(i;f!O*#7ywxe3}RSJ31`Rznv=?q z1~x4h$U-wq1gH^Ym Inventory {'>'} View -
- - - - +
+ + + +
From 55e59a47b22cf3642f9de758e8705d76f4d5b1e0 Mon Sep 17 00:00:00 2001 From: Tyler Liu Date: Wed, 13 Mar 2024 20:37:32 -0500 Subject: [PATCH 2/4] added 2 different clicking sound effect --- src/App.tsx | 29 +++++++++++++++++++++++++++-- src/Audios/clicking_hard.mp3 | Bin 0 -> 3172 bytes src/Audios/clicking_soft.mp3 | Bin 0 -> 3068 bytes src/Components/Inventory.tsx | 2 +- src/Components/Profile.tsx | 2 +- 5 files changed, 29 insertions(+), 4 deletions(-) create mode 100644 src/Audios/clicking_hard.mp3 create mode 100644 src/Audios/clicking_soft.mp3 diff --git a/src/App.tsx b/src/App.tsx index b354775e4..f059e4dc8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom'; import Home from './Components/Home'; import LogIn from './Components/LogIn'; import ContactUs from './Components/ContactUs'; @@ -6,13 +7,23 @@ import AboutUs from './Components/AboutUs'; import FAQ from './Components/FAQ'; import Profile from './Components/Profile'; import Inventory from './Components/Inventory'; +import View from './Components/View'; + import "@fontsource/inter" import "@fontsource/inter/700.css"; -import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom'; -import View from './Components/View'; + +const hard_clicking_sound = new Audio(require('./Audios/clicking_hard.mp3')); +const soft_clicking_sound = new Audio(require('./Audios/clicking_soft.mp3')); function App() { + const playClickSound = (hard = false) => { + const clicking_sound = hard ? hard_clicking_sound : soft_clicking_sound; + clicking_sound.play(); + } + + const location = useLocation(); + const usePageNavigation = () => { const navigate = useNavigate(); return (pageName: string) => navigate(`/${pageName.toLowerCase()}`); @@ -20,35 +31,49 @@ function App() { const setPage = usePageNavigation(); + const getPageName = () => { + const path = location.pathname; + if (path === '/') return ''; + return path.slice(1); + } + const goToLogin = () => { + playClickSound(getPageName() === 'login' ? true : false); setPage('login'); } const backToHome = () => { + playClickSound(getPageName() === '' ? true : false); setPage(''); } const toContactPage = () => { + playClickSound(getPageName() === 'contact' ? true : false); setPage('contact'); } const toAboutUsPage = () => { + playClickSound(getPageName() === 'about' ? true : false); setPage('about'); } const toFAQPage = () => { + playClickSound(getPageName() === 'faq' ? true : false); setPage('faq'); } const toProfilePage = () => { + playClickSound(getPageName() === 'profile' ? true : false); setPage('profile'); } const toInventoryPage = () => { + playClickSound(getPageName() === 'inventory' ? true : false); setPage('inventory'); } const toViewPage = () => { + playClickSound(getPageName() === 'inventory/view' ? true : false); setPage('inventory/view'); } diff --git a/src/Audios/clicking_hard.mp3 b/src/Audios/clicking_hard.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..128c2776d539a6072dff41fbf395f9aadcd792b4 GIT binary patch literal 3172 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 literal 0 HcmV?d00001 diff --git a/src/Components/Inventory.tsx b/src/Components/Inventory.tsx index f57e7c707..0a610250d 100644 --- a/src/Components/Inventory.tsx +++ b/src/Components/Inventory.tsx @@ -55,7 +55,7 @@ function Inventory({ProfileHandler, Theme Icon Theme - diff --git a/src/Components/Profile.tsx b/src/Components/Profile.tsx index 1e2d88318..5ff345fda 100644 --- a/src/Components/Profile.tsx +++ b/src/Components/Profile.tsx @@ -35,7 +35,7 @@ function Profile({ProfileHandler, Learning icon Learning Progress - From 943549c85e363f21130383b2116aff3964016062 Mon Sep 17 00:00:00 2001 From: Tyler Liu Date: Sun, 17 Mar 2024 21:46:51 -0500 Subject: [PATCH 3/4] fix error caused by last merge --- src/App.tsx | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 71d4ecb0f..e5ff46c56 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import Inventory from './Components/Inventory'; import View from './Components/View'; import SignUp from './Components/SignUp'; import Progress from './Components/Progress'; + import "@fontsource/inter" import "@fontsource/inter/700.css"; @@ -78,10 +79,6 @@ function App() { setPage('inventory/view'); } - const toProgressPage = () => { - setPage('Progress'); - } - return (
@@ -92,10 +89,10 @@ function App() { FAQHandler={toFAQPage} ProfileHandler={toProfilePage} />} /> + } /> - } /> } /> } /> } /> - } />
); From b8a2646957cfaf368d5bb728b690530014fc1102 Mon Sep 17 00:00:00 2001 From: Tyler Liu Date: Thu, 21 Mar 2024 17:43:07 -0500 Subject: [PATCH 4/4] added mute button --- src/App.tsx | 14 ++++++++++++++ src/Components/Home.tsx | 11 ++++++++++- src/Components/Inventory.tsx | 7 ++++++- src/Components/Profile.tsx | 7 ++++++- src/Components/View.tsx | 7 ++++++- 5 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e5ff46c56..26b4fa84d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,8 +18,14 @@ const hard_clicking_sound = new Audio(require('./Audios/clicking_hard.mp3')); const soft_clicking_sound = new Audio(require('./Audios/clicking_soft.mp3')); function App() { + const [mute, setMute] = useState(false); + + const toggleSound = () => { + setMute(!mute); + } const playClickSound = (hard = false) => { + if (mute) return; const clicking_sound = hard ? hard_clicking_sound : soft_clicking_sound; clicking_sound.play(); } @@ -88,6 +94,8 @@ function App() { contactHandler={toContactPage} FAQHandler={toFAQPage} ProfileHandler={toProfilePage} + toggleSoundHandler={toggleSound} + mute={mute} />} /> } /> } /> } />
diff --git a/src/Components/Home.tsx b/src/Components/Home.tsx index c45ef7ecf..2f4083a6b 100644 --- a/src/Components/Home.tsx +++ b/src/Components/Home.tsx @@ -8,9 +8,17 @@ interface Props { contactHandler: () => void; FAQHandler: () => void; ProfileHandler: () => void; + toggleSoundHandler:() => void; + mute: boolean; } -function Home({getStartedHandler, aboutUsHandler, contactHandler, FAQHandler, ProfileHandler}: Props) { +function Home({getStartedHandler, + aboutUsHandler, + contactHandler, + FAQHandler, + ProfileHandler, + toggleSoundHandler, + mute}: Props) { return (
Website.com
@@ -26,6 +34,7 @@ function Home({getStartedHandler, aboutUsHandler, contactHandler, FAQHandler, Pr +
user icon front page image diff --git a/src/Components/Inventory.tsx b/src/Components/Inventory.tsx index 2ee0ce9cc..eb61ecd66 100644 --- a/src/Components/Inventory.tsx +++ b/src/Components/Inventory.tsx @@ -22,6 +22,8 @@ interface Props { ViewHandler: () => void; backToHomeHandler:() => void; InventoryHandler:() => void; + toggleSoundHandler:() => void; + mute: boolean; } function Inventory({ProfileHandler, @@ -32,7 +34,9 @@ function Inventory({ProfileHandler, ProgressHandler, InventoryHandler, ViewHandler, - backToHomeHandler} : Props) { + backToHomeHandler, + toggleSoundHandler, + mute} : Props) { return (
@@ -78,6 +82,7 @@ function Inventory({ProfileHandler, +
diff --git a/src/Components/Profile.tsx b/src/Components/Profile.tsx index 4e9548d4f..4cb29687c 100644 --- a/src/Components/Profile.tsx +++ b/src/Components/Profile.tsx @@ -19,6 +19,8 @@ interface Props { InventoryHandler: () => void; ProgressHandler: () => void; backToHomeHandler:() => void; + toggleSoundHandler:() => void; + mute: boolean; } function Profile({ProfileHandler, @@ -28,7 +30,9 @@ function Profile({ProfileHandler, FAQHandler, InventoryHandler, ProgressHandler, - backToHomeHandler} : Props) { + backToHomeHandler, + toggleSoundHandler, + mute} : Props) { return (
@@ -84,6 +88,7 @@ function Profile({ProfileHandler, +
diff --git a/src/Components/View.tsx b/src/Components/View.tsx index add3d3cb9..f6d527e41 100644 --- a/src/Components/View.tsx +++ b/src/Components/View.tsx @@ -18,6 +18,8 @@ interface Props { ViewHandler: () => void; backToHomeHandler:() => void; InventoryHandler: () => void; + toggleSoundHandler:() => void; + mute: boolean; } function View({ProfileHandler, @@ -27,7 +29,9 @@ function View({ProfileHandler, FAQHandler, ViewHandler, InventoryHandler, - backToHomeHandler} : Props) { + backToHomeHandler, + toggleSoundHandler, + mute} : Props) { return (
@@ -74,6 +78,7 @@ function View({ProfileHandler, +