Customize your GeoGuessr path visualization
Show path on the map
`;
btn.onclick = showModal;
headerRight.insertBefore(btn, headerRight.firstChild);
injectUI();
}
};
const uiObserver = new MutationObserver(injectButton);
uiObserver.observe(document.body, { childList: true, subtree: true });
})();
// --- PART 2: MAP LOGIC (DEFERRED) ---
googleMapsPromise.then(() => runAsClient(() => {
const google = window.google;
const SETTINGS_KEY = 'pl_settings_v2';
const RDP_EPSILON = 0.00002;
const TELEPORT_DISTANCE = 120;
const getSettings = () => {
const defaults = { enabled: true, style: 'gradient', solidColor: '#ff0000', gradStart: '#22c55e', gradMiddle: '#eab308', gradEnd: '#ef4444', thickness: 4 };
try { return { ...defaults, ...JSON.parse(localStorage.getItem(SETTINGS_KEY) || "{}") }; } catch(e) { return defaults; }
};
// --- Helpers ---
const hexToHsl = (hex) => {
let r = parseInt(hex.slice(1, 3), 16) / 255, g = parseInt(hex.slice(3, 5), 16) / 255, b = parseInt(hex.slice(5, 7), 16) / 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
if (max === min) h = s = 0; else {
let d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; }
h /= 6;
}
return { h: h * 360, s: s * 100, l: l * 100 };
};
const hslToHex = (h, s, l) => {
l /= 100; s /= 100; const a = s * Math.min(l, 1 - l);
const f = n => { const k = (n + h / 30) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color).toString(16).padStart(2, '0'); };
return `#${f(0)}${f(8)}${f(4)}`;
};
const interpolateHSL = (c1, c2, t) => {
const h1 = hexToHsl(c1), h2 = hexToHsl(c2);
let hue1 = h1.h, hue2 = h2.h;
if (hue2 - hue1 > 180) hue1 += 360; else if (hue2 - hue1 < -180) hue2 += 360;
return hslToHex((hue1 + (hue2 - hue1) * t) % 360, h1.s + (h2.s - h1.s) * t, h1.l + (h2.l - h1.l) * t);
};
const getDistMeters = (p1, p2) => {
const R = 6371e3; const dLat = (p2.lat - p1.lat) * Math.PI/180; const dLng = (p2.lng - p1.lng) * Math.PI/180;
const a = Math.sin(dLat/2)**2 + Math.cos(p1.lat * Math.PI/180) * Math.cos(p2.lat * Math.PI/180) * Math.sin(dLng/2)**2;
return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)));
};
const findPerpDist = (p, l1, l2) => {
if (l1.lat === l2.lat && l1.lng === l2.lng) return Math.sqrt((p.lat - l1.lat)**2 + (p.lng - l1.lng)**2);
let num = Math.abs((l2.lng - l1.lng) * p.lat - (l2.lat - l1.lat) * p.lng + l2.lat * l1.lng - l2.lng * l1.lat);
let den = Math.sqrt((l2.lng - l1.lng)**2 + (l2.lat - l1.lat)**2);
return num / den;
};
const rdp = (points, epsilon) => {
if (points.length <= 2) return points;
let dmax = 0, index = 0, end = points.length - 1;
for (let i = 1; i < end; i++) {
let d = findPerpDist(points[i], points[0], points[end]);
if (d > dmax) { index = i; dmax = d; }
}
if (dmax > epsilon) {
let res1 = rdp(points.slice(0, index + 1), epsilon);
let res2 = rdp(points.slice(index), epsilon);
return res1.slice(0, res1.length - 1).concat(res2);
} else { return [points[0], points[end]]; }
};
const saveToStorage = (key, value) => {
const val = JSON.stringify(value);
while (JSON.stringify(localStorage).length + val.length > 5242880) {
const ts = JSON.parse(localStorage.timestamps || "{}");
const oldest = Object.entries(ts).sort((a,b) => a[1]-b[1])[0];
if (!oldest) break;
delete ts[oldest[0]]; Object.keys(localStorage).forEach(k => { if(k.startsWith(oldest[0])) localStorage.removeItem(k); });
localStorage.timestamps = JSON.stringify(ts);
}
localStorage.setItem(key, val);
};
// --- State Detection ---
let markers = [], inGame = false, route = [], currentRound = undefined, mapState = 0;
let lastObservedSpawn = null;
const isGamePage = () => {
const path = location.pathname;
return path.includes("/challenge/") || path.includes("/results/") || path.includes("/game/") ||
path.includes("/duels/") || path.includes("/multiplayer") || path.includes("/summary");
};
const resultShown = () => {
if (document.querySelector('[data-qa="result-view-bottom"]')) return true;
if (document.querySelector('[class*="round-score-2_root"]')) return true;
if (location.href.includes('results') || location.href.includes('summary')) return true;
return false;
};
const isGameFinished = () => {
if (location.href.includes('results') || location.href.includes('summary')) return true;
if (document.querySelector('[data-qa="play-again-button"]') || document.querySelector('[class*="play-again-button"]')) return true;
return false;
};
const getGameID = () => {
const urlMatch = location.href.match(/\w{15,}/);
if (urlMatch && !location.pathname.includes('multiplayer')) return urlMatch[0];
if (window.__GPL_GAME_ID) return window.__GPL_GAME_ID;
if (urlMatch) return urlMatch[0];
return "unknown_game";
};
const getRoundNumber = () => {
const spEl = document.querySelector('[data-qa=round-number] :nth-child(2)');
if (spEl) return parseInt(spEl.innerHTML);
const duelEl = document.querySelector('[class*="round-score-2_roundNumber"]');
if (duelEl) return parseInt(duelEl.innerText.replace(/\D/g, ''));
return 0;
};
const onMove = (sv) => {
if (!getSettings().enabled || !isGamePage()) return;
const pos = { lat: sv.position.lat(), lng: sv.position.lng() };
// 1. Result visible? ALWAYS update spawn buffer and reset guess flag.
if (resultShown()) {
lastObservedSpawn = pos;
if (window.__GPL_HAS_GUESSED) window.__GPL_HAS_GUESSED = false;
return;
}
// 2. Spectating? Stop.
if (window.__GPL_HAS_GUESSED) return;
// 3. Start Recording Logic
if (!inGame) {
inGame = true;
// Use buffered spawn point as point 0
route = lastObservedSpawn ? [[lastObservedSpawn]] : [[]];
}
// 4. Teleport Check
const currentSeg = route[route.length - 1];
const last = currentSeg[currentSeg.length - 1];
if (last && getDistMeters(last, pos) > TELEPORT_DISTANCE) {
route.push([]);
}
route[route.length - 1].push(pos);
};
const onMapUpdate = (map) => {
if (!isGamePage() || !google.maps.geometry) return;
// Add Round Number to checksum to handle persistent Duel pages
const newState = (inGame ? 5 : 0) + (resultShown() ? 10 : 0) + (isGameFinished() ? 20 : 0) + getRoundNumber();
if (newState === mapState) return;
mapState = newState;
markers.forEach(m => m.setMap(null));
markers = [];
if (resultShown()) {
const settings = getSettings();
const currentGameID = getGameID();
// SAVE Logic
if (inGame) {
const rNum = getRoundNumber();
const saveID = currentGameID + '-' + rNum;
const simplifiedRoute = route.map(segment => rdp(segment, RDP_EPSILON));
const encoded = simplifiedRoute.map(p => google.maps.geometry.encoding.encodePath(p.map(x => new google.maps.LatLng(x))));
saveToStorage(saveID, encoded);
const ts = JSON.parse(localStorage.timestamps || "{}");
ts[currentGameID] = Date.now();
localStorage.timestamps = JSON.stringify(ts);
inGame = false;
}
// RENDER
if (!settings.enabled) return;
let keysToShow = [];
if (isGameFinished()) {
keysToShow = Object.keys(localStorage).filter(k => k.startsWith(currentGameID) && !k.includes('timestamp'));
} else {
const rNum = getRoundNumber();
keysToShow = [currentGameID + '-' + rNum];
}
keysToShow.forEach(k => {
const raw = localStorage.getItem(k);
if (raw) {
const segs = JSON.parse(raw).map(x => google.maps.geometry.encoding.decodePath(x));
const total = segs.reduce((a, b) => a + b.length, 0);
let count = 0;
segs.forEach(path => {
const step = Math.max(2, Math.ceil(total / 100));
for (let i = 0; i < path.length - 1; i += (step - 1)) {
const chunk = path.slice(i, i + step);
const t = count / (total || 1);
const color = settings.style === 'solid' ? settings.solidColor : (t < 0.5 ? interpolateHSL(settings.gradStart, settings.gradMiddle, t * 2) : interpolateHSL(settings.gradMiddle, settings.gradEnd, (t - 0.5) * 2));
markers.push(new google.maps.Polyline({
path: chunk,
strokeColor: color,
strokeWeight: settings.thickness,
geodesic: true,
zIndex: Math.floor(t * 100),
clickable: false
}));
count += (chunk.length - 1);
}
});
}
});
markers.forEach(m => m.setMap(map));
}
};
const oldSV = google.maps.StreetViewPanorama;
google.maps.StreetViewPanorama = Object.assign(function (...args) {
const res = oldSV.apply(this, args);
this.addListener('position_changed', () => onMove(this));
return res;
}, { prototype: Object.create(oldSV.prototype) });
const oldMap = google.maps.Map;
google.maps.Map = Object.assign(function (...args) {
const res = oldMap.apply(this, args);
this.addListener('idle', () => onMapUpdate(this));
return res;
}, { prototype: Object.create(oldMap.prototype) });
}));