Skip to content

Commit 337a67e

Browse files
OutsideofemiTOutsideofemiT
authored
Merge pull request #102 from Treevyy/finishline
Finishline
2 parents aa4296e + 0c04699 commit 337a67e

5 files changed

Lines changed: 94 additions & 103 deletions

File tree

‎client/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,4 @@ const App: React.FC = () => {
8585
};
8686

8787
export default App;
88+
// commmits

‎client/src/components/BackgroundMusicProvider.tsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,33 @@
1+
// src/components/BackgroundMusic.tsx
12
import { useEffect, useRef } from 'react';
23

34
interface Props {
45
src: string;
56
volume?: number;
67
}
78

8-
const BackgroundMusicProvider: React.FC<Props> = ({ src, volume = 0.03 }) => {
9+
let globalAudio: HTMLAudioElement | null = null;
10+
11+
const BackgroundMusic: React.FC<Props> = ({ src, volume = 0.03 }) => {
912
const audioRef = useRef<HTMLAudioElement | null>(null);
1013

1114
useEffect(() => {
12-
if (!audioRef.current) {
13-
const audio = new Audio(src);
14-
audio.loop = true;
15-
audio.volume = volume;
16-
audioRef.current = audio;
17-
18-
// 🔒 Play only after a click event
19-
const handleUserInteraction = () => {
20-
audio.play().catch((err) =>
21-
console.warn('Autoplay blocked or error playing:', err)
22-
);
23-
document.removeEventListener('click', handleUserInteraction);
24-
};
25-
26-
document.addEventListener('click', handleUserInteraction, { once: true });
15+
if (!globalAudio) {
16+
globalAudio = new Audio(src);
17+
globalAudio.loop = true;
18+
globalAudio.volume = volume;
19+
globalAudio.play().catch((err) => {
20+
console.warn('🎵 Autoplay blocked or failed:', err);
21+
});
2722
}
23+
audioRef.current = globalAudio;
2824

2925
return () => {
30-
audioRef.current?.pause();
26+
// DO NOT stop or recreate the audio on unmount
3127
};
3228
}, [src, volume]);
3329

3430
return null;
3531
};
3632

37-
export default BackgroundMusicProvider;
33+
export default BackgroundMusic;

‎client/src/components/LeaderBoard.tsx‎

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -52,59 +52,59 @@ function LeaderBoard() {
5252

5353
export default LeaderBoard;
5454

55-
// import React, { useState } from 'react';
56-
// import { useQuery } from '@apollo/client';
57-
// import { GET_USERS } from '../graphql/queries'; // Adjust the import path as necessary
58-
59-
function LeaderBoard() {
60-
61-
// interface IUser {
62-
// _id: string;
63-
// username: string;
64-
// correctAnswers: number;
65-
// avatar: string; // Assuming you have an avatar property
66-
// }
67-
68-
// // Data for leaderboard
69-
// /* const [leaderboardData, setLeaderboardData] = useState([
70-
// { _id: 'kjhd63r9bhsef', username: 'Player1', correctAnswers: 100 },
71-
// { username: 'Player2', score: 90 },
72-
// { username: 'Player4', score: 70 },
73-
// { username: 'Player5', score: 60 },
74-
// ]);
75-
// */
76-
// // Fetch leaderboard data from the server (mocked for now)
77-
// const [leaderboardData, setLeaderboardData] = useState([]);
78-
79-
// // How do we get the data from the server?
80-
81-
// const { loading, data, error } = useQuery<IUser[] | undefined>(GET_USERS);
82-
83-
// if (loading) return <p>Loading...</p>;
84-
// if (error) return <p>Error: {error.message}</p>;
85-
// // const { loading, data, errer } = useQuery(GET_LEADERBOARD_DATA, {
86-
// // variables: { difficulty_lvl: 'easy' }, // Example variable
87-
// // );
88-
// const users = data?.users || [];
89-
90-
// // Sort the leaderboard data by score in descending order - by what measurement (?)
91-
// const sortedLeaderboard = users.sort((a: number, b: number) => b.correctAnswers - a.correctAnswers);
92-
93-
// return (
94-
// <div>
95-
// { sortedLeaderboard.length > 0 ? sortedLeaderboard.map(user: IUser => (
96-
// <div className="leaderboard-container">
97-
// <div className="leaderboard-item" key={user._id}>
98-
// <img src={user.avatar} alt="Avatar" className="avatar" /> {/* Assuming you have an avatar property */}
99-
// <span className="username">{user.username}</span>
100-
// <span className="score">{user.correctAnswers}</span>
101-
// </div>
102-
// ))
103-
// </div>
104-
// }
105-
// </div>
106-
107-
// )
108-
}
109-
110-
export default LeaderBoard
55+
// // import React, { useState } from 'react';
56+
// // import { useQuery } from '@apollo/client';
57+
// // import { GET_USERS } from '../graphql/queries'; // Adjust the import path as necessary
58+
59+
// function LeaderBoard() {
60+
61+
// // interface IUser {
62+
// // _id: string;
63+
// // username: string;
64+
// // correctAnswers: number;
65+
// // avatar: string; // Assuming you have an avatar property
66+
// // }
67+
68+
// // // Data for leaderboard
69+
// // /* const [leaderboardData, setLeaderboardData] = useState([
70+
// // { _id: 'kjhd63r9bhsef', username: 'Player1', correctAnswers: 100 },
71+
// // { username: 'Player2', score: 90 },
72+
// // { username: 'Player4', score: 70 },
73+
// // { username: 'Player5', score: 60 },
74+
// // ]);
75+
// // */
76+
// // // Fetch leaderboard data from the server (mocked for now)
77+
// // const [leaderboardData, setLeaderboardData] = useState([]);
78+
79+
// // // How do we get the data from the server?
80+
81+
// // const { loading, data, error } = useQuery<IUser[] | undefined>(GET_USERS);
82+
83+
// // if (loading) return <p>Loading...</p>;
84+
// // if (error) return <p>Error: {error.message}</p>;
85+
// // // const { loading, data, errer } = useQuery(GET_LEADERBOARD_DATA, {
86+
// // // variables: { difficulty_lvl: 'easy' }, // Example variable
87+
// // // );
88+
// // const users = data?.users || [];
89+
90+
// // // Sort the leaderboard data by score in descending order - by what measurement (?)
91+
// // const sortedLeaderboard = users.sort((a: number, b: number) => b.correctAnswers - a.correctAnswers);
92+
93+
// // return (
94+
// // <div>
95+
// // { sortedLeaderboard.length > 0 ? sortedLeaderboard.map(user: IUser => (
96+
// // <div className="leaderboard-container">
97+
// // <div className="leaderboard-item" key={user._id}>
98+
// // <img src={user.avatar} alt="Avatar" className="avatar" /> {/* Assuming you have an avatar property */}
99+
// // <span className="username">{user.username}</span>
100+
// // <span className="score">{user.correctAnswers}</span>
101+
// // </div>
102+
// // ))
103+
// // </div>
104+
// // }
105+
// // </div>
106+
107+
// // )
108+
// }
109+
110+
// export default LeaderBoard

‎client/src/components/screens/GameMap.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,7 @@ const GameMap: React.FC = () => {
2222

2323
useEffect(() => {
2424
preloadSounds([
25-
'/audio/Dan_correct/Dan-correct-1.wav',
26-
'/audio/Dan_correct/Dan-correct-2.wav',
27-
'/audio/Dan_correct/Dan-correct-3.wav',
28-
'/audio/Dan_correct/Dan-correct-4.wav',
29-
'/audio/Dan_incorrect/Dan-incorrect-1.wav',
30-
'/audio/Dan_incorrect/Dan-incorrect-2.wav',
31-
'/audio/Dan_incorrect/Dan-incorrect-3.wav',
32-
'/audio/Dan_incorrect/Dan-incorrect-4.wav',
33-
'/audio/Dan_incorrect/Dan-incorrect-5.wav',
34-
//'/audio/5inarow.wav'
35-
]);
25+
'/audio/Dan_correct/Dan-correct-1.wav']);
3626
}, []);
3727

3828
const handleDanHover = () => {

‎client/src/components/screens/Questions.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
66
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
77
import { preloadSounds } from '../../utils/preloadSounds';
88

9-
import BackgroundMusic from '../BackgroundMusic';
9+
import BackgroundMusic from '../BackgroundMusicProvider';
1010
import { UPDATE_STATS } from '@/graphql/mutations';
1111
import { useMutation } from '@apollo/client';
1212

@@ -236,23 +236,27 @@ const Questions: React.FC = () => {
236236
))}
237237

238238
<div className="mb-4 text-white text-base text-left whitespace-pre-wrap">
239-
<ReactMarkdown
240-
components={{
241-
code({ inline, children, ...props }: any) {
242-
return inline ? (
243-
<code className="inline-code" {...props}>
244-
{children}
245-
</code>
246-
) : (
247-
<div className="bg-gray-800 p-4 rounded-md text-sm font-mono shadow-lg overflow-x-auto">
248-
<code {...props}>{children}</code>
249-
</div>
250-
);
251-
},
252-
}}
253-
>
254-
{question.question}
255-
</ReactMarkdown>
239+
<ReactMarkdown
240+
components={{
241+
p({ node, children, ...props }) {
242+
return <div className="mb-2" {...props}>{children}</div>;
243+
},
244+
code({ inline, children, ...props }: { inline?: boolean; children?: React.ReactNode }) {
245+
return inline ? (
246+
<code className="inline-code" {...props}>
247+
{children}
248+
</code>
249+
) : (
250+
<pre className="bg-gray-800 p-4 rounded-md text-sm font-mono shadow-lg overflow-x-auto">
251+
<code {...props}>{children}</code>
252+
</pre>
253+
);
254+
},
255+
}}
256+
>
257+
{question.question}
258+
</ReactMarkdown>
259+
256260
</div>
257261

258262
<div className="text-left flex flex-col items-start gap-2 text-white">

0 commit comments

Comments
 (0)