📝 Manager

The manager.json file acts as the core information hub for your identity. Once generated, it contains structured data from your Hattrick user profile, including your identity, club history, achievements, and a customized timeline.

🔑 Fields Table

The fields are detailed below:

📝 Teams

The teams.json file acts as the core information hub for your club. Once generated, it contains the following data blocks in a structured format that will be automatically rendered on your portal:

🔑 Template Fields and Keys Table

Below is a detailed list of the fields generated by the Jupyter script and how you should call them within your HTML files inside the templates/ folder using the template engine:

📝 Products

The products.json file acts as a simplified inventory that lists all the official club merchandise available in your team's store. It is used to automatically render the product catalog on the portal where your fans can buy shirts, scarves, or team gear:

🔑 Fields Table

Below is a detailed list of the fields for a club:

📄 JSON Structure Examples (products.json)

• 1 Club (One club)
• 2 Clubs (Multiclub)

{
  "muten-roshi-fc": [
    {
      "id": "home_kit",
      "name": "Home kit",
      "description": "Muten Roshi home kit..",
      "price": 45
    },
    {
      "id": "hattrick_scarf",
      "name": "Hattrick Scarf",
      "description": "The legendary scarf used in the world of Hattrick.",
      "price": 15
    }
  ]
}

{
  "muten-roshi-fc": [
    {
      "id": "home_kit",
      "name": "Home kit",
      "description": "Muten Roshi home kit.",
      "price": 45
    },
    {
      "id": "hattrick_scarf",
      "name": "Hattrick Scarf",
      "description": "The legendary scarf used in the world of Hattrick.",
      "price": 15
    }
  ],
  "giru-fc": [
    {
      "id": "beanie",
      "name": "Beanie",
      "description": "this official beanie brings the ultimate manager spirit to your style.",
      "price": 50
    },
    {
      "id": "home_kit",
      "name": "Home Kit",
      "description": "Giru home kit.",
      "price": 12
    }
  ]
}

📊 How to Display JSON Data in Your HTML

To render your team's data within the HTML templates, the application uses a dynamic variable system via double curly braces {{}}. When editing any HTML file inside templates/, simply insert the exact variable name:

1. String Variables

If the JSON data is a simple text (such as the team name or category), it is rendered directly by writing the key name:

<!-- Example of how to use it in your custom HTML. -->
<div class="team-card">
  <h1>Name: {{manager.name}}</h1>
  <h1>Flag: {{manager.flag}}</h1>
  <h1>Joined: {{manager.joined}}</h1>
</div>

2. List Variables (Arrays)

If the JSON data contains a list of items (such as a list of players or trophies), it must be iterated using a loop:

<!-- Example of how to iterate over a list in your custom HTML -->
<ul class="trophies-list">
  {% for trophy in team.allTrophies %}
    <li>{{trophy.group}} season: {{trophy.season}}</li>
  {% endfor %}
</ul>

3. Dictionary Variables (Dict)

If the JSON data is an object or dictionary, its properties are accessed using bracket notation (for example, object['property']) to render each specific sub-key individually on the interface:

<!-- Example of how to access nested properties in your custom HTML -->
<div class="sponsor-card">
  <h2>sponsor name: {{team.sponsor["name"]}}</h2>
</div>

4. Using Functions

Functions are available using object dot notation followed by their corresponding parentheses, just as you would when programming:

<!-- Example of how to invoke custom class methods in your HTML -->
<div class="custom-functions-example">
  {% for trophy in team.parse_trophy() %}
    <div class="trophy-item">
      <span>Season: {{trophy.season}}</span>
    </div>
  {% endfor %}
</div>

5. Using Basic Filters

Filters are used to modify the output format of a variable before rendering it. They are applied using the vertical bar or pipe symbol (|) to the right of the data. The most common and supported filters are:

• | upper: Converts all text to uppercase.
• | lower: Converts all text to lowercase.
• | title: Capitalizes the first letter of each word.
• | default('value'): Displays a fallback text if the variable is empty or does not exist.
• | length: Returns the number of items in a list or the length of a string.

<!-- Example of filter application in Jinja -->
<div class="filters-example">
  <h2>{{team.name | upper}}</h2>
  <p>Role: {{manager.role | title}}</p>
  <p>Status: {{team.season | default('--')}}</p>
  <p>Total: {{team.players | length}}</p>
</div>

To learn how to use dot or bracket notation and access template data on the interface, you can check the variables section in the official Jinja documentation or leverage artificial intelligence tools.