-Configurator main screen showing an agent specific loadout
-
+- **Auto Shuffle** — automatically equips a random loadout when you lock in an agent
+- **Agent Detection** — filters loadouts to ones matching your selected agent
+- **Non-Pregame Shuffle** — randomizes loadouts for modes without agent select (Deathmatch, Escalation, Team Deathmatch, etc.)
+- **Manual Equip** — equip any saved loadout on demand from the app
-# Installation
+## Installation
-1. You can find the latest release [here](https://github.com/zachrip/valpal/releases/latest) - download valpal.exe
-2. Create a folder somewhere (desktop or your user directory, or wherever else, you do you)
-3. Run the .exe - windows will probably complain, click "more info" then "run anyway"
-4. You should see an item added to your system tray - right click on it and click "Open ValPal" - this will open your browser to the configurator
-5. Open Valorant (you must run the game for this to work)
-6. Add a loadout and configure it with your skins
-7. When you join a match, the app will detect when you've locked in as an agent. If you have `Agent specific loadouts` enabled it will configure loadouts for that agent if there are any (otherwise it will fall back to all enabled loadouts). You can disable the loadout shuffling all together if you prefer to equip loadouts by hand in the configurator
+1. Download the latest `.msi` installer from [Releases](https://github.com/zachrip/valpal/releases/latest)
+2. Run the installer — Windows may complain, click "More info" then "Run anyway"
+3. Launch ValPal — it will appear in your system tray
+4. Open Valorant
+5. Create a loadout and configure it with your skins
+6. When you join a match, the app will detect your agent lock-in and equip a random matching loadout
-# Architecture
+## Architecture
-This app is based around [Remix](https://remix.run) and packaged using [pkg](https://github.com/vercel/pkg). It uses the local websocket/http server that Valorant runs to authenticate and detect when matches start.
+ValPal is a [Tauri](https://tauri.app) app with a [React Router](https://reactrouter.com) frontend and a Rust backend. The backend connects to Valorant's local WebSocket/HTTP APIs to authenticate, detect game events, and manage loadouts.
-# Contribute
+- `src/` — React frontend (UI, loadout editor)
+- `src-tauri/` — Rust backend (game detection, Valorant API integration, system tray)
-1. Clone this repo
-2. `npm install`
-3. `npm run dev`
-4. Run Valorant
-5. Open [http://localhost:3000](http://localhost:3000)
-6. The configurator code mostly lives in app/ - the rest of the stuff is in server/ (such as the game detection, system tray stuff, etc)
+## Development
+
+Prerequisites: [Node.js](https://nodejs.org), [pnpm](https://pnpm.io), [Rust](https://rustup.rs)
+
+```
+pnpm install
+pnpm tauri dev
+```
diff --git a/app/app.css b/app/app.css
deleted file mode 100644
index d9f1180..0000000
--- a/app/app.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@font-face {
- font-family: 'GolosUIWebVF';
- src: url('../fonts/golos-ui/golos-ui_vf.woff2') format('woff2'),
- url('../fonts/golos-ui/golos-ui_vf.woff') format('woff');
- font-weight: normal;
- font-style: normal;
-}
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- html {
- font-family: 'GolosUIWebVF', system-ui, sans-serif;
- }
-}
diff --git a/app/root.tsx b/app/root.tsx
deleted file mode 100644
index 11b9ffe..0000000
--- a/app/root.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {
- isRouteErrorResponse,
- Links,
- Meta,
- Outlet,
- Scripts,
- ScrollRestoration,
-} from "react-router";
-
-import type { Route } from "./+types/root";
-import stylesheet from "./app.css?url";
-
-export const links: Route.LinksFunction = () => [
- { rel: 'stylesheet', href: stylesheet },
- { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
- {
- rel: 'preconnect',
- href: 'https://fonts.gstatic.com',
- crossOrigin: 'anonymous'
- },
- {
- rel: 'stylesheet',
- href: 'https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap',
- },
-];
-
-export function Layout({ children }: { children: React.ReactNode }) {
- return (
-
-
-
-
-
- {message}
-{details}
- {stack && ( -
- {stack}
-
- )}
- {userId}
;
-}
diff --git a/app/routes/loadouts/$loadoutId.tsx b/app/routes/loadouts/$loadoutId.tsx
deleted file mode 100644
index 27f2b20..0000000
--- a/app/routes/loadouts/$loadoutId.tsx
+++ /dev/null
@@ -1,572 +0,0 @@
-import type { LoaderFunctionArgs } from 'react-router';
-import { redirect } from 'react-router';
-import { Form, Link, Outlet, useLoaderData, useSubmit } from 'react-router';
-import { zfd } from 'zod-form-data';
-import { z } from 'zod';
-
-import type { WeaponCategory } from 'types';
-import { Gallery } from '~/components/Gallery';
-
-import {
- categoryCanonicalNameMap,
- categoryNameMap,
- sortedWeapons,
-} from '~/utils';
-import { getUser, getUserConfig, saveUserConfig } from '~/utils.server';
-
-const updateSchema = zfd.formData({
- name: zfd.text(z.string().optional().default('Loadout')),
- agents: z.record(z.string(), zfd.checkbox()).optional(),
-});
-
-export async function action({ request, params }: LoaderFunctionArgs) {
- const user = await getUser();
-
- if (!user) {
- throw redirect('/login');
- }
-
- const formData = await request.formData();
- const action = formData.get('action') as string;
-
- switch (action) {
- case 'update': {
- const loadoutId = params.loadoutId;
- const config = await getUserConfig(user.userId);
- const loadout = config.loadouts.find(
- (loadout) => loadout.id === loadoutId,
- );
-
- if (!loadout) {
- throw redirect('/loadouts');
- }
-
- const { name, agents } = updateSchema.parse(formData);
-
- loadout.name = name;
- loadout.agentIds = Object.entries(agents || {}).reduce
-
-
- Loadouts
-
-
-
-
-
-
-
-
-
- - Player Cards -
-
-
- ({
- ...card,
- duration: 1000,
- }))}
- render={(card) => (
-
-
-
- )}
- />
-
- 
-
- - {card.displayName.slice(0, -5)} -
-
- Edit
-
-
-
-
- - Player Titles -
-
-
- ({
- ...t,
- duration: 1000,
- }))}
- render={(title) => (
-
- - {title.titleText || 'Default'} -
- )} - /> -
- Edit
-
-
-
-
- - Sprays -
-
-
-
-
-
- {Object.entries(loadout.expressions).map(
- ([key, expressions]) => {
- return (
-
- ({
- icon:
- spray.animationGif ||
- spray.fullTransparentIcon ||
- spray.displayIcon,
- displayName: spray.displayName,
- duration: 1000,
- })),
- ...expressions.flexIds.map((flex) => ({
- icon: flex.displayIcon,
- displayName: flex.displayName,
- duration: 1000,
- })),
- ]}
- render={(expression) => (
-
- - {key} -
-
-
- )}
- />
-
- 
-
- - {expression.displayName} -
-
- Edit
-
-
- );
- },
- )}
-
- {categories &&
- Object.entries(categories).map(([category, weapons]) => {
- const categoryName =
- categoryNameMap[category as WeaponCategory];
- const canonicalCategoryName =
- categoryCanonicalNameMap[category as WeaponCategory];
-
- return (
-
-
-
- );
- })}
-
-
- {categoryName}
-
-
-
- {weapons.map((weapon) => (
-
- {
- return template.chromas.flatMap<{
- chroma: {
- icon: string;
- name: string;
- };
- buddy: {
- icon: string;
- name: string;
- } | null;
- duration: number;
- }>((chroma) => {
- if (template.buddies.length === 0) {
- return [
- {
- chroma: {
- icon:
- chroma.fullRender ||
- chroma.displayIcon,
- name: chroma.displayName,
- },
- buddy: null,
- duration: 1000,
- },
- ];
- }
-
- return template.buddies.map((buddy) => {
- return {
- chroma: {
- icon:
- chroma.fullRender ||
- chroma.displayIcon,
- name: chroma.displayName,
- },
- buddy: {
- icon: buddy.displayIcon,
- name: buddy.displayName,
- },
- duration: 1000,
- };
- });
- });
- })
- : [
- {
- buddy: null,
- chroma: {
- icon: weapon.displayIcon,
- name: weapon.displayName,
- },
- duration: 1000,
- },
- ]
- }
- render={(item) => (
- <>
- 
- {item.buddy && (
- 
- )}
-
- )}
- />
-
-
- {weapon.displayName}
-
-
- ))}
-
-
-
- Select Bottom Slot Expressions
-
-
-
-
-
-
-
- Select Left Slot Expressions
-
-
-
-
-
-
-
- Select Right Slot Expressions
-
-
-
-
-
-
-
- Select Top Slot Expressions
-
-
-
-
-
-
-
- Select Player Cards
-
-
-
-
-
-
-
-
- Select Player Titles
-
-
-
-
-
-
-
-
- {weapon.displayName}
-
-
-
-
-
-
- {templates.map((template) => {
- return (
-
-
-
- );
- })}
-
- +
-
-
-
-
- ({
- src: chroma.fullRender,
- alt: chroma.displayName,
- }))}
- />
-
- - {template.skin.displayName - .split(' ') - .slice(0, -1) - .join(' ')} -
-
-
-
-
-
-
-
-
- {skin.displayName}
-
-
-
-
-
-
-
-
- {state.title}
-
-
-
-
-
- {state.mode === 'select_skin' && (
-
- {[...weapon.ownedSkins]
- .sort((a, b) => {
- return a.name.localeCompare(b.name);
- })
- .map((skin) => (
-
- ))}
-
- )}
- {state.mode === 'select_chroma' && (
-
- )}
-
-
- );
-}
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
deleted file mode 100644
index 25a8641..0000000
--- a/app/routes/login.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { MetaFunction } from 'react-router';
-import { redirect } from 'react-router';
-
-import { getUser } from '~/utils.server';
-
-export async function loader() {
- const user = await getUser();
-
- if (user) {
- throw redirect('/');
- }
-
- return null;
-}
-
-export const meta: MetaFunction = () => [
- {
- httpEquiv: 'refresh',
- content: '5',
- },
-];
-
-export default function Index() {
- return (
-
-
- Loadouts
- -
- {loadouts.map((loadout) => {
- return (
-
-
-
- {loadout.name}
- {!loadout.enabled && (
- <>
- {' '}
- (Disabled)
-
- )}
-
-
- );
- })}
-
- {loadout.name}
- {!loadout.enabled && (
- <>
- {' '}
- (Disabled)
-
- )}
-
- {loadout.agents.map((agent) => (
-
- 
-
- ))}
-
-
-
-
-
- ))}
-
-
-
- ({
- ...t,
- duration: 1000,
- }))}
- render={(title) => (
-
-
- ({
- src: c.largeArt,
- alt: c.displayName,
- }))}
- />
-
- - {title.titleText || 'Default'} -
- )} - /> -
- {Object.entries(loadout.expressions).map(
- ([key, sprays]) => {
- return (
-
-
- ({
- src:
- spray.animationGif ||
- spray.fullTransparentIcon ||
- spray.displayIcon,
- alt: spray.displayName,
- })),
- ...sprays.flexIds.map((flex) => ({
- src: flex.displayIcon,
- alt: flex.displayName,
- })),
- ]}
- />
-
- );
- },
- )}
-
- {loadout.weapons.map((weapon) => {
- return (
-
-
- {
- return template.chromas.flatMap<{
- chroma: {
- icon: string;
- name: string;
- };
- buddy: {
- icon: string;
- name: string;
- } | null;
- duration: number;
- }>((chroma) => {
- if (template.buddies.length === 0) {
- return [
- {
- chroma: {
- icon:
- chroma.fullRender ||
- chroma.displayIcon,
- name: chroma.displayName,
- },
- buddy: null,
- duration: 1000,
- },
- ];
- }
-
- return template.buddies.map((buddy) => {
- return {
- chroma: {
- icon:
- chroma.fullRender ||
- chroma.displayIcon,
- name: chroma.displayName,
- },
- buddy: {
- icon: buddy.displayIcon,
- name: buddy.displayName,
- },
- duration: 1000,
- };
- });
- });
- })
- : [
- {
- buddy: null,
- chroma: {
- icon: weapon.displayIcon,
- name: weapon.displayName,
- },
- duration: 1000,
- },
- ]
- }
- render={(item) => (
- <>
-
- {item.buddy && (
-
- )}
-
- )}
- />
-
- );
- })}
-
-
-
-
-
- Edit
-
-
-
-
- Please open Valorant to continue
-
- );
-}
diff --git a/app/utils.server.ts b/app/utils.server.ts
deleted file mode 100644
index c237725..0000000
--- a/app/utils.server.ts
+++ /dev/null
@@ -1,348 +0,0 @@
-import axios, { isAxiosError } from 'axios';
-import fsPromise from 'fs/promises';
-import path from 'path';
-import https from 'https';
-
-import type {
- Loadout,
- UserConfig,
- UserConfigV1,
- UserConfigV2,
- UserConfigV3,
-} from '~/utils';
-import { generateRequestHeaders, User } from 'server/userman';
-import { Regions, Shards } from 'types';
-
-async function exists(filename: string) {
- try {
- await fsPromise.access(filename);
- return true;
- } catch {
- return false;
- }
-}
-
-export async function getLockfile() {
- const lockfilePath = path.resolve(
- process.env.LOCALAPPDATA!,
- 'Riot Games',
- 'Riot Client',
- 'Config',
- 'lockfile',
- );
-
- if (!(await exists(lockfilePath))) {
- return;
- }
-
- const lockfile = await fsPromise.readFile(lockfilePath, 'utf8');
- const [name, pid, port, password] = lockfile.split(':');
-
- return {
- name,
- pid,
- port,
- password,
- };
-}
-
-function readTextFile(filename: string) {
- return fsPromise.readFile(filename, 'utf-8');
-}
-
-function writeTextFile(filename: string, content: string) {
- return fsPromise.writeFile(filename, content);
-}
-
-export function randomUUID() {
- return crypto.randomUUID();
-}
-
-export function randomItem
-
-
-
-
\ No newline at end of file
diff --git a/public/fonts/golos-ui/golos-ui_vf.woff b/public/fonts/golos-ui/golos-ui_vf.woff
deleted file mode 100644
index b1713be..0000000
Binary files a/public/fonts/golos-ui/golos-ui_vf.woff and /dev/null differ
diff --git a/public/fonts/golos-ui/golos-ui_vf.woff2 b/public/fonts/golos-ui/golos-ui_vf.woff2
deleted file mode 100644
index 105549a..0000000
Binary files a/public/fonts/golos-ui/golos-ui_vf.woff2 and /dev/null differ
diff --git a/public/tauri.svg b/public/tauri.svg
new file mode 100644
index 0000000..31b62c9
--- /dev/null
+++ b/public/tauri.svg
@@ -0,0 +1,6 @@
+
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/react-router.config.ts b/react-router.config.ts
index 6ff16f9..72a4d21 100644
--- a/react-router.config.ts
+++ b/react-router.config.ts
@@ -1,7 +1,9 @@
import type { Config } from "@react-router/dev/config";
export default {
- // Config options...
- // Server-side render by default, to enable SPA mode set this to `false`
- ssr: true,
+ // Config options...
+ // Server-side render by default, to enable SPA mode set this to `false`
+ ssr: false,
+ appDirectory: "src",
+ buildDirectory: "dist",
} satisfies Config;
diff --git a/server.ts b/server.ts
deleted file mode 100644
index e1ba41c..0000000
--- a/server.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import compression from 'compression';
-import express from 'express';
-import { readdirSync } from 'fs';
-import morgan from 'morgan';
-import path from 'path';
-
-(async () => {
- const PORT = Number.parseInt(process.env.PORT || '3000');
-
- const app = express();
-
- app.use(compression());
- app.disable('x-powered-by');
-
- if (process.env.NODE_ENV === 'development') {
- console.log('Starting development server');
- const viteDevServer = await import('vite').then((vite) =>
- vite.createServer({
- server: { middlewareMode: true },
- }),
- );
- app.use(viteDevServer.middlewares);
- app.use(async (req, res, next) => {
- try {
- const source = await viteDevServer.ssrLoadModule('./server/app.ts');
- const server = await source.init();
- return await server(req, res, next);
- } catch (error) {
- if (typeof error === 'object' && error instanceof Error) {
- viteDevServer.ssrFixStacktrace(error);
- }
- next(error);
- }
- });
- } else {
- console.log('Starting production server');
- app.use(
- '/assets',
- express.static(path.join(__dirname, '../build/client/assets'), {
- immutable: true,
- maxAge: '1y',
- }),
- );
- app.use(
- express.static(path.join(__dirname, '../build/client'), { maxAge: '1h' }),
- );
- // @ts-ignore
- const server = await import('./build/server/index.js');
- app.use(await server.init());
- }
-
- app.use(morgan('tiny'));
-
- app.listen(PORT, () => {
- console.log(`Server is running on http://localhost:${PORT}`);
- });
-})();
diff --git a/server/app.ts b/server/app.ts
deleted file mode 100644
index 94da0fe..0000000
--- a/server/app.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import 'react-router';
-import { createRequestHandler } from '@react-router/express';
-import express from 'express';
-
-declare module 'react-router' {
- interface AppLoadContext {
- VALUE_FROM_EXPRESS: string;
- }
-}
-
-import { AppManager } from './appman';
-import { initSkinData } from './valorantApi';
-
-import packageJson from '../package.json';
-import axios from 'axios';
-
-declare global {
- var appManager: AppManager;
-}
-
-export async function init() {
- await initSkinData();
-
- global.appManager = new AppManager();
-
- if (process.env.NODE_ENV === 'production') {
- try {
- const { data } = await axios.get(
- `https://api.github.com/repos/zachrip/valpal/releases/latest`,
- );
-
- if (data.tag_name !== packageJson.version) {
- global.appManager.notify(
- 'Update Available',
- `There's a new version of ValPal available! Please update at: ${data.html_url}`,
- );
- }
- } catch (e) {
- global.appManager.notify(
- 'Update Check Failed',
- 'Failed to check for updates. ' + e,
- );
- }
- }
-
- const app = express();
-
- app.use(
- createRequestHandler({
- // @ts-expect-error - virtual module provided by React Router at build time
- build: () => import('virtual:react-router/server-build'),
- getLoadContext() {
- return {
- VALUE_FROM_EXPRESS: 'Hello from Express',
- };
- },
- }),
- );
-
- return app;
-}
diff --git a/server/appman.ts b/server/appman.ts
deleted file mode 100644
index 1bf7a6f..0000000
--- a/server/appman.ts
+++ /dev/null
@@ -1,414 +0,0 @@
-import { NotifyIcon, Icon, Menu } from 'not-the-systray';
-import {
- entitlementTypeToIdMap,
- type Agent,
- type ValorantLoadout,
-} from 'types';
-import type { Loadout } from '~/utils';
-import {
- getLockfile,
- getUser,
- getUserConfig,
- randomItem,
-} from '~/utils.server';
-import type { User } from './userman';
-import { exec } from 'child_process';
-import WebSocket from 'ws';
-
-function open(url: string) {
- exec(`start ${url}`);
-}
-
-function tryParseJson
-Font:
-
-
-Golos UI VF
-Sample Text:
-
-Jelly-like above the high wire, six quaking pachyderms kept the climax of the extravaganza in a dazzling state of flux.
Юный директор целиком сжевал весь объём продукции фундука (товара дефицитного и деликатесного), идя энергично через хрустящий камыш.
-
-
-
-
-
-
- - ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ ı Œ œ Š š Ÿ Ž ž ƒ ȷ ʼ ˆ ˇ ˙ ˚ ˜ ˝ Ё Ђ Ѓ Є Ѕ І Ї Ј Љ Њ Ћ Ќ Ў Џ А Б В Г Д Е Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ё ђ ѓ є ѕ і ї ј љ њ ћ ќ ў џ Ґ ґ Ғ ғ Ҕ ҕ Җ җ Ҙ ҙ Қ қ Ҝ ҝ Ҡ ҡ Ң ң Ҥ ҥ Ҫ ҫ Ү ү Ұ ұ Ҳ ҳ Ҷ ҷ Ҹ ҹ Һ һ Ӏ Ӄ ӄ Ӈ ӈ Ӌ ӌ ӏ Ӑ ӑ Ӓ ӓ Ӕ ӕ Ӗ ӗ Ә ә Ӛ ӛ Ӝ ӝ Ӟ ӟ Ӣ ӣ Ӥ ӥ Ӧ ӧ Ө ө Ӫ ӫ Ӯ ӯ Ӱ ӱ Ӳ ӳ Ӵ ӵ Ӹ ӹ Ԓ ԓ ẞ ‐ ‑ ‒ – — ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › ⁄ ⁴ € ₴ ₸ ₽ № ™ ← ↑ → ↓ ↖ ↗ ↘ ↙ − ∕ -
-
-
-OpenType features:
-
-© ParaType, 2013. All rights reserved.
All trademarks mentioned in this document are the trademarks or registered trademarks of their respective holders. You may reproduce and
distribute this document as long as you do not remove ParaType copyright information and do not make any changes in the document.
Русская панграмма из книги В. В. Шахиджаняна «Соло на клавиатуре»
{message}
+{details}
+ {stack && ( +
+ {stack}
+
+ )}
+
+
+ );
+ }
+
+ return (
+
+ 
+
+ + Waiting for Valorant... +
+
+
+ );
+}
diff --git a/src/routes/app/layout.tsx b/src/routes/app/layout.tsx
new file mode 100644
index 0000000..e919ab1
--- /dev/null
+++ b/src/routes/app/layout.tsx
@@ -0,0 +1,40 @@
+import { listen } from "@tauri-apps/api/event";
+import { useEffect, useState } from "react";
+import { Outlet, useRevalidator } from "react-router";
+import * as api from "~/apiClient";
+import valpalLogo from "~/valpal.png";
+
+export default function Layout() {
+ const [connected, setConnected] = useState
+
+ + {user?.player_info.game_name} + + #{user?.player_info.tag_line} + +
+
+
+ New Loadout
+ +
+
+
+
+
+
+
+ + Currently Equipped + + (In-Game) + +
+ +
+
+
+
+
+
+ {currentLoadout.playerCard && (
+ 
+ )}
+
+ + {currentLoadout.playerTitle?.titleText || "Default"} +
+
+ {currentLoadout.weapons.map((weapon) => (
+
+
+ {weapon?.templates?.[0]?.chromas?.[0] ? (
+ ![{weapon.templates[0].skin?.displayName]({)
+ ) : (
+ 
+ )}
+
+ {weapon?.weapon?.displayName}
+
+
+ ))}
+
+
+ + Saved Loadouts +
+ +
+ {loadouts.map((loadout) => (
+
+
+
+ {loadout.name}
+ {!loadout.enabled && (
+ (Disabled)
+ )}
+
+
+ ))}
+ {loadouts.length === 0 && (
+
+ {loadout.name}
+ {!loadout.enabled && (
+ (Disabled)
+ )}
+
+ {loadout.agents.map((agent) => (
+
+ 
+
+ ))}
+
+
+
+
+
+ ))}
+
+
+
+ ({
+ ...t,
+ duration: 1000,
+ }))}
+ render={(title) => (
+
+
+ ({
+ src: c?.largeArt ?? "",
+ alt: c?.displayName ?? "",
+ }))}
+ />
+
+ + {title?.titleText || "Default"} +
+ )} + /> +
+ {Object.entries(loadout.expressions).map(([key, exps]) => (
+
+
+ ({
+ icon:
+ spray.animationGif ??
+ spray.fullTransparentIcon ??
+ spray.displayIcon ??
+ "",
+ displayName: spray.displayName ?? "",
+ duration: 1000,
+ })),
+ ...exps.flexes.map((flex) => ({
+ icon: flex.displayIcon ?? "",
+ displayName: flex.displayName ?? "",
+ duration: 1000,
+ })),
+ ]}
+ render={(expression) => (
+ 
+ )}
+ />
+
+ ))}
+
+ {loadout.weapons.map((weapon) => (
+
+
+ {weapon?.templates?.[0]?.chromas?.[0] ? (
+
+ ) : (
+
+ )}
+
+ {weapon?.weapon?.displayName}
+
+
+ ))}
+
+
+
+ Edit
+
+
+
+
+
+ )}
+ No loadouts yet.
++ Create a new loadout or save your current in-game loadout to get + started. +
+
+
+ );
+ }
+
+ return
+
+
+ + Waiting for Valorant... +
+
+
+
+ Loadouts
+
+
+
+
+
+
+
+ + Loadout Name +
+
+ {
+ setLoadout({ ...loadout, name: e.target.value });
+ }}
+ onBlur={() => api.updateLoadout(loadout)}
+ />
+
+
+
+ Agents
+
+ {valorantData.agents.slice().sort((a, b) => (a.displayName ?? "").localeCompare(b.displayName ?? "")).map((agent) => (
+
+ ))}
+
+
+
+
+
+ Player Cards +
+
+
+ ({
+ ...card,
+ duration: 1000,
+ }))}
+ render={(card) => (
+
+
+