Skip to content
Thanh Nhat Quang Mai edited this page Oct 22, 2025 · 17 revisions

Description

This feature introduces a Book system that allows players to explore in-game information about Towers, Enemies, Currencies, and Heroes.

From the main menu, players can click the Book button to open the Book menu, which displays three available books:

  • Enemy Book
  • Tower Book
  • Currency Book
  • Hero Book

Selecting one of these books opens it, allowing players to browse through different types within that category (e.g., specific towers, enemy variants, currency types, or different heroes). When a type is selected, the right panel updates to display its image, description, and detailed stats.

The book section includes immersive audio effects:

  • Continuous background music throughout the book section, including the main book menu
  • Book opening, book closing, and page flip sound effects

All book data including images, names, and stats is loaded from configurable JSON files located in:

assets/configs/

The corresponding files are:

  • tower.json
  • enemy.json
  • currency.json

If you want to make certain types locked, simply add the key-value pair "locked": true to that type’s JSON entry:

"droneEnemy": {
      "name": "Drone",
      ...
      "locked": true
    }

Locked entries will appear unavailable in the Book UI until unlocked through gameplay or updates.

Key Components

MainBookDisplay and MainBookDisplayActions

A component that displays a menu of books and provides navigation to each book category: Towers, Enemies, and Currencies.

  • Method renderBackground loads the image to fill the screen.
  • Method renderContentList builds the main button row (Enemies, Currencies, Towers). When click those button, it will trigger the event goToEnemy, goToCurrency, and goToTower and set screen to corresponding book page.
  • Method renderExitButton creates the exit button to the main menu page.

BookComponent

A component that represents a book that contains multiple deck entries for different categories such as towers, enemies, and currencies. Each deck stores detailed stats or information for display in the book UI.
There are three types of BookComponent:

  • CurrencyBookComponent: builds a currency book, loads information from currency.json and stores in the list of deck components.
  • TowerBookComponent: builds a tower book, loads information from tower.json and stores in the list of deck components.
  • EnemyBookComponent: builds a enemy book, loads information from enemy.json and stores in the list of deck components.
  • HeroBookComponent: builds a hero book, loads information from heroConfig, Engineer Config, SamuraiConfig and stores in the list of deck components.

Method getDecks returns the list of DeckComponent instances.


BookDisplay and BookDisplayActions

A component that displays one book category: Towers, Enemies, and Currencies.

  • Method renderBackground loads the image to fill the screen.
  • Method renderContentList constructs the left page of the book, which contains a list of clickable images representing each entities of the category. When an image is clicked, the details of the corresponding entry are displayed on the right page of the book.
  • Method renderRightDeck updates the right page of the book to display information corresponding to the selected individual.
  • Method renderExitButton creates the exit button to the book menu page.
  • Method playSound retrieves and plays a sound asset

BookOnMainGame

A Window pop up that displays the whole book of towers, enemies, and currencies inside main game.

  • Method renderBackground loads the image to fill the screen.
  • Method setPage to replace the current page content with the given actor page.
  • Method buildHomePage builds the home page with button to each books.
  • Method buildEnemyPage builds the Enemies section page.
  • Method buildTowerPage builds the Towers section page.
  • Method buildCurrencyPage builds the Enemies section page.
  • Method buildHeroPage builds the Heroes section page.
  • Method buildBookBody builds the left grid and right detail panel for a given book.
  • Method repaintRightPanel builds the right-side detail panel for the selected deck.
  • Method buildSectionPage builds the whole book page with given book body.
  • Method dismiss closes the book and resume the game.
  • Method triggerPauseSystem pauses the game.

Design Process

  • EncapsulationBookDisplay and MainBookDisplay isolate UI rendering details from the data logic, improving maintainability.

  • MVC SeparationBookComponent handles data, BookDisplay handles presentation, and MainBookDisplayActions manages control and navigation.

  • Single Responsibility Principle → Clear division between configuration loading, display rendering, and navigation logic.

UML Diagram

book-uml
  • BookComponent: Base class for all book category.
  • TowerBookComponent, EnemyBookComponent, CurrencyBookComponent: Specialized book types.
  • BookDisplay: Renders all decks corresponding to a specific book category and manages user interactions within the UI.
  • MainBookDisplay: Displays the main book menu and provides navigation between different book categories.

Clone this wiki locally