DEV Community: Tu Bui

Setup new project slot

Tu Bui — Mon, 05 May 2025 03:56:44 +0000

Setup doc-slot-core

1.Clone project and open with VSCode: https://gitea.plp19.com/dev-public/doc-slot-core-manual

npm install
npm start

2.Setup follow README
You can read doc at link: http://localhost:3000/docs/intro

Setup project

NOTE:

When setup list SlotttyItem, these Items in this game is difference with doc: ['WILD', 'PIC1', 'PIC2', 'PIC3', 'PIC4', 'PIC5', 'ACE', 'KING', 'QUEEN', 'JACK', 'TEN', 'NINE', 'COLLECT', 'SCAT']

So these script have to update:

extend-slotty-setting.js

var SlottyItem = p4fslot.require('slotty-item');
var Enum = p4fslot.require('extendable-enum');

Enum.InitEnum(SlottyItem, [
    'Pic1',
    'Pic2',
    'Pic3',
    'Pic4',
    'Pic5',
    'Ace',
    'King',
    'Queen',
    'Jack',
    'Ten',
    'Nine',
    'Collect',
]);

module.exports = SlottyItem;

extend-hyper-gaming-config.js

var HyperGamingConfig = require('hyper-gaming-config');
var SlottyItem = require('slotty-item');

HyperGamingConfig.itemMapper['PIC1'] = SlottyItem.Pic1;
HyperGamingConfig.itemMapper['PIC2'] = SlottyItem.Pic2;
HyperGamingConfig.itemMapper['PIC3'] = SlottyItem.Pic3;
HyperGamingConfig.itemMapper['PIC4'] = SlottyItem.Pic4;
HyperGamingConfig.itemMapper['PIC5'] = SlottyItem.Pic5;
HyperGamingConfig.itemMapper['ACE'] = SlottyItem.Ace;
HyperGamingConfig.itemMapper['KING'] = SlottyItem.King;
HyperGamingConfig.itemMapper['QUEEN'] = SlottyItem.Queen;
HyperGamingConfig.itemMapper['JACK'] = SlottyItem.Jack;
HyperGamingConfig.itemMapper['TEN'] = SlottyItem.Ten;
HyperGamingConfig.itemMapper['NINE'] = SlottyItem.Nine;
HyperGamingConfig.itemMapper['COLLECT'] = SlottyItem.Collect;

extend-slotty-setting.js


BaseSlottySetting.prototype._getPatternNotWin = function () {
    return [
        [SlottyItem.Pic5, SlottyItem.Pic3, SlottyItem.Pic5, SlottyItem.Pic1, SlottyItem.Pic5,
        SlottyItem.Pic2, SlottyItem.Pic6, SlottyItem.Pic5, SlottyItem.Pic1, SlottyItem.Pic5,
        SlottyItem.Pic2, SlottyItem.Pic6, SlottyItem.Pic2, SlottyItem.Pic1, SlottyItem.Pic2
        ],
        [SlottyItem.Pic4, SlottyItem.Pic7, SlottyItem.Pic2, SlottyItem.Pic5, SlottyItem.Pic7,
        SlottyItem.Pic4, SlottyItem.Pic7, SlottyItem.Pic6, SlottyItem.Pic5, SlottyItem.Pic7,
        SlottyItem.Pic7, SlottyItem.Pic3, SlottyItem.Pic4, SlottyItem.Pic2, SlottyItem.Pic3
        ],
        [SlottyItem.Pic1, SlottyItem.Pic2, SlottyItem.Pic3, SlottyItem.Pic7, SlottyItem.Pic3,
        SlottyItem.Pic2, SlottyItem.Pic7, SlottyItem.Pic4, SlottyItem.Pic3, SlottyItem.Pic2,
        SlottyItem.Pic1, SlottyItem.Pic7, SlottyItem.Pic4, SlottyItem.Pic3, SlottyItem.Pic1
        ]
    ];
};

2. Update Asset & Folder Structure:

When add asset to folder structure. Remember to run 4 things:
_Open Preload Scene: P4F Editor -> preload-hyper -> loadAll
_3 step in this image:

CC Pool

Tu Bui — Fri, 14 Mar 2025 07:31:22 +0000

https://docs.cocos.com/creator/2.4/manual/en/scripting/pooling.html

onLoad: function () {
    this.enemyPool = new cc.NodePool();
    let initCount = 5;
    for (let i = 0; i < initCount; ++i) {
        let enemy = cc.instantiate(this.enemyPrefab); // create node instance
        this.enemyPool.put(enemy); // populate your pool with put method
    }
}

createEnemy: function (parentNode) {
    let enemy = null;
    if (this.enemyPool.size() > 0) { // use size method to check if there're nodes available in the pool
        enemy = this.enemyPool.get();
    } else { // if not enough node in the pool, we call cc.instantiate to create node
        enemy = cc.instantiate(this.enemyPrefab);
    }
    enemy.parent = parentNode; // add new enemy node to the node tree
    enemy.getComponent('Enemy').init(); //initialize enemy
}

onEnemyKilled: function (enemy) {
    // enemy should be a cc.Node instance
    this.enemyPool.put(enemy); // using the same put method as initializing node pool, this will also call removeFromParent for the node
}

Facade Pattern

Tu Bui — Thu, 13 Mar 2025 07:03:06 +0000

https://refactoring.guru/design-patterns/facade

Target: Avoid call many function from something or package.
A facade is a class that provides a simple interface to a complex subsystem which contains lots of moving parts. A facade might provide limited functionality in comparison to working with the subsystem directly. However, it includes only those features that clients really care about.

Example:
When you want to order pizza. Just call to the operator who provide you all function of shop like order, payment, delivery,...

interface IGameFacade {
    startGame(): void;
    pauseGame(): void;
    endGame(): void;
}

class GameFacade implements IGameFacade {
    private physicsSystem: PhysicsSystem;
    private uiManager: UIManager;

    constructor() {
        this.physicsSystem = new PhysicsSystem();
        this.uiManager = new UIManager();
    }

    startGame() {
        this.physicsSystem.enable();
        this.uiManager.showGameUI();
        console.log("Game started!");
    }

    pauseGame() {
        this.physicsSystem.disable();
        this.uiManager.showPauseMenu();
        console.log("Game paused.");
    }

    endGame() {
        this.physicsSystem.reset();
        this.uiManager.showEndScreen();
        console.log("Game ended.");
    }
}

class PhysicsSystem {
    enable() { console.log("Physics enabled"); }
    disable() { console.log("Physics disabled"); }
    reset() { console.log("Physics reset"); }
}

class UIManager {
    showGameUI() { console.log("Game UI shown"); }
    showPauseMenu() { console.log("Pause menu shown"); }
    showEndScreen() { console.log("End screen shown"); }
}

// Usage
const game = new GameFacade();
game.startGame();
game.pauseGame();

GSAP TWEEN

Tu Bui — Thu, 13 Mar 2025 07:01:19 +0000

//Declare Timeline

private timeLineMove: gsap.core.Timeline;

//CreateTimeline

private tweenScaleThenTrasparent(): void
    {
        this.timeLine = gsap.timeline({ paused: true });
        timeLine.fromTo(this.node,{scaleX: 1},{
            scaleX: 1.1,
            duration: 0.2
        }, "scaleUp");
        timeLine.fromTo(this.node,{scaleX: 1.1},{
            scaleX: 1,
            duration: 0.2
        }, "scaleDown");
        timeLine.fromTo(this.node,{opacity: 255},{
            opacity: 0,
            duration: 0.2
            ease: Back.easeOut
        }, "transparent");
    }
//Using
this.timeline.restart();
//MUST
protected onDestroy(): void
{
   if (this.timeLineMoveUp)
   {
       this.timeLineMoveUp.kill();
   }
}

Notice:
_Create Timeline moving to X = 100;
_First time moving from 0=>100
_When use timeLineMove.restart(); if current x = -500 => Tween still move from 0->100

NPM SETUP

Tu Bui — Fri, 20 Sep 2024 08:38:51 +0000

Step 1: Install Node.js in this link
This automatic help you install npm
Step 2: After install Node.js test in terminal

Note:
If have some problem acn't access to npm , node ,...
Delete C:\Users<accountName>\AppData\Roaming\npm
Uninstall nodejs & reinstall.

Inversify Inject Decoration

Tu Bui — Wed, 31 Jul 2024 10:21:45 +0000

I'm already using Inversify in Cocos project.

1. Performance Optimization
_ Lazy Loading: lazyInject allows for lazy loading of dependencies, which means thay are only instantiated when they are actually needed. This can significantly improve the performance of your application, especially if some dependencies are expensive to create and might not be used in every execution path.
_ Reduced Initialization Time: By deferring the creation of dependencies until they are accessed, the initial loading time of the application can be reduced.

2. Memory Management
_ Efficient Use of Resources: Since dependencies are only created when required, it helps in better memory management and resource utilization. This can be particularly useful in applications with large numbers of dependencies or those that run in environments with limited resources.

3. Circular Dependency Resolution
_ Avoid Circular Dependencies: lazyInject can help in resolving circular dependencies by delaying the injection until the dependencies are actually needed. This can prevent issues where two or more services depend on each other, causing a circular dependency error during initialization.

4. Better Control and Flexibility
_ Fine-Grained Control: With lazyInject, developers have more control over when and how dependencies are instantiated. This can lead to better optimization and flexibility in managing dependencies.
_ Conditional Instantiation: It allows for conditional instantiation of dependencies based on runtime conditions, which can lead to more efficient and context-aware dependency management.

5. Best Practices in Dependency Injection
_ Adherence to SOLID Principles: Using lazyInject aligns the Dependency Inversion Principle (DIP) and the Single Responsibility Principle (SRP), both of which are part of the SOLID principles of object-oriented design. It ensures that classes depend on abstractions rather than concrete implementations and that they are only responsible for their primary functionality.
_ Separation of Concerns: By using lazyInject, you maintain a clear separation of concerns. The class that depends on a service doesn't need to know how to create it, only how to use it.

import { injectable, inject } from "inversify";
import { lazyInject } from "inversify/lib/annotation/lazy_inject";

@injectable()
class SomeService {
    // ...
}

@injectable()
class AnotherService {
    @lazyInject(TYPES.SomeService)
    private someService: SomeService;

    public doSomething() {
        this.someService.someMethod();
    }
}

Reflect MetaData

Tu Bui — Tue, 30 Jul 2024 08:15:44 +0000

_When your project is getting bigger and bigger.
Some solution to fix it is _Composition/Dependency Injection, Run-time Type Assertions, Testing, Decoration,... So a consistent approach is needed for various tools and libraries to be able to reason over metadata.

In my case, I'm trying to use Inversify package. It's require to use ReflectMetaData Package.

_Inversify is an Inversion of Control(IoC) container for TypeScript & TypeScript. It helps manage dependencies in applications. It uses decorators to mark classes and their dependencies, promoting modular, testable, and maintainable code.

_Reflect-Metadata
The reflect-metadata package adds a reflection API to JavaScript, which is used to add and retrieve metadata to/from JavaScript objects at runtime. In TypeScript, this allows the storage of type information and other metadata.

Connection
Decorators and Metadata:

Inversify relies on decorators to mark classes (@injectable) and their dependencies (@inject).
TypeScript decorators, in combination with reflect-metadata, enable the retrieval of type information at runtime. This is essential for Inversify to automatically inject the correct dependencies based on type information.
Automatic Dependency Resolution:

When you mark a class with @injectable, Inversify uses reflect-metadata to store metadata about the class and its constructor parameters.
When you use the @inject decorator, Inversify retrieves the type metadata for the constructor parameters, which allows the container to resolve and inject the appropriate instances automatically.

Inversify

Tu Bui — Tue, 30 Jul 2024 03:27:36 +0000

This is good example for you to easy understand how inversify work.

I will improve code follow each step below:

Step 1: Normal Class

public class Cart
{
    private readonly IDatabase _db;
    private readonly ILogger _log;
    private readonly IEmailSender _es;

    public Cart()
    {
        _db = new Database();
        _log = new Logger();
        _es = new EmailSender();
    }

    public void Checkout(int orderId, int userId)
    {
        _db.Save(orderId);
        _log.LogInfo("Order has been checkout");
        _es.SendEmail(userId);
    }
}

Step 2:Apply Dependency Injection

public Cart(IDatabase db, ILogger log, IEmailSender es)
{
        _db = db;
        _log = log;
        _es = es;
 }

 //Dependency Injection simple way
 Cart myCart = new Cart(new Database(),
                   new Logger(), new EmailSender());
 //When you want to change new class. Update here
 myCart = new Cart(new XMLDatabase(),
              new FakeLogger(), new FakeEmailSender());

Step 3: Apply dependency-graph-binding

//Create each Interface
DIContainer.SetModule<IDatabase, Database>();
DIContainer.SetModule<ILogger, Logger>();
DIContainer.SetModule<IEmailSender, EmailSender>();

DIContainer.SetModule<Cart, Cart>();

//MyCart just need to use it
var myCart = DIContainer.GetModule(); 
public Cart()
    {
        _db = DIContainer.GetModule();
        _log = DIContainer.GetModule();
        _es = DIContainer.GetModule();
    }

//When you want to change some module in Cart. Just need to change in where it define.
DIContainer.SetModule<IDatabase, XMLDatabase>();`

Safely restructure your codebase with Dependency Graphs

Tu Bui — Mon, 29 Jul 2024 04:10:29 +0000

Using "inversify" is a key to create Deoencency-Graph-Binding

import { Container } from "inversify";

var container = new Container();
export { container };

import { interfaces, namedConstraint, taggedConstraint, traverseAncerstors, typeConstraint } from "inversify";

class BindingHelper
{
    targetNamed(request: interfaces.Request, name: string | number | symbol): boolean
    {
        return request != null && request.target.matchesNamedTag(name.toString());
    }

    targetTagged(request: interfaces.Request, key: string | number | symbol, value: unknown): boolean
    {
        return request != null && request.target.matchesTag(key)(value);
    }

    targetIsDefault(request: interfaces.Request): boolean
    {
        return request != null && request.target != null && !request.target.isNamed() && !request.target.isTagged();
    }

    injectInto(request: interfaces.Request, parent: (NewableFunction | string)): boolean
    {
        return request != null && typeConstraint(parent)(request.parentRequest);
    }

    parentNamed(request: interfaces.Request, name: string | number | symbol): boolean
    {
        return request != null && namedConstraint(parent)(request.parentRequest);
    }

    parentTagged(request: interfaces.Request, tag: string | number | symbol, value: unknown): boolean
    {
        return request != null && taggedConstraint(tag)(value)(request.parentRequest);
    }

    anyAncestorIs(request: interfaces.Request, ancestor: (NewableFunction | string)): boolean
    {
        return traverseAncerstors(request, typeConstraint(ancestor));
    }

    noAncestorIs(request: interfaces.Request, ancestor: (NewableFunction | string)): boolean
    {
        return !traverseAncerstors(request, typeConstraint(ancestor));
    }

    anyAncestorTagged(request: interfaces.Request, tag: string | number | symbol, value: unknown): boolean
    {
        return traverseAncerstors(request, taggedConstraint(tag)(value));
    }

    noAncestorTagged(request: interfaces.Request, tag: string | number | symbol, value: unknown): boolean
    {
        return !traverseAncerstors(request, taggedConstraint(tag)(value));
    }

    anyAncestorNamed(request: interfaces.Request, name: string | number | symbol): boolean
    {
        return traverseAncerstors(request, namedConstraint(name));
    }

    noAncestorNamed(request: interfaces.Request, name: string | number | symbol): boolean
    {
        return !traverseAncerstors(request, namedConstraint(name));
    }
}

var when = new BindingHelper();
export { when };

import { Container, interfaces } from "inversify";
import { when } from "./context-binding-helper";


interface DependencyBranch
{
    from(type: any): DependencyGraphHelper;
}

class DependencyGraphHelper implements DependencyBranch
{
    private container: Container;
    private graphs: any[] = [];
    private isBranching: boolean;
    private branchNode: any;

    bind(identifier: any, type: any, isConstant: boolean = false): DependencyGraphHelper
    {
        if (this.isBranching)
        {
            console.error('Please specify which class to be branched from. Parameters: ', identifier, ' ', type);
        }
        var parent = this.graphs[this.graphs.length - 1];
        var node = { identifier: identifier, type: type, parent: parent, isConstant: isConstant };
        this.graphs.push(node);
        return this;
    }

    branch(identifier: any, type: any, isConstant: boolean = false): DependencyBranch
    {
        if (this.graphs.length == 0)
        {
            console.error('Dependency graph cannot start with a "branch". It must start with a "bind" function.Parameters: ', identifier, ' ', type);
        }
        if (this.isBranching)
        {
            console.error('Please specify which class to be branched from. Parameters: ', identifier, ' ', type);
        }
        this.isBranching = true;
        this.branchNode = { identifier: identifier, type: type, isConstant: isConstant };
        return this;
    }

    from(type: any): DependencyGraphHelper
    {
        if (this.isBranching == false)
        {
            console.error('A "from" function must be called after a "branch" function. Parameters: ', type);
        }
        this.isBranching = false;
        var parent = this.graphs.filter(i => i.type == type).pop();
        this.branchNode.parent = parent;
        this.graphs.push(this.branchNode);
        return this;
    }

    registerTo(container: Container): void
    {
        if (this.isBranching)
        {
            console.error('Please specify which class to be branched from before call "register" function.');
        }
        this.container = container;
        for (let index = 0; index < this.graphs.length; index++)
        {
            const graph = this.graphs[index];
            this.registerGraph(graph);
        }
        this.graphs = [];
        this.container = null;
    }

    private registerGraph(graph: any): void
    {
        if (graph.isConstant)
        {
            this.bindToConstant(graph);
        }
        else
        {
            this.bindTo(graph);
        }
    }

    private bindTo(graph: any): void
    {
        this.container.bind(graph.identifier).to(graph.type).when(request =>
        {
            return this.recursiveCheckBindingCondition(request, graph);
        });
    }

    private bindToConstant(graph: any): void
    {
        this.container.bind(graph.identifier).toConstantValue(graph.type).when(request =>
        {
            return this.recursiveCheckBindingCondition(request, graph);
        });
    }

    private recursiveCheckBindingCondition(request: interfaces.Request, graph: any): boolean
    {
        if (graph.parent == null)
        {
            return true;
        }
        var injected = when.injectInto(request, graph.parent.type) && this.recursiveCheckBindingCondition(request.parentRequest, graph.parent);
        return injected;
    }
}

var dependencyGraph = new DependencyGraphHelper();
export { dependencyGraph };

import { dependencyGraph } from "../../common/ioc-helper/dependency-graph-helper";
import { container } from "../../ioc/ioc-container";
import { MonkeyClimb } from "../monkey/monkey-climb";
import { MonkeyControl } from "../monkey/monkey-control";
import { MonkeyEat } from "../monkey/monkey-eat";
import { MonkeyFindFood } from "../monkey/monkey-find-food";
import { MonkeySwingThroughTheTree } from "../monkey/monkey-swing-through-the-tree";
import { MONKEY } from "./animal-ioc-config";

export default class DependenceGraphBinding
{
    public register(): void
    {
        this.registerMonkey();
    }

    private registerMonkey(): void
    {
        dependencyGraph
            .bind(MONKEY.CONTROL,MonkeyControl)
                .branch(MONKEY.EAT,MonkeyEat).from(MonkeyControl)
                .branch(MONKEY.FIND_FOOD,MonkeyFindFood).from(MonkeyControl)
                    .branch(MONKEY.FIND_FOOD,MonkeyClimb).from(MonkeyFindFood)
                    .branch(MONKEY.FIND_FOOD,MonkeySwingThroughTheTree).from(MonkeyFindFood)
            .registerTo(container);
    }
}