Displaying TETR.IO TR on website

August 17, 2024

TETR.IO’s started its new season yesterday. A couple of days ago, I planned to scrape my TETR.IO profile to display the change in my TR over time. The game’s patch notes include the feature that I was missing in the game’s previous season, however:

You can now see your TR change over time on the TETRA CHANNEL site.

Additionally, if I still want to include my TR over time on my website, scraping isn’t necessary at all: the patch notes mention that the game provides an API. Simply using curl and jq gives me all the data I need:

curl https://ch.tetr.io/api/users/geuze/summaries/league | jq '.data | .tr'
<span style="display:flex"><span>curl https://ch.tetr.io/api/users/geuze/summaries/league | jq <span style="color:#666;font-style:italic">'.data | .tr'</span>
</span></span>

I store this data as a site parameter in my hugo.toml file:

TETRIO_TR = 3090.2731291544947
TETRIO_RANK = "c+"
<span style="display:flex"><span>TETRIO_TR = 3090.2731291544947
</span></span><span style="display:flex"><span>TETRIO_RANK = "c+"
</span></span>

Now, I can use it in a Hugo shortcode:

<span>
	{{ printf "%.2f" .Site.Params.TETRIO_TR }} TR
	(<img class="tr_rank" 
		  src="https://tetr.io/res/league-ranks/{{ .Site.Params.TETRIO_RANK }}.png" />)
</span>
<span style="display:flex"><span><span>
</span></span><span style="display:flex"><span>	{{ printf "%.2f" .Site.Params.TETRIO_TR }} TR
</span></span><span style="display:flex"><span>	(<img class=<span style="color:#666;font-style:italic">"tr_rank"</span> 
</span></span><span style="display:flex"><span>		  src=<span style="color:#666;font-style:italic">"https://tetr.io/res/league-ranks/{{ .Site.Params.TETRIO_RANK }}.png"</span> />)
</span></span><span style="display:flex"><span></span>
</span></span>

Which looks like this: 10981.10 TR (). To keep this value up-to-date, I add it to a GitHub Actions workflow that uses the game’s API to retrieve my TR and rank, and replaces the current value in the hugo.toml file using sed.