@rpgjs/client 4.2.2 → 5.0.0-alpha.0

package/src/Tilemap/index.ts

@@ -1,175 +0,0 @@
-import { InjectContext, Utils } from '@rpgjs/common'
-import ImageLayer from './ImageLayer'
-import TileLayer from './TileLayer'
-import TileSet from './TileSet'
-import Tile from './Tile'
-import { log } from '../Logger'
-import { TiledMap, TiledLayerType, Layer } from '@rpgjs/tiled'
-import { RpgRenderer } from '../Renderer'
-import { Container, Graphics } from 'pixi.js'
-
-const { intersection } = Utils
-
-export interface MapInfo extends TiledMap {
-    layers: Layer[]
-}
-
-export default class TileMap extends Container {
-    background: Graphics = new Graphics()
-    tilewidth: number = 0 
-    tileheight: number = 0
-    private frameRateAnimation: number = 10
-    tilesets: TileSet[] = []
-    layers: {
-        [layerName: string]: TileLayer | ImageLayer
-    } = {}
-    private tilesLayer: Container = new Container()
-    private frameTile: number = 0
-    private renderer: RpgRenderer = this.context.inject(RpgRenderer)
-
-    constructor(private context: InjectContext, private data: MapInfo) {
-        super()
-        this.x = 0
-        this.y = 0
-        this.create(data)
-    }
-
-    /** @internal */
-    drawAnimateTile(frame: number) {
-        if (frame % this.frameRateAnimation == 0) {
-           this.renderer['renderer'].plugins.tilemap.tileAnim[0] = this.frameTile
-           this.frameTile++
-        }
-    }
-
-    getData(): MapInfo {
-        return this.data
-    }
-
-    setBackgroundColor(color: string) {
-        color = color.replace('#', '')
-        this.background.beginFill(parseInt(color, 16))
-        this.background.drawRect(
-            0,
-            0,
-            (this.width || 0) * (this.tilewidth || 0),
-            (this.height || 0) * (this.tileheight || 0)
-        );
-        this.background.endFill()
-    }
-
-    private create(data: MapInfo) {
-        this.data = data
-        Object.assign(this, data)
-        if (this.data.backgroundcolor) this.setBackgroundColor(this.data.backgroundcolor)
-        this.addChild(this.background);
-        this.tilesets = this.data.tilesets.map((tileSet) => {
-            return new TileSet(tileSet)
-        })
-    }
-
-    /** @internal */
-    createOverlayTiles(x: number, y: number, instance) {
-        const tilesLayer: any = []
-        this.data.layers.forEach((layerData) => {
-            switch (layerData.type) {
-                case TiledLayerType.Tile: {
-                    const tileLayer = new TileLayer(layerData, this.tilesets, this)
-                    const tile = tileLayer.createTile(x, y, {
-                        real: true,
-                        filter: (tile: Tile) => {
-                            const { data, y: yObject, z: zObject } = instance
-                            const { hHitbox, height } = data
-                            const zLayer = tileLayer.z
-                            const tileHasZ = tile.properties.z !== undefined
-                            let { z } = tile.properties
-
-                            if (zLayer !== undefined) {
-                                z = zLayer + (z !== undefined ? z : 0)
-                            }
-
-                            if (z == undefined) return false 
-
-                            const realZ = z * tile.height
-
-                            if (zObject + height < realZ) {
-                                return true
-                            }
-
-                            // player is on a tile but the player has a high z
-                            if (zObject > realZ + tile.height) {
-                                return false
-                            }
-
-                            if (!tileHasZ) return false 
-
-                            // is front of tile
-                            if (yObject + hHitbox > tile.y + tile.height) {
-                                // if (yObject - tile.y >= height) {
-                                //     return false
-                                // }
-                                // Always get tile.height for height. TODO: Fix this the height of the character.  To be seen according to future implementations...
-                                // Discussion: https://community.rpgjs.dev/d/250-rpgjs-v420/6
-                                const zIntersection = intersection([zObject, zObject + tile.height /** Old code: height */], [realZ, realZ + tile.height])
-                                if (!zIntersection) {
-                                    return true
-                                }
-                                return false
-                            }
-                            return true
-                        }
-                    })
-                    if (tile) {
-                        tileLayer.addChild(tile)
-                        const size = tile.animations.length
-                        if (size > 0) {
-                            const ms = 1000 / 60
-                            tile.animationSpeed = ms / (ms * this.frameRateAnimation)
-                            let frameIndex = this.frameTile % size;
-                            tile.gotoAndPlay(frameIndex)
-                        }
-                        tilesLayer.push(tileLayer)
-                    }
-                    break;
-                }
-            }
-        })
-        return tilesLayer
-    }
-
-    /** @internal */
-    changeTile(x: number, y: number, layerName: string) {
-        const layer = this.layers[layerName]
-        if (!layer) throw log(`${layerName} not exists`)
-        if (layer instanceof TileLayer) {
-            layer.changeTile(x, y)
-        }     
-    }
-
-    /** @internal */
-    load(options?: { drawTiles: boolean | undefined, isUpdate?: boolean }) {
-        this.tilesLayer.removeChildren()
-
-        this.tilesets.forEach(tileset => tileset.load())
-       
-        this.data.layers.forEach((layerData) => {
-            switch (layerData.type) {
-                case TiledLayerType.Tile: {
-                    const tileLayer = new TileLayer(layerData, this.tilesets, this)
-                    if (options?.drawTiles) tileLayer.create()
-                    this.layers[layerData.name] = tileLayer
-                    this.tilesLayer.addChild(tileLayer)
-                    break;
-                }
-                case TiledLayerType.Image: {
-                    const imageLayer = new ImageLayer(layerData, this)
-                    this.layers[layerData.name] = imageLayer
-                    this.tilesLayer.addChild(imageLayer)
-                    break;
-                }
-            }
-        })
-
-        this.addChild(this.tilesLayer)
-    }
-}

package/src/clientEntryPoint.ts

@@ -1,150 +0,0 @@
-import { InjectContext, HookClient, loadModules, ModuleType } from '@rpgjs/common'
-import { GameEngineClient } from './GameEngine'
-import { RpgClientEngine } from './RpgClientEngine'
-import { setInject } from './inject'
-
-interface RpgClientEntryPointOptions {
-    /** 
-     * Represents socket io client but you can put something else (which is the same schema as socket io)
-     * 
-     * @prop {SocketIO or other} io
-     * @memberof RpgClientEntryPoint
-     * */
-    io: any
-    /** 
-     * Canvas Options
-     * 
-     * * {boolean} [options.transparent=false] - If the render view is transparent, default false
-     * * {boolean} [options.autoDensity=false] - Resizes renderer view in CSS pixels to allow for
-     *   resolutions other than 1
-     * * {boolean} [options.antialias=false] - sets antialias
-     * * {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer. The
-     *  resolution of the renderer retina would be 2.
-     * * {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation,
-     *  enable this if you need to call toDataUrl on the webgl context.
-     * * {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
-     *      not before the new render pass.
-     * * {number} [options.backgroundColor=0x000000] - The background color of the rendered area
-     *  (shown if not transparent).
-     * 
-     * @prop {object} [canvas]
-     * @memberof RpgClientEntryPoint
-     * */
-     canvas?: {
-        transparent?: boolean,
-        autoDensity?: boolean,
-        antialias?: boolean,
-        resolution?: number
-        preserveDrawingBuffer?: boolean
-        backgroundColor?: number
-    }
-    /** 
-     * The element selector that will display the canvas. By default, `#rpg`
-     * 
-     * @prop {string} [selector]
-     * @memberof RpgClientEntryPoint
-     * */
-    selector?: string,
-
-    /** 
-     * The selector that corresponds to the GUIs. By default, `#gui`
-     * If you didn't put a GUI element in the div, an element will be automatically created.
-     * 
-     * @prop {string} [selectorGui]
-     * @memberof RpgClientEntryPoint
-     * */
-    selectorGui?: string
-
-    /** 
-     * The selector that corresponds to the element contains canvas. By default, `#canvas`
-     * If you didn't put element in the main div, an element will be automatically created.
-     * 
-     * @prop {string} [selectorCanvas]
-     * @memberof RpgClientEntryPoint
-     * */
-    selectorCanvas?: string
-
-    standalone?: boolean
-
-    /** 
-     * The general configurations of the game. For example, default keyboard keys, cursor noise. This is information that external modules can reuse
-     * 
-     * @prop {object} [globalConfig]
-     * @memberof RpgClientEntryPoint
-     * */
-    globalConfig?: any
-
-    drawMap?: boolean
-
-    /** 
-     * The maximum number of fps for the rendering
-     * 
-     * @prop {object} [maxFps]
-     * @since 3.0.2
-     * @memberof RpgClientEntryPoint
-     * */
-    maxFps?: number
-
-    /** 
-     * Put the number of FPS that the server processes. It allows to synchronize the client rendering with the server. The default value is 60
-     * 
-     * @prop {object} [serverFps]
-     * @since 3.0.2
-     * @memberof RpgClientEntryPoint
-     * */
-    serverFps?: number
-
-    envs?: object
-}
-
-export default (modules: ModuleType[], options: RpgClientEntryPointOptions): RpgClientEngine => {
-
-    if (!options.globalConfig) options.globalConfig = {}
-
-    options = {
-        ...options.globalConfig,
-        ...options
-    }
-
-    const relations = {
-        onInit: HookClient.AddSprite,
-        onDestroy: HookClient.RemoveSprite,
-        onUpdate: HookClient.UpdateSprite,
-        onChanges: HookClient.ChangesSprite,
-        onMove: HookClient.SpriteMove
-    }
-
-    const relationsMap = {
-        onAddSprite: HookClient.SceneAddSprite,
-        onRemoveSprite: HookClient.SceneRemoveSprite,
-        onBeforeLoading: HookClient.BeforeSceneLoading,
-        onAfterLoading: HookClient.AfterSceneLoading,
-        onMapLoading: HookClient.SceneMapLoading,
-        onChanges: HookClient.SceneOnChanges,
-        onDraw: HookClient.SceneDraw
-    }
-
-    const relationsEngine = {
-        onStart: HookClient.Start,
-        onStep: HookClient.Step,
-        onConnected: HookClient.Connected,
-        onDisconnect: HookClient.Disconnect,
-        onConnectError: HookClient.ConnectedError,
-        onInput: HookClient.SendInput,
-        onWindowResize: HookClient.WindowResize
-    }
-
-    loadModules(modules, {
-        side: 'client',
-        relations: {
-            player: relations,
-            sceneMap: relationsMap,
-            engine: relationsEngine
-        }
-    })
-
-    const context = new InjectContext()
-    setInject(context)
-
-    return context.inject(RpgClientEngine, [options])
-}

package/src/inject.ts

@@ -1,34 +0,0 @@
-import { InjectContext } from "@rpgjs/common";
-
-let instanceContext: InjectContext | null = null
-
-/**
- * Dependency injection function for RPGJS client side.
- * 
- * This client-side `inject` function is used to retrieve instances of various classes within the RPGJS framework, 
- * specifically for client-side modules. It enables developers to access singleton instances of key classes such as 
- * `RpgClientEngine`, `KeyboardControls`, and `RpgRenderer`. Utilizing `inject` on the client side promotes modular 
- * and maintainable code by simplifying dependency management.
- *
- * @template T The class type that you want to retrieve an instance of, relevant to client-side modules.
- * @returns {T} Returns the singleton instance of the specified class, ensuring only one instance is used client-side.
- * @since 4.2.0
- *
- * @example
- * ```ts
- * // Example of injecting the RpgClientEngine
- * import { inject, RpgClientEngine } from '@rpgjs/client'
- * const client = inject(RpgClientEngine)
- * ```
- */
-export function inject<T>(service: new (...args: any[]) => T, args: any[] = []): T {
-    return instanceContext!.inject(service, args);
-}
-
-export function setInject(context: InjectContext) {
-    instanceContext = context;
-}
-
-export function clearInject() {
-    instanceContext = null
-}

package/src/types/howler.d.ts

@@ -1,73 +0,0 @@
-declare module "howler" {
-
-    class HowlerGlobal {
-        stop(): HowlerGlobal
-        mute(): HowlerGlobal;
-        unmute(): HowlerGlobal;
-        volume(): number;
-        volume(volume: number): HowlerGlobal;
-        codecs(extension: string): boolean;
-        iOSAutoEnable: boolean;
-    }
-
-    var Howler: HowlerGlobal;
-
-    interface IHowlCallback {
-        (): void;
-    }
-
-    interface IHowlSoundSpriteDefinition {
-        [name: string]: number[]
-    }
-
-    interface IHowlProperties {
-        autoplay?: boolean;
-        buffer?: boolean;
-        format?: string;
-        loop?: boolean;
-        sprite?: IHowlSoundSpriteDefinition;
-        volume?: number;
-        src: string[]
-        urls?: string[];
-        onend?: IHowlCallback;
-        onload?: IHowlCallback;
-        onloaderror?: IHowlCallback;
-        onpause?: IHowlCallback;
-        onplay?: IHowlCallback;
-    }
-
-    class Howl {
-
-        autoplay: Boolean;
-        buffer: Boolean;
-        format: string;
-        rate: number;
-        model: string;
-        onend: IHowlCallback;
-        onload: IHowlCallback;
-        onloaderror: IHowlCallback;
-        onpause: IHowlCallback;
-        onplay: IHowlCallback;
-        constructor(properties: IHowlProperties);
-        play(sprite?: string, callback?: (soundId: number) => void): Howl;
-        playing(): boolean
-        pause(soundId?: number): Howl;
-        stop(soundId?: number): Howl;
-        mute(soundId?: number): Howl;
-        unmute(soundId?: number): Howl;
-        fade(from: number, to: number, duration: number, callback?: IHowlCallback, soundId?: number): Howl;
-        loop(): boolean;
-        loop(loop: boolean): Howl;
-        pos(position?: number, soundId?: number): number;
-        pos3d(x: number, y: number, z: number, soundId?: number): any;
-        sprite(definition?: IHowlSoundSpriteDefinition): IHowlSoundSpriteDefinition;
-        volume(): number;
-        volume(volume?: number, soundId?: number): Howl;
-        urls(): string[];
-        urls(urls: string[]): Howl;
-        on(event: string, listener?: () => void): Howl;
-        off(event: string, listener?: () => void): Howl;
-        unload(): void;
-    }
-
-}