It is hard to spread news info in such new game. Players have to walk through steemit.com or chainbb.com #steemnova tags or read Discord chat to be up to date. Someone came up with an idea to inform people about new #steemnova articles just in the game browser.
Steem feed
The idea is to get last 3 #steemnova tagged articles from Steem blockchain and show their titles in the main panel of the game. The titles are links to chainbb.com forum and present author and post date. Everything in the mood of SteemNova graphic interface, so using already existing elements.
I have decided to user SteemJS library. The steem.api.getDiscussionsByCreated call was all I needed. Parameters are: {"tag": "steemnova", "limit": "3"}. The code is client-sided. Every page refresh, pulls latest 3 links from the Steem.
steem.api.getDiscussionsByCreated({"tag": "steemnova", "limit": 3}, function(err, result) {
if (err === null) {
$('#feed').css('display', '');
$('#feed_margin').css('display', '');
var i, len = result.length;
for (i = 0; i < len; i++) {
var discussion = result[i];
$('#feed_'+i).css('display', '');
$('#created_'+i).text(discussion['created'].replace("T", " "));
$('#title_'+i).text(discussion['title']);
$('#url_'+i).attr('href', 'https://chainbb.com' + discussion['url']);
$('#author_'+i).text(' by @' + discussion['author']);
}
} else {
console.log(err);
}
});
It is worth to say that feed table has invisible style as default. Javascript code makes it visible only when API call finishes. That way the situation of empty table in case of errors or blockchain inaccessibility is avoided.
<table class="table519">
<tr id="feed" style="display:none">
<th colspan="3">Steem #steemnova feed
</tr>
<tr id="feed_0" style="display:none">
<td style="white-space: nowrap;"><span id="created_0"></span></td>
<td colspan="2"><img src="./styles/resource/images/steem.png" width="16" height="16"/> </span><span id="author_0"></span></a></td>
</tr>
<tr id="feed_1" style="display:none">
<td style="white-space: nowrap;"><span id="created_1"></span></td>
<td colspan="2"><img src="./styles/resource/images/steem.png" width="16" height="16"/> </span><span id="author_1"></span></a></td>
</tr>
<tr id="feed_2" style="display:none">
<td style="white-space: nowrap;"><span id="created_2"></span></td>
<td colspan="2"><img src="./styles/resource/images/steem.png" width="16" height="16"/> </span><span id="author_2"></span></a></td>
</tr>
Screenshots
Links
https://github.com/steemnova/steemnova/pull/4
Posted on Utopian.io - Rewarding Open Source Contributors