Web Development

A Fabric Mod that enables in-game TCP networking and web hosting

This mod leverages low-level socket programming to establish direct TCP connections from within the Minecraft game environment. It allows players or server administrators to serve custom HTML-based websites directly from the game itself—without needing any external web server. More than just a networking tool, it acts as a visual and interactive proof of concept—designed to help you understand the fundamentals of web development by rendering HTML elements like divs and spans as physical blocks within the game world.

Key features include:

• Direct TCP socket communication using Java's networking libraries
• Lightweight built-in HTTP server to serve static HTML/CSS content
• Full integration with Minecraft's command system for managing connections and hosting

How to use:

1. Create a rectangular platform on the ground no larger than 32x32. This platform must be made using only 1 block type (eg. Oak Planks). This will be your outline block
2. Place a different key block on top of a corner of the platform. This block will be the denote the orientation of the structure. It designates the top left corner (the website will be read left-to-right, top-to-bottom).
3. Start placing blocks! Each block that you place will be the start of a new div. Use signs or lecterns to add text inside the divs. (Transparent blocks represent spans while everything else represent divs)
4. Use the command /webhost [x y z], where x, y, z are the coordinates of your key block.
5. Enter your server's IP in your browser and see the results. (Use localhost:80 for singleplayer worlds)

Nesting:

In order to nest divs and text, you need only stack blocks on top of each other. For example, a sign placed on top of block1 will result in sign's text inside of block1's div. Block2 placed on top of block1 will result in a block2 div inside of a block1 div. divs will automatically be closed when the stack reaches an air block or the build limit, but they can also be manually be closed using the outline block type (whatever block you made the platform out of).

How to use styles/CSS:

The key block used placed in the top left corner is also your style block. When a style block is detected in a stack of blocks, the stack will enter Style Mode until 1) another style block is found in the stack, 2) an air block is found in the stack, or 3) the build limit is found in the stack.

Style Mode:

Style Mode allows you to assign styles to a given block type, applying CSS to all future divs made from them. After entering Style Mode using a style block, the next block in the stack is deemed the block to stylize. All blocks beyond that point (until Style Mode is exited) is used to assign styles to that block. There are two ways to denote styles to be added to a block:

1. Use signs to note the proper CSS. For example, to set the font color to red and the background color to green, you'd write a sign saying "color: red; background-color: green;".
2. Use other blocks to copy their styles.