map = { const mapboxgl = await require("mapbox-gl@1.13.0"); const href = await require.resolve("mapbox-gl@1.13.0/dist/mapbox-gl.css"); let container = html`

`; let message = html`

...

`; let restartButton = html``; let active, keys, total, timer, start, errors, timeout; const mapStyle = { version: 8, sources: { worldImagery: { type: "raster", tiles: [ "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" ], tileSize: 256 } }, layers: [ { id: "worldImagery", type: "raster", source: "worldImagery", minzoom: 0, maxzoom: 22 } ] }; const map = new mapboxgl.Map({ container: container, style: mapStyle, center: [0, 0], zoom: 3, doubleClickZoom: false }); let score = () => { return `

${total - keys.length}/${total}

`; }; let findNew = () => { let idx = Math.floor(Math.random() * keys.length); let lookFor = countries[keys[idx]]; keys.splice(idx, 1); message.innerHTML = `${score()} Look for ${lookFor.name} ${lookFor.flag}`; active = lookFor.code; }; function handleGuess(lngLat) { let code = countryCoder.iso1A2Code([lngLat.lng, lngLat.lat]); if (code == active) { if (keys.length) { findNew(); } else { timer = Math.floor((Date.now() - start) / 1000); if (Object.keys(errors).length === 0) { message.innerHTML = `Perfect game! You won! Time taken: ${timer} seconds.`; } else { let errorReport = Object.keys(errors) .map( (key) => `

Errors for ${key}:

${err} (${errors[key][err]})

` ) .join(""); message.innerHTML = `You won! Time taken: ${timer} seconds.
Errors:
${errorReport}`; } } } else { if (!errors[active]) { errors[active] = {}; } errors[active][code] = 1 + (errors[active][code] | 0); message.innerHTML = `${score()} try again. was ${code} not ${ countries[active].name }`; } } function initializeGame() { // Reset game state errors = {}; keys = Object.keys(countries); total = keys.length; start = Date.now(); map.flyTo({ center: [0, 0], zoom: 3 }); findNew(); } map.on("dblclick", function (event) { event.preventDefault(); event.originalEvent.stopPropagation(); event.originalEvent.preventDefault(); handleGuess(event.lngLat); return false; }); let lastTap = 0; let lastTapPos = { x: 0, y: 0 }; let isDragging = false; map.on("touchstart", function () { isDragging = false; }); map.on("touchmove", function () { isDragging = true; }); map.on("touchend", function (event) { if (isDragging) { return; } let currentTime = new Date().getTime(); let tapLength = currentTime - lastTap; let currentTapPos = { x: event.originalEvent.changedTouches[0].clientX, y: event.originalEvent.changedTouches[0].clientY }; if (tapLength < 500 && tapLength > 0) { // Check the distance between two taps let dx = currentTapPos.x - lastTapPos.x; let dy = currentTapPos.y - lastTapPos.y; let distance = Math.sqrt(dx * dx + dy * dy); // Only trigger the double tap event if the distance is less than 50 pixels if (distance < 50) { // Double Tap event.originalEvent.preventDefault(); handleGuess(event.lngLat); lastTap = 0; } } else { // Update the last tap time and position after the single tap lastTap = currentTime; lastTapPos = currentTapPos; } }); initializeGame(); restartButton.onclick = initializeGame; container.appendChild(message); container.appendChild(restartButton); container.appendChild(style); yield container; }