Skip to content

Commit 94c87b6

Browse files
wkdghdwns199wkdghdwns199
authored
Merge pull request #490 from pknu-wap/develop
release 배포
2 parents 0c88299 + d1645c5 commit 94c87b6

19 files changed

+233
-61
lines changed

‎client/public/audio/darkmode_wag.mp3

-5.91 KB
Binary file not shown.

‎client/public/audio/lightmode_wag.mp3

-13.3 KB
Binary file not shown.

‎client/public/images/Sechan_Face.png

113 KB
Loading

‎client/public/images/WAG_Preview_image2.png

-3.98 MB
Binary file not shown.

‎client/public/images/WAG_main_page.png

-258 KB
Binary file not shown.

‎client/public/images/yangSaeChanGame.png

195 KB
Loading

‎client/public/index.html

+15-11
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,28 @@
1111

1212
<!--Google Search Console End-->
1313
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
14+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
15+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
1416
<meta name="viewport" content="width=device-width, initial-scale=1" />
1517
<meta name="theme-color" content="#000000" />
16-
<meta name="description" content="웹으로 즐기는 양세찬 게임!" />
17-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/images/WAG_Preview_image2.png" />
18+
<meta name="description" content="양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다." />
1819
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19-
<title>WAG!</title>
20+
<title>양세찬 게임</title>
2021

2122
<!--OG 태그-->
22-
<meta property="og:title" content="WAG!" />
23-
<meta property="og:description" content="웹으로 즐기는 양세찬 게임!" />
24-
<meta property="og:image" content="http://wwwag.co.kr/images/WAG_Preview_image2.png" />
25-
<meta property="og:url" content="http://wwwag.co.kr/" />
23+
<meta property="og:title" content="양세찬 게임" />
24+
<meta property="og:description" content="양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다."" />
25+
<meta property="og:image" content="https://wwwag.co.kr/images/Sechan_Face.png" />
26+
<meta property="og:url" content="https://wwwag.co.kr/" />
2627
<meta property="og:type" content="website" />
28+
<meta property="og:site_name" content="양세찬 게임" />
29+
2730
<!--트위터 태그-->
28-
<meta name="twitter:card" content="http://wwwag.co.kr/images/WAG_main_page.png">
29-
<meta name="twitter:title" content="WAG!">
30-
<meta name="twitter:description" content="웹으로 즐기는 양세찬 게임!">
31-
<meta name="twitter:image" content="http://wwwag.co.kr/images/WAG_Preview_image2.png">
31+
<meta name="twitter:card" content="summary_large_image">
32+
<meta name="twitter:title" content="양세찬 게임">
33+
<meta name="twitter:description" content="양세찬 게임, 웹에서 빠르고 쉽게 즐기세요! 다양한 게임이 준비되어 있으며, 친구와 함께 즐기기 좋은 플랫폼입니다.">
34+
<meta name="twitter:image" content="https://wwwag.co.kr/images/Sechan_Face.png">
35+
3236
</head>
3337
<body>
3438
<noscript>You need to enable JavaScript to run this app.</noscript>

‎client/public/manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "WAG!",
3-
"name": "웹으로 즐기는 양세찬 게임!",
2+
"short_name": "양세찬 게임",
3+
"name": "양세찬 게임",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎client/src/CreateRoom/CreateRoom.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ import DropdownSelect from "../components/dropDown/DropDown";
1010
import { Option } from "react-dropdown";
1111
import SliderComponent from "../components/slider/Slider";
1212
import { useRecoilState } from "recoil";
13-
import { firstCategoryRecoil, timerCount } from "../recoil/recoil";
13+
import { firstCategoryRecoil, timerCount, soundEffectStatus } from "../recoil/recoil";
1414
import Wrapper from "../components/Wrapper";
1515

1616
function CreateRoom() {
1717
const [isPrivate, setIsPrivate] = useState<boolean | null>(false); //일단은 공개방을 default로
1818
const [nickName, setNickname] = useState<string>("");
19-
19+
const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus);
2020
const navigate = useNavigate();
2121

2222
// const radioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -26,8 +26,11 @@ function CreateRoom() {
2626
const handlePlaySound = () => {
2727

2828
const playSound = () => {
29-
const audio = new Audio('audio/button_click.mp3')
30-
audio.play()
29+
if (soundEffectStatusValue){
30+
const audio = new Audio('audio/button_click.mp3')
31+
audio.play()
32+
}
33+
3134
};
3235

3336
playSound();

‎client/src/Game/ReadyToGame.tsx

+39-19
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
loadingModalState,
99
readyToGameModalState,
1010
timerCount,
11+
soundEffectStatus,
1112
} from "../recoil/recoil";
1213
import { useEffect, useState, useRef } from "react";
1314
import ReadyToGameModal from "../components/modal/ReadyModal";
@@ -53,6 +54,7 @@ const ReadyToGame = () => {
5354
const [, setIsOpen] = useRecoilState(readyToGameModalState);
5455
const [, setCaptainIsOpen] = useRecoilState(captainReadyToGameModalState);
5556
const [, setLoadingIsOpen] = useRecoilState(loadingModalState);
57+
const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus);
5658
const [nickname, setNickname] = useState<string>("");
5759
const [beforeNickname, setBeforeNickname] = useState("")
5860
const [possible, setPossible] = useState<boolean>();
@@ -220,17 +222,21 @@ const ReadyToGame = () => {
220222
const audio = new Audio('/audio/button_click.mp3')
221223
audio.play()
222224
};
223-
224-
playSound();
225+
if (soundEffectStatusValue){
226+
playSound();
227+
}
228+
225229
};
226230

227231
const handleCorrectSound = () => {
228232
const playSound = () => {
229233
const audio = new Audio('/audio/correct_answer2.mp3')
230234
audio.play()
231235
};
232-
233-
playSound();
236+
if (soundEffectStatusValue){
237+
playSound();
238+
}
239+
234240

235241
};
236242

@@ -239,17 +245,21 @@ const ReadyToGame = () => {
239245
const audio = new Audio('/audio/blip03.mp3')
240246
audio.play()
241247
};
242-
243-
playSound();
248+
if (soundEffectStatusValue){
249+
playSound();
250+
}
251+
244252
};
245253

246254
const handleQuestionSound = () => {
247255
const playSound = () => {
248256
const audio = new Audio('/audio/question.mp3')
249257
audio.play()
250258
};
251-
252-
playSound();
259+
if (soundEffectStatusValue){
260+
playSound();
261+
}
262+
253263

254264
};
255265

@@ -260,17 +270,21 @@ const ReadyToGame = () => {
260270
audio.play()
261271
audioFire.play()
262272
};
263-
264-
playSound();
273+
if (soundEffectStatusValue){
274+
playSound();
275+
}
276+
265277
};
266278

267279
const handleBooSound = () => {
268280
const playSound = () => {
269281
const audio = new Audio('/audio/fail.mp3'); // 새로운 audio 요소 생성
270282
audio.play(); // 소리를 재생합니다.
271283
};
272-
273-
playSound();
284+
if (soundEffectStatusValue){
285+
playSound();
286+
}
287+
274288
}
275289

276290
const handleStartSound = () => {
@@ -279,8 +293,10 @@ const ReadyToGame = () => {
279293
const audio = new Audio('/audio/start.mp3'); // 새로운 audio 요소 생성
280294
audio.play(); // 소리를 재생합니다.
281295
};
282-
283-
playSound();
296+
if (soundEffectStatusValue){
297+
playSound();
298+
}
299+
284300
}
285301

286302
const handleGameStartSound = () => {
@@ -289,8 +305,10 @@ const ReadyToGame = () => {
289305
const audio = new Audio('/audio/startGame.mp3'); // 새로운 audio 요소 생성
290306
audio.play(); // 소리를 재생합니다.
291307
};
292-
293-
playSound();
308+
if (soundEffectStatusValue){
309+
playSound();
310+
}
311+
294312
}
295313

296314
const handleWarningSound = () => {
@@ -299,8 +317,10 @@ const ReadyToGame = () => {
299317
const audio = new Audio('/audio/warning.mp3'); // 새로운 audio 요소 생성
300318
audio.play(); // 소리를 재생합니다.
301319
};
302-
303-
playSound();
320+
if (soundEffectStatusValue){
321+
playSound();
322+
}
323+
304324
}
305325

306326
const nicknamePossibleClick = async () => {
@@ -1383,7 +1403,7 @@ const ReadyToGame = () => {
13831403

13841404
</div>
13851405

1386-
<div className="mt-3 m-auto" onClick={() => {navigate(location.state?.from || "/")}}>딛자</div>
1406+
<div className="mt-3 m-auto" onClick={() => {navigate(location.state?.from || "/")}}>닫자</div>
13871407
</div>
13881408
</ReadyToGameModal>
13891409

‎client/src/components/layout/Footer.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import * as React from "react";
2+
import { connect, ConnectedProps } from "react-redux";
3+
import { RootState } from "../../modules/index";
4+
import { toggleDarkMode } from "../../modules/darkSlice";
5+
import IconButton from "../button/IconButton";
6+
import RulesModal from "../modal/RulesModal";
7+
import { useRecoilState } from "recoil";
8+
import { rulesModalState, soundEffectStatus } from "../../recoil/recoil";
9+
const { useEffect, useState, useRef } = React;
10+
11+
type Props = {
12+
children?: React.ReactNode;
13+
};
14+
15+
type PropsFromRedux = ConnectedProps<typeof connector>;
16+
type ComponentProps = Props & PropsFromRedux;
17+
18+
const Footer = ({ dark, toggleDarkMode }: ComponentProps) => {
19+
const [soundEffectStatusValue, ] = useRecoilState(soundEffectStatus);
20+
const [isClicked, setIsClicked] = useState(false)
21+
22+
useEffect(() => {
23+
if (dark) {
24+
document.documentElement.classList.add("dark");
25+
} else {
26+
document.documentElement.classList.remove("dark");
27+
}
28+
}, [dark]);
29+
30+
31+
32+
return (
33+
<footer className="m-5 z-30 flex absolute bottom-0 w-11/12 justify-between">
34+
<div className="relative bottom-3">
35+
© WAG!
36+
</div>
37+
<div className="relative bottom-3">
38+
v1.0.0
39+
</div>
40+
</footer>
41+
);
42+
};
43+
44+
const connector = connect((state: RootState) => ({ dark: state.dark.isDark }), {
45+
toggleDarkMode,
46+
});
47+
export default connector(Footer);

‎client/src/components/layout/Header.tsx

+81-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { toggleDarkMode } from "../../modules/darkSlice";
55
import IconButton from "../button/IconButton";
66
import RulesModal from "../modal/RulesModal";
77
import { useRecoilState } from "recoil";
8-
import { rulesModalState } from "../../recoil/recoil";
8+
import { rulesModalState, soundEffectStatus } from "../../recoil/recoil";
9+
import { faTruckField } from "@fortawesome/free-solid-svg-icons";
910
const { useEffect, useState, useRef } = React;
1011

1112
type Props = {
@@ -18,6 +19,8 @@ type ComponentProps = Props & PropsFromRedux;
1819
const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
1920

2021
const [play, setPlay] = useState(false);
22+
const [soundEffectStatusValue, ] = useState(soundEffectStatus);
23+
const [isClicked, setIsClicked] = useState(false)
2124
const audioRef = useRef<HTMLAudioElement>(null);
2225

2326
useEffect(() => {
@@ -28,6 +31,12 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
2831
}
2932
}, [dark]);
3033

34+
const [playSoundEffect, setPlaySoundEffect] = useRecoilState(soundEffectStatus);
35+
const handlePlaySoundEffect = () => {
36+
console.log(!playSoundEffect)
37+
setPlaySoundEffect(!playSoundEffect)
38+
}
39+
3140
const handlePlayMusic = () => {
3241
const audio = audioRef.current;
3342
if (audio) {
@@ -56,12 +65,82 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
5665
return userAgent.includes('Chrome') || userAgent.includes('Safari');
5766
}
5867

68+
const handleLightLogoClick = () => {
69+
70+
const playSound = () => {
71+
const audio = new Audio('audio/lightmode_wag.mp3'); // 새로운 audio 요소 생성
72+
audio.play(); // 소리를 재생합니다.
73+
};
74+
75+
if (soundEffectStatusValue){
76+
playSound();
77+
}
78+
79+
}
80+
81+
const handleDarkLogoClick = () => {
82+
83+
const playSound = () => {
84+
const audio = new Audio('audio/darkmode_wag.mp3'); // 새로운 audio 요소 생성
85+
audio.play(); // 소리를 재생합니다.
86+
};
87+
88+
if (soundEffectStatusValue){
89+
playSound();
90+
}
91+
92+
}
93+
5994
return (
6095
<header className="m-5 z-50">
6196
<div className="flex justify-end z-50">
97+
<div className="absolute left-10 top-7">
98+
{dark ? (
99+
100+
<img className={`w-20 h-16 ${isClicked ? 'clicked' : ''}`} src="images/WAG_dark.2.png"
101+
alt="logo dark mode"
102+
onClick={() => {
103+
handleDarkLogoClick();
104+
setIsClicked(true); // 클릭될 때마다 isClicked 상태를 true로 설정하여 애니메이션을 발생시킵니다.
105+
setTimeout(() => setIsClicked(false), 200);
106+
}}>
107+
108+
</img>
109+
110+
) : (
111+
<img className={`w-20 h-16 ${isClicked ? 'clicked' : ''}`} src="images/WAG_white.2.png"
112+
alt="logo light mode"
113+
onClick={() => {
114+
handleLightLogoClick();
115+
setIsClicked(true); // 클릭될 때마다 isClicked 상태를 true로 설정하여 애니메이션을 발생시킵니다.
116+
setTimeout(() => setIsClicked(false), 200);
117+
}}>
118+
119+
</img>
120+
)}
121+
</div>
62122
<audio ref={audioRef} src='audio/main_theme.mp3' loop />
63123
{isChrome() ? (
64124
<>
125+
<IconButton
126+
className="z-50 mr-3"
127+
size="md"
128+
onClick={() => {
129+
handlePlaySoundEffect();
130+
}}
131+
>
132+
{playSoundEffect ? (
133+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
134+
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
135+
</svg>
136+
137+
) : (
138+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
139+
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" />
140+
</svg>
141+
)}
142+
</IconButton>
143+
65144
<IconButton
66145
className="z-50 mr-3"
67146
size="md"
@@ -109,6 +188,7 @@ const Header = ({ dark, toggleDarkMode }: ComponentProps) => {
109188
</svg>
110189
)}
111190
</IconButton>
191+
112192

113193
<RulesModal onRequestClose={closeModal}>
114194
<div className="text-light-text dark:text-dark-text flex justify-center items-center">

0 commit comments

Comments
 (0)