β‘
Knock Early?
You'll reveal ${hiddenCount} hidden card${hiddenCount > 1 ? 's' : ''} and trigger final turn.
This cannot be undone!
`;
document.body.appendChild(modal);
modal.querySelector('.knock-cancel').addEventListener('click', () => {
this.playSound('click');
modal.remove();
});
modal.querySelector('.knock-confirm').addEventListener('click', () => {
this.playSound('click');
modal.remove();
onConfirm();
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.remove();
});
}
async executeKnockEarly() {
this.playSound('knock');
const myData = this.getMyPlayerData();
if (!myData) return;
const hiddenPositions = myData.cards
.map((card, i) => ({ card, position: i }))
.filter(({ card }) => !card.face_up)
.map(({ position }) => position);
// Rapid sequential flips
for (const position of hiddenPositions) {
this.fireLocalFlipAnimation(position, myData.cards[position]);
this.playSound('flip');
await this.delay(150);
}
await this.delay(300);
this.showKnockBanner();
this.send({ type: 'knock_early' });
this.hideToast();
}
showKnockBanner(playerName) {
const duration = window.TIMING?.knock?.statusDuration || 2500;
const message = playerName ? `${playerName} KNOCKED!` : 'KNOCK!';
this.setStatus(message, 'knock');
document.body.classList.add('screen-shake');
setTimeout(() => {
document.body.classList.remove('screen-shake');
}, 300);
// Restore normal status after duration
this._knockStatusTimeout = setTimeout(() => {
// Only clear if still showing knock status
if (this.statusMessage.classList.contains('knock')) {
this.setStatus('Final turn!', 'opponent-turn');
}
}, duration);
}
// --- V3_17: Scoresheet Modal ---
showScoresheetModal(scores, gameState, rankings) {
// Remove existing modal if any
const existing = document.getElementById('scoresheet-modal');
if (existing) existing.remove();
// Also update side panel data (silently)
this.showScoreboard(scores, false, rankings);
const cardValues = gameState?.card_values || this.getDefaultCardValues();
const scoringRules = gameState?.scoring_rules || {};
const knockerId = gameState?.finisher_id;
const currentRound = gameState?.current_round || '?';
const totalRounds = gameState?.total_rounds || '?';
// Find round winner(s)
const roundScores = scores.map(s => s.score);
const minRoundScore = Math.min(...roundScores);
// Build player rows - knocker first, then others
const ordered = [...gameState.players].sort((a, b) => {
if (a.id === knockerId) return -1;
if (b.id === knockerId) return 1;
return 0;
});
const playerRowsHtml = ordered.map(player => {
const scoreData = scores.find(s => s.name === player.name) || {};
const result = this.calculateColumnScores(player.cards, cardValues, scoringRules, false);
const isKnocker = player.id === knockerId;
const isLowScore = scoreData.score === minRoundScore;
const colIndices = [[0, 3], [1, 4], [2, 5]];
// Badge
let badge = '';
if (isKnocker && isLowScore) badge = '
${topMini}${bottomMini}
${colScore}
`;
}).join('');
// Bonuses
let bonusHtml = '';
if (result.bonuses.length > 0) {
bonusHtml = result.bonuses.map(b => {
const label = b.type === 'wolfpack' ? 'WOLFPACK' : 'FOUR OF A KIND';
return `
${player.cards.map(card => this.renderCard(card, false, false)).join('')}
`;
this.opponentsRow.appendChild(div);
});
// Render player's cards
const myData = this.getMyPlayerData();
if (myData) {
this.playerCards.innerHTML = '';
myData.cards.forEach((card, index) => {
// Check if this card was locally flipped (immediate feedback)
const isLocallyFlipped = this.locallyFlippedCards.has(index);
// Create a display card that shows face-up if locally flipped
const displayCard = isLocallyFlipped
? { ...card, face_up: true }
: card;
// Check if clickable during initial flip
const isInitialFlipClickable = this.gameState.waiting_for_initial_flip && !card.face_up && !isLocallyFlipped;
const isClickable = (
isInitialFlipClickable ||
(this.drawnCard) ||
(this.waitingForFlip && !card.face_up)
);
const isSelected = this.selectedCards.includes(index);
const cardEl = document.createElement('div');
cardEl.innerHTML = this.renderCard(displayCard, isClickable, isSelected);
// Add pulse animation during initial flip phase
if (isInitialFlipClickable) {
cardEl.firstChild.classList.add('initial-flip-pulse');
cardEl.firstChild.dataset.position = index;
// Use anime.js for initial flip pulse
if (window.cardAnimations) {
window.cardAnimations.startInitialFlipPulse(cardEl.firstChild);
}
}
cardEl.firstChild.addEventListener('click', () => this.handleCardClick(index));
// V3_13: Bind tooltip events for face-up cards
this.bindCardTooltipEvents(cardEl.firstChild, displayCard);
this.playerCards.appendChild(cardEl.firstChild);
});
}
// V3_10: Update persistent pair indicators
this.renderPairIndicators();
// Show flip prompt for initial flip
// Show flip prompt during initial flip phase (but not during deal animation)
if (this.gameState.waiting_for_initial_flip && !this.dealAnimationInProgress) {
const requiredFlips = this.gameState.initial_flips || 2;
const flippedCount = this.locallyFlippedCards.size;
const remaining = requiredFlips - flippedCount;
if (remaining > 0) {
this.setStatus(`Select ${remaining} card${remaining > 1 ? 's' : ''} to flip`, 'your-turn');
}
}
// Disable discard button if can't discard (must_swap_discard rule)
if (this.drawnCard && !this.gameState.can_discard) {
this.discardBtn.disabled = true;
this.discardBtn.classList.add('disabled');
} else {
this.discardBtn.disabled = false;
this.discardBtn.classList.remove('disabled');
}
// Show/hide skip flip button (only when flip is optional in endgame mode)
if (this.waitingForFlip && this.flipIsOptional) {
this.skipFlipBtn.classList.remove('hidden');
} else {
this.skipFlipBtn.classList.add('hidden');
}
// Show/hide knock early button (when knock_early rule is enabled)
// Conditions: rule enabled, my turn, no drawn card, have 1-2 face-down cards
const canKnockEarly = this.gameState.knock_early &&
this.isMyTurn() &&
!this.drawnCard &&
!this.gameState.has_drawn_card &&
!this.gameState.waiting_for_initial_flip;
if (canKnockEarly) {
// Count face-down cards for current player
const myData = this.gameState.players.find(p => p.id === this.playerId);
const faceDownCount = myData ? myData.cards.filter(c => !c.face_up).length : 0;
if (faceDownCount >= 1 && faceDownCount <= 2) {
this.knockEarlyBtn.classList.remove('hidden');
} else {
this.knockEarlyBtn.classList.add('hidden');
}
} else {
this.knockEarlyBtn.classList.add('hidden');
}
// Update scoreboard panel
this.updateScorePanel();
// Initialize anime.js hover listeners on newly created cards
if (window.cardAnimations) {
window.cardAnimations.initHoverListeners(this.playerCards);
window.cardAnimations.initHoverListeners(this.opponentsRow);
}
}
updateScorePanel() {
if (!this.gameState) return;
// Update standings (left panel)
this.updateStandings();
// Skip score table update during round_over/game_over - showScoreboard handles these
if (this.gameState.phase === 'round_over' || this.gameState.phase === 'game_over') {
return;
}
// Update score table (right panel)
this.scoreTable.innerHTML = '';
this.gameState.players.forEach(player => {
const tr = document.createElement('tr');
// Highlight current player (but not during round/game over)
const isPlaying = this.gameState.phase !== 'round_over' && this.gameState.phase !== 'game_over';
if (isPlaying && player.id === this.gameState.current_player_id) {
tr.classList.add('current-player');
}
// Truncate long names
const displayName = player.name.length > 12
? player.name.substring(0, 11) + 'β¦'
: player.name;
const roundScore = player.score !== null ? player.score : '-';
const roundsWon = player.rounds_won || 0;
tr.innerHTML = `
ποΈ Final Results
${isDoubleVictory ? `
π DOUBLE VICTORY: ${pointsLeader.name} π
` : ''}
By Points (Low Wins)
${pointsHtml}
By Holes Won
${holesHtml}
`;
document.body.appendChild(modal);
// Bind button events
document.getElementById('share-results-btn').addEventListener('click', () => {
navigator.clipboard.writeText(shareText).then(() => {
const btn = document.getElementById('share-results-btn');
btn.textContent = 'β Copied!';
const copyDelay = window.TIMING?.feedback?.copyConfirm || 2000;
setTimeout(() => btn.textContent = 'π Copy Results', copyDelay);
});
});
document.getElementById('close-results-btn').addEventListener('click', () => {
modal.remove();
this.leaveRoom();
});
}
buildShareText(rankings, isDoubleVictory) {
let text = 'ποΈ Golf Card Game Results\n';
text += 'βββββββββββββββββββββββ\n\n';
if (isDoubleVictory) {
text += `π DOUBLE VICTORY: ${rankings.by_points[0].name}!\n\n`;
}
text += 'π By Points (Low Wins):\n';
rankings.by_points.forEach((p, i) => {
const medal = i === 0 ? 'π₯' : i === 1 ? 'π₯' : i === 2 ? 'π₯' : `${i + 1}.`;
text += `${medal} ${p.name}: ${p.total} pts\n`;
});
text += '\nβ³ By Holes Won:\n';
rankings.by_holes_won.forEach((p, i) => {
const medal = p.rounds_won === 0 ? '-' : i === 0 ? 'π₯' : i === 1 ? 'π₯' : i === 2 ? 'π₯' : `${i + 1}.`;
text += `${medal} ${p.name}: ${p.rounds_won} wins\n`;
});
text += '\nPlayed at golf.game';
return text;
}
}
// Initialize game when page loads
document.addEventListener('DOMContentLoaded', () => {
window.game = new GolfGame();
window.auth = new AuthManager(window.game);
window.game.authManager = window.auth;
});
// ===========================================
// AUTH MANAGER
// ===========================================
class AuthManager {
constructor(game) {
this.game = game;
this.token = localStorage.getItem('authToken');
this.user = JSON.parse(localStorage.getItem('authUser') || 'null');
this.initElements();
this.bindEvents();
this.updateUI();
// Validate stored token on load
if (this.token) {
this.validateToken();
}
}
async validateToken() {
try {
const response = await fetch('/api/auth/me', {
headers: { 'Authorization': `Bearer ${this.token}` },
});
if (!response.ok) {
this.logout();
}
} catch {
// Network error - keep token, will fail on next action
}
}
initElements() {
this.authBar = document.getElementById('auth-bar');
this.authUsername = document.getElementById('auth-username');
this.logoutBtn = document.getElementById('auth-logout-btn');
this.authPrompt = document.getElementById('auth-prompt');
this.lobbyGameControls = document.getElementById('lobby-game-controls');
this.loginBtn = document.getElementById('login-btn');
this.signupBtn = document.getElementById('signup-btn');
this.modal = document.getElementById('auth-modal');
this.modalClose = document.getElementById('auth-modal-close');
this.loginFormContainer = document.getElementById('login-form-container');
this.loginForm = document.getElementById('login-form');
this.loginUsername = document.getElementById('login-username');
this.loginPassword = document.getElementById('login-password');
this.loginError = document.getElementById('login-error');
this.signupFormContainer = document.getElementById('signup-form-container');
this.signupForm = document.getElementById('signup-form');
this.signupInviteCode = document.getElementById('signup-invite-code');
this.signupUsername = document.getElementById('signup-username');
this.signupEmail = document.getElementById('signup-email');
this.signupPassword = document.getElementById('signup-password');
this.signupError = document.getElementById('signup-error');
this.showSignupLink = document.getElementById('show-signup');
this.showLoginLink = document.getElementById('show-login');
this.showForgotLink = document.getElementById('show-forgot');
this.forgotFormContainer = document.getElementById('forgot-form-container');
this.forgotForm = document.getElementById('forgot-form');
this.forgotEmail = document.getElementById('forgot-email');
this.forgotError = document.getElementById('forgot-error');
this.forgotSuccess = document.getElementById('forgot-success');
this.forgotBackLogin = document.getElementById('forgot-back-login');
this.resetFormContainer = document.getElementById('reset-form-container');
this.resetForm = document.getElementById('reset-form');
this.resetPassword = document.getElementById('reset-password');
this.resetPasswordConfirm = document.getElementById('reset-password-confirm');
this.resetError = document.getElementById('reset-error');
this.resetSuccess = document.getElementById('reset-success');
}
bindEvents() {
this.loginBtn?.addEventListener('click', () => this.showModal('login'));
this.signupBtn?.addEventListener('click', () => this.showModal('signup'));
this.modalClose?.addEventListener('click', () => this.hideModal());
this.modal?.addEventListener('click', (e) => {
if (e.target === this.modal) this.hideModal();
});
this.showSignupLink?.addEventListener('click', (e) => {
e.preventDefault();
this.showForm('signup');
});
this.showLoginLink?.addEventListener('click', (e) => {
e.preventDefault();
this.showForm('login');
});
this.loginForm?.addEventListener('submit', (e) => this.handleLogin(e));
this.signupForm?.addEventListener('submit', (e) => this.handleSignup(e));
this.logoutBtn?.addEventListener('click', () => this.logout());
this.showForgotLink?.addEventListener('click', (e) => {
e.preventDefault();
this.showForm('forgot');
});
this.forgotBackLogin?.addEventListener('click', (e) => {
e.preventDefault();
this.showForm('login');
});
this.forgotForm?.addEventListener('submit', (e) => this.handleForgotPassword(e));
this.resetForm?.addEventListener('submit', (e) => this.handleResetPassword(e));
// Check URL for reset token or invite code on page load
this.checkResetToken();
this.checkInviteCode();
}
showModal(form = 'login') {
this.modal.classList.remove('hidden');
this.showForm(form);
this.clearErrors();
}
hideModal() {
this.modal.classList.add('hidden');
this.clearForms();
}
showForm(form) {
this.loginFormContainer.classList.add('hidden');
this.signupFormContainer.classList.add('hidden');
this.forgotFormContainer?.classList.add('hidden');
this.resetFormContainer?.classList.add('hidden');
this.clearErrors();
if (form === 'login') {
this.loginFormContainer.classList.remove('hidden');
this.loginUsername.focus();
} else if (form === 'signup') {
this.signupFormContainer.classList.remove('hidden');
this.signupUsername.focus();
} else if (form === 'forgot') {
this.forgotFormContainer?.classList.remove('hidden');
this.forgotEmail?.focus();
} else if (form === 'reset') {
this.resetFormContainer?.classList.remove('hidden');
this.resetPassword?.focus();
}
}
clearForms() {
this.loginForm.reset();
this.signupForm.reset();
this.clearErrors();
}
clearErrors() {
this.loginError.textContent = '';
this.signupError.textContent = '';
if (this.forgotError) this.forgotError.textContent = '';
if (this.forgotSuccess) this.forgotSuccess.textContent = '';
if (this.resetError) this.resetError.textContent = '';
if (this.resetSuccess) this.resetSuccess.textContent = '';
}
async handleLogin(e) {
e.preventDefault();
this.clearErrors();
const username = this.loginUsername.value.trim();
const password = this.loginPassword.value;
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
const data = await response.json();
if (!response.ok) {
this.loginError.textContent = data.detail || 'Login failed';
return;
}
this.setAuth(data.token, data.user);
this.hideModal();
} catch (err) {
this.loginError.textContent = 'Connection error';
}
}
async handleSignup(e) {
e.preventDefault();
this.clearErrors();
const invite_code = this.signupInviteCode?.value.trim() || null;
const username = this.signupUsername.value.trim();
const email = this.signupEmail.value.trim() || null;
const password = this.signupPassword.value;
try {
const response = await fetch('/api/auth/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ invite_code, username, email, password }),
});
const data = await response.json();
if (!response.ok) {
this.signupError.textContent = data.detail || 'Signup failed';
return;
}
this.setAuth(data.token, data.user);
this.hideModal();
} catch (err) {
this.signupError.textContent = 'Connection error';
}
}
setAuth(token, user) {
this.token = token;
this.user = user;
localStorage.setItem('authToken', token);
localStorage.setItem('authUser', JSON.stringify(user));
this.updateUI();
}
logout() {
this.token = null;
this.user = null;
localStorage.removeItem('authToken');
localStorage.removeItem('authUser');
this.updateUI();
}
updateUI() {
if (this.user) {
this.authBar?.classList.remove('hidden');
this.authPrompt?.classList.add('hidden');
this.lobbyGameControls?.classList.remove('hidden');
if (this.authUsername) {
this.authUsername.textContent = this.user.username;
}
} else {
this.authBar?.classList.add('hidden');
this.authPrompt?.classList.remove('hidden');
this.lobbyGameControls?.classList.add('hidden');
}
}
checkResetToken() {
const params = new URLSearchParams(window.location.search);
const token = params.get('token');
const path = window.location.pathname;
if (token && path.includes('reset-password')) {
this._resetToken = token;
this.showModal('reset');
// Clean URL
window.history.replaceState({}, '', '/');
}
}
checkInviteCode() {
const params = new URLSearchParams(window.location.search);
const invite = params.get('invite');
if (invite) {
this.signupInviteCode.value = invite;
this.showModal('signup');
// Clean URL
window.history.replaceState({}, '', '/');
}
}
async handleForgotPassword(e) {
e.preventDefault();
this.clearErrors();
const email = this.forgotEmail.value.trim();
try {
const response = await fetch('/api/auth/forgot-password', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email }),
});
if (!response.ok) {
const data = await response.json();
this.forgotError.textContent = data.detail || 'Request failed';
return;
}
this.forgotSuccess.textContent = 'If an account exists with that email, a reset link has been sent.';
this.forgotForm.reset();
} catch (err) {
this.forgotError.textContent = 'Connection error';
}
}
async handleResetPassword(e) {
e.preventDefault();
this.clearErrors();
const password = this.resetPassword.value;
const confirm = this.resetPasswordConfirm.value;
if (password !== confirm) {
this.resetError.textContent = 'Passwords do not match';
return;
}
try {
const response = await fetch('/api/auth/reset-password', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: this._resetToken, new_password: password }),
});
const data = await response.json();
if (!response.ok) {
this.resetError.textContent = data.detail || 'Reset failed';
return;
}
this.resetSuccess.textContent = 'Password reset! You can now log in.';
this.resetForm.reset();
setTimeout(() => this.showForm('login'), 2000);
} catch (err) {
this.resetError.textContent = 'Connection error';
}
}
}