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

Update layout

Browse Source
This commit is contained in:
Mathias Wagner 2025-03-01 00:51:34 +01:00
parent 184aa09fcf
commit 6e8a235629
2 changed files with 475 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import {SocketContext} from "@/common/contexts/SocketContext";
import {useContext, useState, useEffect, useRef, useCallback} from "react";
import MusicSlider from "@/pages/Game/components/MusicSlider";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faMessage, faMusic, faHeadphones, faClock, faCrown} from "@fortawesome/free-solid-svg-icons";
import {faMessage, faMusic, faHeadphones, faClock, faCrown, faPaperPlane} from "@fortawesome/free-solid-svg-icons";
export const Game = () => {
const {send, on, socket, connected, connect} = useContext(SocketContext);
@ -384,10 +384,12 @@ export const Game = () => {
<div className="game-round">Runde {round}</div>
</div>
<div className="main-content">
{renderPhaseContent()}
<div className="game-layout">
<div className="main-content">
{renderPhaseContent()}
</div>
<div className="chat-window">
<div className="chat-panel">
<div className="chat-header">
<FontAwesomeIcon icon={faMessage} />
<div className="chat-title">Chat</div>
@ -411,14 +413,15 @@ export const Game = () => {
<input type="text" value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
placeholder="Gib eine Nachricht ein..."
placeholder="Nachricht..."
/>
<button onClick={handleSendMessage}>Send</button>
<button onClick={handleSendMessage} className="send-button">
<FontAwesomeIcon icon={faPaperPlane} />
</button>
</div>
</div>
</div>
{/* Only render MusicSlider during composing phase */}
{phase === "composing" && (
<MusicSlider
isReadOnly={role !== "composer"}

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

@ -1,26 +1,481 @@
@import "@/common/styles/colors"
// Main layout improvements
.game-page
display: flex
flex-direction: column
align-items: center
justify-content: center
height: 100vh
width: 100vw
padding: 20px
position: relative
animation: page-fade-in 1s ease-in-out
overflow: hidden
.main-content
.game-layout
display: flex
flex-direction: row
align-items: flex-start
justify-content: center
width: 100%
padding: 20px
height: calc(100vh - 180px)
justify-content: space-between
align-items: stretch
padding: 0 20px
z-index: 2
position: relative
animation: float-up 1.5s ease-out
.main-content
flex: 1
padding: 20px 30px
overflow-y: auto
display: flex
flex-direction: column
align-items: center
min-width: 0 // Fix for flex child overflow
margin-right: 20px
// Redesigned chat panel
.chat-panel
width: 280px
height: 100%
background: rgba(255, 255, 255, 0.08)
backdrop-filter: blur(10px)
border-radius: 20px
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
border: 1px solid rgba(255, 255, 255, 0.2)
display: flex
flex-direction: column
overflow: hidden
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
animation: slide-in-right 0.5s ease-out
.chat-header
display: flex
align-items: center
padding: 12px 15px
background: rgba(30, 30, 30, 0.5)
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
svg
font-size: 16px
color: $white
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
animation: icon-pulse 3s infinite alternate ease-in-out
.chat-title
margin-left: 10px
font-size: 16px
color: $white
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3)
.chat-messages
flex: 1
padding: 10px
overflow-y: auto
color: $white
font-size: 14px
&::-webkit-scrollbar
width: 4px
background: transparent
&::-webkit-scrollbar-thumb
background: rgba(255, 255, 255, 0.2)
border-radius: 2px
&:hover
background: rgba(255, 255, 255, 0.3)
.message
margin-bottom: 8px
padding: 6px 10px
border-radius: 8px
background: rgba(255, 255, 255, 0.05)
word-break: break-word
&:hover
background: rgba(255, 255, 255, 0.1)
.message-sender
font-weight: bold
color: $yellow
margin-right: 4px
font-size: 13px
.message-text
font-size: 13px
.message-text.system
font-style: italic
color: rgba(255, 255, 255, 0.6)
.system-message
text-align: center
color: rgba(255, 255, 255, 0.6)
padding: 4px 0
font-size: 12px
.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: 8px 12px
border: none
border-radius: 8px
outline: none
background: rgba(0, 0, 0, 0.3)
color: $white
font-size: 14px
&:focus
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2)
.send-button
margin-left: 8px
width: 36px
height: 36px
background: linear-gradient(135deg, $purple, $blue)
color: $white
border: none
border-radius: 50%
cursor: pointer
display: flex
align-items: center
justify-content: center
transition: all 0.2s ease
&:hover
transform: translateY(-2px)
box-shadow: 0 4px 15px rgba(102, 204, 255, 0.5)
&:active
transform: translateY(0)
// Game header improvements
.game-header
display: flex
justify-content: space-between
align-items: center
width: 100%
padding: 15px 30px
margin-bottom: 10px
border-bottom: 1px solid rgba(255, 255, 255, 0.1)
background: rgba(0, 0, 0, 0.2)
backdrop-filter: blur(10px)
h2
font-size: 32px
background: linear-gradient(135deg, $yellow, $pink)
background-clip: text
-webkit-background-clip: text
color: transparent
margin: 0
animation: pulse 3s infinite alternate ease-in-out
text-shadow: 0 0 15px rgba(255, 255, 255, 0.3)
.game-role, .game-round
background: rgba(255, 255, 255, 0.1)
padding: 8px 15px
border-radius: 20px
border: 1px solid rgba(255, 255, 255, 0.2)
display: flex
align-items: center
font-size: 14px
svg
margin-right: 8px
color: $yellow
// Improved button styles
.submit-guess-button, .next-round-button, button:not(.send-button)
background: linear-gradient(135deg, $purple, $blue)
color: #fff
border: none
border-radius: 10px
padding: 12px 25px
font-size: 16px
font-weight: bold
cursor: pointer
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
display: inline-flex
align-items: center
justify-content: center
position: relative
overflow: hidden
&:before
content: ""
position: absolute
top: -50%
left: -50%
width: 200%
height: 200%
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
opacity: 0
transition: opacity 0.5s ease
svg
margin-right: 10px
&:hover:not(.disabled)
transform: translateY(-5px)
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 204, 255, 0.4)
&:before
opacity: 1
&:active:not(.disabled)
transform: translateY(-2px)
&.disabled
opacity: 0.5
cursor: not-allowed
background: linear-gradient(135deg, #777, #555)
// Content component improvements
.waiting-phase
text-align: center
padding: 100px 0
animation: fade-in 0.5s ease-out
h3
font-size: 24px
color: $white
margin-bottom: 20px
animation: pulse 2s infinite alternate ease-in-out
.composing-phase, .guessing-phase, .results-phase
width: 100%
max-width: 800px
margin: 0 auto
animation: fade-in 0.5s ease-out
.song-display
text-align: center
.song-card
display: flex
flex-direction: row
align-items: center
background: rgba(255, 255, 255, 0.08)
padding: 25px
border-radius: 20px
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
backdrop-filter: blur(10px)
border: 1px solid rgba(255, 255, 255, 0.2)
max-width: 500px
margin: 20px auto
transition: all 0.3s ease
&:hover
transform: translateY(-5px)
border-color: rgba(255, 255, 255, 0.4)
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.1)
img
width: 120px
height: 120px
object-fit: cover
border-radius: 15px
margin-right: 20px
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5)
.song-info
text-align: left
.song-names
font-size: 24px
color: $white
margin-bottom: 10px
.song-description
font-size: 16px
color: rgba(255, 255, 255, 0.7)
.phase-header
display: flex
justify-content: space-between
align-items: center
width: 100%
margin-bottom: 30px
h3
font-size: 24px
margin: 0
color: $white
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3)
.timer
background: rgba(255, 255, 255, 0.1)
padding: 10px 20px
border-radius: 15px
font-size: 18px
display: flex
align-items: center
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)
border: 1px solid rgba(255, 255, 255, 0.1)
svg
margin-right: 10px
color: $yellow
// Improved song selection grid
.song-selection
width: 100%
.instruction
text-align: center
font-size: 20px
margin-bottom: 30px
color: $white
.song-grid
display: grid
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
gap: 20px
margin-top: 20px
.song-option
background: rgba(255, 255, 255, 0.1)
border-radius: 15px
overflow: hidden
cursor: pointer
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
border: 2px solid transparent
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
height: 100%
&:hover:not(.disabled)
transform: translateY(-8px) scale(1.03)
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 255, 255, 0.1)
background: rgba(255, 255, 255, 0.15)
&.selected
border: 2px solid $yellow
box-shadow: 0 0 25px rgba(255, 255, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.4)
background: rgba(255, 255, 255, 0.15)
&.disabled
opacity: 0.7
cursor: default
.song-image
position: relative
img
width: 100%
height: 150px
object-fit: cover
.selection-indicator
position: absolute
top: 10px
right: 10px
background: $yellow
width: 30px
height: 30px
border-radius: 50%
display: flex
align-items: center
justify-content: center
box-shadow: 0 0 15px rgba(255, 255, 0, 0.7)
.song-details
padding: 15px
.song-title
font-weight: bold
font-size: 16px
color: $white
.song-artist
font-size: 14px
opacity: 0.7
margin-top: 5px
// Results phase improvements
.results-phase
text-align: center
h3
font-size: 28px
margin-bottom: 40px
.round-results
background: rgba(255, 255, 255, 0.08)
backdrop-filter: blur(10px)
border-radius: 25px
padding: 30px
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4)
border: 1px solid rgba(255, 255, 255, 0.15)
max-width: 600px
margin: 0 auto
.scoreboard
margin-top: 30px
padding-top: 20px
border-top: 1px solid rgba(255, 255, 255, 0.1)
h4
margin-bottom: 15px
font-size: 20px
.scores
display: grid
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
gap: 10px
.score-entry
background: rgba(255, 255, 255, 0.1)
border-radius: 10px
padding: 10px 15px
display: flex
justify-content: space-between
align-items: center
&:nth-child(1)
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1))
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3)
&:nth-child(2)
background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(192, 192, 192, 0.1))
&:nth-child(3)
background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.1))
.player-name
display: flex
align-items: center
.host-icon
color: $yellow
margin-left: 5px
// Responsive adjustments
@media (max-width: 900px)
.game-layout
flex-direction: column
.main-content
margin-right: 0
margin-bottom: 20px
.chat-panel
width: 100%
max-height: 300px
// Animations
@keyframes slide-in-right
0%
transform: translateX(30px)
opacity: 0
100%
transform: translateX(0)
opacity: 1
// ...existing animations...
.song-display
display: flex
@ -281,33 +736,6 @@
opacity: 1
animation: rotate-background 5s linear infinite
.game-header
display: flex
justify-content: space-between
align-items: center
width: 100%
padding: 10px 20px
margin-bottom: 20px
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
.game-role
display: flex
align-items: center
background: rgba(255, 255, 255, 0.1)
padding: 8px 15px
border-radius: 20px
border: 1px solid rgba(255, 255, 255, 0.2)
svg
margin-right: 8px
color: $yellow
.game-round
background: rgba(255, 255, 255, 0.1)
padding: 8px 15px
border-radius: 20px
border: 1px solid rgba(255, 255, 255, 0.2)
.phase-header
display: flex
justify-content: space-between