65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
// static/script.js - Input page functionality
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Mobile Input Controls
|
|
const playerCards = document.querySelectorAll('.player-card');
|
|
|
|
playerCards.forEach(card => {
|
|
const updateBtn = card.querySelector('.update-btn');
|
|
const nameInput = card.querySelector('.name-input');
|
|
const scoreInput = card.querySelector('.score-input');
|
|
const playerId = card.dataset.id;
|
|
|
|
// Update player data on button click
|
|
updateBtn.addEventListener('click', function() {
|
|
const name = nameInput.value.trim();
|
|
const score = parseInt(scoreInput.value) || 0;
|
|
|
|
updatePlayer(playerId, name, score);
|
|
});
|
|
|
|
// Update on Enter key press
|
|
[nameInput, scoreInput].forEach(input => {
|
|
input.addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
updateBtn.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-select score input content for easy editing
|
|
scoreInput.addEventListener('focus', function() {
|
|
this.select();
|
|
});
|
|
});
|
|
|
|
// API call to update player
|
|
async function updatePlayer(id, name, score) {
|
|
try {
|
|
const response = await fetch('/api/update', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
id: parseInt(id),
|
|
name: name,
|
|
score: score
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
// Visual feedback for successful update
|
|
const card = document.querySelector(`[data-id="${id}"]`);
|
|
card.style.background = '#90EE90';
|
|
setTimeout(() => {
|
|
card.style.background = '';
|
|
}, 500);
|
|
}
|
|
} catch (error) {
|
|
console.error('Update failed:', error);
|
|
alert('Failed to update player data');
|
|
}
|
|
}
|
|
});
|