Wiki style guide

[kevan]

Is it worth making a wiki style guide to explain how rules pages are imported into the BGA view, and to advise on how to deal with idiosyncrasies like the fact that bullet points and numbered list formatting is ignored (https://boardgamearena.com/bug?id=16083), and images have to be handled carefully to display at all (despite that previous bug link including a comment from someone that images are "all lost", it is possible to make them work).

The quick rules are always useful for learning a simple new game or refreshing your memory of an old one, but they can be impossible to follow if the clever formatting on the wiki page doesn't show up on the BGA game page.

[JefferoNW]

@kevan,

I too am finding it frustrating that formatted content displays one way in the Wiki editor - but shows up quite different when the rules are displayed in BGA in the "How to play?" section.

Specifically, I am struggling with tables.

Has anyone figured out a good way to use tables?

Any games with tables in their wiki I can learn from?

Thanks - JefferoNW

[kevan]

https://en.doc.boardgamearena.com/Gamehelpballoonpop uses a table for scoring. BGA doesn't display tables with a border by default, so I added a hardcoded border width:

Code: Select all

{| class="wikitable" border="2" cellpadding="5" cellspacing="0"
|-
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|-
!126-135
|⭐⭐⭐⭐
|-
!136-145
|⭐⭐⭐⭐⭐
|-
!146-155
|⭐⭐⭐⭐⭐⭐
|-
!156-165
|⭐⭐⭐⭐⭐⭐⭐
|-
!166-175
|⭐⭐⭐⭐⭐⭐⭐⭐
|-
!176-195
|⭐⭐⭐⭐⭐⭐⭐⭐⭐
|-
!>196
|⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
|-
|}

I've gone ahead and started a wiki page with this kind of advice at https://en.doc.boardgamearena.com/Wiki_formatting

[JefferoNW]

@kevan,

Thanks for the nice write-up in your Wiki formatting page.

The tables using your format look great in the editor .. but once saved and viewed in the BGA interface ... all that formatting seems to get stripped out. Rats.

The table at the end of https://www.boardgamearena.com/gamepane ... balloonpop turn bland.

Alas - I'll keep an eye out for any new tricks!

Jeff

[kevan]

The tables using your format look great in the editor .. but once saved and viewed in the BGA interface ... all that formatting seems to get stripped out. Rats.

The table at the end of https://www.boardgamearena.com/gamepane ... balloonpop turn bland.

Really? It looks okay to me on that page, if unexpectedly wide and centred:



Does it make a difference (as is the case for h2/h3 headings) whether you're reading the rules on the game page while playing it, or on the gamepanel?

[edit: I've now found a way to fix the wideness issue, have noted it on the wiki formatting page.]

[Joe]

Will add my question here - how are images handled on the Wiki pages? I stumbled upon the nicely formatted Game Help page for Space Station Phoenix that displays the inline images correctly on the Game page, but its Wiki form only lists handles like "2 [FOOD], 2 [WATER], 1 [METAL], 1 Human ([HUMANOID5])".

Is this something special, used only on BGA, or have I missed some Mediawiki feature?
How do you upload and format images to be used this way on the Game Help pages?

[kevan]

Will add my question here - how are images handled on the Wiki pages? I stumbled upon the nicely formatted Game Help page for Space Station Phoenix that displays the inline images correctly on the Game page, but its Wiki form only lists handles like "2 [FOOD], 2 [WATER], 1 [METAL], 1 Human ([HUMANOID5])".

Is this something special, used only on BGA, or have I missed some Mediawiki feature?
How do you upload and format images to be used this way on the Game Help pages?

Oh, weird, I stripped those out of the Jump Drive rules the other day as I assumed they were placeholders. It looks like these get replaced with icon assets from the game itself when read on the game page, but aren't replaced on the game panel page or the wiki page.

No idea if this option is available for all games or has to be set up specially. At a guess, the web page might be converting a [WORD] bracket to an image file if the word exactly matches the name of a sprite within the game.

Regular images are a bit erratic, I wrote up my best guess at: https://en.doc.boardgamearena.com/Wiki_ ... ing#Images - it looks like images have to use the vanilla [[File:Example.jpg]] code to display, so need to be uploaded at the size you want them to display. If you resize them with a px value in the wiki page, it doesn't show up on the BGA side.

[Joe]

Oh, weird, I stripped those out of the Jump Drive rules the other day as I assumed they were placeholders. It looks like these get replaced with icon assets from the game itself when read on the game page, but aren't replaced on the game panel page or the wiki page.

No idea if this option is available for all games or has to be set up specially. At a guess, the web page might be converting a [WORD] bracket to an image file if the word exactly matches the name of a sprite within the game.

Regular images are a bit erratic, I wrote up my best guess at: https://en.doc.boardgamearena.com/Wiki_ ... ing#Images - it looks like images have to use the vanilla [[File:Example.jpg]] code to display, so need to be uploaded at the size you want them to display. If you resize them with a px value in the wiki page, it doesn't show up on the BGA side.

Thx!
Meanwhile I experimented and checked a bit and it looks like the images that I linked (for instance for Jump Drive) are used from the game's own directory on the BGA server. They are all part of a single PNG file as a strip of images and I presume they are defined in a CSS (or a similar file) with their placeholders, which define which image is displayed (by coordinates from the PNG). Someone would have to confirm...

EDIT:
Just messaged Mogri, the dev for Space Station Phoenix and Jump Drive and it is indeed that - the Game Dev has to define the images and their placeholders, in order to display on the How To Play section...

[Romain672]

I've create some pictures myself and heberged them on the wiki:
https://en.doc.boardgamearena.com/Tips_yokai
https://en.doc.boardgamearena.com/Tips_bandido

Not liking much the result though.

[Mogri]

EDIT:
Just messaged Mogri, the dev for Space Station Phoenix and Jump Drive and it is indeed that - the Game Dev has to define the images and their placeholders, in order to display on the How To Play section...

Sorry, I didn't see this until now.

This has to be set up by the developer, unfortunately, but it's not hard to do. Here's the secret sauce:

Code: Select all

  onShowGameHelp: function () {
    if (document.getElementById('mediawiki_gamehelp_content') == null) {
      return;
    }
    dojo.place('<div class="loading_icon"></div>', 'mediawiki_gamehelp_content');
    this.ajaxcall('/gamepanel/gamepanel/getWikiHelp.html', {
      gamename: this.game_name,
      section: 'help'
    }, this, function (data) {
      dojo.place(yourReplacementFunctionHere(data.content), 'mediawiki_gamehelp_content', 'only');
    });
  },

This method is automatically called when the game page is ready to load the help content. What I've pasted above is the exact function that the framework uses except for the addition of yourReplacementFunctionHere.

For my projects, I have a substitution function that I use for most of the text I end up displaying, including wiki content. Here's an abbreviated version of the one Space Station Phoenix uses:

Code: Select all

  translate: (msg) => {
    if (!msg || !msg.replace) {
      console.error('Invalid message', msg);
      return '';
    }
    return msg
      .replace(/\[SHIP(\d+)]/g, '<span class="ssp-icon ssp-icon-ship$1"></span>')
      .replace(/\[VP(\d*)]/g, '<span class="ssp-icon ssp-icon-vp">$1</span>')
      .replace(/\[GEM(\d*)]/g, '<span class="ssp-icon ssp-icon-gem">$1</span>')
      .replace(/\[WATER(\d*)]/g, '<span class="ssp-icon ssp-icon-resource2">$1</span>')
      .replace(/\[METAL(\d*)]/g, '<span class="ssp-icon ssp-icon-resource3">$1</span>')
      .replace(/\[FOOD(\d*)]/g, '<span class="ssp-icon ssp-icon-resource1">$1</span>')
      .replace(/\[RESOURCE(\d)]/g, '<span class="ssp-icon ssp-icon-resource$1"></span>')
      .replace(/\[HUMANOID([1-6])]/g, '<span class="ssp-icon ssp-icon-humanoid$1"></span>')
      .replace(/\[HUMANOID([1-6])x(\d+)]/g, '<span class="ssp-icon ssp-icon-humanoid$1">$2</span>')
      .replace(/\[CARD(\d+)]/g, (match, shipId) => SSP.getTooltipShipTitle(shipId));
  },
  

This swaps out the bracketed keywords for the symbols, which means it's responsible for every icon in the game that appears inline with text. It also lets me do neat things like make it so you can hover over the title of a card in the log and see the card as a tooltip.

If you are not a developer, this is of limited use to you, but you could try opening a suggestion ticket on your game of choice and gently suggesting that the developer use this technique. If you want to link directly to this post, you can use this URL.

The primary limitation of this method is that it only works inside of the game. A game's help wiki is also viewable from the game's detail page (e.g.), and the icons won't appear there. But if the text you're substituting makes sense when the icon can't be substituted, it's not too much of a problem.