[SteemNova] Messages View improvements

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.

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.

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

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

• https://github.com/steemnova/steemnova/pull/120
• https://github.com/steemnova/steemnova/pull/122
• https://github.com/steemnova/steemnova/commit/5c116d9799f7e00cec7ac0fa3d4126b3134e975b

---

Posted on Utopian.io - Rewarding Open Source Contributors

---