More host UI refinements, intuitive UI enhancements during gameplay.
This commit is contained in:
Aaron D. Lee
197
client/style.css
197
client/style.css
@@ -44,6 +44,115 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Golf title - golf ball with dimples and shine */
|
||||
.golf-title {
|
||||
font-size: 1.3em;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.02em;
|
||||
/* Shiny gradient like a golf ball surface */
|
||||
background:
|
||||
/* Dimple pattern - diagonal grid */
|
||||
radial-gradient(circle at 3px 3px, rgba(0,0,0,0.18) 2px, transparent 2px),
|
||||
/* Shiny highlight gradient - whiter */
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#ffffff 0%,
|
||||
#ffffff 25%,
|
||||
#f5f5f2 50%,
|
||||
#ffffff 75%,
|
||||
#f0f0ed 100%
|
||||
);
|
||||
background-size: 10px 10px, 100% 100%;
|
||||
background-position: 0 0, 0 0;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow:
|
||||
2px 2px 4px rgba(0, 0, 0, 0.2),
|
||||
-1px -1px 0 rgba(255, 255, 255, 0.4);
|
||||
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.15));
|
||||
}
|
||||
|
||||
/* Golfer swing animation */
|
||||
.golfer-swing {
|
||||
display: inline-block;
|
||||
transform: scaleX(-1);
|
||||
animation: golf-swing 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes golf-swing {
|
||||
0% {
|
||||
transform: scaleX(-1) translateX(0) rotate(0deg);
|
||||
}
|
||||
/* Wind up - pull back leg */
|
||||
30% {
|
||||
transform: scaleX(-1) translateX(-8px) rotate(-15deg);
|
||||
}
|
||||
/* Hold briefly */
|
||||
40% {
|
||||
transform: scaleX(-1) translateX(-8px) rotate(-15deg);
|
||||
}
|
||||
/* KICK! */
|
||||
55% {
|
||||
transform: scaleX(-1) translateX(8px) rotate(20deg);
|
||||
}
|
||||
/* Follow through */
|
||||
80% {
|
||||
transform: scaleX(-1) translateX(4px) rotate(12deg);
|
||||
}
|
||||
/* Final pose - freeze */
|
||||
100% {
|
||||
transform: scaleX(-1) translateX(3px) rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Kicked golf ball - parabolic trajectory */
|
||||
.kicked-ball {
|
||||
display: inline-block;
|
||||
font-size: 0.2em;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
animation: ball-kicked 0.7s linear forwards;
|
||||
animation-delay: 0.72s;
|
||||
}
|
||||
|
||||
/* Trajectory: y = 0.0124x² - 1.42x (parabola with peak at x=57) */
|
||||
@keyframes ball-kicked {
|
||||
0% {
|
||||
transform: translate(-12px, 8px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
15% {
|
||||
transform: translate(8px, -16px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
transform: translate(28px, -31px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
45% {
|
||||
transform: translate(48px, -38px) scale(0.95);
|
||||
opacity: 1;
|
||||
}
|
||||
55% {
|
||||
transform: translate(63px, -38px) scale(0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
transform: translate(83px, -27px) scale(0.85);
|
||||
opacity: 0.9;
|
||||
}
|
||||
85% {
|
||||
transform: translate(103px, -6px) scale(0.75);
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: translate(118px, 25px) scale(0.65);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#lobby-screen .form-group {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -510,6 +619,9 @@ input::placeholder {
|
||||
|
||||
.header-col-center {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-col-right {
|
||||
@@ -563,7 +675,7 @@ input::placeholder {
|
||||
.active-rules-bar .rules-list {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.active-rules-bar .rule-tag {
|
||||
@@ -580,6 +692,18 @@ input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.active-rules-bar .rule-tag.rule-more {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: help;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.active-rules-bar .rule-tag.rule-more:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
width: clamp(65px, 5.5vw, 100px);
|
||||
@@ -661,6 +785,16 @@ input::placeholder {
|
||||
box-shadow: 0 0 0 3px #f4a460;
|
||||
}
|
||||
|
||||
/* Disable hover effects when not player's turn */
|
||||
.not-my-turn .card {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.not-my-turn .card:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card.selected,
|
||||
.card.clickable.selected {
|
||||
box-shadow: 0 0 0 4px #fff, 0 0 12px 4px #f4a460;
|
||||
@@ -1060,9 +1194,13 @@ input::placeholder {
|
||||
/* Round winner highlight */
|
||||
.opponent-area.round-winner h4,
|
||||
.player-area.round-winner h4 {
|
||||
background: rgba(200, 255, 50, 0.6);
|
||||
box-shadow: 0 0 8px rgba(200, 255, 50, 0.5);
|
||||
color: #0a2a10;
|
||||
background: rgba(180, 255, 80, 0.85);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.winner-crown {
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/* Status message in header */
|
||||
@@ -1081,6 +1219,31 @@ input::placeholder {
|
||||
color: #1a472a;
|
||||
}
|
||||
|
||||
/* Final turn badge - separate indicator */
|
||||
.final-turn-badge {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
color: #fff;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
animation: pulse-subtle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.final-turn-badge.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes pulse-subtle {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toastIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
@@ -1670,6 +1833,16 @@ input::placeholder {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Disable hover effects when not player's turn */
|
||||
.not-my-turn .real-card {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.not-my-turn .real-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.real-card.selected {
|
||||
box-shadow: 0 0 0 4px #fff, 0 0 15px 5px #f4a460;
|
||||
transform: scale(1.06);
|
||||
@@ -2159,14 +2332,26 @@ input::placeholder {
|
||||
#rules-screen {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#rules-screen.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#rules-screen h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.rules-container {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 25px 35px;
|
||||
padding: 20px 35px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.rules-container h1 {
|
||||
|
||||
Reference in New Issue
Block a user