Relevant source files

The following files were used as context for generating this wiki page: - [src/script.js](https://github.com/SaeedX302/FFItems/blob/main/src/script.js) - [index.html](https://github.com/SaeedX302/FFItems/blob/main/index.html) - [src/styles.css](https://github.com/SaeedX302/FFItems/blob/main/src/styles.css) - [README.md](https://github.com/SaeedX302/FFItems/blob/main/README.md) - [CONTRIBUTING.md](https://github.com/SaeedX302/FFItems/blob/main/CONTRIBUTING.md) - [robot.txt](https://github.com/SaeedX302/FFItems/blob/main/robot.txt)

# Feature: Item Search The Item Search feature is the core functionality of the FFItems application, providing a user interface to search, filter, and view details about Free Fire game items and assets. Users can query items by name, ID, or description, and refine results using multiple filter criteria such as rarity, item type, and collection. The system is designed as a single-page application that dynamically fetches, filters, and renders data on the client side. The feature encompasses data fetching from JSON sources, state management for filters and results, dynamic UI rendering for the item grid and detail modals, and responsive layout adjustments for various screen sizes. It supports two main data types: "Items" (detailed game items) and "Assets" (raw image assets). Sources: [index.html:13](), [src/script.js]() ## Architecture Overview The Item Search feature is implemented entirely on the client-side using HTML, CSS, and vanilla JavaScript. The architecture revolves around fetching static JSON data, managing application state in global variables, and dynamically re-rendering the UI in response to user interactions. This diagram illustrates the high-level flow from application load to displaying item details. ```mermaid flowchart TD subgraph Initialization A[Page Load] --> B{Fetch Data}; B --> B1[fetchIcons() from itemData.json]; B --> B2[fetchAssets() from assets.json]; B1 --> C[Process & Map Item Data]; C --> D[Populate Filter UI]; D --> E[Initial Render]; end subgraph User Interaction F[User Enters Search/Filter] --> G[applyFilters()]; G --> H{Filter Data Array}; H --> I[sortIcons()]; I --> J[renderIcons()]; J --> K[Update Pagination]; end subgraph Item Details L[User Clicks Item Card] --> M[showModal()]; M --> N[Display Item Details]; N --> O[User Clicks Close]; O --> P[closeModal()]; end E --> F; J --> L; ``` Sources: [src/script.js:46-148](), [index.html:36-150]() ## UI Components The user interface is defined in `index.html` and styled by `src/styles.css`. It consists of a header with filter tabs, a collapsible sidebar for advanced filtering, a main content area for displaying results, and a modal for item details. | Component ID | Element | Description | Source File | | :--- | :--- | :--- | :--- | | `search` | `

Sources: [index.html:36-150](), [src/styles.css:112-138, 386-444]()

## Data Fetching and State Management

### Data Sources

The application fetches data from two primary JSON files upon loading.

1.  **Item Data**: Fetched from `https://cdn.jsdelivr.net/gh/9112000/FFItems@30594bf/assets/itemData.json` by the `fetchIcons()` function. This file contains an array of objects, each representing a game item with detailed properties.
2.  **Asset Data**: Fetched from a local `assets/assets.json` file by the `fetchAssets()` function. This file contains an array of URLs pointing to raw asset images.

Sources: [src/script.js:183-190, 227-230]()

### State Variables

Application state is managed through a set of global JavaScript variables.

Sources: [src/script.js:1-16]()

### Data Processing

The `fetchIcons` function is responsible for processing the raw item data into a more usable format. It maps each raw item to a new object, standardizing property names, creating full image URLs, and mapping rarity codes to display names and card images.

This diagram shows the mapping from a raw item in `itemData.json` to a processed object in the `iconsData` array.
```mermaid
graph TD
    subgraph Raw Data (itemData.json)
        A["{ 'itemID': 123, 'description': 'Item Name', 'icon': 'icon_name', 'Rare': 'PURPLE' }"]
    end
    
    subgraph fetchIcons() Processing
        B[Map Raw Item]
    end

subgraph Processed Object (iconsData)
        C["{<br/>  itemId: 123,<br/>  name: 'Item Name',<br/>  iconName: 'icon_name',<br/>  Rare: 'PURPLE',<br/>  displayRarity: 'EPIC',<br/>  cardImageUrl: '.../EPIC.png',<br/>  iconUrl: '.../icon_name.png'<br/>}"]
    end

A --> B --> C
```
Sources: [src/script.js:186-200]()

## Search, Filtering, and Sorting

### Search and Filter Execution Flow

User interactions, such as typing in the search box or selecting a filter, trigger the `applyFilters()` function. This function is the central hub for refining the dataset.

The following sequence diagram shows how a user's search action flows through the system to update the UI.

```mermaid
sequenceDiagram
    participant User
    participant UI as "User Interface"
    participant Script as "script.js"

User->>UI: Types 'gloo' in search box
    UI->>Script: oninput event triggers filterIcons()
    Note over Script: filterIcons() calls applyFilters()

Script->>Script: applyFilters()
    activate Script
    Note right of Script: Get search query ('gloo')
    Note right of Script: Get current filters (rarity, type, etc.)
    Script->>Script: Filter 'iconsData' or 'assetsData' array based on all criteria
    Note right of Script: Store result in 'filteredData'
    Script->>Script: sortIcons()
    Script->>Script: renderIcons()
    deactivate Script
    
    Script->>UI: Update #iconGrid with new cards
    UI-->>User: Display filtered items
```
Sources: [src/script.js:60, 410-438]()

### Core Logic: `applyFilters()`

The `applyFilters()` function rebuilds the `filteredData` array from the source data (`iconsData` or `assetsData`) based on the current state of all filters.

-   **Search Query**: It checks if the item's name, ID, or icon name includes the search string.
-   **Type Filter**: Matches `item.itemType` against `currentTypeFilter`.
-   **Rarity Filter**: Matches `item.displayRarity` against `currentRarityFilter`.
-   **Collection Filter**: Matches `item.collectionType` against `currentCollectionFilter`.

All conditions must be met for an item to be included in the results. After filtering, it resets `currentPage` to 0 and calls `renderIcons()` to update the view.

Sources: [src/script.js:410-438]()

### Sorting: `sortIcons()`

The `sortIcons()` function sorts the `filteredData` array in-place based on the `currentSort` state variable.

-   **`id`**: Sorts numerically by `itemId`.
-   **`name`**: Sorts alphabetically by `name`.
-   **`rarity`**: Sorts by a predefined rarity order (Artifact > Mythic > Epic, etc.).

Sources: [src/script.js:440-463]()

### Clearing Filters

The `clearFilters()` function provides a way for users to reset the search. It clears the `currentTypeFilter`, `currentCollectionFilter`, and `currentRarityFilter` variables, updates the UI state of the filter buttons, and then calls `applyFilters()` to re-render the complete, unfiltered list of items.

Sources: [src/script.js:500-515]()

## Rendering and Display

### Item Grid and Pagination

The `renderIcons()` function is responsible for displaying the items in the `filteredData` array.

1.  It calculates the slice of `filteredData` to display based on `currentPage` and `itemsPerPage`.
2.  It clears the existing content of the `#iconGrid` container.
3.  If no items are found, it displays a "No items found" message.
4.  For each visible item, it creates an `.icon-card` `<div>`, populates it with the item's background card and icon image, and attaches an `onclick` event listener to trigger the `showModal()` function.
5.  Finally, it calls `updatePagination()` to render the page navigation buttons.

Sources: [src/script.js:465-531]()

### Item Detail Modal

When a user clicks an item card, the `showModal()` function is called with the corresponding item object.

-   It populates the modal's elements (`#modalImage`, `#modalDescription`, etc.) with the item's data.
-   It handles differences between "item" and "asset" data types, hiding irrelevant fields for assets.
-   It adds the `.show` class to the modal container (`#modal`) to make it visible. The corresponding CSS handles the transition and styling.

Sources: [src/script.js:548-608](), [index.html:125-144](), [src/styles.css:483-547]()

## Conclusion

The Item Search feature is a comprehensive, client-side module that forms the backbone of the FFItems application. It effectively combines data fetching, state management, and dynamic DOM manipulation to create a fast and responsive user experience for browsing a large dataset of game items. The architecture is straightforward, relying on vanilla JavaScript to handle all logic from filtering and sorting to rendering, making it a self-contained and efficient system for its purpose.

Sources: [src/script.js](), [index.html]()```
<details>
<summary>Relevant source files</summary>
The following files were used as context for generating this wiki page:

- [src/script.js](https://github.com/SaeedX302/FFItems/blob/main/src/script.js)
- [index.html](https://github.com/SaeedX302/FFItems/blob/main/index.html)
- [src/styles.css](https://github.com/SaeedX302/FFItems/blob/main/src/styles.css)
- [README.md](https://github.com/SaeedX302/FFItems/blob/main/README.md)
- [CONTRIBUTING.md](https://github.com/SaeedX302/FFItems/blob/main/CONTRIBUTING.md)
- [robot.txt](https://github.com/SaeedX302/FFItems/blob/main/robot.txt)
</details>

# Feature: Item Search

The Item Search feature is the core functionality of the FFItems application, providing a user interface to search, filter, and view details about Free Fire game items and assets. Users can query items by name, ID, or description, and refine results using multiple filter criteria such as rarity, item type, and collection. The system is designed as a single-page application that dynamically fetches, filters, and renders data on the client side.

The feature encompasses data fetching from JSON sources, state management for filters and results, dynamic UI rendering for the item grid and detail modals, and responsive layout adjustments for various screen sizes. It supports two main data types: "Items" (detailed game items) and "Assets" (raw image assets).

Sources: [index.html:13](), [src/script.js]()

## Architecture Overview

The Item Search feature is implemented entirely on the client-side using HTML, CSS, and vanilla JavaScript. The architecture revolves around fetching static JSON data, managing application state in global variables, and dynamically re-rendering the UI in response to user interactions.

This diagram illustrates the high-level flow from application load to displaying item details.

```mermaid
flowchart TD
    subgraph Initialization
        A[Page Load] --> B{Fetch Data};
        B --> B1[fetchIcons() from itemData.json];
        B --> B2[fetchAssets() from assets.json];
        B1 --> C[Process & Map Item Data];
        C --> D[Populate Filter UI];
        D --> E[Initial Render];
    end

subgraph User Interaction
        F[User Enters Search/Filter] --> G[applyFilters()];
        G --> H{Filter Data Array};
        H --> I[sortIcons()];
        I --> J[renderIcons()];
        J --> K[Update Pagination];
    end
    
    subgraph Item Details
        L[User Clicks Item Card] --> M[showModal()];
        M --> N[Display Item Details];
        N --> O[User Clicks Close];
        O --> P[closeModal()];
    end

E --> F;
    J --> L;
```
Sources: [src/script.js:46-148](), [index.html:36-150]()

## UI Components

The user interface is defined in `index.html` and styled by `src/styles.css`. It consists of a header with filter tabs, a collapsible sidebar for advanced filtering, a main content area for displaying results, and a modal for item details.