init

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
+  "plugins": [
+    [
+      "@babel/plugin-transform-react-jsx",
+      { "runtime": "automatic", "importSource": "preact" }
+    ],
+    "@babel/proposal-class-properties",
+    "@babel/proposal-object-rest-spread"
+  ]
+}

.env.example

@@ -0,0 +1 @@
+DEBUG=

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:react/recommended", "plugin:jsx-a11y/recommended"],
+
+  "rules": {
+    "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/self-closing-comp": "warn"
+  },
+  "plugins": ["react", "import", "jsx-a11y"],
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -0,0 +1,39 @@
+# Pengu Loader
+/*.dll
+/*.exe
+config.cfg
+/datastore
+/config
+
+# Distribution
+/plugins
+/assets
+
+# Ennvironment
+.env 
+yarn-error.log
+
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
+.env
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.vscode
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSameLine": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "printWidth": 120
+}

README.md

@@ -0,0 +1,46 @@
+# ABC - A Better Client (a mod for League of Legends'client)
+
+Enhance your LoL experience by customizing your client with useful features,
+
+## Installation
+
+1. Download one of the releases [from here](https://github.com/douugdev/league-a-better-client/releases).
+2. Then extract the zip file to any folder.
+3. Open `LeagueLoader.exe`
+4. Select your League of Legends path (where `LeagueClient.exe` is located, usually `C:\Program Files (x86)\Riot Games\League of Legends`)
+5. Hit "Install".
+
+That's it! You can close League Loader and everytime you open your client, the extension will appear. Just remember to not delete the folder where you extracted ABC.
+
+## Roadmap
+
+| Features                                                                      | Nightly | Production |
+| ----------------------------------------------------------------------------- | ------- | ---------- |
+| Auto Ready                                                                    | ✅      | ❌         |
+| Auto Champion Select                                                          | ✅      | ❌         |
+| Dodge Button                                                                  | ✅      | ❌         |
+| Custom themes (using presets)                                                 | 🆕      | ❌         |
+| Auto honor friend                                                             | 🔜      | ❌         |
+| Auto skin/chroma select                                                       | 🔜      | ❌         |
+| Champion presets<br/>(Auto spells, runes, skins based on champion)            | 🔜      | ❌         |
+| Auto ban champion<br/>(multiple for clash)                                    | 🔜      | ❌         |
+| Auto boost<br/>(for ARAM)                                                     | 🔜      | ❌         |
+| Auto dodge on champion ban                                                    | 🔜      | ❌         |
+| Dynamic themes                                                                | 🔜      | ❌         |
+| External messaging<br/>(receive WhatsApp messages directly on your LoL inbox) | 🔜      | ❌         |
+
+Learn more about each feature [in the docs' feature showcase](https://douugdev.github.io/league-a-better-client/).
+
+## How it works
+
+ABC is a league-loader plugin and a client extension framework , we use Preact+TypeScript+SCSS as a basis for developing it, then webpack bundles all that code into a single `abc.js` file, and we use [league-loader](https://github.com/nomi-san/league-loader) to inject the bundled javascript into the client.
+
+## For Developers
+
+ABC's initial objective was to serve as an example on how to develop league-loader plugins with React+TypeScript+SCSS (and demonstrate it's possible to use any JS frameworks like Vue, Svelte, Angular, etc) but due to the increase in demand by our friends, we are bundling everything as a single tool so people without developing experience can use it.
+
+Read the [contribution notes](CONTRIBUTING.md) to learn the contribution rules and how to setup your environment.
+
+### Disclaimers
+
+ABC isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc. ABC was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project.

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "league-abc",
+  "version": "1.0.0",
+  "main": "plugins/abc.js",
+  "browser": "plugins/abc.js",
+  "source": "src/index.tsx",
+  "author": "Douglas Silva ([email protected])",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/node": "^18.13.0",
+    "babel-loader": "^9.1.2",
+    "concurrently": "^7.6.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "dotenv-webpack": "^8.0.1",
+    "eslint": "^8.34.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "express": "^4.18.2",
+    "prettier": "^2.8.4",
+    "sass": "^1.58.0",
+    "sass-loader": "^13.2.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "typescript-plugin-css-modules": "^4.1.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
+  },
+  "dependencies": {
+    "@ant-design/pro-components": "^2.6.43",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "antd": "^5.12.5",
+    "axios": "^1.3.2",
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "preact": "^10.12.1",
+    "react": "npm:@preact/compat",
+    "react-dom": "npm:@preact/compat",
+    "style-loader": "^3.3.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "scripts": {
+    "watchStyles": "sass --watch src/assets:assets/",
+    "watch": "webpack -w --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js && sass src/assets:assets/",
+    "dev": "concurrently \"yarn watch\" \"yarn watchStyles\""
+  }
+}

src/App.tsx

@@ -0,0 +1,29 @@
+import { h } from 'preact';
+import AutoReady from './Components/AutoReady';
+import MinimalistTheme from './Components/MinimalistTheme';
+import SettingsMenu from './Components/SettingsMenu';
+import { SettingsProvider } from './context/SettingsContext';
+import AutoPickChamp from './Components/AutoPickChamp';
+import { ChampSelectProvider } from './context/ChampSelectContext';
+import Dodge from './Components/Dodge';
+import HideFriendsList from './Components/HideFriendsList';
+import LobbySettings from './Components/LobbySettings';
+
+const App = () => {
+  return (
+    <SettingsProvider>
+      {/* <MinimalistTheme />
+      <SettingsMenu /> */}
+      <HideFriendsList />
+      {/* <ChampSelectProvider>
+        <Dodge />
+        <LobbySettings>
+          <AutoPickChamp />
+          <AutoReady />
+        </LobbySettings>
+      </ChampSelectProvider> */}
+    </SettingsProvider>
+  );
+};
+
+export default App;

src/Components/AutoPickChamp.tsx

@@ -0,0 +1,124 @@
+import { h } from 'preact';
+import { TargetedEvent, useCallback, useEffect, useRef, useState } from 'preact/compat';
+import { getOwnedChampions, getAllChampions, matchmakingChampionIntent, matchmakingChampionLock } from '../api';
+import type { SimplifiedChampion } from '../api/types';
+import { useChampSelect } from '../context/ChampSelectContext';
+import styles from '../assets/styles/AutoPickChamp.module.scss';
+import { useSettings } from '../context/SettingsContext';
+import { emptyChampion } from '../api/data';
+import { useLobby } from '../context/LobbyContext';
+
+const AutoPickChamp = () => {
+  const dropdownRef = useRef<HTMLButtonElement | null>(null);
+
+  const [picked, setPicked] = useState<boolean>(false);
+  const [intended, setIntended] = useState<boolean>(false);
+  const [availableChampions, setAvailableChampions] = useState<SimplifiedChampion[]>([]);
+  const [search, setSearch] = useState('');
+  const { autoPickChampionId, setAutoPickChampionId } = useSettings();
+  const { currentLobby } = useLobby();
+  const { getOwnPickActions } = useChampSelect();
+  const myPickActions = getOwnPickActions();
+
+  const handleSelectChampion = (champId: number) => {
+    console.log('id', champId);
+    setAutoPickChampionId(champId);
+  };
+
+  const renderChampion = (champion: SimplifiedChampion) => {
+    return (
+      <lol-uikit-dropdown-option
+        selected={champion.id === autoPickChampionId ? true : undefined}
+        slot="lol-uikit-dropdown-option"
+        onClick={() => handleSelectChampion(champion.id)}
+        className="custom-bot-champions-dropdown-option framed-dropdown-type"
+      >
+        <div className={`custom-bot-champions-dropdown-option-content ${styles.row}`}>
+          <div className="custom-member-icon ui-dropdown-option-only">
+            <div className="custom-member-bot-icon">
+              <img src={champion.squarePortraitPath} className="custom-member-bot-icon-img" />
+              <div className="ring"></div>
+            </div>
+          </div>
+          <div className="custom-bot-champion-name">{champion.name}</div>
+        </div>
+      </lol-uikit-dropdown-option>
+    );
+  };
+
+  const pickChampion = useCallback(async () => {
+    if (autoPickChampionId === -1) {
+      return;
+    }
+
+    if (!myPickActions || !myPickActions[0]) {
+      return;
+    }
+
+    // Get the first pick action
+    const firstPickAction = myPickActions[0];
+
+    if (firstPickAction.isInProgress && !picked) {
+      try {
+        await matchmakingChampionLock(firstPickAction.id, autoPickChampionId);
+      } finally {
+        setPicked(true);
+      }
+    } else if (!intended) {
+      try {
+        await matchmakingChampionIntent(firstPickAction.id, autoPickChampionId);
+      } finally {
+        setIntended(true);
+      }
+    }
+  }, [myPickActions, autoPickChampionId, intended]);
+
+  useEffect(() => {
+    pickChampion();
+  }, [pickChampion]);
+
+  useEffect(() => {
+    if (availableChampions.length === 0) {
+      (async () => {
+        const allGridChampions = await getOwnedChampions();
+
+        setAvailableChampions([emptyChampion, ...allGridChampions.sort((a, b) => b.masteryPoints - a.masteryPoints)]);
+      })();
+    }
+  }, [availableChampions]);
+
+  const updateSearch = (e: TargetedEvent) => {
+    const text = (e.target as HTMLInputElement).value;
+    setSearch(text);
+  };
+
+  return (
+    <div>
+      <span className="split-panel-header-title active">Auto Champ Select:</span>
+
+      <lol-uikit-framed-dropdown
+        ref={dropdownRef}
+        direction="upward"
+        className="custom-bot-champions-dropdown"
+        tabIndex={0}
+      >
+        <div slot="lol-uikit-dropdown-option">
+          <lol-uikit-flat-input>
+            <input
+              type="search"
+              placeholder="Search"
+              maxLength={50}
+              class="collection-search-text"
+              onInput={(e) => updateSearch(e)}
+            />
+          </lol-uikit-flat-input>
+        </div>
+        {availableChampions
+          .filter((champ) => champ.name.toLowerCase().includes(search.toLowerCase()))
+          .map(renderChampion)}
+      </lol-uikit-framed-dropdown>
+    </div>
+  );
+};
+
+export default AutoPickChamp;