import{r as s,h as t,c as i,e as a}from"./p-ee1e0eb4.js";const h=class{constructor(t){s(this,t)}componentDidLoad(){this.drawOnCompass(),window.addEventListener("resize",(()=>this.drawOnCompass()))}async drawOnCompass(){this.canvas=this.el.querySelector(".myCanvas"),this.canvase_container=this.el.querySelector("#container"),this.canvase_container.style.width="100%",this.canvas.width=this.canvase_container.offsetWidth,this.canvas.height=this.canvase_container.offsetWidth,this.canvas.style.width=this.canvase_container.offsetWidth+"px",this.canvas.style.height=this.canvase_container.offsetWidth+"px";var s=this.canvas.getContext("2d"),t=this.canvas.width/2,i=this.canvas.height/2;s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(96, 187,70, 0.5)";var a=this.getRadiusFromSection(this.resiliance);s.arc(t,i,a,0,Math.PI/4),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(96, 187,70, 0.6)",a=this.getRadiusFromSection(this.care),s.arc(t,i,a,Math.PI/4,Math.PI/2),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(44, 160,217, 0.5)",a=this.getRadiusFromSection(this.organization),s.arc(t,i,a,Math.PI/2,.75*Math.PI),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(44, 160,217, 0.6)",a=this.getRadiusFromSection(this.school),s.arc(t,i,a,.75*Math.PI,Math.PI),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(220, 24,98, 0.5)",a=this.getRadiusFromSection(this.relationship),s.arc(t,i,a,Math.PI,1.25*Math.PI),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(220, 24,98, 0.6)",a=this.getRadiusFromSection(this.emotions),s.arc(t,i,a,1.25*Math.PI,1.5*Math.PI),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(224,117,33, 0.5)",a=this.getRadiusFromSection(this.spirituality),s.arc(t,i,a,1.5*Math.PI,1.75*Math.PI),s.fill(),s.beginPath(),s.moveTo(t,i),s.fillStyle="rgba(224,117,33, 0.6)",a=this.getRadiusFromSection(this.rest),s.arc(t,i,a,1.75*Math.PI,2*Math.PI),s.fill()}getRadiusFromSection(s){var t=.09*this.canvas.width,i=.028*this.canvas.width;return 0==s?0:1==s?t:s>5?t+(s-1)*i+1:t+(s-1)*i}render(){return t("div",{id:"container"},t("img",{id:"compassImage",class:"src-image",src:i("../assets/img/compass.png")}),t("canvas",{class:"myCanvas"},"Your browser does not support the HTML5 canvas tag."),t("img",{id:"compassOverImage",src:i("../assets/img/compass-over.png")}))}get el(){return a(this)}};h.style="#compassImage{position:absolute;z-index:1;width:100%}#compassOverImage{position:absolute;z-index:30;top:11.6%;left:11.8%;width:76.5%;height:76.5%}.myCanvas{position:relative;z-index:20}#container{display:inline-block;margin:0 auto;position:relative}";export{h as sparkle_compass}