Game UI Components

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/Dialog.ts
• src/components/MuteButton.ts
• src/components/Highscores.ts
• src/components/inputButtons/BaseButton.ts
• src/screens/GameOverScreen.ts
• src/screens/HelpScreen.ts
• src/components/ScoreCounter.ts
• src/components/HighscoreItem.ts
• src/components/Logo.ts
• src/components/ScoreEffect.ts
• src/Game.ts

The UI components in Farm Siege are fundamental building blocks for creating the game's user interface. Built upon a custom canvas-based game engine, these components are responsible for everything from displaying static information like logos and scores to handling complex user interactions like input fields and navigation buttons. They are composed within various "Screens" (e.g., StartScreen, GameOverScreen) to construct the visual and interactive elements that the player experiences.

These components are designed to be modular and reusable. They often interact with the game's state management system (Stores) to display dynamic data and dispatch actions. For example, the ScoreCounter reads from the StatsStore, and the MuteButton updates the SettingsStore. This architecture separates UI rendering from the core game logic, making the system easier to manage and extend.

Core UI Elements

This section covers the foundational UI components that provide structure and basic functionality across the game.

Dialog

The Dialog component serves as a container for displaying modal-like information to the user. It's a simple rectangle with a semi-transparent black background and a border, used as a backdrop for text and other components in screens like HelpScreen and GameOverScreen.

Properties:

Prop	Type	Description
width	number	The width of the dialog box in pixels.
height	number	The height of the dialog box in pixels.
color	string	The background color of the dialog box.
border	object	An object defining the border's properties.

Sources: src/components/Dialog.ts:11-15

Example Usage in GameOverScreen:

// src/screens/GameOverScreen.ts:100-106
{
  component: new Dialog(),
  position: (): Coordinates => new Coordinates(500, 200),
  props: (): DialogProps => ({
    width: 600,
    height: 600
  })
},

Sources: src/screens/GameOverScreen.ts:100-106

MuteButton

The MuteButton is a toggle that allows the player to mute or unmute the game's audio. It interacts directly with the SettingsStore to persist the volume state. The button's appearance changes based on the current volume level.

The diagram below shows the interaction flow when a user clicks the mute button.

Logo

The Logo component displays the "Farm Siege" game logo. It is composed of two separate sprite images, "farm" and "siege". It includes an optional progress property that allows it to be animated, revealing one part of the logo at a time. This is used in the SplashScreen for an introductory animation.

• If progress is < 0.5, no parts are shown.
• If progress is >= 0.5, the "Farm" part is shown.
• If progress is >= 1, both "Farm" and "Siege" parts are shown.

Sources: src/components/Logo.ts:15-24

Informational Displays

These components are used to present game state information to the player, such as score and highscore rankings.

ScoreCounter

The ScoreCounter is a simple UI element displayed during active gameplay (GameScreen). It shows the player's current score by fetching data from the StatsStore. It consists of a semi-transparent background rectangle and a text element.

// src/components/ScoreCounter.ts:24-34
{
  component: new Text(),
  position: (): Coordinates => new Coordinates(2, 30),
  props: (): TextProps => {
    const statsStore = <StatsStore>this.stores.score;

    return {
      text: `${statsStore.content.score} Points`,
      align: 'center',
      color: '#fff',
      font: 'Heartbit',
      size: 32
    };
  }
}

Sources: src/components/ScoreCounter.ts:24-34

ScoreEffect

The ScoreEffect is a visual feedback component that displays a temporary text animation (e.g., +100) when the player scores points. It takes a value prop to determine the text to display. This component is used throughout the game, such as when harvesting a plant or shooting a rabbit.

Sources: src/components/ScoreEffect.ts:10-21

Highscores and HighscoreItem

The highscore display is managed by two components:

1. Highscores: A container component that fetches the list of highscores from the MiscStore. It uses the Repeating logical component to render a list of HighscoreItem instances.
2. HighscoreItem: A component responsible for rendering a single row in the highscore list, including the position, name, and score.

The following diagram illustrates the composition of the highscore list.

Input Components

These components are related to user input, including text fields and visual representations of controller/keyboard buttons.

Input

The Input component is a custom text field rendered on the canvas. It is used on the GameOverScreen to allow players to enter their name for the highscore list. It is not a native HTML input element but is implemented within the game's canvas rendering system.

Key Features:

• Placeholder Text: Displays placeholder text when the input is empty.
• Max Length: Enforces a character limit.
• onEnter Callback: A function that is executed when the user presses the "Enter" key.

Sources: src/screens/GameOverScreen.ts:121-128

The flow for submitting a score via the Input component is as follows:

Instructional Buttons

The game uses a set of components to visually represent keyboard and controller buttons within the "How to Play" (HelpScreen) section. These components extend a BaseButton class and typically accept a pressed boolean prop to change their visual state.

Examples include:

• KeyboardCButton
• KeyboardSpaceButton
• ControllerBButton
• ControllerXButton

These are used in the various Instructions components to demonstrate game controls.

Sources: src/components/instructions/Instructions7.ts:114-127, src/components/instructions/Instructions8.ts:108-121