Game Client

A TypeScript/JavaScript client wrapper for Socket.IO communication with the game server.

Features

• Room Management: Create, join, and manage game rooms.
• Player Management: Handle player identity and state.
• State Synchronization: Real-time updates for room and player data.
• Host Controls: Specific privileges for host clients.
• Reconnection: Built-in support for reconnecting players.

Setup

Save the built client file (e.g., client.js) to your project directory. This file includes necessary dependencies.

Usage

Initialization

Instantiate the Client class with your configuration. You define event handlers in the on property.

import { Client } from './client.js'; // Adjust path to your saved file

const client = new Client({
    isHost: false, // Set to true if this client controls the room
    url: "http://localhost:3000", // Server URL
    on: {
        // Define hooks for events
        createPlayer: {
            success: (data) => {
                console.log("Joined room successfully", data);
            },
            error: (msg) => {
                console.error("Failed to join:", msg);
            }
        },
        updateRoom: {
            broadcast: (data) => {
                // Parse the room data string
                const gameState = JSON.parse(data.room.data);
                console.log("New game state:", gameState);
            }
        }
    }
});

Methods

Room Actions

• createRoom()

  • Host only. Creates a new room on the server.
  • Triggers: createRoom (success).

• getRoom(roomKey: string)

  • Retrieves current room state.
  • Triggers: getRoom (success).

• updateRoom(roomKey: string, data: any)

  • Host only. Updates the shared room data. data is automatically stringified if it is an object.
  • Triggers: updateRoom (success, broadcast).

• deleteRoom(roomKey: string)

  • Host only. Deletes the room and disconnects all players.
  • Triggers: deleteRoom (success, broadcast).

Player Actions

• createPlayer(displayName: string, roomKey: string)

  • Joins a room as a new player.
  • Triggers: createPlayer (success, broadcast).

• getPlayer(id: number)

  • Retrieves specific player info.
  • Triggers: getPlayer (success).

• getPlayersInRoom(roomKey: string)

  • Retrieves list of all players in a room.
  • Triggers: getPlayersInRoom (success).

• updatePlayer(id: number, data: any)

  • Updates player-specific data. data is automatically stringified if it is an object.
  • Triggers: updatePlayer (success, broadcast).

• deletePlayer(id: number)

  • Removes a player from the room.
  • Triggers: deletePlayer (success, broadcast).

Connection

• reconnect(id: number)

  • Re-establishes connection for an existing player ID.
  • Triggers: reconnect (success, broadcast).

• disconnect()

  • Manually disconnects the socket.

Event Hooks

The on object allows you to listen for responses and server broadcasts.

Structure of Handlers:

type Handlers<T, U = T> = {
    success?: (data: T) => void;    // Response to your action
    broadcast?: (data: U) => void;  // Notification from other clients/server
    error?: (message: string) => void; // Error response
}

Available Hooks

| Hook | Description | Success Data | Broadcast Data | | :--- | :--- | :--- | :--- | | createRoom | Room created | { key } | N/A | | createPlayer | Player joined | { id, player, players } | { id, player, players } | | getPlayer | Get player info | { player } | N/A | | getRoom | Get room info | { room } | N/A | | getPlayersInRoom | Get player list | { players } | N/A | | updateRoom | Room data updated | { room, players } | { room, players } | | updatePlayer | Player data updated | { player, id } | { player, id, time } | | deletePlayer | Player removed | { success } | { player } | | deleteRoom | Room deleted | { success } | { roomKey } | | reconnect | Player reconnected | { player, room } | { player, room } | | disconnect | Player disconnected | N/A | { player, id } |

Data Structures

Room

{
    key: string;
    data: string; // JSON stringified data
    createdAt: number;
    updatedAt: number;
}

Player

{
    id: number;
    displayName: string;
    roomKey: string;
    data: string; // JSON stringified data
    connected: number; // 1 or 0
    createdAt: number;
    updatedAt: number;
}