feat: add async tour system
Players can create tours with selected courses/layouts and a date range. Others join via a 6-character tour code, play the courses, and report their total strokes. Live leaderboard with points and +/- par display. Includes: database schema, model, service, routes, views, and styling.
This commit is contained in:
Samuel Enocsson
@@ -0,0 +1,188 @@
|
||||
/* Tour Form */
|
||||
|
||||
.tour-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-row .form-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Course Selector */
|
||||
|
||||
.course-entry {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.course-entry select {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface-2);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--surface-3);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 14px;
|
||||
transition: color var(--transition), background var(--transition);
|
||||
}
|
||||
|
||||
.btn-remove:hover {
|
||||
color: var(--red);
|
||||
background: var(--red-subtle);
|
||||
}
|
||||
|
||||
/* Tour Header */
|
||||
|
||||
.tour-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.tour-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tour-dates,
|
||||
.tour-code-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.badge-active {
|
||||
background: var(--green-subtle);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.badge-finished {
|
||||
background: var(--surface-3);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.badge-upcoming {
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Tour Code Display */
|
||||
|
||||
.tour-created-message {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.tour-code-display {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
background: var(--surface-2);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tour-code-display a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Leaderboard */
|
||||
|
||||
.strokes {
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.under-par {
|
||||
color: var(--green);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.over-par {
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.even-par {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.course-entry {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.course-entry select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tour-meta {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
var currentPdgaNumber = null;
|
||||
|
||||
function initTour(code) {
|
||||
// Check if player already joined (stored in sessionStorage)
|
||||
var stored = sessionStorage.getItem('tour_' + code);
|
||||
if (stored) {
|
||||
var data = JSON.parse(stored);
|
||||
currentPdgaNumber = data.pdgaNumber;
|
||||
showResultSection();
|
||||
}
|
||||
}
|
||||
|
||||
function showResultSection() {
|
||||
var joinSection = document.getElementById('join-section');
|
||||
var resultSection = document.getElementById('result-section');
|
||||
if (joinSection) joinSection.style.display = 'none';
|
||||
if (resultSection) resultSection.style.display = '';
|
||||
}
|
||||
|
||||
async function joinTour() {
|
||||
var pdgaNumber = document.getElementById('pdga-number').value.trim();
|
||||
var playerName = document.getElementById('player-name').value.trim();
|
||||
|
||||
if (!pdgaNumber || !playerName) {
|
||||
alert('Please enter your PDGA number and name');
|
||||
return;
|
||||
}
|
||||
|
||||
var code = window.location.pathname.split('/').pop();
|
||||
|
||||
try {
|
||||
var res = await fetch('/api/tours/' + code + '/join', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ pdgaNumber: pdgaNumber, playerName: playerName })
|
||||
});
|
||||
|
||||
var data = await res.json();
|
||||
if (data.success) {
|
||||
currentPdgaNumber = pdgaNumber;
|
||||
sessionStorage.setItem('tour_' + code, JSON.stringify({ pdgaNumber: pdgaNumber, playerName: playerName }));
|
||||
showResultSection();
|
||||
// Refresh leaderboard
|
||||
htmx.ajax('GET', '/partials/tour-leaderboard/' + code, { target: '#leaderboard-container' });
|
||||
} else {
|
||||
alert(data.error || 'Failed to join tour');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error joining tour:', err);
|
||||
alert('Failed to join tour');
|
||||
}
|
||||
}
|
||||
|
||||
async function recordResult(code) {
|
||||
var tourCourseId = document.getElementById('result-course').value;
|
||||
var totalStrokes = document.getElementById('result-strokes').value;
|
||||
|
||||
if (!tourCourseId || !totalStrokes) {
|
||||
alert('Please select a course and enter your strokes');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentPdgaNumber) {
|
||||
alert('Please join the tour first');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
var res = await fetch('/api/tours/' + code + '/results', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
pdgaNumber: currentPdgaNumber,
|
||||
tourCourseId: parseInt(tourCourseId),
|
||||
totalStrokes: parseInt(totalStrokes)
|
||||
})
|
||||
});
|
||||
|
||||
var data = await res.json();
|
||||
if (data.success) {
|
||||
document.getElementById('result-strokes').value = '';
|
||||
// Refresh leaderboard
|
||||
htmx.ajax('GET', '/partials/tour-leaderboard/' + code, { target: '#leaderboard-container' });
|
||||
} else {
|
||||
alert(data.error || 'Failed to record result');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error recording result:', err);
|
||||
alert('Failed to record result');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
var coursesData = [];
|
||||
|
||||
async function loadCourses() {
|
||||
try {
|
||||
var res = await fetch('/api/tours/courses-with-layouts');
|
||||
coursesData = await res.json();
|
||||
updateCourseDropdowns();
|
||||
} catch (err) {
|
||||
console.error('Failed to load courses:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function populateSelectWithCourses(select) {
|
||||
select.textContent = '';
|
||||
var defaultOpt = document.createElement('option');
|
||||
defaultOpt.value = '';
|
||||
defaultOpt.textContent = 'Select a course...';
|
||||
select.appendChild(defaultOpt);
|
||||
|
||||
coursesData.forEach(function(course) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = course.id;
|
||||
opt.textContent = course.name + ' (' + course.city + ')';
|
||||
select.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
function updateCourseDropdowns() {
|
||||
document.querySelectorAll('.course-select').forEach(function(select) {
|
||||
var currentValue = select.value;
|
||||
populateSelectWithCourses(select);
|
||||
select.value = currentValue;
|
||||
});
|
||||
}
|
||||
|
||||
function onCourseChange(courseSelect) {
|
||||
var index = courseSelect.dataset.index;
|
||||
var layoutSelect = document.querySelector('.layout-select[data-index="' + index + '"]');
|
||||
var courseId = parseInt(courseSelect.value);
|
||||
|
||||
layoutSelect.textContent = '';
|
||||
layoutSelect.disabled = true;
|
||||
|
||||
var defaultOpt = document.createElement('option');
|
||||
defaultOpt.value = '';
|
||||
defaultOpt.textContent = 'Select layout...';
|
||||
layoutSelect.appendChild(defaultOpt);
|
||||
|
||||
if (!courseId) return;
|
||||
|
||||
var course = coursesData.find(function(c) { return c.id === courseId; });
|
||||
if (!course) return;
|
||||
|
||||
course.layouts.forEach(function(layout) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = layout.id;
|
||||
opt.textContent = layout.name + ' (Par ' + layout.par + ')';
|
||||
layoutSelect.appendChild(opt);
|
||||
});
|
||||
layoutSelect.disabled = false;
|
||||
}
|
||||
|
||||
var courseIndex = 1;
|
||||
|
||||
function addCourseEntry() {
|
||||
var container = document.getElementById('course-selector');
|
||||
var entry = document.createElement('div');
|
||||
entry.className = 'course-entry';
|
||||
|
||||
var courseSelect = document.createElement('select');
|
||||
courseSelect.className = 'input course-select';
|
||||
courseSelect.dataset.index = courseIndex;
|
||||
populateSelectWithCourses(courseSelect);
|
||||
courseSelect.addEventListener('change', function() { onCourseChange(courseSelect); });
|
||||
|
||||
var layoutSelect = document.createElement('select');
|
||||
layoutSelect.className = 'input layout-select';
|
||||
layoutSelect.dataset.index = courseIndex;
|
||||
layoutSelect.disabled = true;
|
||||
var defaultOpt = document.createElement('option');
|
||||
defaultOpt.value = '';
|
||||
defaultOpt.textContent = 'Select course first';
|
||||
layoutSelect.appendChild(defaultOpt);
|
||||
|
||||
var removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'btn-remove';
|
||||
removeBtn.type = 'button';
|
||||
var icon = document.createElement('i');
|
||||
icon.className = 'fas fa-times';
|
||||
removeBtn.appendChild(icon);
|
||||
removeBtn.addEventListener('click', function() { entry.remove(); });
|
||||
|
||||
entry.appendChild(courseSelect);
|
||||
entry.appendChild(layoutSelect);
|
||||
entry.appendChild(removeBtn);
|
||||
container.appendChild(entry);
|
||||
|
||||
courseIndex++;
|
||||
}
|
||||
|
||||
async function createTour() {
|
||||
var name = document.getElementById('tour-name').value.trim();
|
||||
var startDate = document.getElementById('tour-start').value;
|
||||
var endDate = document.getElementById('tour-end').value;
|
||||
|
||||
if (!name || !startDate || !endDate) {
|
||||
alert('Please fill in name and dates');
|
||||
return;
|
||||
}
|
||||
|
||||
var courses = [];
|
||||
document.querySelectorAll('.course-entry').forEach(function(entry) {
|
||||
var courseId = entry.querySelector('.course-select').value;
|
||||
var layoutId = entry.querySelector('.layout-select').value;
|
||||
if (courseId && layoutId) {
|
||||
courses.push({ courseId: parseInt(courseId), layoutId: parseInt(layoutId) });
|
||||
}
|
||||
});
|
||||
|
||||
if (courses.length === 0) {
|
||||
alert('Please select at least one course with a layout');
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = document.getElementById('create-tour-btn');
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
var res = await fetch('/api/tours', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: name, startDate: startDate, endDate: endDate, courses: courses })
|
||||
});
|
||||
|
||||
var data = await res.json();
|
||||
if (data.success) {
|
||||
var link = document.getElementById('tour-link');
|
||||
link.href = '/tours/' + data.code;
|
||||
link.textContent = window.location.origin + '/tours/' + data.code;
|
||||
document.getElementById('tour-created').style.display = '';
|
||||
} else {
|
||||
alert(data.error || 'Failed to create tour');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error creating tour:', err);
|
||||
alert('Failed to create tour');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function goToTour() {
|
||||
var code = document.getElementById('tour-code').value.trim().toUpperCase();
|
||||
if (code) {
|
||||
window.location.href = '/tours/' + code;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadCourses();
|
||||
|
||||
// Delegate change events for course selects
|
||||
document.getElementById('course-selector').addEventListener('change', function(e) {
|
||||
if (e.target.classList.contains('course-select')) {
|
||||
onCourseChange(e.target);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user