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

Use static song
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 1m9s
Details

Browse Source
This commit is contained in:
Mathias Wagner 2025-02-27 21:43:08 +01:00
parent 77e71412d7
commit 1fa7698c1b
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/pages/Home/Home.jsx
View File

@ -4,19 +4,16 @@ import {useContext, useState, useEffect, useRef} from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMusic } from '@fortawesome/free-solid-svg-icons';
const songs = ["Twinkle Twinkle Little Star", "Happy Birthday", "Jingle Bells", "Mary Had a Little Lamb", "Old MacDonald Had a Farm"];
export const Home = () => {
const {setCurrentState} = useContext(StateContext);
const [frequency, setFrequency] = useState(440);
const [isPlaying, setIsPlaying] = useState(false);
const [currentSong, setCurrentSong] = useState(songs[Math.floor(Math.random() * songs.length)]);
const [dragging, setDragging] = useState(false);
const audioContextRef = useRef(null);
const oscillatorRef = useRef(null);
const gainNodeRef = useRef(null);
const sliderRef = useRef(null);
const [messages, setMessages] = useState([]);
const [messages, setMessages] = useState([{ sender: "Marco", text: "Hallo!" },]);
const [inputValue, setInputValue] = useState("");
const messageEndRef = useRef(null);
@ -98,12 +95,12 @@ export const Home = () => {
</div>
<div className="main-content">
<div className="song-display">
<h2>Play this song:</h2>
<h2>ToneGuessr</h2>
<div className="song-card">
<img src="https://place-hold.it/500x500" alt="Song" />
<img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/fe529a64193929.5aca8500ba9ab.jpg" alt="Song" />
<div className="song-info">
<div className="song-name">{currentSong}</div>
<div className="song-description">A beautiful classic song for you to play on the Otamatone.</div>
<div className="song-name">Black Steam</div>
<div className="song-description">von Carrot Quest GmbH</div>
</div>
</div>
</div>
@ -127,7 +124,7 @@ export const Home = () => {
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
placeholder="Type your message..."
placeholder="Gib eine Nachricht ein..."
/>
<button onClick={handleSendMessage}>Send</button>
</div>