diff --git a/client/public/audio/darkmode_wag.mp3 b/client/public/audio/darkmode_wag.mp3 index b60641e..b787f03 100644 Binary files a/client/public/audio/darkmode_wag.mp3 and b/client/public/audio/darkmode_wag.mp3 differ diff --git a/client/public/audio/lightmode_wag.mp3 b/client/public/audio/lightmode_wag.mp3 index e74630b..7474f64 100644 Binary files a/client/public/audio/lightmode_wag.mp3 and b/client/public/audio/lightmode_wag.mp3 differ diff --git a/client/public/images/Sechan_Face.png b/client/public/images/Sechan_Face.png new file mode 100644 index 0000000..f875fbd Binary files /dev/null and b/client/public/images/Sechan_Face.png differ diff --git a/client/public/images/WAG_Preview_image2.png b/client/public/images/WAG_Preview_image2.png deleted file mode 100644 index 08857fb..0000000 Binary files a/client/public/images/WAG_Preview_image2.png and /dev/null differ diff --git a/client/public/images/WAG_main_page.png b/client/public/images/WAG_main_page.png deleted file mode 100644 index 148a171..0000000 Binary files a/client/public/images/WAG_main_page.png and /dev/null differ diff --git a/client/public/images/yangSaeChanGame.png b/client/public/images/yangSaeChanGame.png new file mode 100644 index 0000000..3c94aaa Binary files /dev/null and b/client/public/images/yangSaeChanGame.png differ diff --git a/client/public/index.html b/client/public/index.html index 0a8a621..67a553c 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -11,24 +11,28 @@ + + - - + - WAG! + 양세찬 게임 - - - - + + + + + + - - - - + + + + + diff --git a/client/public/manifest.json b/client/public/manifest.json index a74a53e..d418338 100644 --- a/client/public/manifest.json +++ b/client/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "WAG!", - "name": "웹으로 즐기는 양세찬 게임!", + "short_name": "양세찬 게임", + "name": "양세찬 게임", "icons": [ { "src": "favicon.ico", diff --git a/client/src/CreateRoom/CreateRoom.tsx b/client/src/CreateRoom/CreateRoom.tsx index 6adb693..a8fdfcb 100644 --- a/client/src/CreateRoom/CreateRoom.tsx +++ b/client/src/CreateRoom/CreateRoom.tsx @@ -10,13 +10,13 @@ import DropdownSelect from "../components/dropDown/DropDown"; import { Option } from "react-dropdown"; import SliderComponent from "../components/slider/Slider"; import { useRecoilState } from "recoil"; -import { firstCategoryRecoil, timerCount } from "../recoil/recoil"; +import { firstCategoryRecoil, timerCount, soundEffectStatus } from "../recoil/recoil"; import Wrapper from "../components/Wrapper"; function CreateRoom() { const [isPrivate, setIsPrivate] = useState(false); //일단은 공개방을 default로 const [nickName, setNickname] = useState(""); - + const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus); const navigate = useNavigate(); // const radioChange = (event: React.ChangeEvent) => { @@ -26,8 +26,11 @@ function CreateRoom() { const handlePlaySound = () => { const playSound = () => { - const audio = new Audio('audio/button_click.mp3') - audio.play() + if (soundEffectStatusValue){ + const audio = new Audio('audio/button_click.mp3') + audio.play() + } + }; playSound(); diff --git a/client/src/Game/ReadyToGame.tsx b/client/src/Game/ReadyToGame.tsx index a7b63e4..e50f710 100644 --- a/client/src/Game/ReadyToGame.tsx +++ b/client/src/Game/ReadyToGame.tsx @@ -8,6 +8,7 @@ import { loadingModalState, readyToGameModalState, timerCount, + soundEffectStatus, } from "../recoil/recoil"; import { useEffect, useState, useRef } from "react"; import ReadyToGameModal from "../components/modal/ReadyModal"; @@ -53,6 +54,7 @@ const ReadyToGame = () => { const [, setIsOpen] = useRecoilState(readyToGameModalState); const [, setCaptainIsOpen] = useRecoilState(captainReadyToGameModalState); const [, setLoadingIsOpen] = useRecoilState(loadingModalState); + const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus); const [nickname, setNickname] = useState(""); const [beforeNickname, setBeforeNickname] = useState("") const [possible, setPossible] = useState(); @@ -220,8 +222,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/button_click.mp3') audio.play() }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + }; const handleCorrectSound = () => { @@ -229,8 +233,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/correct_answer2.mp3') audio.play() }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + }; @@ -239,8 +245,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/blip03.mp3') audio.play() }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + }; const handleQuestionSound = () => { @@ -248,8 +256,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/question.mp3') audio.play() }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + }; @@ -260,8 +270,10 @@ const ReadyToGame = () => { audio.play() audioFire.play() }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + }; const handleBooSound = () => { @@ -269,8 +281,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/fail.mp3'); // 새로운 audio 요소 생성 audio.play(); // 소리를 재생합니다. }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + } const handleStartSound = () => { @@ -279,8 +293,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/start.mp3'); // 새로운 audio 요소 생성 audio.play(); // 소리를 재생합니다. }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + } const handleGameStartSound = () => { @@ -289,8 +305,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/startGame.mp3'); // 새로운 audio 요소 생성 audio.play(); // 소리를 재생합니다. }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + } const handleWarningSound = () => { @@ -299,8 +317,10 @@ const ReadyToGame = () => { const audio = new Audio('/audio/warning.mp3'); // 새로운 audio 요소 생성 audio.play(); // 소리를 재생합니다. }; - - playSound(); + if (soundEffectStatusValue){ + playSound(); + } + } const nicknamePossibleClick = async () => { @@ -1383,7 +1403,7 @@ const ReadyToGame = () => { -
{navigate(location.state?.from || "/")}}>딛자
+
{navigate(location.state?.from || "/")}}>닫자
diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx new file mode 100644 index 0000000..8a1ba8d --- /dev/null +++ b/client/src/components/layout/Footer.tsx @@ -0,0 +1,47 @@ +import * as React from "react"; +import { connect, ConnectedProps } from "react-redux"; +import { RootState } from "../../modules/index"; +import { toggleDarkMode } from "../../modules/darkSlice"; +import IconButton from "../button/IconButton"; +import RulesModal from "../modal/RulesModal"; +import { useRecoilState } from "recoil"; +import { rulesModalState, soundEffectStatus } from "../../recoil/recoil"; +const { useEffect, useState, useRef } = React; + +type Props = { + children?: React.ReactNode; +}; + +type PropsFromRedux = ConnectedProps; +type ComponentProps = Props & PropsFromRedux; + +const Footer = ({ dark, toggleDarkMode }: ComponentProps) => { + const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus); + const [isClicked, setIsClicked] = useState(false) + + useEffect(() => { + if (dark) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + }, [dark]); + + + + return ( +
+
+ © WAG! +
+
+ v1.0.0 +
+
+ ); +}; + +const connector = connect((state: RootState) => ({ dark: state.dark.isDark }), { + toggleDarkMode, +}); +export default connector(Footer); diff --git a/client/src/components/layout/Header.tsx b/client/src/components/layout/Header.tsx index 46b2c5c..a65d695 100644 --- a/client/src/components/layout/Header.tsx +++ b/client/src/components/layout/Header.tsx @@ -5,7 +5,8 @@ import { toggleDarkMode } from "../../modules/darkSlice"; import IconButton from "../button/IconButton"; import RulesModal from "../modal/RulesModal"; import { useRecoilState } from "recoil"; -import { rulesModalState } from "../../recoil/recoil"; +import { rulesModalState, soundEffectStatus } from "../../recoil/recoil"; +import { faTruckField } from "@fortawesome/free-solid-svg-icons"; const { useEffect, useState, useRef } = React; type Props = { @@ -18,6 +19,8 @@ type ComponentProps = Props & PropsFromRedux; const Header = ({ dark, toggleDarkMode }: ComponentProps) => { const [play, setPlay] = useState(false); + const [soundEffectStatusValue, ] = useState(soundEffectStatus); + const [isClicked, setIsClicked] = useState(false) const audioRef = useRef(null); useEffect(() => { @@ -28,6 +31,12 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => { } }, [dark]); + const [playSoundEffect, setPlaySoundEffect] = useRecoilState(soundEffectStatus); + const handlePlaySoundEffect = () => { + console.log(!playSoundEffect) + setPlaySoundEffect(!playSoundEffect) + } + const handlePlayMusic = () => { const audio = audioRef.current; if (audio) { @@ -56,12 +65,82 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => { return userAgent.includes('Chrome') || userAgent.includes('Safari'); } + const handleLightLogoClick = () => { + + const playSound = () => { + const audio = new Audio('audio/lightmode_wag.mp3'); // 새로운 audio 요소 생성 + audio.play(); // 소리를 재생합니다. + }; + + if (soundEffectStatusValue){ + playSound(); + } + + } + + const handleDarkLogoClick = () => { + + const playSound = () => { + const audio = new Audio('audio/darkmode_wag.mp3'); // 새로운 audio 요소 생성 + audio.play(); // 소리를 재생합니다. + }; + + if (soundEffectStatusValue){ + playSound(); + } + + } + return (
+
+ {dark ? ( + +logo dark mode { + handleDarkLogoClick(); + setIsClicked(true); // 클릭될 때마다 isClicked 상태를 true로 설정하여 애니메이션을 발생시킵니다. + setTimeout(() => setIsClicked(false), 200); + }}> + + + + ) : ( + logo light mode { + handleLightLogoClick(); + setIsClicked(true); // 클릭될 때마다 isClicked 상태를 true로 설정하여 애니메이션을 발생시킵니다. + setTimeout(() => setIsClicked(false), 200); + }}> + + + )} +