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.
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!")
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 thedata-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
}
}
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);
}
}