Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changed Valorant Agent select Interface #365

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Changed Valorant Agent select Interface #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5f80010
Changed Valorant Agent select Interface
LHTY03 Oct 2, 2024
0d59e4d
Prettify Code: src/web/src/Pages/game/Valorant/ValorantAgents.tsx
actions-user Oct 15, 2024
9dc4bca
update valorant agent selection page
LHTY03 Nov 22, 2024
d20f2e7
Prettify Code: src/web/src/Pages/game/Valorant/ValorantAgents.tsx
actions-user Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .idea/.gitignore
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 60 additions & 0 deletions .idea/codeStyles/Project.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions .idea/codeStyles/codeStyleConfig.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions .idea/lineupx.iml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/misc.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/prettier.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

187 changes: 120 additions & 67 deletions src/web/src/Pages/game/Valorant/ValorantAgents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@
import React, { useState } from 'react';
import { Layout } from '../../../Components';
import { useNavigate } from 'react-router-dom';
import { useValorant } from '../../../hooks/index';

interface Ability {
slot: string;
displayName: string;
description: string;
displayIcon: string;
}

interface Agent {
displayName: string;
displayIcon: string;
fullPortrait: string;
background: string;
abilities: Ability[];
}

const ValorantAgents: React.FC = () => {
const { allAgents, agentDetails, setAgentDetails } = useValorant();
const navigate = useNavigate();
const [selectedAbility, setSelectedAbility] = useState<Ability | null>(null);

const handleClick = (agentName: string) => {
const formattedAgentName = agentName.replace('KAY/O', 'KAYO');
navigate(`/game/Valorant/agents/${formattedAgentName}/lineups`);
};

// @ts-ignore
// @ts-ignore
return (
<>
<Layout>
<div className="flex flex-col md:flex-row">
<div
style={{
backgroundImage: `url(${agentDetails.currentBackground})`,
}}
className="bg-cover"
>
<img src={agentDetails.currentAgent} loading="lazy" />
</div>

<div className="flex flex-col md:flex-row">
<div className="text-white p-5 flex flex-col">
<div className="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-4 ml-4 md:ml-8">
<div className="container mx-auto px-4 flex flex-col min-h-screen">
<div className="flex flex-col md:flex-row flex-grow">
{/* Grid of Agents - Modified grid-cols for mobile */}
<div className="w-full md:w-1/3 p-5">
<div className="grid grid-cols-3 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4">
{allAgents?.data.map((agent) => (
<div
className="agent-card bg-gray-800 rounded-lg overflow-hidden w-full hover:scale-105 transition-transform duration-300"
Expand All @@ -46,69 +57,111 @@ const ValorantAgents: React.FC = () => {
}}
loading="lazy"
/>
<div className="text-center py-2 text-base font-bold text-white overflow-hidden whitespace-nowrap overflow-ellipsis">
<div className="text-center py-2 text-xs md:text-base font-bold text-white overflow-hidden whitespace-nowrap overflow-ellipsis">
{agent.displayName}
</div>
</div>
))}
</div>
{allAgents?.data
.filter(
(agent) =>
agent.displayName ===
agentDetails.selectedAgentName,
)
.map((agent) => (
<div
className="abilities flex flex-wrap justify-center items-start gap-4 p-4"
key={agent.displayName}
>
<div className="grid grid-cols-2 gap-4 justify-items-center sm:flex sm:flex-row sm:flex-wrap sm:justify-center">
{agent.abilities.map(
(ability, index) =>
ability.slot !== 'Passive' && (
<div
key={index}
className="ability bg-1b2838 shadow-lg rounded-lg p-2 flex flex-col items-center justify-start w-24 sm:w-36 m-2"
>
<img
src={ability.displayIcon}
alt={ability.displayName}
className="ability-icon w-8 sm:w-10 h-8 sm:h-10 mb-2"
loading="lazy"
/>
<div className="ability-name font-semibold text-center">
{ability.displayName}
</div>
<div className="ability-description text-sm text-gray-600 overflow-auto max-h-24 p-2">
{ability.description}
</div>
</div>
),
)}
</div>
</div>
))}
</div>

{/* Large Agent Display */}
<div className="w-full md:w-2/3 bg-cover relative">
<div
style={{
backgroundImage: `url(${agentDetails.currentBackground})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
className="w-full h-full absolute top-0 left-0"
></div>
<img
src={agentDetails.currentAgent}
loading="lazy"
className="w-full h-full object-contain relative z-10"
/>
</div>
</div>
</div>

<div className="w-screen flex justify-center mt-4 mb-4">
<button
className="relative w-60 h-16 outline-none transition-all duration-100 bg-transparent border-none text-sm font-bold text-[#ddebf0] rounded-none hover:bg-[#27c39f] focus:outline-none"
onClick={() => {
if (agentDetails.selectedAgentName) {
handleClick(agentDetails.selectedAgentName);
}
}}
>
<span className="mr-4">L O C K</span>
<span>I N</span>
<div
id="clip"
className="absolute top-0 overflow-hidden w-full h-full border-[5px] border-double border-[#2761c3] shadow-inner shadow-[#195480]"
></div>
</button>
{/* Abilities, Description, and Lock In Button */}
<div className="mt-auto pr-0 md:pr-8">
{' '}
{/* Modified padding for mobile */}
<div className="flex flex-col p-4 rounded-lg">
{/* Ability Buttons and Description */}
<div className="flex flex-col md:flex-row md:justify-end md:items-start mb-4">
{/* Ability Buttons */}
<div className="w-full flex justify-between md:justify-end md:space-x-4 mb-4 md:mb-0">
{allAgents?.data
.filter(
(agent: Agent) =>
agent.displayName ===
agentDetails.selectedAgentName,
)
.map((agent: Agent) =>
agent.abilities
.filter(
(ability: Ability) =>
ability.slot !== 'Passive',
)
.map((ability: Ability, index: number) => (
<button
key={index}
className="bg-gray-700 p-3 rounded-lg hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
onClick={() =>
setSelectedAbility(ability)
}
>
<img
src={ability.displayIcon}
alt={ability.displayName}
className="w-12 md:w-20 h-12 md:h-20" /* Adjusted size for mobile */
loading="lazy"
/>
</button>
)),
)}
</div>
{/* Ability Description */}
<div className="w-full md:w-1/2 md:ml-8">
{' '}
{/* Modified width and margin for mobile */}
{selectedAbility ? (
<>
<h3 className="text-white font-bold mb-2 text-xl md:text-2xl">
{selectedAbility.displayName}
</h3>
<p className="text-gray-300 text-sm">
{selectedAbility.description}
</p>
</>
) : (
<p className="text-gray-400 text-sm">
Select an ability to see its description
</p>
)}
</div>
</div>
</div>
{/* Lock In Button */}
<div className="flex justify-center">
<button
className="relative w-60 h-16 outline-none transition-all duration-100 bg-transparent border-none text-sm font-bold text-[#ddebf0] rounded-none hover:bg-[#27c39f] focus:outline-none"
onClick={() => {
if (agentDetails.selectedAgentName) {
handleClick(agentDetails.selectedAgentName);
}
}}
>
<span className="mr-4">L O C K</span>
<span>I N</span>
<div
id="clip"
className="absolute top-0 overflow-hidden w-full h-full border-[5px] border-double border-[#2761c3] shadow-inner shadow-[#195480]"
></div>
</button>
</div>
</div>
</Layout>
</>
Expand Down