[SteemNova] Steem #steemnova feed in the game

in #utopian-io7 years ago (edited)

image.png

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</th>
    </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"/>&nbsp;<a id="url_0" target="_blank"><span id="title_0"></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"/>&nbsp;<a id="url_1" target="_blank"><span id="title_1"></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"/>&nbsp;<a id="url_2" target="_blank"><span id="title_2"></span><span id="author_2"></span></a></td>
    </tr>

Screenshots

image.png

News feed composed in game UI style

image.png

Links lead to chainbb.com SteemNova Board

Links

https://github.com/steemnova/steemnova/pull/4



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

Please put in more work into your future contributions.

You can contact us on Discord.
[utopian-moderator]

Do I need to put more work into more detailed articles? Or maybe the source code should provide more superior features?

Intresting.. Great job Man

Hey @mys I am @utopian-io. I have just upvoted you!

Achievements

  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

good job man :)

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.028
BTC 62205.55
ETH 2397.85
USDT 1.00
SBD 2.50