tarkov.dev

repository·main·Indexed 42 days ago

https://github.com/the-hideout/tarkov-dev

An open-source, developer-first website for Escape from Tarkov information, providing data on items, barters, flea market prices, and quests via a GraphQL API. The project includes a React-based frontend using Rsbuild and a suite of ecosystem tools including the Tarkov API, Tarkov Data, and the Stash Discord bot.

Tokens
13.4K
Snippets
51
Records
59
Agent score
51%

What's inside tarkov.dev

  1. Overview of the tarkov.dev ecosystem

    main

    The tarkov-dev project is part of a larger ecosystem of tools and services provided by the-hideout:

    • Stash: The official tarkov.dev Discord bot.
    • Tarkov API: The GraphQL API that powers the website and other tools.
    • Tarkov Data: Open source structured data for Escape from Tarkov.
    • Tarkov Image Generator: Tool to generate images from the local icon cache.
    • Tarkov Data Manager: A tool for core contributors to update items in the database and sync information to Cloudflare workers.
    • Cache: A bespoke caching service for frequent GraphQL API queries.
    • Status: The official status page for tarkov.dev and its API.
  2. Deploy changes to production

    main

    The deployment process follows a specific workflow managed by core members of the-hideout:

    1. Open a pull request with your changes.
    2. Ensure CI is passing.
    3. A core member will run .deploy to development to deploy your changes to the development environment for final validation.
    4. If validated, a reviewer will provide feedback.
    5. A core member will run .deploy on your pull request to branch deploy your changes to production.
    6. Once approved, your PR will be merged and changes will be auto-deployed to production.
  3. Use VS Code Dev Container for development

    main

    You can use a VS Code Dev Container to provide a pre-configured development environment. Once the container starts, it automatically runs pnpm install && pnpm start.

    1. Open the VS Code command palette (cmd + shift + p or ctrl + shift + p).
    2. Select Dev Containers: open folder in container....
    3. Select the local path to the tarkov-dev repository.
    4. Once the container builds and starts, access the site at http://localhost:3000.
    cmd + shift + p / ctrl + shift + p
    > Dev Containers: open folder in container...
  4. Set up local development for tarkov.dev

    main

    To build and test the site locally, follow these steps to configure your environment and start the development server:

    1. Install Node.js and enable pnpm: Use nvm to ensure you are using the correct Node.js version, then enable corepack to use pnpm.
    2. Install dependencies: Run pnpm install.
    3. Configure environment variables: Copy .env.example to .env. No values need to be changed for local development.
    4. Start the server: Run pnpm start to launch the development server.
    5. Access the site: Open http://localhost:3000 in your browser.

    Note: To update data, run pnpm run prebuild.

    # 0. Install Node.js and enable pnpm
    nvm use
    corepack enable
    
    # 1. Install dependencies
    pnpm install
    
    # 2. Copy .env.example to .env
    cp .env.example .env
    
    # 3. Start development server
    pnpm start
  5. Understand how quest activity is determined

    main

    The selectQuestsWithActive selector calculates whether a quest is currently active for a user. A quest is considered active if it meets the following criteria based on the user's settings:

    1. Not Completed/Failed: The quest ID must not be in the completedQuests or failedQuests lists for the current game mode.
    2. Tracker Settings: If useTarkovTracker is disabled in settings, all quests are considered active.
    3. Player Level: The user's playerLevel must be greater than or equal to the quest's minPlayerLevel.
    4. Faction Match: If the quest has a specific factionName (other than "Any"), the user's pmcFaction must match it.
    5. Task Requirements: All taskRequirements must be satisfied based on the user's progress (e.g., specific tasks being marked as complete in settings).
    6. Trader Requirements: Trader level requirements must be met based on the user's current trader levels in settings.
  6. Understand the processed item data structure

    main

    When items are fetched, they undergo a processing step that adds several useful computed properties to each item object:

    • slots: Calculated as width * height.
    • properties.weight: Normalized from the top-level weight field.
    • containsItems: Filtered to remove null values (for non-gun items).
    • buyForBest: The cheapest vendor option (sorted by priceRUB).
    • buyForTradersBest: The cheapest vendor option excluding the flea-market.
    • sellForBest: The most profitable vendor option (sorted by priceRUB descending).
    • sellForTradersBest: The most profitable vendor option excluding the flea-market.
    • priceCustom: An optional field used when setCustomSellValue is called.
  7. Update GraphQL API language support

    main

    To update the supported languages used by the site via the GraphQL API, you must edit the supported-languages.json file located in the src/data/ directory.

    // src/data/supported-languages.json
    // Edit this file to update GraphQL API language support
  8. Configure rstest using defineConfig

    main

    The rstest.config.ts file uses the defineConfig function from @rstest/core to configure the testing environment. It allows spreading existing configurations (like rsbuildConfig) and overriding or adding specific testing parameters.

    Key configuration options include:

    • testEnvironment: Specifies the environment for tests. In this project, it is set to "jsdom" to simulate a browser environment.
    • globals: A boolean indicating whether to inject global variables into the test environment. Set to true here.
    • setupFiles: An array of file paths to run before each test file. This is used to initialize the testing environment (e.g., ./rstest.setup.ts).
    import { defineConfig } from "@rstest/core";
    import rsbuildConfig from "./rsbuild.config";
    
    export default defineConfig({
        ...rsbuildConfig,
        testEnvironment: "jsdom",
        globals: true,
        setupFiles: ["./rstest.setup.ts"],
    });
  9. Configure Prettier formatting options

    main

    The project uses Prettier for code formatting. The following configuration is defined in prettier.config.mjs to ensure consistent code style across the repository:

    • printWidth: Sets the line length that the printer will wrap on at 120 characters.
    • singleQuote: Set to false, meaning double quotes are used for string literals.
    • trailingComma: Set to "all", ensuring trailing commas are added wherever possible (including function arguments).
    • tabWidth: Sets the number of spaces per indentation level to 4.
    • quoteProps: Set to "consistent", which enforces consistent quoting of object properties (e.g., if one property needs quotes, all properties in that object will be quoted).
    const config = {
        printWidth: 120,
        singleQuote: false,
        trailingComma: "all",
        tabWidth: 4,
        quoteProps: "consistent",
    };
    
    export default config;
  10. Configure Stylelint for tarkov.dev

    main

    The project uses stylelint-config-standard as its base configuration. The following custom rules are applied to override or extend the standard configuration:

    • length-zero-no-unit: Disabled (null). Allows using units (like 0px) for zero values.
    • alpha-value-notation: Set to number. Requires alpha values to be represented as numbers.
    • shorthand-property-no-redundant-values: Disabled (null).
    • font-family-name-quotes: Set to always-unless-keyword. Requires quotes for font family names unless they are a keyword.
    • selector-class-pattern: Set to .+. Allows any class name pattern.
    • no-descending-specificity: Disabled (null).
    /** @type {import(
  11. ESLint configuration for tarkov-dev

    main

    The project uses a flat configuration format via eslint.config.ts. It targets JavaScript and TypeScript files within the src/ and scripts/ directories.

    Key configuration details:

    • Supported File Patterns: src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx} and scripts/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}.
    • Plugins & Extends: Uses @eslint/js (recommended), typescript-eslint (recommended), and @eslint-react/eslint-plugin (recommended-typescript).
    • Language Options:
      • Globals: Includes globals.browser and process (readonly).
      • Parser: tseslint.parser.
      • Parser Options: Uses projectService: true and sets tsconfigRootDir to the current directory.
    • Ignored Directories: build/**, dist/**, eslint.config.ts, prettier.config.mjs, stylelint.config.mjs, rsbuild.config.ts, rstest.config.ts, and rstest.setup.ts.
    import globals from "globals";
    import tseslint from "typescript-eslint";
    import { defineConfig } from "eslint/config";
    import eslintReact from "@eslint-react/eslint-plugin";
    import eslintJs from "@eslint/js";
    
    export default defineConfig([
        {
            ignores: [
                "build/**",
                "dist/**",
                "eslint.config.ts",
                "prettier.config.mjs",
                "stylelint.config.mjs",
                "rsbuild.config.ts",
                "rstest.config.ts",
                "rstest.setup.ts",
            ],
        },
        {
            files: ["src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}", "scripts/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
            plugins: { eslintJs },
            extends: [
                eslintJs.configs.recommended,
                tseslint.configs.recommended,
                eslintReact.configs["recommended-typescript"],
            ],
            languageOptions: {
                globals: { ...globals.browser, process: "readonly" },
                parser: tseslint.parser,
                parserOptions: {
                    projectService: true,
                    tsconfigRootDir: import.meta.dirname,
                },
            },
            rules: {
                "@typescript-eslint/no-unused-vars": "warn",
                "@eslint-react/no-missing-key": "warn",
                "no-useless-assignment": "warn",
            },
        },
    ]);