End game Help

[AzureAstral]

Hello,

I would just like to use the "End Game" to format the statistics of the game except that I don't understand how it works... How to make it generate an image? How to change the font? Etc... I'm totally lost, if I could have some help that would be really nice!

Thank you !

[sdomi4]

Hi AzureAstral

The toolkit does not generate images as such, but web pages which can be added as a browser source to OBS/vMix/anything else that supports it.

If you are spectating a game with the observer tool running and synced, postgame stats should load automatically. Alternatively, you can load postgame stats manually by searching for a player (while the game is running) or a match ID (when the game is over) in the LoL Game State module. Please note that you need a valid Riot API Key for the end of game module.

Customization of fonts, colours and everything else is done with the themeing module, the Wiki has an introduction on how to create a custom theme (and at least rudimentary docs for everything else).

[AzureAstral]

Thx ! I just want to use End Game stats, and Runes can i uninstall other modules or not ?

[sdomi4]

There are a few modules which are required for these to run (off the top of my head end of game and runes need the modules config, provider-webapi, state-league, static-league, themeing), in theory you can uninstall everything else (although there is little to be gained, the larger files like images are required for both runes and end of game stats).

For now, I would not recommend uninstalling other modules, we are working on an updated version which allows selecting your desired modules :)

[AzureAstral]

Hey,

Thx for ur answer ! If I have ID game, i didnt need run Observer Tool ?

In terms of resources, is the program greedy or not ? Because I use League Broadcast in a same time :)

thx !

[sdomi4]

Yes, you can load postgame stats without using the observer tool by manually setting the match in the LoL Game State module.

The tool is resource light, my task manager currently shows it using 0% CPU and 1.7MB of RAM.

[AzureAstral]

Ok fine because League Broadcast is very greedy 😭 So i just need put the link on OBS Scene ?

U know this program or not ?

And in the future is it planned to make an Exe with a user interface for your program? Not being a developer I admit that even with the Wiki I have a lot of trouble 😭

[sdomi4]

Yes, you can just add a browser source (set to 1920x1080), the overlays are fully transparent to work with any background images/anything else you have happening on stream.

I have never used League Broadcast myself, but I can imagine it being somewhat resource hungry due to the methods it uses to get ingame data.

We are already working on simplifying the installation, and will also expand documentation once we are happy with the state of the toolkit.

[AzureAstral]

Ok fine ! I’m happy to read this 😁

We can use Runes Gfx Without draft ? Because i have another program for this and i’m interested for use Runes overlay !

[sdomi4]

Yes, the runes module should work fine without using champselect since it gets the data from a different source.

[AzureAstral]

Ok fine ! In fact, for rune and end game i just need API key for generate this ?

I didnt need League Observer Tool ?

[sdomi4]

Yes, for these modules the observer tool is not needed (no client data is involved)

[AzureAstral]

Hey ! I use the mod for stats at the end of the game, but the lines shift and I don't understand why :(

Any solution ? I just changed the font of the text I didn't touch anything else ! thx !

[Himyu]

could you please provide us with the changed Html file so we can reproduce this in our own experiment?

[AzureAstral]

I change only the font on theme.json :

:root {
  --blue-team: #029EF7;
  --blue-team-dark: hsl(202, 98%, 40%);
  --red-team: #FF5A64;
  --red-team-dark: hsl(356, 100%, 59%);
  --accent-color: #D8EF5E;
  --text-color: #fafafa;
  --background-color: #051c2c;
  --primary-font-family:  Bebas Neue;
  --secondary-font-family: Helvetica;
  --logo-path: url(/pages/op-themeing/active/logo.png);
}

and translate, the text on all-in-one.html :

For exemple : Tower = Tours in French

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All in One | League</title>
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/all-in-one.css">
  <link rel="stylesheet" href="/pages/op-themeing/active/index.css">

  <script src="/static/main-bundle.js"></script>
  <script src="js/Chart.bundle.min.js"></script>
</head>
<body>

  <div id="teamStats">
    <div id="kda" class="statsContainer">
      <p class="stat blue"></p>
      <p class="label">KDA</p>
      <p class="stat red"></p>
    </div>
    <div id="gold" class="statsContainer">
      <p class="stat blue"></p>
      <p class="label">Or</p>
      <p class="stat red"></p>
    </div>
    <div id="tower" class="statsContainer">
      <p class="stat blue"></p>
      <p class="label">Tours</p>
      <p class="stat red"></p>
    </div>
    <div id="inhibitors" class="statsContainer">
      <p class="stat blue"></p>
      <p class="label">Inhibiteurs</p>
      <p class="stat red"></p>
    </div>
    <div id="drakes" class="statsContainer">
      <div class="stat blue">
        <img src="" class="dragon">
        <img src="" class="dragon">
        <img src="" class="dragon">
        <img src="" class="dragon">
      </div>
      <p class="label">Dragons</p>
      <div class="stat red">
        <img src="" class="dragon">
        <img src="" class="dragon">
        <img src="" class="dragon">
        <img src="" class="dragon">
      </div>
    </div>
    <div id="elders" class="statsContainer">
      <p class="stat blue"></p>
      <p class="label">Elders</p>
      <p class="stat red"></p>
    </div>
    <div id="barons" class="statsContainer">
      <p class="stat blue"></p>
      <p class="label">Barons</p>
      <p class="stat red"></p>
    </div>
    <div id="bans" class="statsContainer">
      <div class="stat blue">
        <img src="" class="ban">
        <img src="" class="ban">
        <img src="" class="ban">
        <img src="" class="ban">
        <img src="" class="ban">
      </div>
      <p class="label">Bans</p>
      <div class="stat red">
        <img src="" class="ban">
        <img src="" class="ban">
        <img src="" class="ban">
        <img src="" class="ban">
        <img src="" class="ban">
      </div>
    </div>
  </div>

  <div id="damageGraph">
    <div class="team blue"></div>
    <div class="team red"></div>
  </div>

  <div id="goldGraph">
    <canvas id="goldGraphCTX"></canvas>
  </div>

  <script src="js/all-in-one/main.js" defer></script>
  <script src="js/all-in-one/gold.js" defer></script>
  <script src="js/all-in-one/teamStats.js" defer></script>
  <script src="js/all-in-one/damage.js" defer></script>
</body>
</html>

[sdomi4]

It turns out this is a bug when the stats don't have the same lengths (like the 10 towers vs 1 tower taken in your screenshot). We are working on a fix for this, I have opened a new issue to track this under #65

[AzureAstral]

Hello, I didnt know why but now he doesnt work... I got a API Key official (for stats from RIOT) and when I start Start.bat... He start and close and idk why.

So I delete the folder, DL a new one, install again and same error... :'(

https://user-images.githubusercontent.com/82313405/154183203-bead6c56-1230-469f-9309-24e8c41f6338.mp4

[sdomi4]

Hello, this often happens on/around patch days since communitydragon is not always perfectly up to date. As far as I can tell, 12.4 assets are now available, could you try launching the toolkit again?

[AzureAstral]

It's work but Graphic Damages doesnt work on "All in one" :o

[sdomi4]

Another bug found :) I have fixed the issue already, but it might be a moment until the fix lands in the public repo (we are making some changes to the structure of the toolkit).

For now, you can fix this temporarily by copying this to the custom CSS in OBS, replacing the color codes as necessary (these are just the default theme colors):

#blueTeam .stats {
  color: #029EF7;
}

#redTeam .stats {
  color: #FF5A64;
}

.dataContainer h5 {
  color: #D8EF5E;
}

#blueTeam .dataContainer h3.kda {
  margin-left: auto;
  color: #029EF7;
}
#redTeam .dataContainer h3.kda {
  margin-right: auto;
  color: #FF5A64;
}

#blueTeam .dmgBar {
  background-color: #029EF7;
  transform-origin: left;
  margin-right: 1rem;
}

#redTeam .dmgBar {
  background-color: #FF5A64;
  transform-origin: right;
  margin-left: 1rem;
}

[AzureAstral]

Hello ! I had this in the CSS of All in One ?

[sdomi4]

This fix is specific to the end of game screen, not All in One as colors and damage bars are missing there. I cannot reproduce the issue in All in One, damage bars are showing up as expected for me.

Could you post the match ID of the game where damage bars are missing? Have you made any modifications to the All in One CSS/Html (besides changing text)?

[github-actions[bot]]

Marking issue as stale after 7 days of no activity.

[github-actions[bot]]

Closing issue after 2 weeks of inactivity. Please reopen the issue if you need additional help.