DOCSEARCHbyAlgolia
Submit Docs

5etools Documentation

repository·main·Indexed 19 days ago

https://github.com/5etools-mirror-3/5etools-src

A comprehensive digital toolkit for Dungeons & Dragons 5th Edition providing rules, data, and character management tools. This repository contains the source code for version 2.33.3, including ESLint configurations for code quality, implementation details for web app metadata and favicons, and developer guidance on the toolsLoaded event.

Tokens
2K
Snippets
4
Records
7
Agent score
65%

What's inside 5etools

  3. Implement the updated favicon and web app metadata

    main

    To support the updated favicon set, Chrome Web App icons, Windows Start Menu tiles, and Apple Touch icons, include the following HTML snippet within the <head> section of every page. This ensures consistent branding across different platforms, including Android splash screens, Safari pinned tabs, and standalone app mode.

    <!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="256x256" href="favicon-256x256.png">
<link rel="icon" type="image/png" sizes="144x144" href="favicon-144x144.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon-128x128.png">
<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<!-- Chrome Web App Icons -->
<link rel="manifest" href="manifest.webmanifest">
<meta name="application-name" content="5etools">
<meta name="theme-color" content="#006bc4">

<!-- Windows Start Menu tiles -->
<meta name="msapplication-config" content="browserconfig.xml"/>
<meta name="msapplication-TileColor" content="#006bc4">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="360x360" href="apple-touch-icon-360x360.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<meta name="apple-mobile-web-app-title" content="5etools">

<!-- macOS Safari Pinned Tab and Touch Bar -->
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#006bc4">

  4. ESLint configuration for JavaScript files

    main

    The project uses a flat configuration file (eslint.config.mjs) to enforce coding standards across .js, .cjs, and .mjs files. The configuration extends @eslint/js recommended settings and applies specific rules for indentation, spacing, and syntax safety.

    Key Language Options

    • ECMAScript Version: latest
    • Source Type: module
    • Globals: Includes both browser and node environments.

    Core Coding Standards

    • Indentation: Uses tab indentation with a 1 space indent for SwitchCase.
    • Quotes: Enforces double quotes, while allowing template literals.
    • Semicolons: Set to warn and must always be present.
    • Spacing: Strict rules for arrow-spacing, block-spacing, comma-spacing, keyword-spacing, and space-before-function-paren (always).
    • Variables: Enforces no-var (use let or const) and one-var (initialized variables should not be grouped).
    • Equality: Enforces eqeqeq (strict equality), ignoring null checks.

    Ignored Files

    Files and directories specified in the CONFIG_IGNORES constant (imported from ../test/eslint/eslint-config.js) are excluded from linting.

    // Example of the configuration structure applied to JS files
{
  files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
  languageOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    globals: { ...globals.browser, ...globals.node }
  },
  rules: {
    "indent": ["error", "tab", { "SwitchCase": 1 }],
    "quotes": ["error", "double", { "allowTemplateLiterals": true }],
    "no-var": "error"
  }
}

  5. ESLint configuration for 5etools

    main

    The project uses ESLint for code quality and style enforcement. The configuration is defined in eslint.config.mjs using the Flat Config format. It targets .js, .cjs, and .mjs files and includes the following key settings:

    • Language Options: Uses ecmaVersion: "latest", sourceType: "module", and includes globals.browser to support browser-based environments.
    • Plugins: Includes vet-jquery (from 5etools-utils/eslint) to validate jQuery usage.
    • Formatting: Enforces strict formatting rules such as tab indentation, 1tbs brace style, and mandatory semicolons.
    • Exclusions: Uses CONFIG_IGNORES (imported from ./test/eslint/eslint-config.js) to define ignored files.

  6. Listen for the toolsLoaded event

    main

    The application dispatches a global toolsLoaded event on the window object once the initial loading sequence is complete. This sequence includes initializing core utilities (PrereleaseUtil, BrewUtil2, ExcludeUtil), setting up DOM elements, and attaching hash change listeners. Developers should listen for this event to ensure the application state is ready for interaction.

    window.addEventListener('toolsLoaded', () => {
	// Application is ready
});

  7. Reference: ESLint rules and settings

    main

    The following rules and configurations are applied to JavaScript files in the repository. This list is used to maintain code consistency and catch potential errors.

    // Core Configuration
languageOptions: {
  ecmaVersion: "latest",
  sourceType: "module",
  globals: { ...globals.browser }
},

// Key Rules
"vet-jquery/jquery": "warn",
"indent": ["error", "tab", { "SwitchCase": 1 }],
"quotes": ["error", "double", { "allowTemplateLiterals": true }],
"semi": ["error", "always"],
"no-var": "error",
"no-console": "error",
"prefer-template": "error",
"eqeqeq": ["error", "always", { "null": "ignore" }],
"no-unused-vars": "off",
"no-undef": "off"