The Game of Robot Forum

[Autofahrn]

And now for something totally different...

This project is neither about layout nor about fancy eye catchers. Its about a game from last century which celebrates its 30th anniversary this year and still has a some more or less active community.

The idea behind the funky layout is to reutilize the original game graphics and fonts to obtain some corporate feeling, so it intentionally pixelates. On the other hand the bootstrap-based layout is modern enough to be responsive.

The forum was originally founded in 2003 on ezBoard which morphed into YuKu around 2007 and ended in acquisition by Tapatalk in 2017.
Most of its original flair had gone due to those provider changes and Tapatalk's ideas about collecting data didn't seem to be very compatible with the upcoming GDPR. Some action was required.

My obvious first thought was, which forum system to choose. Second thought was, why not build a forum on ProcessWire?

First hurdle to take was grabbing the existing forum content from Tapatalk, since they simply do not provide any kind of backup or export mechanism (at least not for free boards). Luckily nowadays we have jQuery and JavaScript which easily loads any website into a DOM tree which can be parsed and analyzed with little efford. Quickly we had one big structured JSON file with all forum content.

It took another day to write a test importer and restore that content into a hierarchy of about 5000 ProcessWire pages to get an idea about the resulting performance and that looks pretty promising. In fact the final forum is still located on a shared host without much optimization and performs pretty well (response times around 100mSec except on root).

Another goal, probably not possible at all with "standard" forum software, was the ability to play some background game music during the forum visit, so content update is entirely driven by AJAX which, in turn, nicely reduces data payload as well.

From a technical standpoint the implementation uses the page fields created and modified to maintain its author and realize the typical "new posts"
functionality, which needs some tweaking to keep everything in sync. PW Form Builder is used to simplify handling of input forms and configuration management of the frontend CKEditor (which is equipped with a dozen of plugins to provide emoticons, a per-user image repository and other fun stuff).

Have fun

https://forum.tom-productions.de/gameofrobot/

https://tom-productions.de/

[horst]

Very cool project and fun to read. ?

[bernhard]

Very nice project!!

Could you please share more information on how you implemented the forum? I hate all the available forum solutions but building one with processwire still seemed to be a lot of work... you need to be able to define all kinds of settings (access control), all kinds of notifications (mail on reply etc), all kinds of user features (like images upload, quote + mention other users).

I can see that you have a quote feature. Is that one of the mentioned ckeditor plugins? Is the user notified about that quote per mail or somehow else?

I think that would be an absolutely awesome guest blogpost ?

[Autofahrn]

You are absolutely right, implementing that forum from scratch is basically implementing stuff in PHP. If there is some interest, I indeed may write an in-depth blog entry, but for now I'll try to make it short (which probably does not work...).

Let's start with a quick view on the five templates involved:

• forum-root
  well, this is the parent of everything. The template only contains the global welcome text but the associated php file enumerates any contained forum-group and creates the root layout.
• forum-group
  just a group around a couple of forums with its own descriptive bodytext
• forum-forum
  well, a forum containing the topics. The forum-forum nodes contain an additional "cache" for post and topic counts to provide a massive speedup when rendering forum-root. The counters are flagged with a timestamp, so they are updated on-the-fly only if required.
• forum-topic
  this node holds the post-list. In contrast to all other nodes which manage the content only by child-parent-relationship, this one has a page-table on the child node for the only purpose to see the thread also in admin.
• forum-post
  basically the post text with automated creation of title and name from current timestamp.

Handling topic updates and user notifications was one of the first things implemented due to its expected complexity, but in the end it was rather easy and little efford with the right fields in place.

topic-group, -forum and -topic nodes each has a page select field (holding PW user pages) which may be set or cleared by clicking on the grey wall to activate a "forum guard". Whenever there is a change beneath that node, the guard adds the topic to the per-user notification list (placed in the PW user template, which is more complex than usual this implementation).

If there are pending notifications an additional button is displayed in the headline next to the user avatar:

The user may check active notifications from that button and reading the topic will in turn clear that notification (remove the topic reference in the user's notification-list). Each user may choose to get informed by mail (standard WireMail) for pending notifications (html or text, various intervals, managed by LazyCron). The trick here is, that the user only get informed once per topic until he re-visited the forum to avoid flooding on active topics.

Each visit is also recorded per-user to implement the updated-topic functionality. This is basically a topic/forum/group page select with the current timestamp in the PW user, updated topics are flagged with a bright lamp.

https://forum.tom-productions.de/?f=test-forum&t=hallo-unglaublicher&p=1

Handling the post content is one of the more interesting and challenging features in this implementation. Mentions, for example, are detected when writing a post (regular @ syntax followed by the user name). This will simply add the post page to the user's notification list so it can be identified during regular processing.
But there is more to explain in this screenshot. If someone replies to its own post, both are merged with that "Ergänzung" text beneath the ruler. That additional header is created during runtime from a data-ts field contained in the <hr> tag so it does survive even a later edit. While such an addition pushes the topic's modified timestamp, an edit doesn't.

You may also note the phrase "externes Bild" next to an URL. This is a tribute to the european GDPR to not send the user's IP address to external servers without explicit grant. Clicking on that solid shield next to the cite icon will open a popup which has to be acknowledged.

You may also notice the colored links in the user's signature, that's another point to avoid clicking on misleading links. If the link text contains
the correct target server, its green, otherwise red (changed the signature for that screenshot). The color on the other hand does not qualify the linked content by any means...

That's all done during runtime before actually displaying the post content along with replacing the usual emoticon shortcuts (learnt to love preg_replace_callback).

Apropos Emoticons: To eliminate copyright issues I'm using regular Unicode emoticons which nicely pass through the PW engine and SQL, so emoticons will look differently depending on platform (Windows7 only shows black and white, for example).

Apropos Signature: The signature actually is specified in markdown in an ordinary textarea field so I don't need to fiddle CKEditor into the LoginRegister module. Conversion into HTML is finally done using text formatter Markdown/Parsedown extra before the content has to pass my link and image filter.

Well, there's so  much more to tell (for example the CKEditor configuration), but that's for a later post...

Ah, there is no magic behind the cite feature. It simply encloses the cited post into <blockquote> so the CKEditor opens with that block already filled.

[bernhard]

Wow, thanks a lot for those insights. Would love to see a module that packs all that features into a reusable piece of software ? There has been some discussion about that but nothing was released yet.

[Autofahrn]

Indeed, but implementing that as a module was dropped rather quickly, since I simply didn't had the time to make it multi purpose and focused on the necessary stuff. Did I mention that this project actually started mid April?

[szabesz]

17 hours ago, Autofahrn said:

implementing that as a module was dropped rather quickly, since I simply didn't had the time to make it multi purpose and focused on the necessary stuff

Sure, implementing a complex module and maintaining it requires a lot more time than "simply" wiring things together in ProcessWire.  However, you might want to share a site profile with dummy data if that is ok with you (and if you have the time to prepare it...). What do you think?

BTW, thanks for the showcase and the insight!

[Autofahrn]

At least I don't say no regarding that idea. ?

But moving that framework in to a module should be the goal in any case. Currently its more a grown bunch of functions which urgently needs some maintenance to split my ~1500 lines of code in _func.php into something self documented. This has to happen in a near timeframe anyway and creating a module from the core functionality doesn't seem to be too much work on top.

To make this public, I probably first need to get rid of the (great!) Form Builder module, which is kind of overkill anyway but simplified playing around with CKEditor configurations and field layout a lot.

Will check next months, can't promise anything yet.

[bernhard]

If you need any assistance I'm happy to collaborate on that!

[loukote]

@Autofahrn

, one interested user here ?