Initial commit: saint-malo navigation quiz
Build and Push Docker Image / build (push) Failing after 5m2s
Build and Push Docker Image / build (push) Failing after 5m2s
This commit is contained in:
+296
@@ -0,0 +1,296 @@
|
||||
const SAINT_MALO = [48.649, -2.025];
|
||||
const CATEGORY_ICONS = {
|
||||
'bouée': '🟢', 'pointe': '📍', 'plage': '🏖', 'île': '🏝',
|
||||
'port': '⚓', 'fort': '🏰', 'chenal': '🔵', 'anse': '🌊',
|
||||
'rocher': '⬛', 'autre': '📌'
|
||||
};
|
||||
|
||||
let map, mode = 'quiz', points = [];
|
||||
const editMarkers = new Map();
|
||||
|
||||
// Quiz state
|
||||
let quizQueue = [], quizCurrent = null, quizScore = 0, quizTotal = 0;
|
||||
let quizAnswered = false;
|
||||
let userMarker = null, correctMarker = null, feedbackLine = null;
|
||||
let pendingLatLng = null;
|
||||
|
||||
async function init() {
|
||||
const status = await fetch('/api/status').then(r => r.json());
|
||||
|
||||
map = L.map('map', { center: SAINT_MALO, zoom: 12 });
|
||||
|
||||
const src = status.hasMbtiles ? `MBTiles local (${status.name || 'SHOM'})` : 'SHOM en ligne';
|
||||
document.getElementById('tiles-status').textContent = `🗺 ${src}`;
|
||||
L.tileLayer('/tiles/{z}/{x}/{y}', {
|
||||
minZoom: 6, maxZoom: 17, attribution: '© SHOM'
|
||||
}).addTo(map);
|
||||
|
||||
map.on('click', onMapClick);
|
||||
await loadPoints();
|
||||
setMode('quiz');
|
||||
}
|
||||
|
||||
// ── Mode ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function setMode(newMode) {
|
||||
mode = newMode;
|
||||
document.getElementById('btn-quiz').classList.toggle('active', mode === 'quiz');
|
||||
document.getElementById('btn-edit').classList.toggle('active', mode === 'edit');
|
||||
document.getElementById('quiz-panel').style.display = mode === 'quiz' ? 'flex' : 'none';
|
||||
document.getElementById('edit-panel').style.display = mode === 'edit' ? 'flex' : 'none';
|
||||
document.getElementById('map').classList.toggle('edit-cursor', mode === 'edit');
|
||||
|
||||
clearFeedback();
|
||||
renderEditMarkers();
|
||||
|
||||
if (mode === 'quiz') startQuiz();
|
||||
}
|
||||
|
||||
// ── Map click ────────────────────────────────────────────────────────────────
|
||||
|
||||
function onMapClick(e) {
|
||||
if (mode === 'edit') {
|
||||
pendingLatLng = e.latlng;
|
||||
openModal(null);
|
||||
} else if (mode === 'quiz' && quizCurrent && !quizAnswered) {
|
||||
submitAnswer(e.latlng);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Points API ───────────────────────────────────────────────────────────────
|
||||
|
||||
async function loadPoints() {
|
||||
points = await fetch('/api/points').then(r => r.json());
|
||||
document.getElementById('points-count').textContent = points.length;
|
||||
renderPointsList();
|
||||
renderEditMarkers();
|
||||
}
|
||||
|
||||
async function saveNewPoint(data) {
|
||||
const pt = await fetch('/api/points', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
}).then(r => r.json());
|
||||
return pt;
|
||||
}
|
||||
|
||||
async function updatePoint(id, data) {
|
||||
await fetch(`/api/points/${id}`, {
|
||||
method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
|
||||
});
|
||||
}
|
||||
|
||||
async function deletePoint(id) {
|
||||
if (!confirm('Supprimer ce point ?')) return;
|
||||
await fetch(`/api/points/${id}`, { method: 'DELETE' });
|
||||
await loadPoints();
|
||||
}
|
||||
|
||||
// ── Edit markers ─────────────────────────────────────────────────────────────
|
||||
|
||||
function makeIcon(category) {
|
||||
return L.divIcon({
|
||||
html: `<div class="map-pin">${CATEGORY_ICONS[category] || '📌'}</div>`,
|
||||
className: '', iconSize: [24, 24], iconAnchor: [12, 12]
|
||||
});
|
||||
}
|
||||
|
||||
function renderEditMarkers() {
|
||||
editMarkers.forEach(m => map.removeLayer(m));
|
||||
editMarkers.clear();
|
||||
|
||||
if (mode !== 'edit') return;
|
||||
|
||||
points.forEach(p => {
|
||||
const m = L.marker([p.lat, p.lng], { icon: makeIcon(p.category) })
|
||||
.bindTooltip(p.name, { direction: 'top' })
|
||||
.on('click', e => { L.DomEvent.stopPropagation(e); openModal(p); })
|
||||
.addTo(map);
|
||||
editMarkers.set(p.id, m);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Points list (edit panel) ──────────────────────────────────────────────────
|
||||
|
||||
function renderPointsList() {
|
||||
const list = document.getElementById('points-list');
|
||||
if (points.length === 0) {
|
||||
list.innerHTML = '<div class="empty-list">Aucun point encore.</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = points.map(p => `
|
||||
<div class="point-item">
|
||||
<span style="font-size:1.1rem;flex-shrink:0">${CATEGORY_ICONS[p.category] || '📌'}</span>
|
||||
<div class="point-item-info">
|
||||
<div class="point-item-name">${escHtml(p.name)}</div>
|
||||
<div class="point-item-cat">${p.category}</div>
|
||||
</div>
|
||||
<div class="point-item-actions">
|
||||
<button class="btn-icon" title="Centrer" onclick="flyTo('${p.id}')">🎯</button>
|
||||
<button class="btn-icon" title="Modifier" onclick="openModal(getPoint('${p.id}'))">✏️</button>
|
||||
<button class="btn-icon del" title="Supprimer" onclick="deletePoint('${p.id}')">🗑</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function getPoint(id) { return points.find(p => p.id === id); }
|
||||
|
||||
function flyTo(id) {
|
||||
const p = getPoint(id);
|
||||
if (p) map.flyTo([p.lat, p.lng], 14);
|
||||
}
|
||||
|
||||
function escHtml(s) {
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
// ── Modal ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function openModal(point) {
|
||||
document.getElementById('modal-title').textContent = point ? 'Modifier le point' : 'Ajouter un point';
|
||||
document.getElementById('point-id').value = point?.id || '';
|
||||
document.getElementById('point-lat').value = point ? point.lat : (pendingLatLng?.lat || '');
|
||||
document.getElementById('point-lng').value = point ? point.lng : (pendingLatLng?.lng || '');
|
||||
document.getElementById('point-name').value = point?.name || '';
|
||||
document.getElementById('point-category').value = point?.category || 'bouée';
|
||||
document.getElementById('point-hint').value = point?.hint || '';
|
||||
document.getElementById('modal-overlay').style.display = 'flex';
|
||||
setTimeout(() => document.getElementById('point-name').focus(), 50);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('modal-overlay').style.display = 'none';
|
||||
pendingLatLng = null;
|
||||
}
|
||||
|
||||
function handleOverlayClick(e) {
|
||||
if (e.target === document.getElementById('modal-overlay')) closeModal();
|
||||
}
|
||||
|
||||
document.getElementById('point-form').addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const id = document.getElementById('point-id').value;
|
||||
const data = {
|
||||
name: document.getElementById('point-name').value.trim(),
|
||||
category: document.getElementById('point-category').value,
|
||||
hint: document.getElementById('point-hint').value.trim(),
|
||||
lat: parseFloat(document.getElementById('point-lat').value),
|
||||
lng: parseFloat(document.getElementById('point-lng').value)
|
||||
};
|
||||
if (id) await updatePoint(id, data);
|
||||
else await saveNewPoint(data);
|
||||
closeModal();
|
||||
await loadPoints();
|
||||
});
|
||||
|
||||
// ── Quiz ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
function startQuiz() {
|
||||
clearFeedback();
|
||||
|
||||
if (points.length === 0) {
|
||||
show('quiz-empty'); hide('quiz-question'); hide('quiz-end');
|
||||
return;
|
||||
}
|
||||
|
||||
quizQueue = shuffle([...points]);
|
||||
quizScore = 0;
|
||||
quizTotal = 0;
|
||||
|
||||
hide('quiz-empty');
|
||||
show('quiz-question');
|
||||
hide('quiz-feedback');
|
||||
|
||||
nextQuestion();
|
||||
}
|
||||
|
||||
function nextQuestion() {
|
||||
clearFeedback();
|
||||
quizAnswered = false;
|
||||
|
||||
if (quizQueue.length === 0) {
|
||||
quizQueue = shuffle([...points]);
|
||||
}
|
||||
|
||||
quizCurrent = quizQueue.shift();
|
||||
quizTotal++;
|
||||
|
||||
document.getElementById('quiz-name').textContent = quizCurrent.name;
|
||||
document.getElementById('quiz-category').textContent = quizCurrent.category;
|
||||
document.getElementById('quiz-hint').textContent = quizCurrent.hint || '';
|
||||
document.getElementById('quiz-instruction').style.display = 'block';
|
||||
hide('quiz-feedback');
|
||||
updateScoreDisplay();
|
||||
}
|
||||
|
||||
function submitAnswer(latlng) {
|
||||
if (!quizCurrent || quizAnswered) return;
|
||||
quizAnswered = true;
|
||||
|
||||
const correct = L.latLng(quizCurrent.lat, quizCurrent.lng);
|
||||
const distM = latlng.distanceTo(correct);
|
||||
const distNm = distM / 1852;
|
||||
|
||||
// User click marker
|
||||
userMarker = L.circleMarker(latlng, {
|
||||
radius: 8, color: '#f39c12', fillColor: '#f39c12', fillOpacity: 0.85, weight: 2
|
||||
}).addTo(map);
|
||||
|
||||
// Correct location marker
|
||||
correctMarker = L.circleMarker(correct, {
|
||||
radius: 8, color: '#2ecc71', fillColor: '#2ecc71', fillOpacity: 0.85, weight: 2
|
||||
}).bindTooltip(quizCurrent.name, { permanent: true, direction: 'top', offset: [0, -10] }).addTo(map);
|
||||
|
||||
// Dashed line
|
||||
feedbackLine = L.polyline([latlng, correct], {
|
||||
color: '#fff', weight: 1.5, dashArray: '5 5', opacity: 0.4
|
||||
}).addTo(map);
|
||||
|
||||
// Scoring
|
||||
let pts, label, color;
|
||||
if (distNm < 0.1) { pts = 100; label = '⭐ Excellent !'; color = 'var(--green)'; }
|
||||
else if (distNm < 0.5) { pts = 80; label = '👍 Très bien'; color = 'var(--green)'; }
|
||||
else if (distNm < 1.0) { pts = 60; label = '👌 Bien'; color = 'var(--yellow)'; }
|
||||
else if (distNm < 3.0) { pts = 30; label = '🤔 Passable'; color = 'var(--orange)'; }
|
||||
else { pts = 0; label = '❌ À revoir'; color = 'var(--red)'; }
|
||||
|
||||
quizScore += pts;
|
||||
updateScoreDisplay();
|
||||
|
||||
const distStr = distNm < 0.1 ? `${Math.round(distM)} m` : `${distNm.toFixed(2)} Nm`;
|
||||
document.getElementById('feedback-distance').textContent = `Distance : ${distStr}`;
|
||||
document.getElementById('feedback-label').textContent = label;
|
||||
document.getElementById('feedback-label').style.color = color;
|
||||
document.getElementById('quiz-instruction').style.display = 'none';
|
||||
show('quiz-feedback');
|
||||
|
||||
// Fit both points in view
|
||||
map.fitBounds(L.latLngBounds([latlng, correct]).pad(0.4), { maxZoom: 14 });
|
||||
}
|
||||
|
||||
function clearFeedback() {
|
||||
if (userMarker) { map.removeLayer(userMarker); userMarker = null; }
|
||||
if (correctMarker) { map.removeLayer(correctMarker); correctMarker = null; }
|
||||
if (feedbackLine) { map.removeLayer(feedbackLine); feedbackLine = null; }
|
||||
}
|
||||
|
||||
function updateScoreDisplay() {
|
||||
document.getElementById('score-value').textContent = quizScore;
|
||||
const remaining = quizQueue.length;
|
||||
document.getElementById('quiz-progress').textContent =
|
||||
`${quizTotal} / ${quizTotal + remaining} questions`;
|
||||
}
|
||||
|
||||
// ── Utils ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function show(id) { document.getElementById(id).style.display = ''; }
|
||||
function hide(id) { document.getElementById(id).style.display = 'none'; }
|
||||
function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.code === 'Space' || e.code === 'Enter') {
|
||||
if (mode === 'quiz' && quizAnswered) { e.preventDefault(); nextQuestion(); }
|
||||
}
|
||||
});
|
||||
|
||||
init();
|
||||
Reference in New Issue
Block a user