Phase - adrien-gueret/ludumjs GitHub Wiki

A phase represents a specific game state. During a phase, a player is allowed to do some stuff, but can't do other stuff.

For example, if you want to create a card game, the "drawing phase" will make the player draw a card, but he won't be allowed to play a card.

In order to define a phase, LudumJS provides a Phase class:

import { Phase } from 'ludumjs/client';

The most basic phase you can define is this one:

class MyPhase extends Phase {
    static id = 'MyPhase';
}

Please note this is TypeScript. If you want to use Vanilla JS, MyPhase.id = 'MyPhase'; would be necessary.

Phase class has three magic methods: onStart, onAction and onEnd. These methods are automatically called by LudumJS.

onStart

This method is called when the phase starts. A phase starts when we call the methods start or goToPhaseById of the Game instance.

onStart receives as argument whatever you pass to these methods:

import { Game, Phase } from 'ludumjs/client';

// Define "HelloPhase"
class HelloPhase extends Phase {
    static id = 'HelloPhase';

    onStart(name) {
        console.log(`Hello ${name}!`);
    }
}

// Create an instance of LudumJS game
const myGame = new Game(document.getElementById('my-game-container'));

// Register HelloPhase
myGame.registerPhase(HelloPhase);

myGame.start('World'); // Go to first registered phase (prints "Hello World!")
// The line below is the exact equivalent of the line above
myGame.goToPhaseById('HelloPhase', 'World'); // Go directly to HelloPhase (prints "Hello World!")

onAction

This method is called when a DOM element is clicked. If you include LudumJS CSS file (ludumjs/ludumjs.css;), do not forget that all DOM elements are not clickable by default: you'll need to manually enable them with the CSS rule pointer-events: initial;.
For example, if you want to allow the "Pick a card" action only during the "Pick a card" phase, something like this can be done:

<section id="my-game-container">
    <button data-action="pick">Pick a card</button>
</section>
.pick-card-phase [data-action="pick"] { pointer-events: initial; }

onAction receives as parameter an object with three properties:

  • action: the value of the data-action attribute of the clicked element;
  • target: the clicked element
  • event: the JS event corresponding to the click
class PickCardPhase extends Phase {
    static id = 'PickCardPhase';

    onAction({ action, event, target }) {
        // Do nothing if action is NOT the "pick a card" one
        if (action !== 'pick') {
            return;
        }

        console.log(event);    
 
        target.disabled = true; // Disabled clicked button
        this.game.pickCard(); // We admit this method exists on our custom Game class
    }
}

onEnd

This method is called on current phase when a new phase will start. It could be usefull when you want to clean some things before leaving current phase, for example disable a counter:

class IntervalPhase extends Phase {
    static id = 'IntervalPhase';
    intervalTimer: number;

    onStart(interval = 1000) {
        this.intervalTimer = window.setInterval(() => console.log('Hello!'), interval);
    }

    onEnd() {
        window.clearInterval(this.intervalTimer);
    }
}
⚠️ **GitHub.com Fallback** ⚠️