Diving Into Design Patterns via Hacktoberfest

#hacktoberfest #designpatterns #learning #opensource

Hacktoberfest: Contribution Chronicles

How Did I Find a Project

Firstly, finding a project under hacktoberfest topic can be overwhelming, but somehow i found this design pattern repository. So i found the issue about the Memento pattern and made a Pull Request. I did get learning experiences that i was not expecting.

Memento Pattern

Basically Memento pattern is used to undo/redo the object's state. The main question that comes up: "Do I need to save and restore an object's state?" → Use Memento. I displayed the player's current state based on the slot. The main logic is shown below:

client->originator->memento and client can call the caretaker for getting the states. client can call the caretaker to get the states. In the end, if you want to avoid manually controlling the player's state and changing the code everywhere, it is better to use the Memento pattern to make our lives easier.

Code Explanation

Firstly we need to take look at the the game-originator file.

public save(): PlayerMemento {
    const state: Player = {
      name: this.name,
      health: this.health,
      level: this.level,
      isDead: this.isDead
    };
    return new PlayerMemento(state);
  }

  public restore(memento: IMemento): void {
    const state = memento.getState();
    this.name = state.name;
    this.health = state.health;
    this.isDead = state.isDead;
    this.level = state.level;
  }

With this class, we can restore and save the object. On the other hand, I use the game-caretaker class to store the history of the memento objects. Look at the code below:

private saveSlots: Map<string, IMemento> = new Map();

  public saveToSlot(slotName: string, memento: IMemento): void {
    this.saveSlots.set(slotName, memento);
  }

Using the slot name, I can save the state in the hash map (though it's not restricted to Map only).

Lastly, these are our interfaces which will be implemented later:

export interface Player{
    health: number;
    level: number;
    isDead: boolean;
    name: string;
}

export interface IMemento{
   getState(): Player;
}

The PlayerMemento class implements the Player interface and provides getState.
When it comes to the client code, it is more readable thanks to the memento pattern. Here is a code snippet from the client code:

const player = new PlayerState(100, 1, false, 'Hero');
const saveManager = new SaveManager();
console.log(player.getInfo());
player.levelUp();
saveManager.saveToSlot('beforeBattle',player.save());
console.log(player.getInfo());
console.log('Continue playing and leveling up');
player.levelUp();
saveManager.saveToSlot('cityZone', player.save());

100 is health and 1 is level this repo has demonstrating purposes. Therefore i have made it simple.

Explanatory Diagram:

Unexpected Gained Knowledge

While implementing memento pattern i needed to write the test cases and thanks to this i got exposure to jest.js syntax. Eventually I got another PR merged. Lastly, I highly recommend everybody to read this Design Patterns book.

DEV Community