DOCSEARCHbyAlgolia
Submit Docs

Cocogoat Documentation

repository·main·Indexed 22 days ago

https://github.com/yuehaiteam/cocogoat

A web-based utility toolbox for Genshin Impact players featuring local achievement recognition via PaddleOCR and onnxruntime. It provides tools for achievement management, browser-side OCR for privacy, and a lightweight client (cocogoat-control) for simulating mouse and keyboard interactions. The project is built with TypeScript and Vue.js, supporting integration via iframes and communication through the postMessage API.

Tokens
25.3K
Snippets
86
Records
122
Agent score
78%

What's inside cocogoat

  1. Overview of Cocogoat Web

    main
    Cocogoat is a web-based toolbox for Genshin Impact. It provides tools for achievement recognition and management. The project is designed to be lightweight and accessible across different platforms (Windows, non-Windows, and mobile) while offering a web interface that can be integrated easily.

  2. Communicate with the scanner via postMessage

    main

    The scanner interacts with the parent application using the postMessage API. All messages follow a standard format:

    {
    app: 'cocogoat.scanner.achievement',
    event: 'ready' | 'result', // Sent from scanner to parent
    command: 'start' | 'reset', // Sent from parent to scanner
    data: ...
}
    {
    app: 'cocogoat.scanner.achievement',
    event: 'ready',
    data: undefined
}

  3. Understand Achievement Scanning features

    main

    The achievement scanning feature uses a specialized version of PaddleOCR and onnxruntime to perform Optical Character Recognition (OCR) directly within your web browser.

    Key capabilities:

    • Browser-based OCR: No data is sent to a server for recognition.
    • Lightweight Client: Uses a client (approx. 440 KB) to enable necessary automation.
    • Language Support: Currently supports both Chinese and English.
    • Mobile Support: Capable of recognizing achievements from mobile phone screenshots.

  4. Achievement Management Features

    main

    The management suite allows users to:

    • Filter achievements by category, task, or commission.
    • View achievement trigger conditions (e.g., displaying the specific task name if a task triggered the achievement).

  5. Understand Achievement Management features

    main

    The achievement management system allows users to organize and inspect their progress.

    Key capabilities:

    • Filtering: Filter achievements by category, task, or commissions.
    • Trigger Conditions: View the specific conditions required to trigger an achievement. If an achievement is tied to a task, the task name is displayed.

  6. Achievement Recognition Features

    main

    Cocogoat supports local achievement recognition directly in the browser using:

    • PaddleOCR and onnxruntime for local client-side recognition.
    • Mobile scanning: Supports scanning screenshots via mobile devices.
    • Simulated clicks: Can be paired with a lightweight client (approx. 440 KB) to implement simulated mouse/keyboard clicks, bypassing browser limitations.

  7. Use cocogoat-web locally via singlefile build

    main

    To run cocogoat-web without an internet connection or as a standalone tool, you can use the single-file build.

    1. Download the singlefile build from the GitHub Actions workflow.
    2. Open the downloaded local HTML file using Chrome version 91 or higher.

  8. Run and build cocogoat-web locally

    main

    For developers contributing to the project, use pnpm to manage the development and build processes. The project supports both Vite (recommended for development) and webpack (recommended for deployment).

    Development Commands

    # Run the development server (uses Vite)
pnpm serve

# Build the project (uses webpack)
pnpm build

# Build as a single HTML file (uses Vite)
pnpm build:singlefile
    pnpm serve
pnpm build
pnpm build:singlefile

  9. Integrate Cocogoat Web via iframe

    main

    Cocogoat Web is a web-based project that can be integrated into other web-based applications using an <iframe>. To ensure the scanner can capture the screen for achievement recognition, you must include the allow="display-capture" attribute in your iframe tag.

    <iframe src="https://cocogoat.work/frames/achievement-scanner" frameborder="0" allow="display-capture">
</iframe>

  10. Set up the Cocogoat development environment

    main

    The project is built with TypeScript and Vue.js. You can use either Vite or webpack as the toolchain. It is recommended to use Vite for active development and webpack for final testing and deployment.

    Use pnpm to run the following commands:

    # Run locally using Vite
pnpm serve

# Build production using webpack
pnpm build

# Build a single-file version using Vite
pnpm build:singlefile

  11. Manage achievements in the AchievementIndex view

    main

    The AchievementIndex component is the primary interface for viewing, searching, and managing game achievements. It provides several key capabilities:

    Core Features

    • Progress Tracking: Displays total completed achievements and potential rewards (e.g., Primogems).
    • Filtering & Sorting: Filter achievements by version (including unpublished versions), quest type (WQ for World Quests, IQ for Daily Commissions, AQ for Archon Quests), and toggle 'Unfinished First' or 'Hide Finished' modes.
    • Search & Navigation: Search by achievement name, description, or ID. The view supports a 'Locate' mode to jump directly to a specific achievement in the list.
    • Data Management:
      • Import: Use the ImportDialog to bring in achievement data.
      • Export: Use the ExportDropdown to save achievement progress.
      • Clear: Options to clear current progress or all progress via doClear.
      • Scanner: A ScannerDialog is available to trigger achievement recognition/scanning.

    Data Model & State

    • Achievement progress is stored in the global store.value.achievement2 object.
    • Achievement data is categorized into groups (e.g., by version or type) and can be filtered dynamically.
    <!-- The component uses several sub-components for its functionality -->
<achievement-item
    :i="achievement"
    :fin="achievementFin[id]"
    @check="updateFinished(id)"
    @input-date="achievementFin[id].timestamp = $event"
    @input-current="updateCurrent(id, Number($event))"
    @input-partial="updatePartial(id, $event[0], $event[1])"
    @click-title="detail = achievement"
/>

  12. Switching installer types via URL query

    main

    The installer view supports multiple distribution types (e.g., different regions or platforms) via the type query parameter in the URL.

    • The default type is pc-cn if no query is provided.
    • The component uses the type parameter to look up the corresponding API endpoint in the urls configuration.
    • Changing the type query parameter triggers a reload of the package data.