// ==UserScript== // @name Geoguessr Duels Country Score Script // @description Keeps track of your score for each country in duels games and displays it on an interactive map on your profile // @author nappyslappy // @version 1.3.1 // @match https://www.geoguessr.com/* // @run-at document-start // @grant none // @license none // @namespace Geoguessr Duels Country Score Script // @downloadURL none // ==/UserScript== //Published: June 6th, 2022 //Last Update: June 30th, 2022 //**************************** INFORMATION ****************************// /* */ /* This script was mainly made for you to have a visual map of */ /* which countries you know well and which ones you need to improve on */ /* */ /* The script will monitor your duels guesses and keep a unique record */ /* for each country of the times you guessed it correctly */ /* */ /* If there is a round where you don't make a guess, */ /* it wont count against you. The script will only keep track */ /* of your record when you DO make a guess */ /* */ /* You can view the map showing your percentage score for each */ /* country at the bottom of your profile page */ /* */ /* Some countries are too small to show on the map so there is */ /* a search bar on the left hand side to filter through them */ /* */ /* Double click a country to reset its scores and */ /* to open up more detailed stats (Version 2.0.0+) */ /* */ /***********************************************************************/ //******************************* SETUP *******************************// /* If you haven't already, download the free extension 'tampermonkey' */ /* and then install this script */ /* */ /* This will allow the script to interact with geoguessr */ /* and keep track of your scores */ /* */ /* Go to www.bigdatacloud.com, create a free account, */ /* and click 'Get your free API key' */ /* */ /* Copy and paste that key below where it says 'API_KEY' */ /* */ /* Go to your profile on Geoguessr and find your user ID under */ /* where it says 'sign out' (The last part after 'user/' is the ID) */ /* */ /* Copy and paste your ID below where it says 'USER_ID' */ /* */ /* Now just play duels and see your new scores updated on your profile */ /* */ /***********************************************************************/ //**************************** INSERT YOUR INFO HERE ****************************// let API_KEY = ''; //Put your free api key inside '' let USER_ID = ''; //Put your user id inside '' //**************************** START OF SCRIPT ****************************// //Map Colors let green_range = 0.75; let yellow_range = 0.25; let red_range = 0; if(window.localStorage.getItem('duels-map-color-left-range')){ green_range = parseInt(window.localStorage.getItem('duels-map-color-right-range')) * 0.01; yellow_range = parseInt(window.localStorage.getItem('duels-map-color-left-range')) * 0.01; } else{ window.localStorage.setItem('duels-map-color-left-range', 25); window.localStorage.setItem('duels-map-color-right-range', 75); } //Global Variables let alerted = false; let profile = false; let player_index = 0; let previous_last_guess_number = 0; //Check for an existing api key and user id if(API_KEY != ''){ window.localStorage.setItem('duels-country-scores-api-key', API_KEY); } if(USER_ID != ''){ window.localStorage.setItem('duels-country-scores-user-id', USER_ID); } API_KEY = window.localStorage.getItem('duels-country-scores-api-key'); USER_ID = window.localStorage.getItem('duels-country-scores-user-id'); //Set the healing rounds toggle switch if(window.localStorage.getItem('allow-healing-rounds') == null){ window.localStorage.setItem('allow-healing-rounds', JSON.stringify({include: true})); } //Evaluate the new guess function evaluate(guess,location,distance){ let correct_exists = window.localStorage.getItem(`${location}-number-correct-${USER_ID}`); let total_exists = window.localStorage.getItem(`${location}-number-total-${USER_ID}`); let correct_overall = window.localStorage.getItem(`overall-correct-${USER_ID}`); let total_overall = window.localStorage.getItem(`overall-total-${USER_ID}`); let correct_value = 1; let total_value = 1; //Setting correct value if(guess === location){ if(correct_exists !== null){ correct_value = parseInt(correct_exists,10); correct_value = correct_value + 1; } window.localStorage.setItem(`${location}-number-correct-${USER_ID}`,correct_value); } //Setting overall values if(total_overall !== null){ if(guess === location){ window.localStorage.setItem(`overall-correct-${USER_ID}`,((parseInt(correct_overall,10))+1)); } window.localStorage.setItem(`overall-total-${USER_ID}`,((parseInt(total_overall,10))+1)); } else{ if(guess === location){ window.localStorage.setItem(`overall-correct-${USER_ID}`,1); } else{ window.localStorage.setItem(`overall-correct-${USER_ID}`,0); } window.localStorage.setItem(`overall-total-${USER_ID}`,1); } //Setting total value if(total_exists !== null){ total_value = parseInt(total_exists,10); total_value = total_value + 1; } window.localStorage.setItem(`${location}-number-total-${USER_ID}`,total_value); //Setting distance let distance_average = window.localStorage.getItem(`${location}-distance-average-${USER_ID}`); let distance_number = window.localStorage.getItem(`${location}-distance-number-${USER_ID}`); if(distance_average === null && distance_number === null){ window.localStorage.setItem(`${location}-distance-average-${USER_ID}`,distance); window.localStorage.setItem(`${location}-distance-number-${USER_ID}`,1); } else{ distance_number = parseInt(distance_number) + 1; distance_average = ((distance_average * (distance_number - 1)) + distance) / distance_number; window.localStorage.setItem(`${location}-distance-average-${USER_ID}`,distance_average); window.localStorage.setItem(`${location}-distance-number-${USER_ID}`,distance_number); } }; //Get the guess country code async function getGuessCountryCode(location){ if(location[0] <= -85.05 || location == null){ return 'AQ'; } else{ let api = "https://api.bigdatacloud.net/data/reverse-geocode?latitude="+location[0]+"&longitude="+location[1]+"&localityLanguage=en&key="+API_KEY; let country_code = await fetch(api) .then(res => res.json()) .then((out) => { return out.countryCode; }) return country_code; }; }; //Check if a new guess has been made async function checkGuess(api){ return new Promise((resolve,reject) => { fetch(api,{credentials: 'include'}) .then((res) => res.json()) .then((out) => { if(out.teams[0].players[0].playerId === USER_ID){ player_index = 0; } else if(out.teams[1].players[0].playerId === USER_ID){ player_index = 1; } else{ if(!alerted){ alert('Duels Record Script:\nMAKE SURE YOU HAVE THE CORRECT USER ID'); alerted = true; } return; } let last_guess_number = out.teams[player_index].players[0].guesses.length; //If a new guess hasn't been made if(last_guess_number == previous_last_guess_number){ return; } else if(out.teams[player_index].players[0].guesses[last_guess_number-1].roundNumber !== out.currentRoundNumber){ return; } //If include healing toggle is off let allowHealing = JSON.parse(window.localStorage.getItem('allow-healing-rounds')); if(!allowHealing.include && out.currentRoundNumber == 5){ return; } let current_guess = [out.teams[player_index].players[0].guesses[last_guess_number-1].lat, out.teams[player_index].players[0].guesses[last_guess_number-1].lng]; //If the player refreshes during the 15 second countdown after making a guess if(current_guess[0] == window.sessionStorage.getItem('last-guess-lat') && current_guess[1] == window.sessionStorage.getItem('last-guess-lng')){ return; } else{ window.sessionStorage.setItem('last-guess-lat', current_guess[0]); window.sessionStorage.setItem('last-guess-lng', current_guess[1]); } previous_last_guess_number = last_guess_number; let current_round = out.currentRoundNumber; getGuessCountryCode(current_guess) .then((guess) => { let location_code = out.rounds[current_round-1].panorama.countryCode.toUpperCase(); let distance = out.teams[player_index].players[0].guesses[last_guess_number-1].distance; if(guess != undefined){ evaluate(guess,location_code,distance); } resolve(out); }); }) .catch((error) => { reject(error); }); }); } //Check if the user is on the profile page function profileCheck(){ if(location.pathname.endsWith('/profile') && !profile){ if(document.getElementsByClassName('text-input_textInput__HPC_k')[0].value.includes(USER_ID)){ addMapToProfile(); } } else if(!location.pathname.endsWith('/profile') && profile){ profile = false; document.getElementById('map-wrapper-element').remove(); document.getElementById('css-for-map').remove(); } } //Check if the user is playing a duels game function duelsCheck(){ if(!location.pathname.startsWith('/duels/') || location.pathname.endsWith('/summary')){ return; } const game_tag = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); const api_url = "https://game-server.geoguessr.com/api/duels/"+game_tag; checkGuess(api_url); }; //Run duelsCheck and profileCheck every half-second setInterval(duelsCheck,500); setInterval(profileCheck,500); //Console Log Script Name console.log('*** Duels Country Scores v1.3.0 by NappySlappy ***'); /************************************************** MAP STUFF HERE **************************************************/ //Add the map (and related stuff) to the bottom of the profile page function addMapToProfile(){ profile = true; const svgMap = document.createElement('div'); svgMap.setAttribute('id','map-wrapper-element'); const cssForMap = document.createElement('style'); cssForMap.setAttribute('id', 'css-for-map'); const scriptForMap = document.createElement('script'); scriptForMap.setAttribute('id', 'script-for-map'); cssForMap.textContent = ` .map-wrapper-element{ position: relative; left: 0px; } #map-title{ font-size: 30px; text-align: center; padding-bottom: 20px; color: var(--ds-color-yellow-50); font-family: var(--font-neo-sans); } #total-percentage-wrapper{ width: 100%; background-color: gray; height: 50px; position: relative; } #total-percentage-text-wrapper{ position: absolute; left: 0; right: 0; height: 100%; } #total-percentage-text{ display: flex; font-size: 20px; height: 100%; justify-content: center; align-items: center; color: black; } #total-percentage-bar{ width: 50%; height: 100%; background-color: gold; } .display-wrapper{ margin: 0 auto; padding: 10px; width: fit-content; font-size: 20px; } .display-wrapper #display-country-details{ visibility: show; color: white; } .display-wrapper #display-country-distance{ visibility: show; font-size: 16px; display: flex; align-items: center; justify-content: center; } .map-wrapper{ margin: 0 auto; pointer-events: none; padding-bottom: 25px; } #world-map { display: block; position: relative; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; transform: scale(1); transform-origin: 0px 0px; z-index: 2; } #world-map path{ stroke: white; fill: black; transition: fill 0.3s ease; pointer-events: all; } #world-map path:hover{ fill: rgb(175, 175, 175); pointer-events: all; cursor: pointer; } #details-box { padding: 1rem; border-radius: 8px; font-size: 14px; position: fixed; color: white; font-family: "Poppins"; background-color: gray; width: fit-content; transform: translateX(-50%); transition: opacity .4s ease; z-index: 3; } #search-bar-wrapper{ pointer-events: all; position: absolute; z-index: 3; } #search-bar { box-sizing: border-box; z-index: 3; } #search-bar-list { list-style: none; display: none; z-index: 3; } #search-bar-list li { padding: 10px; width: 73.5%; border-bottom: 2px solid #ffffff; z-index: 3; text-align: center; } #search-bar-list li:hover { background: #ffffff; color: #000000; cursor: pointer; } #country-stats-page-wrapper{ } #country-stats-display-title{ margin: 0 auto; padding: 10px; width: fit-content; font-size: 20px; } #country-stats-display-details{ visibility: show; color: white; } #country-stats-wrapper{ } #country-stats-reset-btn-wrapper{ padding: 100px; text-align: center; } #country-stats-reset-btn{ border-color: red; background-color: red; color: white; } #country-stats-reset-btn:hover{ cursor: pointer; } #map-settings-wrapper{ var(--font-neo-sans); text-align: center; display: none; } #map-settings-title{ font-size: 40px; padding-bottom: 20px; } #map-settings-content{ } #settings-api-and-id-wrapper{ border-top: 2px solid white; padding-bottom: 50px; padding-top: 25px; display: flex; margin-left: 50px; margin-right: 50px; } #settings-api-key{ background-color: #eee; flex: 1; } #settings-user-id{ background-color: #eee; flex: 1; } #settings-map-color-ranges-wrapper{ border-top: 2px solid white; padding-bottom: 50px; padding-top: 25px; margin-left: 50px; margin-right: 50px; } #map-color-ranges-slider-wrapper{ position: relative; } #slider-output-wrapper{ position: relative; margin-top: 20px; width: 100%; } #left-slider-output{ position: absolute; left: 50%; } #right-slider-output{ position: absolute; left: 50%; } #map-color-ranges-slider{ position: relative; width: 100%; height: 100px; margin-top: 0px; } #slider-track{ width: 100%; height: 5px; position: absolute; margin: auto; top: 0; bottom: 0; border-radius: 5px; } .map-color-ranges{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; outline: none; position: absolute; margin: 0px -50%; top: 0; bottom: 0; background-color: transparent; pointer-events: none; border-color: transparent; padding: 0px; } .map-color-ranges::-webkit-slider-runnable-track{ -webkit-appearance: none; height: 5px; } .map-color-ranges::-webkit-slider-thumb{ -webkit-appearance: none; height: 1.7em; width: 1.7em; background-color: #ffffff; cursor: pointer; margin-top: -9px; pointer-events: auto; border-radius: 50%; border: 1px solid #808080; } #settings-allow-healing-rounds-wrapper{ border-top: 2px solid white; padding-bottom: 50px; padding-top: 25px; margin-left: 50px; margin-right: 50px; text-align: center; } #settings-allow-healing-rounds{ height: 0; width: 0; visibility: hidden; } #label-allow-healing{ cursor: pointer; text-indent: -9999px; width: 50px; height: 25px; background: gray; display: block; border-radius: 25px; position: relative; margin: auto; } #label-allow-healing:after{ content: ''; position: absolute; top: 1.25px; left: 3px; width: 22.5px; height: 22.5px; background: #fff; border-radius: 22.5px; transition: 0.3s; } #settings-allow-healing-rounds:checked + #label-allow-healing{ background: #bada55; } #settings-allow-healing-rounds:checked + #label-allow-healing:after{ left: calc(100% - 5px); transform: translateX(-100%); } #label-allow-healing:active:after{ width: 32.5px; } #unit-selector{ border-top: 2px solid white; padding-bottom: 50px; padding-top: 25px; margin-left: 50px; margin-right: 50px; } #unit-selector-mi, #unit-selector-km{ accent-color: #bada55; } #unit-selector-mi:hover, #unit-selector-km:hover{ cursor: pointer; } #settings-reset-scores-btn-wrapper{ border-top: 2px solid white; padding-bottom: 50px; padding-top: 25px; margin-left: 50px; margin-right: 50px; } #reset-scores-btn{ border-color: red; background-color: red; color: white; } #reset-scores-btn:hover{ cursor: pointer; } #map-settings-btn-wrapper{ text-align: center; } #map-settings-btn{ border-radius: 15px; background-color: transparent; color: white; border-color: white; padding: 5px 10px 5px 10px; } #map-settings-btn:hover{ background-color: white; color: black; border-color: black; cursor: pointer; } #footer-wrapper{ display: flex; } #version-number{ flex: 1; font-family: Arial; padding-left: 10px } #creator-tag{ flex: 1; font-family: Arial; padding-right: 10px; padding-bottom: 10px; text-align: right; } `; svgMap.innerHTML = `

Duels Country Scores

Country Name: 0 / 0 (0%)

Average Distance: 0.0 km

SETTINGS

Map Color Ranges

Units

Include Healing Rounds

`; scriptForMap.textContent = ` { let countries = ['AF','AX','AL','DZ','AS','AD','AO','AI','AQ','AG','AR','AM','AW','AU','AT','AZ','BS','BH','BD','BB','BY','BE','BZ','BJ','BM','BT','BO','BQ','BA','BW','BV','BR','IO','BN','BG','BF','BI','KH','CM','CA','CV','KY','CF','TD','CL','CN','CX','CC','CO','KM','CG','CD','CK','CR','CI','HR','CU','CW','CY','CZ','DK','DJ','DM','DO','EC','EG','SV','GQ','ER','EE','ET','FK','FO','FJ','FI','FR','GF','PF','TF','GA','GM','GE','DE','GH','GI','GR','GL','GD','GP','GU','GT','GG','GN','GW','GY','HT','HM','VA','HN','HK','HU','IS','IN','ID','IR','IQ','IE','IM','IL','IT','JM','JP','JE','JO','KZ','KE','KI','KP','KR','XK','KW','KG','LA','LV','LB','LS','LR','LY','LI','LT','LU','MO','MK','MG','MW','MY','MV','ML','MT','MH','MQ','MR','MU','YT','MX','FM','MD','MC','MN','ME','MS','MA','MZ','MM','NA','NR','NP','NL','NC','NZ','NI','NE','NG','NU','NF','MP','NO','OM','PK','PW','PS','PA','PG','PY','PE','PH','PN','PL','PT','PR','QA','RS','RE','RO','RU','RW','BL','SH','KN','LC','MF','VC','WS','ST','SA','SN','SC','SL','SG','SX','SK','SI','SB','SO','ZA','GS','SS','ES','LK','SD','SR','SJ','SZ','SE','CH','SY','TW','TJ','TZ','TH','TL','TG','TK','TO','TT','TN','TR','TM','TC','TV','UG','UA','AE','GB','US','UM','UY','UZ','VU','VE','VN','VG','VI','WF','EH','YE','ZM','ZW','SM']; let once = false; document.getElementById("details-box").style.opacity = "0%"; //UNIT SELECTION if(window.localStorage.getItem('units-svg-map') === 'mi'){ document.getElementById('unit-selector-mi').checked = true; } else if(window.localStorage.getItem('units-svg-map') === 'km'){ document.getElementById('unit-selector-km').checked = true; } document.getElementById('unit-selector-mi').addEventListener('click', function(){ window.localStorage.setItem('units-svg-map', 'mi'); }); document.getElementById('unit-selector-km').addEventListener('click', function(){ window.localStorage.setItem('units-svg-map', 'km'); }); //MAP SETUP document.getElementById('map-wrapper-element').addEventListener('mousemove', function(e){ if(once){ if(window.location.pathname.endsWith('/profile')){ return; } once = false; } if(!window.location.pathname.endsWith('/profile')){ return; } once = true; //Percentage Bar let correct_total = parseInt(window.localStorage.getItem('overall-correct-${USER_ID}')); let total_total = parseInt(window.localStorage.getItem('overall-total-${USER_ID}')); let percentage_total = Math.floor((correct_total / total_total) * 100); document.getElementById('total-percentage-bar').style.width = percentage_total + '%'; document.getElementById('total-percentage-text').innerHTML = 'Overall Score: ' + correct_total + ' / ' + total_total + ' (' + percentage_total +'%) '; if(percentage_total >= 100*${green_range}){ document.getElementById('total-percentage-bar').style.backgroundColor = 'green'; } else if(percentage_total >= 100*${yellow_range}){ document.getElementById('total-percentage-bar').style.backgroundColor = 'yellow'; } else if(percentage_total >= 100*${red_range}){ document.getElementById('total-percentage-bar').style.backgroundColor = 'red'; } //Country colors countries.forEach(function(country){ let correct = 0; let total = 0; if(window.localStorage.getItem(country + '-number-correct-${USER_ID}') !== null){ correct = window.localStorage.getItem(country + '-number-correct-${USER_ID}'); } if(window.localStorage.getItem(country + '-number-total-${USER_ID}') !== null){ total = window.localStorage.getItem(country + '-number-total-${USER_ID}'); } let percentage = parseInt(correct) / parseInt(total); if(correct === 0 && total === 0){ percentage = 'none'; } let targetCountry = document.getElementById(country); if(!targetCountry){ return; } //Setting the countries to a color based on their percentage if(percentage >= ${green_range}){ targetCountry.setAttribute('style', 'fill: lightgreen'); //green } else if(percentage >= ${yellow_range}){ targetCountry.setAttribute('style', 'fill: rgb(233, 233, 84)'); //yellow } else if(percentage >= ${red_range}){ targetCountry.setAttribute('style', 'fill: lightcoral'); //red } else{ targetCountry.setAttribute('style', 'fill: black'); } }); }); function mouseOverCountry(country){ if(typeof country.target !== 'undefined'){ country = country.target; } if (country.tagName == 'path'){ let content = country.dataset.name; document.getElementById("details-box").innerHTML = content; document.getElementById("details-box").style.opacity = "100%"; //Changing the color when you hover over a country if(country.style.fill == 'lightcoral'){ country.setAttribute('style', 'fill:red'); } else if(country.style.fill == 'lightgreen'){ country.setAttribute('style', 'fill:green'); } else if(country.style.fill == 'rgb(233, 233, 84)'){ country.setAttribute('style', 'fill:yellow'); } else if(country.style.fill == 'black'){ country.setAttribute('style', 'fill:rgb(175, 175, 175)'); } //Displaying the country and the stats at the top of the page let countryName = country.dataset.name; let countryCorrect = 0; let countryTotal = 0; let countryPercentage = 0; let countryDistance = 0.0; let distanceUnit = 'km'; let target = country.id; if(window.localStorage.getItem(target + '-number-correct-${USER_ID}') !== null){ countryCorrect = window.localStorage.getItem(target + '-number-correct-${USER_ID}'); } if(window.localStorage.getItem(target + '-number-total-${USER_ID}') !== null){ countryTotal = window.localStorage.getItem(target + '-number-total-${USER_ID}'); } if((countryCorrect !== 0) && (countryTotal !== 0)){ countryPercentage = Math.floor(100 * (parseInt(countryCorrect) / parseInt(countryTotal))); } if(window.localStorage.getItem(target + '-distance-average-${USER_ID}') !== null){ countryDistance = parseInt(window.localStorage.getItem(target + '-distance-average-${USER_ID}')) / 1000; if(document.getElementById('unit-selector-mi').checked){ countryDistance = countryDistance / 1.609; } countryDistance = round(countryDistance,1); } if(document.getElementById('unit-selector-mi').checked){ distanceUnit = 'mi'; } document.getElementById("display-country-details").textContent = countryName + ": " + countryCorrect + " / " + countryTotal + " (" + countryPercentage + "%)"; document.getElementById("display-country-details").style.visibility = "visible"; document.getElementById("display-country-distance").textContent = 'Average Distance: ' + countryDistance + ' ' + distanceUnit; document.getElementById("display-country-distance").style.visibility = "visible"; } else { document.getElementById("details-box").style.opacity = "0%"; } }; function mouseOutCountry(country){ if(typeof country.target !== 'undefined'){ country = country.target; } if (country.tagName == 'path'){ //Changing the color when you stop hovering over a country if(country.style.fill == 'red'){ country.setAttribute('style', 'fill:lightcoral'); } if(country.style.fill == 'green'){ country.setAttribute('style', 'fill:lightgreen'); } if(country.style.fill == 'yellow'){ country.setAttribute('style', 'fill:rgb(233, 233, 84)'); } if(country.style.fill == 'rgb(175, 175, 175)'){ country.setAttribute('style', 'fill:black'); } //Hiding the display at the top when no country is hovering document.getElementById("display-country-details").style.visibility = "hidden"; document.getElementById("display-country-distance").style.visibility = "hidden"; } }; //DETAILS BOX window.onmousemove = function(e){ let detailsBox = document.getElementById('details-box'); let x = e.clientX; let y = e.clientY; detailsBox.style.top = (y + 20) + 'px'; detailsBox.style.left = (x) + 'px'; }; function round(value, precision) { let multiplier = Math.pow(10, precision || 0); return Math.round(value * multiplier) / multiplier; }; //REGULAR LISTENERS document.getElementById('map-wrapper-element').addEventListener('mouseover', mouseOverCountry); document.getElementById('map-wrapper-element').addEventListener('mouseout', mouseOutCountry); //SEARCH LIST function mouseOverList(e){ let temp = e.target.id.toUpperCase(); let target_country = document.getElementById(temp); mouseOverCountry(target_country); } function mouseOutList(e){ let temp = e.target.id.toUpperCase(); let target_country = document.getElementById(temp); mouseOutCountry(target_country); } document.getElementById('search-bar').addEventListener('click', () => { let search_bar = document.getElementById('search-bar'); let list = document.querySelectorAll('#search-bar-list li'); list.forEach(item => item.addEventListener('mouseover', mouseOverList)); list.forEach(item => item.addEventListener('mouseout', mouseOutList)); search_bar.onkeyup = () => { let search = search_bar.value.toLowerCase(); let count = 0; if(search_bar.value !== ''){ document.getElementById('search-bar-list').style.display = 'inline'; } else{ document.getElementById('search-bar-list').style.display = 'none'; } //Showing the results that match and hiding those that dont (max 6 items) for(let i of list){ let item = i.innerHTML.toLowerCase(); if(item.indexOf(search) == -1){ i.style.display = 'none'; } else{ if(count < 6){ count = count + 1; i.style.display = 'block'; } else{ i.style.display = 'none'; } } }; }; }); //OPEN AND CLOSE SETTINGS document.getElementById('map-settings-btn').addEventListener('click', () => { if(document.getElementById('map-settings-btn').innerText == 'Back to Map'){ document.getElementById('map-settings-wrapper').style.display = 'none'; document.getElementById("country-stats-page-wrapper").style.display = 'none'; document.getElementById('map-settings-btn').innerText = 'Settings'; document.getElementsByClassName('display-wrapper')[0].style.display = 'block'; document.getElementById('search-bar-wrapper').style.display = 'block'; document.getElementsByClassName('map-wrapper')[0].style.display = 'block'; } else{ document.getElementById('map-settings-wrapper').style.display = 'block'; document.getElementById('map-settings-btn').innerText = 'Back to Map'; document.getElementsByClassName('display-wrapper')[0].style.display = 'none'; document.getElementById('search-bar-wrapper').style.display = 'none'; document.getElementsByClassName('map-wrapper')[0].style.display = 'none'; } }); //DISPLAY API KEY AND USER ID IN SETTINGS document.getElementById('settings-api-key').value = '${API_KEY}'; document.getElementById('settings-api-key').style.width = '${API_KEY.length + 3}' + 'ch'; document.getElementById('settings-user-id').value = '${USER_ID}'; document.getElementById('settings-user-id').style.width = '${USER_ID.length + 3}' + 'ch'; //SET HEALING ROUNDS TOGGLE IN SETTINGS let healing = JSON.parse(window.localStorage.getItem('allow-healing-rounds')); if(healing.include){ document.getElementById('settings-allow-healing-rounds').checked = true; } else{ document.getElementById('settings-allow-healing-rounds').checked = false; } document.getElementById('settings-allow-healing-rounds').addEventListener('click', () => { if(document.getElementById('settings-allow-healing-rounds').checked){ window.localStorage.setItem('allow-healing-rounds', JSON.stringify({include: true})); } else{ window.localStorage.setItem('allow-healing-rounds', JSON.stringify({include: false})); } }); //RESET ALL SCORES document.getElementById('reset-scores-btn').addEventListener('click', () => { if(confirm('Are you sure you want to reset your scores? This cannot be undone.')){ //Remove country scores countries.forEach(function(country){ window.localStorage.removeItem(country + '-number-correct-${USER_ID}'); window.localStorage.removeItem(country + '-number-total-${USER_ID}'); window.localStorage.removeItem(country + '-distance-average-${USER_ID}'); window.localStorage.removeItem(country + '-distance-number-${USER_ID}'); }); //Remove overall scores window.localStorage.removeItem('overall-total-${USER_ID}'); window.localStorage.removeItem('overall-correct-${USER_ID}'); //Reload the page location.reload(); } }); //OPEN COUNTRY STATS PAGE document.getElementById('map-wrapper-element').addEventListener('dblclick', (e) => { let countryId = (e.path[0].id).toUpperCase(); if(countryId.length != 2){ return; } window.localStorage.setItem('select-country-stats-id', countryId); document.getElementById('search-bar-wrapper').style.display = 'none'; document.getElementsByClassName('map-wrapper')[0].style.display = 'none'; document.getElementsByClassName('display-wrapper')[0].style.display = 'none'; let countryName = e.path[0].dataset.name; let countryCorrect = 0; let countryTotal = 0; let countryPercentage = 0; if(typeof countryName == 'undefined'){ countryName = e.path[0].textContent; } if(window.localStorage.getItem(countryId + '-number-correct-${USER_ID}') !== null){ countryCorrect = window.localStorage.getItem(countryId + '-number-correct-${USER_ID}'); } if(window.localStorage.getItem(countryId + '-number-total-${USER_ID}') !== null){ countryTotal = window.localStorage.getItem(countryId + '-number-total-${USER_ID}'); } if((countryCorrect !== 0) && (countryTotal !== 0)){ countryPercentage = Math.floor(100 * (parseInt(countryCorrect) / parseInt(countryTotal))); } document.getElementById('country-stats-display-details').textContent = countryName + ": " + countryCorrect + " / " + countryTotal + " (" + countryPercentage + "%)"; document.getElementById('country-stats-reset-btn').textContent = 'Reset All ' + countryName + ' Stats'; document.getElementById("country-stats-page-wrapper").style.display = 'block'; document.getElementById('map-settings-btn').innerText = 'Back to Map'; }); //RESET SCORES FOR SELECTED COUNTRY document.getElementById('country-stats-reset-btn').addEventListener('click', () => { let resetId = window.localStorage.getItem('select-country-stats-id'); let countryCorrect = parseInt(window.localStorage.getItem(resetId + '-number-correct-${USER_ID}')); let countryTotal = parseInt(window.localStorage.getItem(resetId + '-number-total-${USER_ID}')); if(isNaN(countryCorrect)){ countryCorrect = 0; } if(isNaN(countryTotal)){ countryTotal = 0; } //Reset all scores for country if(confirm('Are you sure you want to reset your score? This cannot be undone.')){ window.localStorage.removeItem(resetId + '-number-correct-${USER_ID}'); window.localStorage.removeItem(resetId + '-number-total-${USER_ID}'); window.localStorage.removeItem(resetId + '-distance-average-${USER_ID}'); window.localStorage.removeItem(resetId + '-distance-number-${USER_ID}'); //Remove country scores from overall scores countryCorrect = (parseInt(window.localStorage.getItem('overall-correct-${USER_ID}')) - countryCorrect); countryTotal = (parseInt(window.localStorage.getItem('overall-total-${USER_ID}')) - countryTotal); window.localStorage.setItem('overall-correct-${USER_ID}', countryCorrect); window.localStorage.setItem('overall-total-${USER_ID}', countryTotal); //Reload the page location.reload(); } }); //MAP SLIDER RANGES let leftSlider = document.getElementById("left-slider"); let rightSlider = document.getElementById("right-slider"); let sliderTrack = document.getElementById("slider-track"); let minGap = 5; //Set The Slider On Load window.onload = function(){ let left = window.localStorage.getItem('duels-map-color-left-range'); let right = window.localStorage.getItem('duels-map-color-right-range') leftSlider.value = left; rightSlider.value = right; calcLeftSlider(); calcRightSlider(); } //Change Left Slider Value function calcLeftSlider(){ if(parseInt(rightSlider.value) - parseInt(leftSlider.value) <= minGap){ leftSlider.value = parseInt(rightSlider.value) - minGap; } else if(leftSlider.value < 5){ leftSlider.value = 5; } document.getElementById('left-slider-output').innerText = leftSlider.value + '%'; document.getElementById('left-slider-output').style.left = findValue(leftSlider.value); fillColor(); window.localStorage.setItem('duels-map-color-left-range', leftSlider.value); } //Change Right Slider Value function calcRightSlider(){ if(parseInt(rightSlider.value) - parseInt(leftSlider.value) <= minGap){ rightSlider.value = parseInt(leftSlider.value) + minGap; } else if(rightSlider.value > 95){ rightSlider.value = 95; } document.getElementById('right-slider-output').innerText = rightSlider.value + '%'; document.getElementById('right-slider-output').style.left = findValue(rightSlider.value); fillColor(); window.localStorage.setItem('duels-map-color-right-range', rightSlider.value); } //Fill The Slider With Colors function fillColor(){ let percent1 = parseInt(leftSlider.value); let percent2 = parseInt(rightSlider.value); sliderTrack.style.background = 'linear-gradient(to right, red 0%, red ' + percent1 + '%, yellow ' + percent1 + '%, yellow ' + percent2 +'%, green ' + percent2 + '%, green 100%)'; } //Put Value Above Slider Thumb function findValue(val){ let valueOne = parseInt(val); let valueTwo = valueOne * 0.2; let final = 'calc(' + valueOne + '% - ' + valueTwo + 'px)'; return final; } //Add Event Listeners document.getElementById("left-slider").addEventListener('input', calcLeftSlider); document.getElementById("right-slider").addEventListener('input', calcRightSlider); }`; let referenceNode = document.getElementsByClassName('version3_main__xNkED')[0]; let siblingNode = document.getElementsByClassName('footer_footer__NmtmJ')[0]; referenceNode.parentNode.insertBefore(svgMap, siblingNode); document.head.appendChild(cssForMap); document.getElementById('map-wrapper-element').appendChild(scriptForMap); }; //**************************** END OF SCRIPT ****************************//