Get an EDHPowerLevel Button

For all my fellow developers out there. If you are working on a project related to the commander format and you want to provide your users with a quick way to get deck stats from EDHPowerLevel, I can help with that.

The code snippet shown below will add a button to the page. Simply put your deck list into the provided input in place of the "[[YOUR DECK LIST HERE]]" text and when the button is clicked a new tab will open with the specified deck list preloaded on EDHPowerLevel.com.

A note on deck lists

Any deck list format that is accepted by this site will also be accepted by this button script. Line break symbols are important to deck list formats so leave them intact when you add the deck list string to the included input. If you must remove line break symbols you can replace each line break with a "~" symbol and my code will process those as line breaks.

You can place the deck list into the input using html or javascript, either will work. The value is read at the time of the click. If you want a more customized implementation you can just use the EDHPowerLevelEndcode function to encode and create your own link to https://edhpowerlevel.com?d=[[YOUR ENCODED DECK LIST]].

Example:

Copy the snippet below then add your decklist to get a button:

<script type="text/javascript">
  function EDHPowerLevelEncode(d) { var arr = d.split(/\r?\n?~/); arr.forEach((c, i) => { c = c.split("(")[0]; c = c.replace(/ *\[[^)]*\] */g, " "); c = c.replace(/ *<[^)]*> */g, " "); c = c.trim(); arr[i] = c; }); var nd = arr.join("~"); d = encodeURIComponent(nd).replace(/%20/g, "+") + "~Z~"; return d; }
  function EDHPowerLevelGo() { var d = document.getElementById("edhpowerlevel-decklist").value; window.open("https://edhpowerlevel.com?d=" + EDHPowerLevelEncode(d), '_blank').focus(); }
</script>            
<input type="hidden" id="edhpowerlevel-decklist" value="[[YOUR DECK LIST HERE]]" />            
<button class="edhpowerlevel-go-to-deck" onclick="EDHPowerLevelGo()" style="background: #555; color: #fff; padding: 12px 30px; border: none; border-radius: 10px;">              
  Get EDHPowerLevel
</button>