WebsiteProjects/ToneGuessr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make guessing phase while hearing
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m55s
Details

Browse Source
This commit is contained in:
Mathias Wagner
2025-03-01 15:57:31 +01:00
parent 33a1715adc
commit 2fb5af4171
4 changed files with 78 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/pages/Game/Game.jsx
View File

@@ -149,6 +149,10 @@ export const Game = () => {
return prevMsg;
}));
},
"song-options": (data) => {
console.log("Received song options early:", data);
setSongOptions(data.songOptions || []);
},
};
const cleanupFunctions = Object.entries(eventHandlers).map(
@@ -320,11 +324,38 @@ export const Game = () => {
)}
{role === "guesser" && (
<div className="listening-display">
<div className="listening-icon">
<FontAwesomeIcon icon={faHeadphones} size="4x" />
<div className="guessing-display">
<div className="listening-display">
<div className="listening-icon">
<FontAwesomeIcon icon={faHeadphones} size="4x" />
</div>
<p className="instruction">Listen carefully and think about which song it might be!</p>
</div>
<p className="instruction">Höre genau zu und versuche, den Song zu erkennen!</p>
{songOptions.length > 0 && (
<div className="song-grid early-preview">
{songOptions.map(song => (
<div
key={song.id}
className={`song-option ${selectedSong?.id === song.id ? 'selected' : ''}`}
onClick={() => handleSongSelect(song)}
>
<div className="song-image">
<img src={song.coverUrl} alt={song.title} />
{selectedSong?.id === song.id && (
<div className="selection-indicator">
<FontAwesomeIcon icon={faCheckCircle} />
</div>
)}
</div>
<div className="song-details">
<div className="song-title">{song.title}</div>
<div className="song-artist">{song.artist}</div>
</div>
</div>
))}
</div>
)}
</div>
)}
</div>
@@ -334,8 +365,8 @@ export const Game = () => {
return (
<div className="guessing-phase">
<div className="phase-header">
<h3>Runde {round}: Song erraten</h3>
<div className="timer">
<h3>Final Answer Time!</h3>
<div className="timer urgent">
<FontAwesomeIcon icon={faClock} /> {timeLeft}s
</div>
</div>

30
client/src/pages/Game/styles.sass
View File

@@ -597,6 +597,26 @@
opacity: 0.8
animation: pulse 1.5s infinite ease-in-out
.guessing-display
display: flex
flex-direction: column
gap: 20px
margin-top: 20px
.early-preview
opacity: 0.8
transition: opacity 0.3s ease
&:hover
opacity: 1
.song-grid
margin-top: 10px
.timer.urgent
animation: urgent-pulse 1s infinite
background: rgba(255, 100, 100, 0.2)
@keyframes subtle-text-glow
0%, 100%
text-shadow: 0 0 10px rgba(255, 255, 255, 0.4)
@@ -1045,4 +1065,12 @@
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 0, 0.3)
50%
transform: scale(1.1)
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.6)
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.6)
@keyframes urgent-pulse
0%, 100%
transform: scale(1)
background: rgba(255, 100, 100, 0.2)
50%
transform: scale(1.05)
background: rgba(255, 100, 100, 0.3)