28:null 29:["$","title",null,{"children":"Geography Lesson | Dylan Madisetti | Observable"}] 2e:T10cc,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; }2f:[] 2c:{"id":"7e77e5aec40bd6d7","slug":"geography-lesson","title":"Geography Lesson","thumbnail":"c6bb5c431de36d93065c915d5c049ff0c97fa77e52ace0ad384ed9aa646be5ef","access_level":"public","create_time":"$D2023-06-09T21:45:22.059Z","update_time":"$D2023-06-11T00:46:05.155Z","view_time":null,"first_public_time":"$D2023-06-09T21:45:22.059Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8880f12a08d5ccb7","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":"starter_2024"},"version":194,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"12ceb5d047bae1c3","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":null}],"members":[{"type":"individual","id":"12ceb5d047bae1c3","login":"dmadisetti","name":"Dylan Madisetti","avatar_url":"https://avatars-next.observableusercontent.com/30767c701c28e63e28a14e0d59cbef6b4c88507040a73bc304f1a119abd852db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Geography Lesson","cells":[{"id":0,"value":"# Geography Lesson\n\n> When the jet sprang into the sky, \n> it was clear why the city \n> had developed the way it had, \n> seeing it scaled six inches to the mile. \n> There seemed an inevitability \n> about what on ground had looked haphazard, \n> unplanned and without style \n> When the jet sprang into the sky.\n> \n> When the jet reached ten thousand feet, \n> it was clear why the country \n> had cities where the rivers ran \n> and why the valleys were populated. \n> The logic of geography — \n> that land and water attracted man — \n> was clearly delineated \n> When the jet reached ten thousand feet.\n> \n> When the jet rose six miles high, \n> it was clear the earth was round \n> and that it had more sea than land. \n> But it was difficult to understand \n> that the men on the earth found \n> causes to hate each other, to build \n> walls across cities and to kill. \n> From that height, it was not clear why.\n>> Geography Lesson by Zulfikar Ghosh","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":158,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"Double click (or tap) on the country requested. A satellite view without borders, makes everything feel a bit more connected, but makes finding countries a bit harder.\n\nIf you find yourself double-clicking on Northern Cyprus or similar states and thinking \"hmm, that's unusual,\" remember, it's all in good fun- I'm just using the data I have on hand, no political agendas here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"style=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"countries = {\n let countries = countryCoder.borders.features\n .filter((b) => b.properties.level == \"country\" && b.properties.iso1A2)\n .map((b) => b)\n .map((b) => ({\n code: b.properties.iso1A2,\n name: b.properties.nameEn,\n flag: b.properties.emojiFlag\n }));\n let data = {};\n countries.forEach((d) => {\n data[d.code] = d;\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"countryCoder = {\n const response = await fetch(\n \"https://cdn.jsdelivr.net/npm/@rapideditor/country-coder@5.2/dist/country-coder.iife.min.js\"\n );\n const blob = await response.blob();\n return require(URL.createObjectURL(blob)).catch(() => window.countryCoder);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"