rcvolus / lol-pick-ban-ui

Web-Based UI to display the league of legends champ select in esports tournaments.

lol-champselect-ui

UI to display the league of legends champion selection in esports tournaments.

Architecture:

Who used this?

It is most convincing to see the tool directly in action. Have you used it in any of your productions or projects? Feel free to send a pull request adding your project to this list along our way.

• Red Bull League of Its Own (aired on https://www.twitch.tv/videos/1999380443?t=2h18m39s)
• Red Bull Itemania 2019 (aired on https://twitch.tv/redbull)
• Logitech G LoL Cup 2020 (aired on https://twitch.tv/myinsanitytv)
• Swisscom Hero League Season 3-6 (aired on https://twitch.tv/eslswiss)
• Intel Arabian Cup (IAC) (airing on https://www.twitch.tv/lolarabia)

Features

• Connects to the League Client and fetches information about the current champ select in real time
• Automatically fetches champion loading images, splash arts and square icons from datadragon, which means that if a new champion is released it will automatically fetch the correct resources.
• Ready to use design templates:
  • Europe (similar to the pick&ban UI used in the LEC)
• Easy feature toggle (when using design templates) for:
  • Show / hide scores (usable if it's not best of 1)
  • Show / hide coaches
  • Show / hide summoner spells (usable in live matches on the live server where the enemy team is not supposed to see the summoner spells of the opposite team.
• Easy configuration:
  • Set team names
  • Set coach names
  • Set score
  • Set colors (default blue/red, but they can differ!)
• Allows to completely create a custom design based on web technologies (HTML, CSS & JS), including custom animations and transitions

Replays (Playing a recorded champ select)

Replays are available. They are pretty useful to test your overlay with, since it mocks the data sources and simulates a draft phase, that has already passed. There are some recordings of replays in the "recordings" folder.

In order to play a replay that simulates a full tournament draft, please issue the following command to start the backend:

npm start -- --data ../recordings/tournament-draft

While you are in a replay, you can focus the window and press "p" on your keyboard once, to pause or unpause the replay. This will freeze the current state, so you can adapt your design without having to hurry.

Configuration

You can configure the variable values, like team names, team scores, coach names and even the colors used. Just open up the file config.json in the folder backend with any texteditor, like notepad. Any changes you do inside this file will be reflected immediately and do not require a restart or reload.

Installation (Development purposes)

Please note: if you're looking for an easier installation, have a look at this project: https://github.com/FearNixx/vigilant-bans (the linked project is not associated or affiliated with the Riot Community Volunteers, and we can provide no warranty for the linked project)

1. Download and install Node.JS for Windows (or any other operating system): https://nodejs.org/download/release/v16.7.0/node-v16.7.0-x64.msi (please really install the linked version, 16.7.0, as otherwise you may run into issues)
2. Download or clone this Git-Repository to your local machine.
3. Inside the downloaded folder, open the backend folder, and open up a command prompt there (Windows: Shift + Rightclick -> Open Powershell / Commandline Window here)
4. Install all required dependencies for the backend using the command npm install
5. Start the backend using the command npm start
6. The backend should now launch on localhost:8999

Installation of europe layout

7. Open up the folder layouts/layout-volu-europe, keep the backend (terminal) open & running!
8. Also open the terminal here (like in step 3)
9. Also issue npm install (like in step 4)
10. Also start the frontend using npm start (like in step 5)
11. The application will now be accessible under http://localhost:3000?backend=ws://localhost:8999

Installation of simple layout

Please note that the simple layout cannot be directly used out of the box, it is more like an example of how you can create your own overlay. It is created as simple as possible from code perspective, thus it's name, but it is not simple to install and use. You also need to edit the two files "overlay.png" and "underlay.png" in the folder layouts/layout-simple. We have provided some example, however you need to do it on your own.

7. Open up another terminal in the project root folder, using Shift + Rightclick -> Open Powershell.
8. You only need to execute the following command once: npm install -g serve
9. Now start the local web server, using the simple command serve
10. Now the application is accessible under http://localhost:5000/layouts/layout-simple/?backend=ws://localhost:8999

Troubleshooting

Before you create an issue on GitHub, please check if your problem is listed below, and can be solved that way:

Connection to League Client failed (Unhandled PromiseRejectionWarning: TypeError: Cannot read property "port" of undefined)

The above outlined error happens, if a connection to the League Client cannot be established. So make sure that your League Client is running. We noticed that for some servers (mainly ones not run by Riot Games) the Client process runs as administrator, and therefore you also need to execute this tool as administrator, as otherwise the LeagueClient cannot be accessed. So when you open up the powershell, instead of doing the Shift + Rightclick thingy, open it directly (search for Powershell) but rightclick it and select "Open as Administrator". Then, navigate to the folder where you have the files in using the command cd {folder}. Then try again to start it, using npm start.

error: failed to read backend url query param. make sure you set ?backend=ws://[ip]:[port] as query parameter

Error message on older versions: SyntaxError: failed to construct 'WebSocket': The URL 'undefined' is invalid

This window may pop up when you start the europe layout. But there is nothing to worry, just close it and make sure you open up the correct link: http://localhost:3000?backend=ws://localhost:8999 (the ?backend part in the link is important, if you leave it out you get said error message!)

Demo (YouTube)

Creating your own design

Please refer to CUSTOM_THEME.

Contributors / Maintainers

• Development: Lara "Laraka" Bärtschi
• Design (Europe): Elias "Elilift" Inäbnit

Legal disclaimer

lol-pick-ban-ui was created under Riot Games' "Legal Jibber Jabber" policy using assets owned by Riot Games. Riot Games does not endorse or sponsor this project. However, Riot was informed and has confirmed that this project is compliant with their ToS.

lol-pick-ban-ui's Issues

Can't find how to edit the image from Redbull Itemania to something else (I wanted to add a custom picture as the logo) Sorry if this is obvious it's 4 am

i find solution

error starting base directory

i got this:

(node:7016) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 6) (node:7016) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'port' of undefined at LeagueDataProviderService.getCurrentData (C:\Users\Manuel\Desktop\pickui\backend-build\data\league\LeagueDataProviderService.js:38:97) at TickManager.runLoop (C:\Users\Manuel\Desktop\pickui\backend-build\TickManager.js:18:61) at Timeout.timeout.setInterval [as _onTimeout] (C:\Users\Manuel\Desktop\pickui\backend-build\TickManager.js:15:47) at ontimeout (timers.js:436:11) at tryOnTimeout (timers.js:300:5) at listOnTimeout (timers.js:263:5) at Timer.processTimers (timers.js:223:10)

Typescript compilation issues

On fresh installations of the UI, the LCU broker cannot be started. The reason is that a breaking patch has been pushed to @types/fs-extra that removed some fields from the corresponding type definitions.

Pinning @types/fs-extra to version 9.0.0 appears to be a valid work-around for this.

// See FearNixx/vigilant-bans#1 for the original issue filed with us.

Error loading Campion-Icons into the overlay

As you can see in the picture above, the Tool has problems loading the champion icons for the bans.

This occured to us in multiple instances of Prime League Tournament-Lobbys. We reinstalled all npm modules and made sure the DD Database was up to date.

Is there any known fix for this issue?

Installation problems

I'm sorry to bother you, but I need help using the user interface. Up to step 5, I did everything right. Now I don't understand how to start the backend via localhost. I couldn't open the app.js file from the node, so I couldn't open it in the browser. Can you explain step 6 a bit more in detail how I can use it in the end?

Thank you for programming such a user interface.
MfG Nilox

Sry, I'm still new to the area.

Error after TS compilation with EU UI

Hi, I'm having this error after TS compilation when trying to start the EU web app. I've pulled the latest on master so I believe the issue is still present.

Notably, in the console, TS says "compiled successfully".

Issue with the EU overlay

I followed all the directions as closely as possible from 1-11 and when I open up localhost:3000 it says "SyntaxError: Failed to construct 'Websocket': The URL 'undefined' is invalid.

Is there any way I can fix it?

UnhandledPromiseRejectionWarning

Sorry, May I ask why I have the issue of UnhandledPromiseRejectionWarning

Error on start server

I got this error when I tried to start the backend, I tried to adjust it but I couldn't find the reason, I use Windows 10 64 bits

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'port' of undefined
at LeagueDataProviderService.getCurrentData (lol-pick-ban-ui \ backend-build \ data \ league \ LeagueDataProviderService.js: 58: 97)

bug when use europe layout

Hi. I have followed your instructions. however, when it comes to starting up the europe layout, the error is shown below.
(I user client Garena Vietnam)

help me fix it. thank you

Show a meaningful message if a connection to the league client cannot be established

As a user, I want to be presented with a meaningful error message, if a connection to the League client fails (e.g. the client is not open).

cant Use layout simple

But it was error

Simple Layout Not working

I followed your steps and managed to open the backend of the code perfectly fine. When I go to follow steps 7-10 this is where things don't go as smoothly.

So if I run the "serve" command in the master folder "lol-pick-ban-ui-master and follow the localhost:5000 link I get the following:

But if I run the "serve" command and follow you link http://localhost:5000/layouts/layout-simple/?backend=ws://localhost:8999 I get the following image

I understand the blank template, where do I go in order to edit the layouts and show the relevant information? I have looked through all the closed issues and open issues to get help, but everyone just says its working, there is no actual solution posted. Tried finding the video link that is supposed to walk us through this process, but there is none.

Any help would be appreciated!

Thanks

Resources are not being loaded

URL for overlay.png http://localhost:5000/layouts/underlay.png but it should be http://localhost:5000/layout-simple/underlay.png

This issue is happening both simple-layout & layout-volu-europe

Ddragon problem

I dont know if its a common issue or Im doing something wrong but when I install the package and type in npm start everyting is going smoothly until downloading data from DDragon. It starts downloading data then it stops in random place for example it has downloaded 70% and doesnt move at all, I even waited for 2 hours thinking something is wrong with my internet then I stopped program removed folder etc. and Did everyting again and hello, it stopped at 21% and didn`t move at all for an hour.

layout-simple problem

When I do everything the way I am supposed to do it pops up even when I am not in the draftee and when I am in the draftee nothing happens.

Can't start server using npm start

I try to start server in layout_simple and layout_euro folder by using npm start, but not working. So Could you help me install step by step. During running server, can I open the custom mode of League client ?

installation error ( npm start )

Errors with npm Install... anything else i need to install first?

i do npm install this is all i get come up?? soz im new noob

PS C:\STREAM STUFFF\LoL PICK BAN UI\lol-pick-ban-ui-master> npm install
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 642 packages in 1.774s
found 1 low severity vulnerability
run npm audit fix to fix them, or npm audit for details
PS C:\STREAM STUFFF\LoL PICK BAN UI\lol-pick-ban-ui-master>

theres meant to be more come up then this..?

Hello i need help to config Simple Versión

I m use the Europe Version but y i need it the Simple Version, ¿solutions?

the errors

when im starting the frontend using npm start Im getting some errors.

Loading Team names from external source

Hey,
Im trying to automatically load team names and scores from an external source (remote server) that isnt the config file. I was wondering where I would have to implement changes in order for the backend to fetch those values from somewhere other than the config file. Either that or if I could change the location of the config file to the remote server all together.

Thanks for your help!

Simple layout

Simple layout is just not working

Summoners not showing "Layout Simple"

Summoners not showing on the "Layout Simple" did i miss something ?

Error: ENOENT: no such file or directory, open './example.json'

When starting the backend (npm start after npm install) this error occurs. Apparently a file example.json is missing, and I cannot start the backend server without it.
I've checked the code and WebSocketServer.sendHeartbeat method expects it.

I've also done all the installation steps as instructed in the Installation part.

My node version is v12.6.0

Multi language / configuration support

Hi. where are the files to change text (im using europe layout) like "Ban Phase I" ETC. iwant to change it to my language.

I im searching but dont want to touch nothing, can broke anything hehe

thnbaks a lot

Hi i keep getting this error everytime I try to run "npm start" on the volu-eu layout :(

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

at validateString (internal/validators.js:125:11)
at Object.join (path.js:427:7)
at noopServiceWorkerMiddleware (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:317:13)
at C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:275:10)
at launchEditorMiddleware (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:317:13)
at C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:335:12)
at next (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\index.js:275:10)
at handleWebpackInternalMiddleware (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (C:\Users\avera\Desktop\lol-pick-ban-ui-master\layouts\layout-volu-europe\node_modules\express\lib\router\layer.js:95:5)

Problem with simple layout

How can I congure the simple layout?

Backend not working

The backend server does not start and the LEC neither. I think is because of the backend.

[Question] Does it also work with real-time live games like soloq or flex?

Hi everyone, does this work with real-time live games? lets say soloq or flex? or a need to spectate

issue with npm start for layout-europe

I was able to install node and start the backend but when i do npm install inside the "layout/layout-europe" i get this error. any idea on what the issue is if its not npm related?

errors doing npm install

Hi, i installed it successfully on my own PC and wanted to help a friend install it for streaming. When doing the first npm install in the root directory following warnings/errors occur:

npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 642 packages in 2.495s
found 1 low severity vulnerability
  run npm audit fix to fix them, or npm audit for details

Create web-based configuration site

As user, I want to be able to easily change the configuration in a web interface, rather than in the config file directly.

Error when i start front end

  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '::',
  port: 8999
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm run build && node backend-build/app.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\KT STREAM\AppData\Roaming\npm-cache\_logs\2020-05-29T02_55_03_499Z-debug.log

Error when npm start

Hi !

I got a problem with that simple layout :/

When i use npm start, i got that type of message.

What is the problem here ? I do not understand, hope u will help me ^^
Thanks !

Usage in normal games (outside of the spectator mode)

Hello, following up on the SoloQ-Flex topic, ive tried and i have to say it works quite well, Names, Summoner Spells, Intended Pick, Bans those are just spot on, however there are some things that do not work as good, for example Position/Role detection is not working at all in SoloQ-Flex queues, also, team sides.

Now to my question, i know of apps that can detect the role/position of given player during draft, is there a way that this could be added? or it would need to be a complete rewrite? same goes with team sides.

Thank you all, i know this is not the intended use for the program but still i'd be awesome. o/

Cannot GET /

When I write: localhost:8999 in my browser, it show me: Cannot GET /

I've seen that they use my ipv6 to share but i dont have one..

How can i change it?

Create single launcher application that can then run all the components

As user, I want to start the software in a simple way by just running one component, that then takes care to start the other required components.

UnhandledPromiseRejectionWarning while starting

2020-05-19T19:21:56.428Z [info ] main        :   _          _       ____  ___   ____    _   _ ___
2020-05-19T19:21:56.429Z [info ] main        :  | |    ___ | |     |  _ \( _ ) | __ )  | | | |_ _|
2020-05-19T19:21:56.430Z [info ] main        :  | |   / _ \| |     | |_) / _ \/\  _ \  | | | || |
2020-05-19T19:21:56.430Z [info ] main        :  | |__| (_) | |___  |  __/ (_>  < |_) | | |_| || |
2020-05-19T19:21:56.431Z [info ] main        :  |_____\___/|_____| |_|   \___/\/____/   \___/|___|
2020-05-19T19:21:56.432Z [info ] main        :
2020-05-19T19:21:56.433Z [info ] main        : Configuration: {"data":"recordings/tournament-draft","leaguePath":""}
2020-05-19T19:21:56.434Z [info ] DataProviderService: Using recording as data provider service: recordings/tournament-draft
2020-05-19T19:21:56.434Z [warn ] DataProviderService: THIS IS PROBABLY MEANT FOR TESTING USAGE AND SHOULD ONLY BE USED IN PRODUCTION, IF YOU KNOW WHAT YOU ARE DOING!
2020-05-19T19:21:56.444Z [info ] datadragon  : Getting latest versions from ddragon.
2020-05-19T19:21:58.242Z [info ] datadragon  : Champion: 10.10.32161768608, Item: 10.10.32161768608, CDN: https://ddragon.leagueoflegends.com/cdn
(node:14216) UnhandledPromiseRejectionWarning: TypeError: Cannot convert undefined or null to object
    at Function.values (<anonymous>)
    at DataDragon.init (D:\Projects\lol-pick-ban-ui\backend-build\data\league\datadragon.js:67:33)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async main (D:\Projects\lol-pick-ban-ui\backend-build\app.js:40:5)
(node:14216) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:14216) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am getting this error while starting the application.

OS: Windows 10
Node Ver: v12.16.1

How can I make a new layout?

Hello, I don't know how can I make a new layout and the section "CUSTOM_THEME" is not clear for me.

how to create my draft replay?

how to create my draft replay?

Create integration for league-prod-toolkit

As user, I want to import the data that is available here into the league-prod-toolkit stack.

help

I am new to this, could you explain how to use it? I would appreciate

Create an installer for windows & mac

As user, I want to be able to install the whole setup easily by using a wizard-like installer.

simple layout issues

the simple layout does not show pick and ban champs, timers and everything else is working

SyntaxError: Failed to construct 'WebSocket': The URL 'undefined' is invalid.

connect
http://localhost:3000/frontend-lib.js:83:23
PB.start
http://localhost:3000/frontend-lib.js:110:5
(anonymous function)
C:/lol-pick-ban-ui-master/lol-pick-ban-ui-master/layouts/layout-volu-europe/src/App.jsx:38
35 | setConfig(hb.config);
36 | });
37 |

38 | Window.PB.start();
| ^ 39 | }, []);
40 |
41 | console.log(globalState);
View compiled
▶ 13 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

Application displays summoner names but not champions

Hi there,

I had the tool up and running for several weeks, and now it does not pull any champion icons. It displays summoner names, and the correct timer up top, but For bans and picks, it never shows the champions. Has anyone else had this issue?

UnhanlededPrimiseRejectionWarning

Hey,
I have the same problem as some others here, that the backend won't work with "npm start"
(node:4476) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'port' of undefined at LeagueDataProviderService.getCurrentData (C:\Users\Pasca\Desktop\Stream\lol-pick-ban-ui-master\lol-pick-ban-ui-master\backend-build\data\league\LeagueDataProviderService.js:58:97) at TickManager.runLoop (C:\Users\Pasca\Desktop\Stream\lol-pick-ban-ui-master\lol-pick-ban-ui-master\backend-build\TickManager.js:18:61) at Timeout.timeout.setInterval [as _onTimeout] (C:\Users\Pasca\Desktop\Stream\lol-pick-ban-ui-master\lol-pick-ban-ui-master\backend-build\TickManager.js:15:47) at ontimeout (timers.js:436:11) at tryOnTimeout (timers.js:300:5) at listOnTimeout (timers.js:263:5) at Timer.processTimers (timers.js:223:10)

I tried to start powershell as admin, but wouldn't help.
Adding the league path won't help either

Can't find how to edit the image from Redbull Itemania to something else

I realize this is likely an obvious fix but it's 4 am and I looked everywhere I could think.