More host UI refinements, intuitive UI enhancements during gameplay.
This commit is contained in:
Aaron D. Lee
@@ -189,6 +189,7 @@ class GolfGame {
|
||||
this.leaveGameBtn = document.getElementById('leave-game-btn');
|
||||
this.activeRulesBar = document.getElementById('active-rules-bar');
|
||||
this.activeRulesList = document.getElementById('active-rules-list');
|
||||
this.finalTurnBadge = document.getElementById('final-turn-badge');
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
@@ -1261,10 +1262,22 @@ class GolfGame {
|
||||
if (rules.length === 0) {
|
||||
// Show "Standard Rules" when no variants selected
|
||||
this.activeRulesList.innerHTML = '<span class="rule-tag standard">Standard</span>';
|
||||
} else {
|
||||
} else if (rules.length <= 2) {
|
||||
// Show all rules if 2 or fewer
|
||||
this.activeRulesList.innerHTML = rules
|
||||
.map(rule => `<span class="rule-tag">${rule}</span>`)
|
||||
.join('');
|
||||
} else {
|
||||
// Show first 2 rules + "+N more" with tooltip
|
||||
const displayed = rules.slice(0, 2);
|
||||
const hidden = rules.slice(2);
|
||||
const moreCount = hidden.length;
|
||||
const tooltip = hidden.join(', ');
|
||||
|
||||
this.activeRulesList.innerHTML = displayed
|
||||
.map(rule => `<span class="rule-tag">${rule}</span>`)
|
||||
.join('') +
|
||||
`<span class="rule-tag rule-more" title="${tooltip}">+${moreCount} more</span>`;
|
||||
}
|
||||
this.activeRulesBar.classList.remove('hidden');
|
||||
}
|
||||
@@ -1351,20 +1364,24 @@ class GolfGame {
|
||||
updateStatusFromGameState() {
|
||||
if (!this.gameState) {
|
||||
this.setStatus('');
|
||||
this.finalTurnBadge.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
const isFinalTurn = this.gameState.phase === 'final_turn';
|
||||
const currentPlayer = this.gameState.players.find(p => p.id === this.gameState.current_player_id);
|
||||
|
||||
// Show/hide final turn badge separately
|
||||
if (isFinalTurn) {
|
||||
this.finalTurnBadge.classList.remove('hidden');
|
||||
} else {
|
||||
this.finalTurnBadge.classList.add('hidden');
|
||||
}
|
||||
|
||||
if (currentPlayer && currentPlayer.id !== this.playerId) {
|
||||
const prefix = isFinalTurn ? '⚡ Final turn: ' : '';
|
||||
this.setStatus(`${prefix}${currentPlayer.name}'s turn`);
|
||||
this.setStatus(`${currentPlayer.name}'s turn`);
|
||||
} else if (this.isMyTurn()) {
|
||||
const message = isFinalTurn
|
||||
? '⚡ Final turn! Draw a card'
|
||||
: 'Your turn - draw a card';
|
||||
this.setStatus(message, 'your-turn');
|
||||
this.setStatus('Your turn - draw a card', 'your-turn');
|
||||
} else {
|
||||
this.setStatus('');
|
||||
}
|
||||
@@ -1467,6 +1484,14 @@ class GolfGame {
|
||||
this.currentRoundSpan.textContent = this.gameState.current_round;
|
||||
this.totalRoundsSpan.textContent = this.gameState.total_rounds;
|
||||
|
||||
// Show/hide final turn badge
|
||||
const isFinalTurn = this.gameState.phase === 'final_turn';
|
||||
if (isFinalTurn) {
|
||||
this.finalTurnBadge.classList.remove('hidden');
|
||||
} else {
|
||||
this.finalTurnBadge.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Update status message (handled by specific actions, but set default here)
|
||||
const currentPlayer = this.gameState.players.find(p => p.id === this.gameState.current_player_id);
|
||||
if (currentPlayer && currentPlayer.id !== this.playerId) {
|
||||
@@ -1487,9 +1512,14 @@ class GolfGame {
|
||||
// Update player name in header (truncate if needed)
|
||||
const displayName = me.name.length > 12 ? me.name.substring(0, 11) + '…' : me.name;
|
||||
const checkmark = me.all_face_up ? ' ✓' : '';
|
||||
const crownEmoji = isRoundWinner ? ' 👑' : '';
|
||||
// Set text content before the score span
|
||||
this.playerHeader.childNodes[0].textContent = displayName + checkmark + crownEmoji;
|
||||
// Remove old crown if exists
|
||||
const existingCrown = this.playerHeader.querySelector('.winner-crown');
|
||||
if (existingCrown) existingCrown.remove();
|
||||
// Set content - crown goes at the start
|
||||
this.playerHeader.firstChild.textContent = displayName + checkmark;
|
||||
if (isRoundWinner) {
|
||||
this.playerHeader.insertAdjacentHTML('afterbegin', '<span class="winner-crown">👑</span>');
|
||||
}
|
||||
}
|
||||
|
||||
// Update discard pile (skip if holding a drawn card)
|
||||
@@ -1554,10 +1584,10 @@ class GolfGame {
|
||||
|
||||
const displayName = player.name.length > 12 ? player.name.substring(0, 11) + '…' : player.name;
|
||||
const showingScore = this.calculateShowingScore(player.cards);
|
||||
const crownEmoji = isRoundWinner ? ' 👑' : '';
|
||||
const crownHtml = isRoundWinner ? '<span class="winner-crown">👑</span>' : '';
|
||||
|
||||
div.innerHTML = `
|
||||
<h4>${displayName}${player.all_face_up ? ' ✓' : ''}${crownEmoji}<span class="opponent-showing">${showingScore}</span></h4>
|
||||
<h4>${crownHtml}${displayName}${player.all_face_up ? ' ✓' : ''}<span class="opponent-showing">${showingScore}</span></h4>
|
||||
<div class="card-grid">
|
||||
${player.cards.map(card => this.renderCard(card, false, false)).join('')}
|
||||
</div>
|
||||
@@ -1734,6 +1764,14 @@ class GolfGame {
|
||||
showScoreboard(scores, isFinal, rankings) {
|
||||
this.scoreTable.innerHTML = '';
|
||||
|
||||
// Clear the final turn badge and status message
|
||||
this.finalTurnBadge.classList.add('hidden');
|
||||
if (isFinal) {
|
||||
this.setStatus('Game Over!');
|
||||
} else {
|
||||
this.setStatus('Hole complete');
|
||||
}
|
||||
|
||||
// Find round winner(s) - lowest round score (not total)
|
||||
const roundScores = scores.map(s => s.score);
|
||||
const minRoundScore = Math.min(...roundScores);
|
||||
|
||||
@@ -10,9 +10,8 @@
|
||||
<div id="app">
|
||||
<!-- Lobby Screen -->
|
||||
<div id="lobby-screen" class="screen active">
|
||||
<h1>🏌️ Golf</h1>
|
||||
<p class="subtitle">6-Card Golf Card Game</p>
|
||||
<button id="rules-btn" class="btn btn-link">View Rules</button>
|
||||
<h1><span class="golfer-swing">🏌️</span><span class="kicked-ball">⚪</span> <span class="golf-title">Golf</span></h1>
|
||||
<p class="subtitle">6-Card Golf Card Game <button id="rules-btn" class="btn btn-link">Rules</button></p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="player-name">Your Name</label>
|
||||
@@ -105,7 +104,7 @@
|
||||
<select id="flip-mode">
|
||||
<option value="never">Standard - No flip after discarding</option>
|
||||
<option value="always">Speed Golf - MUST flip a card after discarding</option>
|
||||
<option value="endgame">Suspense - MAY flip if anyone has 1 or fewer hidden cards</option>
|
||||
<option value="endgame">Endgame - Flip after discard if a player has 1 hidden card left</option>
|
||||
</select>
|
||||
<span class="rule-desc">What happens when you draw from deck and discard</span>
|
||||
</div>
|
||||
@@ -219,6 +218,7 @@
|
||||
</div>
|
||||
<div class="header-col header-col-center">
|
||||
<div id="status-message" class="status-message"></div>
|
||||
<div id="final-turn-badge" class="final-turn-badge hidden">⚡ FINAL TURN</div>
|
||||
</div>
|
||||
<div class="header-col header-col-right">
|
||||
<button id="mute-btn" class="mute-btn" title="Toggle sound">🔊</button>
|
||||
@@ -292,7 +292,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rules Screen -->
|
||||
<div id="rules-screen" class="screen">
|
||||
@@ -399,8 +398,8 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
|
||||
</div>
|
||||
|
||||
<div class="rules-mode">
|
||||
<h3>Suspense Mode (Optional Flip Near Endgame)</h3>
|
||||
<p class="mode-summary">Optional flip activates when any player is close to finishing.</p>
|
||||
<h3>Endgame Mode (Flip When Close to Finishing)</h3>
|
||||
<p class="mode-summary">Flip activates when any player has only 1 hidden card remaining.</p>
|
||||
<p><strong>How it works:</strong></p>
|
||||
<ul>
|
||||
<li>Early in the round: Discarding ends your turn (like Standard mode)</li>
|
||||
@@ -477,12 +476,12 @@ TOTAL: 0 + 8 + 16 = 24 points</pre>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4>Q: In Suspense mode, when exactly can I flip?</h4>
|
||||
<h4>Q: In Endgame mode, when exactly can I flip?</h4>
|
||||
<p>A: The optional flip activates the moment ANY player (including you) has 1 or fewer face-down cards remaining. From that point until the round ends, whenever you discard from the deck, you'll get the option to flip or skip.</p>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<h4>Q: Why would I NOT flip in Suspense mode?</h4>
|
||||
<h4>Q: Why would I NOT flip in Endgame mode?</h4>
|
||||
<p>A: Maybe you have a hidden card you hope is good, and you don't want to reveal a potential disaster. Or maybe you want to keep your opponents guessing about your score. It's a strategic choice!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
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