client.md

DrawZone Client Documentation

The DrawZone object is the central part of the DrawZone client-side application, encapsulating various modules and functionalities related to the game. It is defined and exported in client-src/bundle.js.

Structure

The DrawZone object is structured as follows:

• chat: Manages chat functionality.
• network: Contains the Socket.IO client instance for real-time communication.
• camera: Manages the camera's position and zoom level in the game world.
• renderer: Handles rendering of the game world, including effects, players, and UI elements.
• world: Contains methods and properties related to the game world, such as chunk and line management.
• mouse: Manages mouse state and interactions.
• player: Represents the local player, including their state and actions they can perform.
• events: An event emitter for managing custom events within the application.
• players: Manages the state of other players in the game.
• tools: Contains tools that players can use to interact with the game world.
• windowSystem: Manages GUI windows within the application.
• ranks: Contains player rank information imported from ./shared/ranks.json.
• cursors: Manages cursor images for different tools.

Key Components

DrawZone.chat

• send(message: string): Send a message to the server chat.
• local(message: string): Send a local message to the chat without broadcasting it.

DrawZone.camera

• Properties: x, y, zoom, minZoom, maxZoom, zoomStrength
• editZoom(change: float): Adjust the camera zoom.
• centerAt(x: number, y: number): Center the camera at specific coordinates.

DrawZone.renderer

• Fx: Tool and other player effects.
• options: Rendering settings.
• renderAllChunks(): Render all visible chunks.
• renderChunk(chunkData: array, chunkX: int, chunkY: int): Render a specific chunk.
• renderText(text: string, x: float, y: float): Render text at a specific position.
• requestRender(): Request a re-render of the game world.

DrawZone.world

• canDraw(x: int, y: int): Check if drawing is possible at specific coordinates.
• drawLine(from: array[2], to: array[2]): Draw a line between two points.
• getPixel(x: int, y: int): Get the color of a pixel at specific coordinates.
• setPixel(x: int, y: int, color: array[3]): Set the color of a pixel.
• setChunk(color: array[3], chunkX: int, chunkY: int): Set the color of an entire chunk.
• setChunkData(chunkData: array[16], chunkX: int, chunkY: int): Set chunk data.
• setProtection(value: bool, chunkX: int, chunkY: int): Set chunk protection.

DrawZone.mouse

• Properties: x, y, mouseX, mouseY, tileX, tileY, buttons

DrawZone.player

• Properties: id, nickname, rank, selectedColor, palette, lineQuota, pixelQuota
• currentFxRenderer: Current player effect renderer.

DrawZone.events

• Custom events like loadChunks, addText, setTool, newRank, playerJoined, playerLeft, playerUpdate, playerMoved

DrawZone.windowSystem

• GUIWindow: Class for creating GUI windows.
• windows: Object containing all active windows.

DrawZone.tools

• Tool: Base class for creating tools.
• addTool(name: string, cursor: object, fxRenderer: array, minRank: number, onInit: function): Add a new tool to the game.

Example: Creating a Custom Tool

new GUIWindow('My Window Title', {}, (windowInstance) => {
    const content = document.createElement('p');
    content.textContent = 'This is a dynamic content inside the window.';

    windowInstance.addObj(content);
}).move(200, 200);

DrawZone.windowSystem.windows

Object containing all windows

DrawZone.ranks

See client-src/ranks.json

DrawZone.tools

DrawZone.tools.Tool

The base tool class

DrawZone.tools.addTool

Creates an object of the Tool class and sets to the game. Allows to specify the Tool class constructor parameters via function parameters. Returns a Tool object.

DrawZone.tools.tools

Object containing player tools

DrawZone.cursors

Object containing tool icons and icon offsets

Tool Constructor parameters

• name - The name of the tool.
• cursor - The cursor object associated with the tool.
• fxRenderer - An array of effects the tool can apply.
• minRank - The minimum rank required to use the tool.
• onInit - The function to be executed when the tool is used. When is set, calls the Tool.setToolInit method.

Tool.setToolInit

Set tool init function from the class method above instead of the onInit parameter of the Tool class constructor. Automatically calls the Tool.addEvents method.

Tool.setEvent

Save a tool event to the canvas and deactivate on unequip.

Example: Circle tool

DrawZone.tools.addTool("Circle", DrawZone.cursors.cursor, DrawZone.renderer.Fx.NONE, DrawZone.ranks.User, function (tool) {
    const segmentCount = 15;
    let startPoint = null;

    tool.setEvent("mousedown", event => {
        if (event.buttons === 1) {
            startPoint = [DrawZone.mouse.tileX, DrawZone.mouse.tileY];
        }
    });

    tool.setEvent("mouseup", async () => {
        if (startPoint) {
            const endPoint = [DrawZone.mouse.tileX, DrawZone.mouse.tileY];
            const radius = Math.sqrt(Math.pow(endPoint[0] - startPoint[0], 2) + Math.pow(endPoint[1] - startPoint[1], 2));
            const angleIncrement = 360 / segmentCount;
            const points = [];
            for (let angle = 0; angle < 360; angle += angleIncrement) {
                const x = startPoint[0] + radius * Math.cos(angle * Math.PI / 180);
                const y = startPoint[1] + radius * Math.sin(angle * Math.PI / 180);
                points.push([x, y]);
            }
            const lines = [];
            for (let i = 0; i < points.length - 1; i++) {
                lines.push([points[i], points[i + 1]]);
            }
            lines.push([points[points.length - 1], points[0]]);

            for (const [start, end] of lines) {
                DrawZone.world.drawLine(start, end);
                await new Promise(resolve => setTimeout(resolve, 2));
            }

            startPoint = null;
        }
    });
});