From 6e8a23562939aaca40e647ad1d6f01452f0292a6 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 1 Mar 2025 00:51:34 +0100
Subject: [PATCH] Update layout

---
 client/src/pages/Game/Game.jsx    |  19 +-
 client/src/pages/Game/styles.sass | 500 +++++++++++++++++++++++++++---
 2 files changed, 475 insertions(+), 44 deletions(-)

diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx
index 86a08d2..3df6817 100644
--- a/client/src/pages/Game/Game.jsx
+++ b/client/src/pages/Game/Game.jsx
@@ -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"} 
diff --git a/client/src/pages/Game/styles.sass b/client/src/pages/Game/styles.sass
index 863e2cc..48cec92 100644
--- a/client/src/pages/Game/styles.sass
+++ b/client/src/pages/Game/styles.sass
@@ -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
-
-  .main-content
+  overflow: hidden
+  
+  .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