To finish off the game, we will add some menus to it. In the main menu, the user can choose a difficulty. The user can select an option using the arrow keys and confirm using the spacebar. The menu will look like this:
To implement the menu, we must add it to the state. Then we can render the menu and update the menu state in the event handler. We start by updating the state.
In lib/game/model.ts, we will add the menus to the state. First, we will create a new type for the menu. The menu contains a title, a list of options, and the index of the selected button. Each option has a string and a function that applies the action by transforming the state:
export interface Menu {
title: string;
options: [string, (state: State) => State][];
selected: number;
}
We add the menu to the State:
export interface State {
menu: Menu | undefined;
level: Level;
}
The main menu will contain three buttons; to start...