Sacra Whitepaper
  • 🔥Welcome to Sacra
    • Disclaimer
    • Sacra UI Privacy Policy
    • Sacra UI Terms of Service
  • Executive Summary
  • Opportunity
    • Problem Statement
    • Market Overview
  • 🤝Ambassador Program
  • ⚔️Game Overview
    • 🗡️Heroes Overview
      • Create Hero
      • Hero Stats
      • Hero Level Up
      • Hero Status Icons
      • Reinforcement
    • 🎒Inventory
      • Items Overview
        • Items Categories
        • Items Attributes
        • Stats & Effects Description
        • Slot Structure
      • Repairing
      • Augmentation
    • 🎮Gameplay
      • 🌑Lore
      • Map
        • Adventure Searching & Creating
        • 💸Treasury
      • Starting the Adventure
        • Battle
        • Quests
        • Shrines
        • Adventure Results
    • 💱Marketplace
    • Other Features
  • 💰Tokenomics
    • General
    • $MYRD
      • Emission & Distribution
    • $SACRA
      • Emission & Distribution
      • Utility
      • Burning & Funds Posting
  • Technology
    • Blockchain Technology
    • Web Application
    • Web3Auth
  • 📈Roadmap
  • 🏰Team
  • 🔗Official Links
Powered by GitBook
On this page
  1. Technology

Web Application

Angular SPA:

The web application is designed as a Single Page Application (SPA), divided into modules that load as users navigate to the respective sections of the application. To optimize subsequent loading and facilitate version management, Service Workers are utilized. They allow caching application files and images, updating only the changed files upon release.

Module Structure and Routing:

The application is structured into the main application module, with additional modules loading as needed. These include the hero module, hero list, hero creation, hero level-up, adventures, frequently asked questions, inventory, and maps. Commonly shared components are placed in a separate shared module.

Style Structure:

To manage styles, SCSS preprocessor is employed. There are two main types of styles: component styles and global styles. Component styles use recommended CSS Custom Properties isolation. For more flexibility in organizing the component's layout, the container is defined as :host rather than an internal element wrapper. Global styles are organized to resemble the structure of designer-prepared images for layout. Each module's style files contain an index.scss file for exporting module content using the @forward preprocessing rule.

Animations:

Animations are described in a separate directory, namely src/app/shared/constants/animation. Some standard animations include element translation during appearance and disappearance, simulating left or right scrolling based on input parameters. Other animations involve the regular translation of elements during appearance and disappearance and the cascading appearance of elements from a list.

PreviousBlockchain TechnologyNextWeb3Auth

Last updated 1 year ago