alee/golfgame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Update client UI with latest changes

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-24 19:29:08 -05:00
parent d18cea2104
commit ac84a76c3d
3 changed files with 83 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
client/style.css
View File

@@ -24,7 +24,7 @@ body {
max-width: none;
width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 0 15px;
padding: 0;
box-sizing: border-box;
}
@@ -281,14 +281,28 @@ input::placeholder {
/* Game Screen */
.game-header {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
padding: 5px 12px;
gap: clamp(15px, 3vw, 40px);
padding: 6px 15px;
background: rgba(0,0,0,0.2);
border-radius: 6px;
font-size: 0.8rem;
width: calc(100vw - 30px);
max-width: 1400px;
font-size: 0.85rem;
width: calc(100vw - 250px);
margin-left: 10px;
}
.game-header .turn-info {
font-weight: 600;
color: #f4a460;
}
.game-header .leader-info {
opacity: 0.9;
}
.game-header .score-info {
opacity: 0.9;
}
.mute-btn {
@@ -653,26 +667,35 @@ input::placeholder {
max-width: 100%;
}
/* Scoreboard Panel - positioned as overlay */
/* Scoreboard Panel - positioned as overlay with cool styling */
.scoreboard-panel {
position: fixed;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.7);
border-radius: 8px;
padding: 10px;
width: 200px;
top: 15px;
right: 15px;
background: linear-gradient(145deg, rgba(20, 60, 40, 0.95) 0%, rgba(10, 35, 25, 0.98) 100%);
border-radius: 12px;
padding: 12px;
width: 210px;
flex-shrink: 0;
overflow: hidden;
z-index: 100;
backdrop-filter: blur(4px);
backdrop-filter: blur(8px);
border: 1px solid rgba(244, 164, 96, 0.3);
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.4),
0 0 30px rgba(244, 164, 96, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.scoreboard-panel > h4 {
font-size: 0.85rem;
font-size: 0.9rem;
text-align: center;
margin-bottom: 8px;
opacity: 0.9;
margin-bottom: 10px;
color: #f4a460;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.scoreboard-panel table {
@@ -683,27 +706,32 @@ input::placeholder {
.scoreboard-panel th,
.scoreboard-panel td {
padding: 5px 4px;
padding: 6px 5px;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.15);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.scoreboard-panel th {
font-weight: 600;
background: rgba(0,0,0,0.2);
background: rgba(0,0,0,0.3);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.7);
}
.scoreboard-panel td:first-child {
text-align: left;
font-weight: 500;
}
.scoreboard-panel tr.winner {
background: rgba(244, 164, 96, 0.3);
background: linear-gradient(90deg, rgba(244, 164, 96, 0.4) 0%, rgba(244, 164, 96, 0.2) 100%);
}
.scoreboard-panel tr.current-player {
background: rgba(244, 164, 96, 0.15);
background: rgba(244, 164, 96, 0.2);
box-shadow: inset 3px 0 0 #f4a460;
}
.game-buttons {