Compare commits
4 Commits
032ebc2368
...
main
Author | SHA1 | Date | |
---|---|---|---|
e083b353db | |||
7970fb3aa3 | |||
77bc1bfc41 | |||
388ce3d04a |
@ -64,8 +64,7 @@ const YouTubePlayer = ({
|
|||||||
events: {
|
events: {
|
||||||
'onReady': (event) => {
|
'onReady': (event) => {
|
||||||
console.log("YouTube player ready");
|
console.log("YouTube player ready");
|
||||||
|
|
||||||
// Start playback if needed
|
|
||||||
if (autoplay) {
|
if (autoplay) {
|
||||||
event.target.seekTo(startTime || 0);
|
event.target.seekTo(startTime || 0);
|
||||||
event.target.playVideo();
|
event.target.playVideo();
|
||||||
@ -76,7 +75,6 @@ const YouTubePlayer = ({
|
|||||||
},
|
},
|
||||||
'onError': (event) => {
|
'onError': (event) => {
|
||||||
console.error("YouTube player error:", event);
|
console.error("YouTube player error:", event);
|
||||||
// Remove error handling
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -333,7 +333,7 @@ export const Game = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="music-controls">
|
<div className="music-controls">
|
||||||
<p className="instruction">Use the player above to listen, and the tone slider to play!</p>
|
<p className="instruction">Verändere die Frequenz des Tons, um den Song zu spielen.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@ -344,7 +344,7 @@ export const Game = () => {
|
|||||||
<div className="listening-icon">
|
<div className="listening-icon">
|
||||||
<FontAwesomeIcon icon={faHeadphones} size="4x" />
|
<FontAwesomeIcon icon={faHeadphones} size="4x" />
|
||||||
</div>
|
</div>
|
||||||
<p className="instruction">Listen carefully and think about which song it might be!</p>
|
<p className="instruction">Hör dir die Frequenzen an und wähle den passenden Song aus.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{songOptions.length > 0 && (
|
{songOptions.length > 0 && (
|
||||||
@ -380,7 +380,7 @@ export const Game = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="guessing-phase">
|
<div className="guessing-phase">
|
||||||
<div className="phase-header">
|
<div className="phase-header">
|
||||||
<h3>Final Answer Time!</h3>
|
<h3>Auswahlphase</h3>
|
||||||
<div className="timer urgent">
|
<div className="timer urgent">
|
||||||
<FontAwesomeIcon icon={faClock} /> {timeLeft}s
|
<FontAwesomeIcon icon={faClock} /> {timeLeft}s
|
||||||
</div>
|
</div>
|
||||||
@ -518,7 +518,7 @@ export const Game = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return <div>Unknown phase</div>;
|
return <div>Phasenfehler</div>;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -586,7 +586,7 @@ export const Game = () => {
|
|||||||
|
|
||||||
{songsLoading && (
|
{songsLoading && (
|
||||||
<div className="songs-loading-indicator">
|
<div className="songs-loading-indicator">
|
||||||
Loading songs...
|
Lade Songs...
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -57,7 +57,6 @@ export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: external
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isReadOnly || !externalFrequency) return;
|
if (!isReadOnly || !externalFrequency) return;
|
||||||
|
|
||||||
// Initialize audio if not already done
|
|
||||||
if (!audioContext) {
|
if (!audioContext) {
|
||||||
initAudio();
|
initAudio();
|
||||||
return;
|
return;
|
||||||
@ -82,11 +81,8 @@ export const MusicSlider = ({ isReadOnly, onFrequencyChange, frequency: external
|
|||||||
const slider = sliderRef.current;
|
const slider = sliderRef.current;
|
||||||
const rect = slider.getBoundingClientRect();
|
const rect = slider.getBoundingClientRect();
|
||||||
const width = rect.width;
|
const width = rect.width;
|
||||||
|
|
||||||
// Calculate relative X position using window coordinates
|
|
||||||
let x = clientX - rect.left;
|
let x = clientX - rect.left;
|
||||||
|
|
||||||
// For positions outside the slider, calculate relative to slider bounds
|
|
||||||
if (clientX < rect.left) x = 0;
|
if (clientX < rect.left) x = 0;
|
||||||
if (clientX > rect.right) x = width;
|
if (clientX > rect.right) x = width;
|
||||||
|
|
||||||
|
@ -123,7 +123,7 @@ export const WaitingRoom = () => {
|
|||||||
|
|
||||||
setMessages([{
|
setMessages([{
|
||||||
system: true,
|
system: true,
|
||||||
text: "Welcome to the waiting room! Waiting for others to join..."
|
text: "Willkommen im Warteraum! Es wird noch auf weitere Spieler gewartet..."
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
@ -189,8 +189,8 @@ export const WaitingRoom = () => {
|
|||||||
const renderPlaylistSection = () => (
|
const renderPlaylistSection = () => (
|
||||||
<div className="playlist-section">
|
<div className="playlist-section">
|
||||||
<div className="section-header">
|
<div className="section-header">
|
||||||
<h2>Choose a Playlist</h2>
|
<h2>Playlist wählen</h2>
|
||||||
<p className="vote-info">Most voted playlist will be used for the game</p>
|
<p className="vote-info">Die Playlist mit den meisten Stimmen wird gespielt</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="playlists-grid">
|
<div className="playlists-grid">
|
||||||
{Object.entries(playlists).map(([genre, playlist]) => (
|
{Object.entries(playlists).map(([genre, playlist]) => (
|
||||||
@ -204,10 +204,10 @@ export const WaitingRoom = () => {
|
|||||||
<div className="playlist-overlay">
|
<div className="playlist-overlay">
|
||||||
<div className="vote-count">
|
<div className="vote-count">
|
||||||
<span className="count">{getVoteCount(playlist.id)}</span>
|
<span className="count">{getVoteCount(playlist.id)}</span>
|
||||||
<span className="vote-label">votes</span>
|
<span className="vote-label">Stimmen</span>
|
||||||
</div>
|
</div>
|
||||||
{selectedPlaylist === playlist.id && (
|
{selectedPlaylist === playlist.id && (
|
||||||
<div className="your-vote">Your Vote</div>
|
<div className="your-vote">Deine Stimme</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,8 +42,8 @@
|
|||||||
|
|
||||||
h1
|
h1
|
||||||
font-size: 42pt
|
font-size: 42pt
|
||||||
|
margin: 0
|
||||||
color: $white
|
color: $white
|
||||||
margin-bottom: 15px
|
|
||||||
text-shadow: 0 0 15px rgba(255, 255, 255, 0.7)
|
text-shadow: 0 0 15px rgba(255, 255, 255, 0.7)
|
||||||
background: linear-gradient(135deg, $pink, $blue 45%, $mint-green 65%, $yellow 85%, $pink)
|
background: linear-gradient(135deg, $pink, $blue 45%, $mint-green 65%, $yellow 85%, $pink)
|
||||||
background-size: 300% 100%
|
background-size: 300% 100%
|
||||||
|
@ -28,7 +28,7 @@ const initializeGameState = (roomId) => {
|
|||||||
currentComposer: null,
|
currentComposer: null,
|
||||||
roundStartTime: null,
|
roundStartTime: null,
|
||||||
phaseTimeLimit: {
|
phaseTimeLimit: {
|
||||||
composing: 30,
|
composing: 60,
|
||||||
guessing: 10
|
guessing: 10
|
||||||
},
|
},
|
||||||
lastFrequency: 440,
|
lastFrequency: 440,
|
||||||
|
@ -8,7 +8,7 @@ const PLAYLISTS = {
|
|||||||
eighties: 'PLmXxqSJJq-yUvMWKuZQAB_8yxnjZaOZUp',
|
eighties: 'PLmXxqSJJq-yUvMWKuZQAB_8yxnjZaOZUp',
|
||||||
nineties: 'PLmXxqSJJq-yUF3jbzjF_pa--kuBuMlyQQ',
|
nineties: 'PLmXxqSJJq-yUF3jbzjF_pa--kuBuMlyQQ',
|
||||||
pop: 'PLxA687tYuMWhkqYjvAGtW_heiEL4Hk_Lx',
|
pop: 'PLxA687tYuMWhkqYjvAGtW_heiEL4Hk_Lx',
|
||||||
dance: 'PL64E6BD94546734D8'
|
marco: 'PLSTnYsLCH0WKpUvzrytqfvlhDTlqK_zj-'
|
||||||
};
|
};
|
||||||
|
|
||||||
let validatedPlaylists = {};
|
let validatedPlaylists = {};
|
||||||
|
Reference in New Issue
Block a user