Quickstart for Developers

When the client is in DEBUG mode, the wiki will try to search the file using the following priority order:

• Development environment (client-folder): [client-folder]/locale/[localization]/wiki/... directory.
• Production environment: Pack file at location locale/[localization]/wiki/<pagePath>.txt directory. (default localization is universal)

This mean that when you ar using a production launcher, you have to pack the files in a .hpa pack, while with a debug launcher all wiki files (including configurations and localization) are loaded from the folder where the launcher is.

We encurage you to use a debug launcher to speed up development and to place all your page and config files in [client-folder]/locale/[localization]/wiki/....

Before starting we strongly suggest to follow some steps to setup a profiecient working environment:

1. Download VScode.
2. Install beautiful-jinja VScode Extension.
3. Create a folder in your workspace ([client-folder]/locale/[localization]/wiki) folder named .vscode.
4. Create a file name settings.json inside .vscode with the following content.

{
  "html.customData": [
    "uchtml.json"
  ],
  "files.associations": {
    "*.html": "jinja-html"
  },
}

5. Download uchtml.json and place it in workspace ([client-folder]/locale/[localization]/wiki`) folder.

This ensures suggestion and linting while writing html pages.

This quickstart guide will help you create and deploy a new wiki page in the game’s wiki system, as well as utilize the developer UI buttons effectively.

In your client-folder, create the following folder tree named /locale/[localization]/wiki/p (default localization is universal).
The Client folder is the folder where the launcher (metin2client.exe/bin) is.

Then a new .html file inside the p folder:

[client-folder]/locale/[localization]/wiki/p/example.html

And write a simple html page

<main>
    Hello from example page.
    <txt align=center>We can show some fancy stuff like</txt>
    <item-card vnum="{{ fun.getv('query:vnum') }}"/>
</main>

The game UI has three developer buttons: Navigate, Refresh, and Copy URL. Here's how to use them:

• Clicking this button opens a popup where you can enter a full URL to load a specific wiki page.
• Enter the url to navigate to your example page

wiki://p/example?vnum=10

• Confirm the popup to navigate to the specified page.

• Use this button to reload the currently displayed wiki page.
• Useful for testing changes made in the client-folder folder. Save your changes, press Refresh, and see them applied instantly.

• Copies the full URL of the currently loaded wiki page to your clipboard.
• Allows you to share or reuse the page URL easily.

There are some predefined jinja templates in the wiki. These templates are "lego blocks" you can reuse everywhere in the Wiki.
For example a very common include is an h1 which already has the right font name, font size, text color and text position and an optional id for anchoring.

You can fin the templates in /locale/[localization]/wiki/templates.

By utilizing this import we can ensure consistency of the H1 around all wiki.

• Marcro (template) file templates/header.html

{% macro h1(title, id=None) %}
  <h1 id={{id}}>
    <txt font="Arial:15b" color="wikititle" display="relative" x=5 y=15>{{ title }}</txt>
  </h1>
{% endmacro %}

• Usage in your file (continuing from 1.)

{% import "templates/headers.html" as header %}

<main>
    {{ header.h1("Hello from example page", "title") }}

    <txt align=center>We can show some fancy stuff like</txt>
    <item-card vnum="{{ fun.getv('query:vnum') }}"/>
</main>

Once you’re satisfied with the page:

• Move the .html file to the production environment folder:

locale/[localization]/wiki/p/<pagePath>.html

For example:

locale/universal/wiki/p/example.html

• Repack the client files and restart the game client for the changes to apply in production mode.

Now you can enrich your page using templating, functions and a wide collection of ui components.
We also suggest you to read about the grid system which manages component placement in the page following the same logic of vanilla html/css.