$(function (){ //alert("This code works best when running it from a browser and from your laptop or desktop PC."); //declare structure variables var body; var w=window.innerWidth; var h=window.innerHeight; var canvas; var click; //shows xy of click var glow; //glow div for sun var menu; //menu container var input; //input tag var btnGo; //Go button var profile; //profile container var sldp; //user picture var slname; //user name var sldetails; //profile details var loader; //loader object var cdp; //course picture var cname; //course name var cdetails; //course details var link; //Link to profile //var fps=(1000/60); var siteDown = true; //https://gavinchristians.com //creates HTML/CSS structure for code function createWorld(){ //create or get elements body = $("body"); canvas = $("

"); click = $("

"); glow = $("

"); menu = $("#menu"); input = $("#Sid"); btnGo = $("#btnGo"); profile = $("#profile"); sldp = $("#dp"); slname = $("#name"); sldetails = $("#details"); loader = $("

"); cdp = $("

"); cname = $("

"); cdetails = $("

"); link = $("a"); //apply css body.css({ "overflow":"hidden", "width":"100%", "height":"100%", "background-color":"black", "position":"relative", }); canvas.css({ "width":w+"px", "height":h+"px", "background-color":"black", "position":"absolute", "top":"0px", "left":"0px", "z-index":"2" }); click.css({ "color":"black", "background-color":"white", "position":"absolute", "top":"0px", "left":"0px", "z-index":"5" }); glow.css({ "width":"50px", "height":"50px", "background-color":"rgba(0,0,0,0.1)", "position":"absolute", "top":(h/2-25)+"px", "left":(w/2-25)+"px", "z-index":"5", "animation":"glow 1s ease-in-out 0s infinite alternate", "-webkit-animation":"glow 1s ease-in-out 0s infinite alternate", "-moz-animation":"glow 1s ease-in-out 0s infinite alternate", "-o-animation":"glow 1s ease-in-out 0s infinite alternate" }); menu.css({ "width":"300px", "height":"450px", //"border":"2px solid white", "text-align":"center", "position":"absolute", "top":(h/2-225)+"px", "left":(w/2-150)+"px", "z-index":"6" }); profile.css({ "width":"100%", "height":"100px", //"border":"2px solid white", //"text-align":"center", "opacity":"0", "position":"absolute", "top":"0px", "left":"0px", "z-index":"5" }); loader.css({ "width":"50px", "height":"50px", "background-color":"none", "border":"2px solid white", "display":"none", "animation":"loader 1s linear 0s infinite", "-webkit-animation":"loader 1s linear 0s infinite", "-moz-animation":"loader 1s linear 0s infinite", "-o-animation":"loader 1s linear 0s infinite", "position":"absolute", "top":((h/2)-25)+"px", "left":((w/2)-25)+"px", "z-index":"5" }); cdp.css({ "width":"70px", "height":"70px", "background-color":"none", "background-size":"cover", "border-radius":"50%", "float":"left", "margin":"10px" }); cname.css({ "text-align":"left" }); cdetails.css({ "text-align":"left" }); //elements to DOM body.append(canvas); body.append(click); body.append(glow); body.append(menu); body.append(profile); body.append(loader); } createWorld(); //----section for geting user data----// //Credit: This section is inspired by Burey's code //Code: SoloInfo (cors-anywhere API) //Url: https://code.sololearn.com/W6f4L3q0CFKI/?ref=app //---create global variables---// //Sololearn User ID var id; //Sololearner's profile pic var dp = new Image(); //Sololearner's name var name; //Sololearner's level var level; //Sololearner's experience points var xp; //Amount of courses var courses; //Course names var course; //Course experience points var courseXp; //Amount of certificates var certs; //Certificate names var cert; //Certificate dates var certDate; //Amount of badges var badges; //Course list object var cList = { HTMLFundamentals: ["HTML Fundamentals", //1=course exists; //2=course xp //3=course cert exists //4=course cert date false,false,false,false], CSSFundamentals: ["CSS Fundamentals", false,false,false,false], JavaScriptTutorial: ["JavaScript Tutorial", false,false,false,false], jQueryTutorial: ["jQuery Tutorial", false,false,false,false], PHPTutorial: ["PHP Tutorial", false,false,false,false], SQLFundamentals: ["SQL Fundamentals", false,false,false,false], Python3Tutorial: ["Python 3 Tutorial", false,false,false,false], C_Tutorial: ["C# Tutorial", false,false,false,false], CTutorial: ["C++ Tutorial", false,false,false,false], JavaTutorial: ["Java Tutorial", false,false,false,false], RubyTutorial: ["Ruby Tutorial", false,false,false,false], SwiftFundamentals: ["Swift Fundamentals", false,false,false,false] }; /*extracts the neccesary data from the *data agrument passed and stores it *in global variables*/ function getData(data, Sid){ try{ //parses xml data var text = data; //parse the text to DOM object var parser = new DOMParser(); var htmlDoc = parser.parseFromString(text, "text/html"); //extracts profile info with selectors //e.g by class, id, element var user = htmlDoc.querySelector(".user"); id = Sid; name = user.querySelector("h1").innerHTML.trim(); level = user.querySelector("div.detail div").innerHTML.trim(); level = level.substring(20,level.length).trim(); xp = user.querySelector("span").innerHTML.trim(); courses = htmlDoc.querySelectorAll(".courseWrapper"); //e.g courses.length course = htmlDoc.querySelectorAll(".course"); //e.g course[0].title courseXp = htmlDoc.querySelectorAll(".courseXp"); //e.g courseXp[0].innerHTML certs = htmlDoc.querySelectorAll(".certificate"); //e.g certs.length cert = htmlDoc.querySelectorAll(".certificate"); //e.g cert[0].title certDate = htmlDoc.querySelectorAll(".date"); //e.g certDate[0].innerHTML.replace(/ /g,'').replace(/\n/g,''), var a = htmlDoc.querySelectorAll(".achievement"); var b = htmlDoc.querySelectorAll(".disabled"); badges = a.length - b.length; //stores course info in course //list object for(c=0;c"+ "Courses: "+courses.length+" | "+ "Certificates: "+certs.length ); genSoloSys(); } catch(error){ //alert(error.message) } } //-----------------------------------// var ggc=canvas[0].getContext('2d'); function genSoloSys(){ //-----variables for the SoloSystem------// //sets amount of layers var layers=12; //sets width of space bewteen layers var layerWidth=18; //sets layer thickness var lt=1; //planet width var pw=7; //sets width of spacing var spacingWidth=20; //creates an array for the layers var radius = new Array(); //populates layer array with radiuses for(a=0;a360){ layerAngles[lvl]=0; } else if(layerAngles[lvl]<0){ layerAngles[lvl]=360; } else{ layerAngles[lvl]+=1/(lvl+1); } angle=layerAngles[lvl]; if(moonAngles[lvl]>360){ moonAngles[lvl]=0; } else if(moonAngles[lvl]<0){ moonAngles[lvl]=360; } else{ moonAngles[lvl]+=1*((12-lvl)/3); } mAngle=moonAngles[lvl]; /*Checks if the selected course *is one of the courses the user *has. *If true, update solid planet. *If false, update hollow planet. */ if(cList[cSList[lvl]][1]){ //sets color of planet ggc.fillStyle=pColor[g]; ggc.beginPath(); loc=getXY(radius[lvl],angle); ggc.arc(loc[0],loc[1],pw,0,Math.PI*2); ggc.fill(); if(cList[cSList[lvl]][3]){ ggc.beginPath(); x=loc[0]+(13*Math.cos((mAngle+(-90))*(Math.PI/180))); y=loc[1]+(13*Math.sin((mAngle+(-90))*(Math.PI/180))); ggc.arc(x,y,2,0,Math.PI*2); ggc.fill(); } } else{ //sets color of planet ggc.strokeStyle=pColor[g]; ggc.beginPath(); loc=getXY(radius[lvl],angle); ggc.arc(loc[0],loc[1],pw,0,Math.PI*2); ggc.stroke(); /* ggc.beginPath(); x=loc[0]+(15*Math.cos((mAngle+(-90))*(Math.PI/180))); y=loc[1]+(15*Math.sin((mAngle+(-90))*(Math.PI/180))); ggc.arc(x,y,2,0,Math.PI*2); ggc.stroke();*/ } } window.requestAnimationFrame(animate); //Display's planet when user clicks //on it. window.onclick=function(e){ var x = e.pageX; var y = e.pageY; /*//For troubleshooting //Shows coordintates of click click.css({ "top":y+"px", "left":x+"px" }); click.html("width:"+x+" height:"+y); //////////////////*/ /*Checks if user click is *within a 10x10 square of *the planet's location */ for(n=0;nloc[0]-10&&xloc[1]-10&&y"+cList[cSList[lvl]][2]); } else{ cname.html(cList[cSList[lvl]][0]+"
Status: Locked/Hidden"); } if(cList[cSList[lvl]][3]){ cdetails.html("Certificate: Yes
"+cList[cSList[lvl]][4] ); } else{ cdetails.html("Certificate: No"); } if(!siteDown){ cdp.css("background-image","url$'https://www.gavinchristians.com/sololearn/"+lvl+".png'$"); }else{ cdp.css("background-image","url$'https://www.sololearn.com/Icons/Courses/"+newlyAdded[lvl]+".png'$"); } menu.append(cdp); menu.append(cname); menu.append(cdetails); setTimeout(function(){ menu.css({ "transition":"opacity 2s ease-in", "-webkit-transition":"opacity 2s ease-in", "-moz-transition":"opacity 2s ease-in", "-o-transition":"opacity 2s ease-in" }); menu.css("opacity","0"); },2000); } } btnGo.on("click",function(){ try{ if(isNaN(input.val())){ alert("Your Sololearn ID consists only of numbers.\nYou can find it in your url when\nyou view your profile in a browser."); input.val(""); } else{ id = input.val(); menu.css("display","none"); profile.css("opacity","1"); loader.css("display","initial"); getDataVanilla(id); } } catch(error){ alert(error.message); } }); });