{"id":25867198,"url":"https://github.com/sans-script/valorant-agents-showcase","last_synced_at":"2025-06-30T15:32:53.307Z","repository":{"id":249526095,"uuid":"831168762","full_name":"sans-script/valorant-agents-showcase","owner":"sans-script","description":"This repo features a React component designed to replicate the agent collection screen from the popular game Valorant. It includes a slider effect and pagination to navigate through a list of agents. The component showcases various aspects of React's functionality, such as state management, side effects, and event handling.","archived":false,"fork":false,"pushed_at":"2024-09-30T23:57:29.000Z","size":3015,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T03:35:25.485Z","etag":null,"topics":["api","nextjs14","riot-games","valorant"],"latest_commit_sha":null,"homepage":"https://valorant-agents-showcase.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sans-script.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-19T20:36:02.000Z","updated_at":"2024-09-30T23:57:26.000Z","dependencies_parsed_at":"2025-03-02T03:34:32.670Z","dependency_job_id":"b901abf5-cd58-4f06-9446-88bee76a15bf","html_url":"https://github.com/sans-script/valorant-agents-showcase","commit_stats":null,"previous_names":["sans-script/valorant-agents-showcase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sans-script/valorant-agents-showcase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fvalorant-agents-showcase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fvalorant-agents-showcase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fvalorant-agents-showcase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fvalorant-agents-showcase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sans-script","download_url":"https://codeload.github.com/sans-script/valorant-agents-showcase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fvalorant-agents-showcase/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262800816,"owners_count":23366442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","nextjs14","riot-games","valorant"],"created_at":"2025-03-02T03:34:23.590Z","updated_at":"2025-06-30T15:32:53.265Z","avatar_url":"https://github.com/sans-script.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# README\n\n## AgentSlider Component\n\n### Overview\n\nThis Next.js website is designed to replicate the agent collection screen from the game Valorant. It features a slider that displays agents with their respective abilities and information, providing a visually engaging and immersive user experience.\n\n![screencapture-valorant-agents-showcase-vercel-app-2024-07-21-11_34_27](https://github.com/user-attachments/assets/7165e340-d6c8-4fca-8ff7-0c01fdfa9089)\n\n### Features\n\n- **Agent Collection Display**: Showcases a list of agents, complete with icons, abilities, and detailed information.\n- **Pagination and Navigation**: Users can navigate through the agents using buttons or mouse wheel, with a seamless circular pagination.\n- **Dynamic Styling**: Background and visual effects adapt based on the currently selected agent.\n\n### React Concepts Applied\n\n#### 1. **State Management**\n\nThe `useState` hook is used to manage the component's state:\n- `agents`: Contains the list of fetched agents.\n- `selectedAgentIndex`: Tracks the currently selected agent's index.\n- `startIndex`: Manages the starting index for the visible subset of agents.\n\n#### 2. **Side Effects**\n\nThe `useEffect` hook handles side effects:\n- **Data Fetching**: Fetches agent data from an external API when the component mounts.\n- **Pagination Update**: Updates the visible subset of agents and the `selectedAgentIndex` based on the `startIndex` and the total list of agents.\n\n#### 3. **Event Handling**\n\n- **Mouse Wheel**: Enables navigation through the agent list using the mouse wheel.\n- **Button Clicks**: Allows navigation through \"Prev\" and \"Next\" buttons.\n\n#### 4. **Dynamic Styling**\n\n- **Background Gradient**: The background is dynamically set based on the selected agent's gradient colors using inline styles.\n- **Agent Highlighting**: The border and opacity of agent icons are adjusted based on whether they are currently selected.\n\n### 5. **Component Composition**\n\n- **AgentSlider Component**: Manages the slider's display logic, including agent selection and pagination.\n- **AgentInfo Component**: Displays detailed information about the selected agent.\n- **SelectedAgent Component**: Showcases the currently selected agent prominently.\n- **Hooks**: Custom hooks (`useAgents`, `useAgentNavigation`, `useMouseWheel`) manage data fetching, navigation logic, and mouse wheel events.\n\n### Pagination and Selection\n\nThe `AgentSlider` component implements circular pagination to display a subset of agents, creating a continuous scrolling effect:\n\n1. **Slicing and Concatenating**: The list of agents is sliced to show a fixed number of agents (e.g., 13). If the end of the list is reached, it wraps around to the beginning.\n2. **Updating Selection**: The `selectedAgentIndex` is updated to reflect the center of the visible subset of agents, ensuring that the currently selected agent is always centered.\n\n### Conclusion\n\nThe `AgentSlider` component combines several advanced React concepts to create a dynamic and engaging user interface. By leveraging state management, side effects, event handling, dynamic styling, and custom hooks, the component provides a seamless and immersive experience for viewing and interacting with agents of Valorant.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fvalorant-agents-showcase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsans-script%2Fvalorant-agents-showcase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fvalorant-agents-showcase/lists"}