MCCodes - Chapter 1: Page Rendering & Structure

MCCodes Walkthrough Tutorial

Welcome to the MCCodes v2 tutorial! This is the very first chapter, and we're starting with something fundamental: how the game looks the same on every page.

Imagine playing a game where the menu is on the left on one screen, on the right on another, and disappears completely on a third. Confusing, right? MCCodes avoids this by having a standard way to build every page.

The Problem: We need every page in the game (like the bank, the gym, the crimes page) to share a common layout: the same header image, the same sidebar showing your stats, the same navigation menu, and the same overall style.

The Solution: MCCodes uses a "template" system. Think of it like having a blueprint for a house. Every room (every game page) is built using this blueprint, ensuring they all have the same basic structure (walls, floor, ceiling). Then, each room gets its specific furniture (the unique content for that page).

This blueprint is mainly handled by a file called header.php and styled by css/game.css.

The Blueprint: header.php and the $h Object

At the heart of the page structure is a file named header.php. This file contains the instructions (in PHP code, specifically a class called headers) for drawing the common parts of the page.

In most game files, when the page starts loading, a special setup file called globals.php (which we'll cover in Chapter 2: Global Setup & Session Management) runs first. One of its jobs is to create an "object" from the headers class. This object is usually stored in a variable named $h.

Think of $h as your friendly builder who knows the blueprint. You tell the builder when to perform specific steps:

  1. $h->startheaders(): The builder lays the foundation. This starts the HTML document, sets up the <head> section (including linking the style guide), adds the game title, and starts the main page layout structure (like putting up the outer walls).

  2. $h->userdata($ir, ...): The builder adds the personalized elements. This function takes your current user information ($ir) and displays the sidebar with your Name, Money, Level, Stats (Energy, Health, etc.), and other common details. It also updates your "last seen online" time.

  3. $h->menuarea(): The builder adds the navigation. This function includes the main menu links (mainmenu.php) that let you navigate around the game (Explore, Gym, Crimes, etc.) and sets up the main central area where the specific page content will go. (There's also $h->smenuarea() used for the staff panel, linking smenu.php instead).

  4. $h->endpage(): The builder finishes the job. This closes all the open HTML structures and completes the page.

Most game pages don't need to know how these steps work; they just need to know that globals.php handles the first three steps, and they need to call the last step when they're done adding their unique content.

The Style Guide: css/game.css

While header.php builds the structure, css/game.css defines the look and feel. CSS stands for Cascading Style Sheets. It's like the interior decorator for our website house. It decides the colors, fonts, spacing, and layout of the elements defined in the HTML.

header.php (specifically the $h->startheaders() part) includes a link to css/game.css in the HTML <head> section. This means every page that uses the $h object will automatically use the styles defined in css/game.css.

Let's look at a tiny piece of css/game.css:

/* css/game.css */
body {
  background-color: #DEDEDE; /* Light grey background */
  margin-top: 0;
  margin-bottom: 0;
  font-family: calibri, helvetica, arial, geneva, sans-serif; /* Preferred fonts */
  font-size: 12px; /* Standard text size */
  color: black; /* Standard text color */
  /* ... other styles ... */
}

a:link {
  color: black; /* Make links black */
  text-decoration: none; /* Remove underlines from links */
}

This simple CSS tells the browser:

Because this file is linked on every page, all pages will have this consistent base styling.

How a Typical Game Page Uses the Blueprint

So, how does a specific page like inventory.php use this system? It's surprisingly simple!

Most game pages follow this pattern:

  1. Include the Setup: They start by including globals.php. This file does a lot (more in Chapter 2), including creating the $h object and calling $h->startheaders(), $h->userdata(), and $h->menuarea(). This draws the header, sidebar, and menu automatically.
  2. Add Unique Content: The page then focuses only on its own job. For inventory.php, this means getting the player's items from the database and displaying them. It uses simple echo statements in PHP to output the HTML for the inventory list inside the main content area prepared by $h->menuarea().
  3. End the Page: Finally, the page tells the builder $h to finish up by calling $h->endpage().

Here's a simplified conceptual example of what inventory.php might look like:

<?php
// File: inventory.php (Simplified Concept)

// 1. Include the global setup
// This creates $h and calls startheaders, userdata, menuarea
require 'globals.php';

// 2. Add the unique content for this page
echo "<h3>Your Inventory</h3>";
echo "<p>Here are the items you are carrying:</p>";

// (Code here would fetch items from the database and display them)
// For example:
// echo " - Sword <br />";
// echo " - Potion <br />";

// ... more page-specific logic and HTML output ...


// 3. Tell the header object to finish the page structure
$h->endpage();

?>

Notice how inventory.php doesn't contain any complex HTML for the layout, sidebar, or menu. It relies entirely on $h (set up by globals.php) to handle the common structure, and just outputs its own specific part.

Under the Hood: How a Request Flows

Let's trace what happens when you click a link to, say, your inventory.

sequenceDiagram
    participant B as User's Browser
    participant S as Web Server
    participant Page as inventory.php
    participant G as globals.php
    participant H as header.php ($h object)
    participant M as mainmenu.php

    B->>S: Request inventory.php
    S->>Page: Start executing inventory.php
    Page->>G: Includes globals.php
    G->>H: Includes header.php, Creates $h object
    G->>H: Calls $h->startheaders()
    H-->>B: Sends HTML , CSS link, layout start
    G->>H: Calls $h->userdata(...)
    H-->>B: Sends User Stats Sidebar HTML
    G->>H: Calls $h->menuarea()
    H->>M: Includes mainmenu.php
    M-->>H: Generates Menu HTML
    H-->>B: Sends Menu HTML & Content Area Start
    G-->>Page: Finishes its setup tasks
    Page->>Page: Generates unique inventory content (HTML)
    Page-->>B: Sends Inventory List HTML
    Page->>H: Calls $h->endpage()
    H-->>B: Sends closing HTML tags

This diagram shows the teamwork:

  1. Your browser asks for the page.
  2. The server runs the specific page file (inventory.php).
  3. inventory.php immediately brings in globals.php.
  4. globals.php sets up the $h builder from header.php.
  5. globals.php uses $h to draw the standard page sections (header, stats, menu), sending that HTML back piece by piece.
  6. inventory.php then adds its own specific content (the inventory list).
  7. Finally, inventory.php tells $h to wrap everything up.

Key Files Summary

Conclusion

You've now learned the basics of how MCCodes creates a consistent look and feel for every page in the game! It uses the header.php file (as the $h object) to act as a blueprint, building the common HTML structure like the header, user stats sidebar, and navigation menu. The css/game.css file provides the visual styling, ensuring everything matches. Individual game pages then simply include the setup, add their unique content, and tell the blueprint system to finish the page.

This separation makes development easier:

  1. You can change the look of the entire game by modifying just header.php and css/game.css.
  2. Developers creating new game pages don't need to worry about repeatedly writing the same complex HTML layout code; they can focus just on the unique features of their page.

Now that we understand how the pages are structured and styled, let's dive into what happens right at the beginning of every page request - the essential setup and how the game remembers who you are.

Next Up: Chapter 2: Global Setup & Session Management

First published April 21, 2025

Tags: MCCodes Walkthrough Tutorial