<center>![image.png](https://cdn.utopian.io/posts/4688d29a3178dcbc6c5a200e2dc46f4209b6image.png)
</center>

Messaging system in [SteemNova](https://github.com/steemnova/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](https://github.com/steemnova/steemnova/issues/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](https://cdn.utopian.io/posts/c9387d6f8a489e08b0ca8b7621f693cd0f33image.png)
*<center>The subtraction is wrong</center>*

- 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
```html
<a href="#" onclick="Message.getMessages({$CategoryID});return false;"
```

To server-side
```html
<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](https://cdn.utopian.io/posts/272bc456ad31e5fa532b985ac274a92c6d95image.png)
*<center>Table content overflow. No need to show all page numbers too.</center>*

![image.png](https://cdn.utopian.io/posts/30cd7e5d17c4dc26f5a1cae06cb6157b4471image.png)
*<center>After code logic changes and restyling</center>*

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](https://github.com/steemnova/steemnova) project is fork of [jkroepke/2Moons](https://github.com/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

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@mys/steemnova-messages-view-improvements">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>