[SteemNova] Messages View improvements

in utopian-io •  5 months ago

image.png

Messaging system in SteemNova had few visual and logic issues to work on. Players were struggling with:

  • Unread->Read messages counter does behave odd. Message type counter could go to negative numbers in specific scenario.
  • Message pages doesn't fit in frame if >20 pages. The table content overflow extending width of game page.
  • Paging system showing all page numbers at top/bottom of view. Need to style prettier.

Bug Fixes

  • What was the issue(s)?

Unread messages number doesn't count properly #113. While switching between message types (eg. All messages -> Alliance messages), client side script did subtract unread messages number below the title without verifying their ID numbers. It could subtract more than it was in reality. The unread ticker is server side job and it behave fine. Only client-side rendering was wrong.

image.png

The subtraction is wrong

  • What was the solution?

I have decided to get rid of Ajax pre-loading and just ask for whole message view from server when switching Message Types. Couldn't reuse Ajax rendering due to missing message's ID.

Changed client-side rendering

<a href="#" onclick="Message.getMessages({$CategoryID});return false;"

To server-side

<a href="game.php?page=messages&category={$CategoryID}"

With adequate changes to PHP engine code.
https://github.com/steemnova/steemnova/pull/120/commits/d69b80eb7c2468e3b414e9b144a930748184a1c6

New Features

  • What feature(s) did you add?

To prevent messages expanding the table if many pages appear, both table layout and new paging system had to be implemented. It was done in single .tpl template view by modifying css and Smarty PHP logic.

image.png

Table content overflow. No need to show all page numbers too.

image.png

After code logic changes and restyling

Describe briefly and add screenshots/recordings if applicable.

  • How did you implement it/them?

First of all I have changed table-layout to fixed, as everywhere else. This keeps on a leash table layout. However the text still overflows instead of wrap at end of line.

Text wrapping page numbers was not good idea too, because at eg. 100 pages the numbers cover near half of site view. I have implement simple paging system, showing only up to previous/next 5 page numbers.

<td class="right">{$LNG.mg_page}: 
{if $page != 1}<a href="game.php?page=messages&category={$MessID}&side=1">&laquo;</a>&nbsp;{/if}
{if $page > 5}..&nbsp;{/if}
{for $site=1 to $maxPage}
  <a href="game.php?page=messages&category={$MessID}&side={$site}">
  {if $site == $page}<b>[{$site}]&nbsp;</b>
  {elseif ($site > $page-5 && $site < $page+5)}[{$site}]&nbsp;{/if}</a>
{/for}
{if $page < $maxPage-4}..&nbsp;{/if}
{if $page != $maxPage}&nbsp;<a href="game.php?page=messages&category={$MessID}&side={$maxPage}">&raquo;</a>{/if}
</td>

https://github.com/steemnova/steemnova/pull/122/commits/3b79cce34aaf190ff145ad1107aaa58df26b0fd9

Small improvements

The Operator view has been removed from Inbox. No need to list Admin contact info there.
https://github.com/steemnova/steemnova/pull/120/commits/8938e17e4db94f568fc23bac702a2d6d0a030c2d

For players request the Messages view opens blank as default. User has to choose which Message category he wants to open.
https://github.com/steemnova/steemnova/commit/5c116d9799f7e00cec7ac0fa3d4126b3134e975b

Information

steemnova/steemnova project is fork of jkroepke/2Moons Open Source Browsergame Framework. The goal is to fix bugs and develop the engine in the direction of maximum Steem integration.

Links



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thanks for the contribution. It has been approved.


Need help? Write a ticket on https://support.utopian.io.
Chat with us on Discord.

[utopian-moderator]

Good. But may I suggest that the message tab be moved from the bottom to the top since its one of the things a player might want to see first.

You've done a great job. But please consider taking message to the top, where it could easily be noticed.

Hey @mys! Thank you for the great work you've done!

We're already looking forward to your next contribution!

Fully Decentralized Rewards

We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.

Utopian Witness!

Vote for Utopian Witness! We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

Want to chat? Join us on Discord https://discord.me/utopian-io

Loading...