client/src/pages/Home
@ -1,13 +1,164 @@
|
||||
import "./styles.sass";
|
||||
import {StateContext} from "@/common/contexts/StateContext";
|
||||
import {useContext} from "react";
|
||||
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 [inputValue, setInputValue] = useState("");
|
||||
const messageEndRef = useRef(null);
|
||||
|
||||
const startAudio = () => {
|
||||
if (!audioContextRef.current) {
|
||||
audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
if (!oscillatorRef.current) {
|
||||
oscillatorRef.current = audioContextRef.current.createOscillator();
|
||||
oscillatorRef.current.type = 'sine';
|
||||
oscillatorRef.current.frequency.setValueAtTime(frequency, audioContextRef.current.currentTime);
|
||||
|
||||
gainNodeRef.current = audioContextRef.current.createGain();
|
||||
gainNodeRef.current.gain.setValueAtTime(0.5, audioContextRef.current.currentTime);
|
||||
|
||||
oscillatorRef.current.connect(gainNodeRef.current);
|
||||
gainNodeRef.current.connect(audioContextRef.current.destination);
|
||||
oscillatorRef.current.start();
|
||||
} else {
|
||||
oscillatorRef.current.frequency.setValueAtTime(frequency, audioContextRef.current.currentTime);
|
||||
}
|
||||
setIsPlaying(true);
|
||||
};
|
||||
|
||||
const stopAudio = () => {
|
||||
if (oscillatorRef.current) {
|
||||
oscillatorRef.current.stop();
|
||||
oscillatorRef.current.disconnect();
|
||||
oscillatorRef.current = null;
|
||||
}
|
||||
setIsPlaying(false);
|
||||
};
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
setDragging(true);
|
||||
startAudio();
|
||||
handleFrequencyChange(e);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setDragging(false);
|
||||
stopAudio();
|
||||
};
|
||||
|
||||
const handleFrequencyChange = (e) => {
|
||||
if (isPlaying || dragging) {
|
||||
const rect = sliderRef.current.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left; // x position within the element.
|
||||
const newFrequency = 20 + (x / rect.width) * 1980; // Scale to frequency range
|
||||
setFrequency(newFrequency);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isPlaying) {
|
||||
if (oscillatorRef.current) {
|
||||
oscillatorRef.current.frequency.setValueAtTime(frequency, audioContextRef.current.currentTime);
|
||||
}
|
||||
}
|
||||
}, [frequency, isPlaying]);
|
||||
|
||||
useEffect(() => {
|
||||
messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const handleSendMessage = () => {
|
||||
if (inputValue.trim()) {
|
||||
setMessages([...messages, { sender: "User", text: inputValue }]);
|
||||
setInputValue("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="home-page">
|
||||
<h2>ToneGuessr</h2>
|
||||
<div className="background-elements">
|
||||
<FontAwesomeIcon icon={faMusic} className="music-note note-1" />
|
||||
<FontAwesomeIcon icon={faMusic} className="music-note note-2" />
|
||||
<FontAwesomeIcon icon={faMusic} className="music-note note-3" />
|
||||
</div>
|
||||
<div className="main-content">
|
||||
<div className="song-display">
|
||||
<h2>Play this song:</h2>
|
||||
<div className="song-card">
|
||||
<img src="https://place-hold.it/500x500" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chat-window">
|
||||
<div className="chat-header">
|
||||
<div className="account-icon"></div>
|
||||
<div className="chat-title">Chat</div>
|
||||
</div>
|
||||
<div className="chat-messages">
|
||||
{messages.map((message, index) => (
|
||||
<div key={index} className="message">
|
||||
<span className="message-sender">{message.sender}:</span>
|
||||
<span className="message-text">{message.text}</span>
|
||||
</div>
|
||||
))}
|
||||
<div ref={messageEndRef}></div>
|
||||
</div>
|
||||
<div className="chat-input">
|
||||
<input
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
|
||||
placeholder="Type your message..."
|
||||
/>
|
||||
<button onClick={handleSendMessage}>Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="otamatone-container">
|
||||
<div
|
||||
className="otamatone"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseMove={handleFrequencyChange}
|
||||
onMouseLeave={handleMouseUp}
|
||||
>
|
||||
<div className="otamatone-neck" ref={sliderRef}>
|
||||
<div className="frequency-indicator" style={{ left: `${(frequency - 20) / 1980 * 100}%` }}></div>
|
||||
<div className="note-marker" style={{left: '10%', pointerEvents: 'none'}}>♩</div>
|
||||
<div className="note-marker" style={{left: '50%', pointerEvents: 'none'}}>♪</div>
|
||||
<div className="note-marker" style={{left: '90%', pointerEvents: 'none'}}>♫</div>
|
||||
</div>
|
||||
<div className="otamatone-face">
|
||||
<div
|
||||
className="otamatone-mouth"
|
||||
style={{ height: `${10 + (frequency / 2000) * 40}px`, width: `${10 + (frequency / 2000) * 40}px` }}
|
||||
></div>
|
||||
<div className="otamatone-eyes">
|
||||
<div className="eye left-eye"></div>
|
||||
<div className="eye right-eye"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,257 @@
|
||||
.home-page
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
height: 100vh
|
||||
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364)
|
||||
padding: 20px
|
||||
user-select: none
|
||||
overflow: hidden
|
||||
position: relative
|
||||
|
||||
h2
|
||||
font-size: 48pt
|
||||
.background-elements
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
overflow: hidden
|
||||
z-index: 0
|
||||
|
||||
.music-note
|
||||
position: absolute
|
||||
font-size: 24pt
|
||||
color: rgba(255, 255, 255, 0.5)
|
||||
animation: float-notes 5s infinite ease-in-out
|
||||
|
||||
&.note-1
|
||||
top: 20%
|
||||
left: 30%
|
||||
|
||||
&.note-2
|
||||
top: 60%
|
||||
left: 80%
|
||||
|
||||
&.note-3
|
||||
top: 90%
|
||||
left: 50%
|
||||
|
||||
@keyframes float-notes
|
||||
0%
|
||||
transform: translateY(0)
|
||||
50%
|
||||
transform: translateY(-10px)
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
.main-content
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: flex-start
|
||||
justify-content: center
|
||||
width: 100%
|
||||
padding: 20px
|
||||
z-index: 1
|
||||
|
||||
.song-display
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
width: 50%
|
||||
margin-right: 20px
|
||||
color: #fff
|
||||
text-align: center
|
||||
|
||||
h2
|
||||
font-size: 36pt
|
||||
color: #fff
|
||||
margin-bottom: 20px
|
||||
|
||||
.song-card
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
background-color: rgba(255, 255, 255, 0.1)
|
||||
padding: 20px
|
||||
border-radius: 20px
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5)
|
||||
backdrop-filter: blur(10px)
|
||||
border: 1px solid rgba(255, 255, 255, 0.2)
|
||||
max-width: 500px
|
||||
|
||||
img
|
||||
width: 100px
|
||||
height: 100px
|
||||
border-radius: 10px
|
||||
margin-right: 20px
|
||||
|
||||
.song-info
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
|
||||
.song-name
|
||||
font-size: 24pt
|
||||
color: #fff
|
||||
margin-bottom: 10px
|
||||
|
||||
.song-description
|
||||
font-size: 14pt
|
||||
color: #aaa
|
||||
|
||||
.chat-window
|
||||
width: 50%
|
||||
height: 400px
|
||||
background: rgba(255, 255, 255, 0.1)
|
||||
backdrop-filter: blur(10px)
|
||||
border-radius: 10px
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
|
||||
border: 1px solid rgba(255, 255, 255, 0.2)
|
||||
display: flex
|
||||
flex-direction: column
|
||||
overflow: hidden
|
||||
|
||||
.chat-header
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 10px
|
||||
background: rgba(30, 30, 30, 0.5)
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
|
||||
|
||||
.account-icon
|
||||
width: 30px
|
||||
height: 30px
|
||||
background: url('https://place-hold.it/100x100') no-repeat center
|
||||
background-size: cover
|
||||
border-radius: 50%
|
||||
margin-right: 10px
|
||||
|
||||
.chat-title
|
||||
font-size: 16pt
|
||||
color: #fff
|
||||
|
||||
.chat-messages
|
||||
flex: 1
|
||||
padding: 10px
|
||||
overflow-y: auto
|
||||
color: #fff
|
||||
|
||||
.message
|
||||
margin-bottom: 10px
|
||||
|
||||
.message-sender
|
||||
font-weight: bold
|
||||
|
||||
.message-text
|
||||
margin-left: 10px
|
||||
|
||||
.chat-input
|
||||
display: flex
|
||||
padding: 10px
|
||||
background: rgba(30, 30, 30, 0.5)
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2)
|
||||
|
||||
input
|
||||
flex: 1
|
||||
padding: 10px
|
||||
border: none
|
||||
border-radius: 5px
|
||||
outline: none
|
||||
background: rgba(255, 255, 255, 0.2)
|
||||
color: #fff
|
||||
|
||||
button
|
||||
margin-left: 10px
|
||||
padding: 10px
|
||||
background-color: #203a43
|
||||
color: #fff
|
||||
border: none
|
||||
border-radius: 5px
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: #1e1e1e
|
||||
|
||||
.otamatone-container
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
position: fixed
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
padding: 20px
|
||||
background-color: rgba(30, 30, 30, 0.5)
|
||||
backdrop-filter: blur(10px)
|
||||
border-radius: 20px
|
||||
margin: 20px
|
||||
z-index: 1
|
||||
|
||||
.otamatone
|
||||
display: flex
|
||||
flex-direction: row
|
||||
align-items: center
|
||||
cursor: pointer
|
||||
padding: 10px
|
||||
width: 100%
|
||||
|
||||
.otamatone-neck
|
||||
flex: 1
|
||||
height: 20px
|
||||
background: linear-gradient(135deg, #000, #444)
|
||||
border-radius: 10px
|
||||
position: relative
|
||||
|
||||
.frequency-indicator
|
||||
position: absolute
|
||||
top: -10px
|
||||
width: 20px
|
||||
height: 20px
|
||||
background-color: #ff0000
|
||||
border-radius: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
.note-marker
|
||||
position: absolute
|
||||
top: -30px
|
||||
font-size: 24pt
|
||||
color: #fff
|
||||
|
||||
.otamatone-face
|
||||
width: 100px
|
||||
height: 100px
|
||||
background: radial-gradient(circle, #fff, #ddd)
|
||||
border-radius: 50%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
justify-content: center
|
||||
position: relative
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
|
||||
|
||||
.otamatone-eyes
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
width: 60%
|
||||
position: absolute
|
||||
top: 30px
|
||||
|
||||
.eye
|
||||
width: 15px
|
||||
height: 15px
|
||||
background-color: #000
|
||||
border-radius: 50%
|
||||
|
||||
.left-eye
|
||||
margin-right: 10px
|
||||
|
||||
.right-eye
|
||||
margin-left: 10px
|
||||
|
||||
.otamatone-mouth
|
||||
background-color: #000
|
||||
border-radius: 50%
|
||||
position: absolute
|
||||
bottom: 10px
|
||||
Reference in New Issue
Block a user