new way to use obs overlays and end screen fix
This commit is contained in:
parent
ee99ca1f05
commit
7e46e5e5a4
10 changed files with 269 additions and 244 deletions
|
|
@ -60,7 +60,7 @@ Only Windows, MacOS, and Linux are officially supported. It is Not compatible wi
|
|||
|
||||
|
||||
|
||||
3. Check the `Local file` checkbox and set the file to `index.html` of the overlay you want to use. Width and height of the overlays can be found [here](#obs-overlays).
|
||||
3. Check the `Local file` checkbox and use a `.html` file of the overlay you want to use. Width and height of the overlays can be found [here](#obs-overlays).
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
10
WBM/Data.cs
10
WBM/Data.cs
|
|
@ -60,6 +60,14 @@ namespace WBM
|
|||
Count
|
||||
}
|
||||
|
||||
public enum GameStateEnum
|
||||
{
|
||||
WaitingOnPlayers,
|
||||
Countdown,
|
||||
GameInProgress,
|
||||
Results
|
||||
}
|
||||
|
||||
[DataContract]
|
||||
public class WBMConfig
|
||||
{
|
||||
|
|
@ -78,7 +86,6 @@ namespace WBM
|
|||
{
|
||||
// game version
|
||||
// gamemode
|
||||
// gamemode
|
||||
// teammate list
|
||||
// team rank (array of player index)
|
||||
|
||||
|
|
@ -86,6 +93,7 @@ namespace WBM
|
|||
[DataMember] public string[] nickList = new string[] { };
|
||||
[DataMember] public PlayerStatsStruct[] playerStatsArray = new PlayerStatsStruct[] { };
|
||||
[DataMember] public WBMConfig config = new WBMConfig();
|
||||
[DataMember] public Data.GameStateEnum gameState;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
WBM/WBM.cs
20
WBM/WBM.cs
|
|
@ -8,7 +8,7 @@ using WebSocketSharp.Server;
|
|||
|
||||
namespace WBM
|
||||
{
|
||||
[BepInPlugin("com.developomp.wbm", "War Brokers Mods", "0.9.0.0")]
|
||||
[BepInPlugin("com.developomp.wbm", "War Brokers Mods", "0.10.0.0")]
|
||||
public partial class WBM : BaseUnityPlugin
|
||||
{
|
||||
private void Start()
|
||||
|
|
@ -27,7 +27,7 @@ namespace WBM
|
|||
this.localPlayerIndexRef = webguyType.GetField("ALEJJPEPFOG", bindFlags);
|
||||
this.personGunRef = webguyType.GetField("IEGLIMLBDPH", bindFlags);
|
||||
this.nickListRef = webguyType.GetField("CLLDJOMEKIP", bindFlags);
|
||||
// modList
|
||||
this.gameStateRef = webguyType.GetField("MCGMEPGBCKK", bindFlags);
|
||||
|
||||
// Load configurations
|
||||
this.showSquadServerRaw = Convert.ToBoolean(PlayerPrefs.GetInt(PrefNames.showSquadServer, 1));
|
||||
|
|
@ -155,7 +155,7 @@ Reset Everything: (RShift+R)"
|
|||
new Rect(this.GUIOffsetX, this.GUIOffsetY, 220, 60),
|
||||
@"War Brokers Mods
|
||||
Made by [LP] POMP
|
||||
v0.9.0.0"
|
||||
v0.10.0.0"
|
||||
);
|
||||
|
||||
if (this.data.localPlayerIndex >= 0)
|
||||
|
|
@ -238,14 +238,15 @@ zoom: {Util.getGunZoom(this.personGun)}"
|
|||
}
|
||||
}
|
||||
|
||||
GUI.Box(new Rect(Screen.width - 320, this.GUIOffsetY + 60, 300, 270), "Team Stats");
|
||||
GUI.Label(new Rect(Screen.width - 315, this.GUIOffsetY + 85, 105, 190), teamNames);
|
||||
GUI.Label(new Rect(Screen.width - 200, this.GUIOffsetY + 85, 40, 190), teamKDR);
|
||||
GUI.Label(new Rect(Screen.width - 150, this.GUIOffsetY + 85, 40, 190), teamPoints);
|
||||
GUI.Label(new Rect(Screen.width - 100, this.GUIOffsetY + 85, 70, 190), teamDamage);
|
||||
int teamStatOffset = (this.data.gameState == Data.GameStateEnum.Results) ? 400 : 0;
|
||||
GUI.Box(new Rect(Screen.width - 320, 385 + teamStatOffset, 300, 270), "Team Stats");
|
||||
GUI.Label(new Rect(Screen.width - 315, 410 + teamStatOffset, 105, 190), teamNames);
|
||||
GUI.Label(new Rect(Screen.width - 200, 410 + teamStatOffset, 40, 190), teamKDR);
|
||||
GUI.Label(new Rect(Screen.width - 150, 410 + teamStatOffset, 40, 190), teamPoints);
|
||||
GUI.Label(new Rect(Screen.width - 100, 410 + teamStatOffset, 70, 190), teamDamage);
|
||||
|
||||
GUI.Label(
|
||||
new Rect(Screen.width - 315, this.GUIOffsetY + 270, 300, 55),
|
||||
new Rect(Screen.width - 315, 595 + teamStatOffset, 300, 55),
|
||||
$@"total damage: {teamTotalDamage}
|
||||
total deaths: {teamTotalDeaths}
|
||||
total kills: {teamTotalKills}"
|
||||
|
|
@ -273,6 +274,7 @@ total kills: {teamTotalKills}"
|
|||
this.myTeam = this.teamList[this.data.localPlayerIndex];
|
||||
this.personGun = this.personGunRaw;
|
||||
this.data.nickList = this.nickListRaw;
|
||||
this.data.gameState = this.gameStateRaw;
|
||||
}
|
||||
|
||||
this.data.config.showSquadServer = this.showSquadServerRaw;
|
||||
|
|
|
|||
|
|
@ -141,5 +141,14 @@ namespace WBM
|
|||
return (string[])nickListRef.GetValue(this.webguy);
|
||||
}
|
||||
}
|
||||
|
||||
private FieldInfo gameStateRef;
|
||||
private Data.GameStateEnum gameStateRaw
|
||||
{
|
||||
get
|
||||
{
|
||||
return (Data.GameStateEnum)gameStateRef.GetValue(this.webguy);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta
|
||||
http-equiv="Cache-Control"
|
||||
content="no-cache, no-store, must-revalidate"
|
||||
/>
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div id="line"></div>
|
||||
|
||||
<div id="delta-container">
|
||||
<span class="positive" id="killsEloDelta">0</span>
|
||||
<span class="positive" id="gamesEloDelta">0</span>
|
||||
</div>
|
||||
|
||||
<div id="elo-container">
|
||||
<div class="killsElo">
|
||||
<span id="killsElo">0000</span>
|
||||
<p class="descriptor">kills Elo</p>
|
||||
</div>
|
||||
<div class="gamesElo">
|
||||
<span id="gamesElo">0000</span>
|
||||
<p class="descriptor">games Elo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="deps/reconnecting-websocket.min.js"></script>
|
||||
<script src="index.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { CountUp } from "./deps/countUp.min.js";
|
||||
|
||||
let socket = new ReconnectingWebSocket("ws://127.0.0.1:24601/json");
|
||||
|
||||
socket.onopen = () => console.log("Socket Connected!");
|
||||
|
||||
let killsEloDelta = document.getElementById("killsEloDelta");
|
||||
let gamesEloDelta = document.getElementById("gamesEloDelta");
|
||||
|
||||
let killsEloCountUp = new CountUp("killsElo", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let gamesEloCountUp = new CountUp("gamesElo", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let killsEloDeltaCountUp = new CountUp("killsEloDelta", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let gamesEloDeltaCountUp = new CountUp("gamesEloDelta", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
let data = JSON.parse(event.data);
|
||||
|
||||
if (data.playerStatsArray[data.localPlayerIndex].killsEloDelta < 0) {
|
||||
killsEloDelta.classList.remove("positive");
|
||||
} else {
|
||||
killsEloDelta.classList.add("positive");
|
||||
}
|
||||
|
||||
if (data.playerStatsArray[data.localPlayerIndex].gamesEloDelta < 0) {
|
||||
gamesEloDelta.classList.remove("positive");
|
||||
} else {
|
||||
gamesEloDelta.classList.add("positive");
|
||||
}
|
||||
|
||||
killsEloCountUp.update(data.playerStatsArray[data.localPlayerIndex].killsElo);
|
||||
|
||||
killsEloDeltaCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].killsEloDelta
|
||||
);
|
||||
|
||||
gamesEloCountUp.update(data.playerStatsArray[data.localPlayerIndex].gamesElo);
|
||||
|
||||
gamesEloDeltaCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].gamesEloDelta
|
||||
);
|
||||
};
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
:root {
|
||||
--width: 325px;
|
||||
--height: 100px;
|
||||
--border-radius: 15px;
|
||||
--bg: linear-gradient(90deg, #313131, #161616);
|
||||
--accent: rgb(88, 55, 236);
|
||||
--accent2: rgb(48, 29, 131);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Box Container */
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg);
|
||||
transition: width 500ms ease, opacity 300ms, ease;
|
||||
}
|
||||
|
||||
/* Progress Line */
|
||||
|
||||
#line {
|
||||
box-shadow: 0px 5px 20px #000;
|
||||
z-index: -1;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius);
|
||||
transform: translate(0px, 3px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#line::before,
|
||||
#line::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
animation: slide 5s linear infinite alternate;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
/* Elo data */
|
||||
|
||||
#elo-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
transition: top 500ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.killsElo,
|
||||
.gamesElo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
/* Data descriptor */
|
||||
|
||||
.descriptor {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Delta */
|
||||
|
||||
#delta-container {
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
font-size: 20px;
|
||||
top: -15px;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#killsEloDelta,
|
||||
#gamesEloDelta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
padding: 0 10px 0 10px;
|
||||
border-radius: 10px;
|
||||
transition: transform 200ms ease, opacity 300ms ease;
|
||||
}
|
||||
|
||||
#killsEloDelta {
|
||||
background: linear-gradient(to right, var(--accent), var(--accent2));
|
||||
box-shadow: 0 2px 5px var(--accent);
|
||||
}
|
||||
|
||||
#gamesEloDelta {
|
||||
background: linear-gradient(to right, gray, #313131);
|
||||
box-shadow: 0 2px 5px rgb(77, 77, 77);
|
||||
}
|
||||
|
||||
.positive::before {
|
||||
content: "+";
|
||||
}
|
||||
239
overlays/Elo.html
Normal file
239
overlays/Elo.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta
|
||||
http-equiv="Cache-Control"
|
||||
content="no-cache, no-store, must-revalidate"
|
||||
/>
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
:root {
|
||||
--width: 325px;
|
||||
--height: 100px;
|
||||
--border-radius: 15px;
|
||||
--bg: linear-gradient(90deg, #313131, #161616);
|
||||
--accent: rgb(88, 55, 236);
|
||||
--accent2: rgb(48, 29, 131);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Box Container */
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg);
|
||||
transition: width 500ms ease, opacity 300ms, ease;
|
||||
}
|
||||
|
||||
/* Progress Line */
|
||||
|
||||
#line {
|
||||
box-shadow: 0px 5px 20px #000;
|
||||
z-index: -1;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius);
|
||||
transform: translate(0px, 3px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#line::before,
|
||||
#line::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
animation: slide 5s linear infinite alternate;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
/* Elo data */
|
||||
|
||||
#elo-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
transition: top 500ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.killsElo,
|
||||
.gamesElo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
/* Data descriptor */
|
||||
|
||||
.descriptor {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Delta */
|
||||
|
||||
#delta-container {
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
font-size: 20px;
|
||||
top: -15px;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#killsEloDelta,
|
||||
#gamesEloDelta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
padding: 0 10px 0 10px;
|
||||
border-radius: 10px;
|
||||
transition: transform 200ms ease, opacity 300ms ease;
|
||||
}
|
||||
|
||||
#killsEloDelta {
|
||||
background: linear-gradient(to right, var(--accent), var(--accent2));
|
||||
box-shadow: 0 2px 5px var(--accent);
|
||||
}
|
||||
|
||||
#gamesEloDelta {
|
||||
background: linear-gradient(to right, gray, #313131);
|
||||
box-shadow: 0 2px 5px rgb(77, 77, 77);
|
||||
}
|
||||
|
||||
.positive::before {
|
||||
content: "+";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div id="line"></div>
|
||||
|
||||
<div id="delta-container">
|
||||
<span class="positive" id="killsEloDelta">0</span>
|
||||
<span class="positive" id="gamesEloDelta">0</span>
|
||||
</div>
|
||||
|
||||
<div id="elo-container">
|
||||
<div class="killsElo">
|
||||
<span id="killsElo">0000</span>
|
||||
<p class="descriptor">kills Elo</p>
|
||||
</div>
|
||||
<div class="gamesElo">
|
||||
<span id="gamesElo">0000</span>
|
||||
<p class="descriptor">games Elo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="deps/reconnecting-websocket.min.js"></script>
|
||||
<script type="module">
|
||||
import { CountUp } from "./deps/countUp.min.js";
|
||||
|
||||
let socket = new ReconnectingWebSocket("ws://127.0.0.1:24601/json");
|
||||
|
||||
socket.onopen = () => console.log("Socket Connected!");
|
||||
|
||||
let killsEloDelta = document.getElementById("killsEloDelta");
|
||||
let gamesEloDelta = document.getElementById("gamesEloDelta");
|
||||
|
||||
let killsEloCountUp = new CountUp("killsElo", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let gamesEloCountUp = new CountUp("gamesElo", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let killsEloDeltaCountUp = new CountUp("killsEloDelta", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let gamesEloDeltaCountUp = new CountUp("gamesEloDelta", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
let data = JSON.parse(event.data);
|
||||
|
||||
if (data.playerStatsArray[data.localPlayerIndex].killsEloDelta < 0) {
|
||||
killsEloDelta.classList.remove("positive");
|
||||
} else {
|
||||
killsEloDelta.classList.add("positive");
|
||||
}
|
||||
|
||||
if (data.playerStatsArray[data.localPlayerIndex].gamesEloDelta < 0) {
|
||||
gamesEloDelta.classList.remove("positive");
|
||||
} else {
|
||||
gamesEloDelta.classList.add("positive");
|
||||
}
|
||||
|
||||
killsEloCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].killsElo
|
||||
);
|
||||
|
||||
killsEloDeltaCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].killsEloDelta
|
||||
);
|
||||
|
||||
gamesEloCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].gamesElo
|
||||
);
|
||||
|
||||
gamesEloDeltaCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].gamesEloDelta
|
||||
);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue