Public
Edited
Mar 31, 2023
Insert cell
mutable selectingRing1 = true
Insert cell
{
if (selectingRing1) {
viewof toggleRing1.innerHTML = "Selecting"
}
else {
viewof toggleRing1.innerHTML = "Select"
}
}
Insert cell
{
toggleRing1;
mutable selectingRing1 = ! mutable selectingRing1;
}
Insert cell
Insert cell
map = {
const K = 800;
const container = html`<div style="height:${K}px;">`;
container.correct = 0;
yield container;

function toMapUnit(x) {
return (x / 16384) * K;
}
const map = L.map(container, {
crs: L.CRS.Simple,
minZoom: 0,
zoomControl: false,
scrollWheelZoom: false
});
var bounds = [
[0, 0],
[K, K]
];
var mapimg = maps.sp;
var image = L.imageOverlay(mapimg, bounds).addTo(map);
map.fitBounds(bounds);

function addCircleFromClick(lat, lng) {
var circle = L.circle([lng, lat], {
color: "#FCE77D",
fillColor: "#FCE77D",
fillOpacity: 0,
weight: 2,
radius: toMapUnit(321)
}).addTo(map);
// console.log("adding circle");
}

function addCircle(record) {
var c = record.center;
var circle = L.circle([toMapUnit(c.y), toMapUnit(c.x)], {
color: "#F96167",
fillColor: "#F96167",
fillOpacity: 0,
weight: 2, //stroke width
radius: toMapUnit(record.radius)
}).addTo(map);
}

function onMapClick(e) {
if (selectingRing1) {
addCircleFromClick(e.latlng.lng, e.latlng.lat);
mutable selectingRing1 = !mutable selectingRing1;
}
// add the rest
}

map.on("click", onMapClick);
}
Insert cell
## under the hood
Insert cell
game = circleData.filter(x => x.gameID === gameID && x.stage > 0)
Insert cell
circleData = {
var tmp = await FileAttachment("S16_circles.json").json();
// flip y values
tmp.map(function (x){x.center.y = 16384 - x.center.y; return x;});
return tmp;
}
Insert cell
L = {
const L = await require("leaflet@1.9.3/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
Insert cell
maps = {
return {
we: await FileAttachment("mp_rr_desertlands_mu3.jpg").image(),
sp: await FileAttachment("mp_rr_tropic_island_mu1.jpg").image()
};
}
Insert cell
viewof played = {
const element = htl.html`<div id="#played"></div>`;
element.value = false;
return element;
}
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
Insert cell
function increment(input) {
input.value++;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more