Editing User:Artoire/Template:Profession bubble

<includeonly><onlyinclude><!--
Outer background circle
--><div style="background-color:{{{background-colour|#1F1F1F}}};width:70px;height:70px;border-radius:50%;position:relative;"><!--
  Inner progress bar circle
  --><div style="position:absolute;width:68px;height:68px;top:50%;left:50%;margin:-34px 0px 0px -34px;border-radius:50%;background:<!--
    Gradient that's filled in proportion to the progress to the next level
    -->conic-gradient(from calc(0.5turn - 0.5rad), rgba(0, 0, 0, 0) 0rad 1rad, {{#ifeq:{{#vardefineecho:User:Artoire:prev_level|{{XP/Level for|{{#vardefineecho:User:Artoire:xp|{{#replace:{{#replace:{{{xp|0}}}| |}}|,|}}}}}}}}|500|#CCCCFE 1rad|<!--
-->#CCCCFE 1rad {{#vardefineecho:User:Artoire:filled_angle|{{#expr:({{#var:User:Artoire:xp}}-{{XP/Total|{{#var:User:Artoire:prev_level}}}})/{{XP/To next|{{#var:User:Artoire:prev_level}}}} * 5.28318530717958647692528676655900576839433879875021+1}}rad}}, #424242 {{#var:User:Artoire:filled_angle}}}});<!--
  -->"><!--
    Inner background circle (to cover the inner bits of the progress bar pie chart)
    --><div style="position:absolute;width:60px;height:60px;top:50%;left:50%;margin:-30px 0px 0px -30px;border-radius:50%;background-color:{{{background-colour|#1F1F1F}}};"><!--
      Profession icon
      --><div style="position:absolute;width:60px;height:60px;top:50%;left:50%;margin:-20px 0px 0px -30px;text-align:center">[[File:{{{profession}}} icon.png|36px|link=]]</div><!--
      Level text
      --><div style="position:absolute;width:40px;bottom:0%;left:50%;margin:0px 0px {{#ifexpr:{{#var:User:Artoire:prev_level}}>100|-8px|-11px}} -20px;text-align:center;font-size:{{#ifexpr:{{#var:User:Artoire:prev_level}}>100|14px|18px}};color:{{{font-colour}}}">{{#var:User:Artoire:prev_level}}</div><!--
    --></div><!--
  --></div><!--
--></div></onlyinclude></includeonly><!--
-->Creates a bubble representing a level.

Usage: {{T|User:Artoire/Template:Profession bubble|profession{{=}}<profession name>|xp{{=}}<experience>|font-colour{{=}}<the colour of the level text>}}

Examples:

{{T|User:Artoire/Template:Profession bubble|profession{{=}}Guard|xp{{=}}250|font-colour{{=}}#B8AC69}}:<br>{{User:Artoire/Template:Profession bubble|profession=Guard|xp=250|font-colour=#B8AC69}}

{{T|User:Artoire/Template:Profession bubble|profession{{=}}Guard|xp{{=}}9 000|font-colour{{=}}#B8AC69}}:<br>{{User:Artoire/Template:Profession bubble|profession=Guard|xp=9 000|font-colour=#B8AC69}}

{{T|User:Artoire/Template:Profession bubble|profession{{=}}Guard|xp{{=}}29 500 000|font-colour{{=}}#B8AC69}}:<br>{{User:Artoire/Template:Profession bubble|profession=Guard|xp=29 500 000|font-colour=#B8AC69}}

{{T|User:Artoire/Template:Profession bubble|profession{{=}}Guard|xp{{=}}29 500 000|font-colour{{=}}#B8AC69}}:<br>{{User:Artoire/Template:Profession bubble|profession=Guard|xp=29 500 000|font-colour=#B8AC69}}

{{T|User:Artoire/Template:Profession bubble|profession{{=}}Guard|xp{{=}}1 861 867 989|font-colour{{=}}#B8AC69}}:<br>{{User:Artoire/Template:Profession bubble|profession=Guard|xp=1 861 867 989|font-colour=#B8AC69}}