Skip to content

Commit b10326d

Browse files
IamEld3stIamEld3st
authored
Merge pull request #16 from martmists/master
Add Tournament Overlay
2 parents ed85f69 + 591fb83 commit b10326d

File tree

7 files changed

+268
-0
lines changed

7 files changed

+268
-0
lines changed

‎rlbot_gui/gui/imgs/demo.png

7.15 KB
Loading

‎rlbot_gui/gui/imgs/frame.webm

136 KB
Binary file not shown.

‎rlbot_gui/gui/imgs/logo.png

538 KB
Loading

‎rlbot_gui/gui/imgs/save.png

6.9 KB
Loading

‎rlbot_gui/gui/imgs/shot.png

7.08 KB
Loading

‎rlbot_gui/gui/imgs/top.png

92.6 KB
Loading

‎rlbot_gui/gui/overlay.html

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
<html>
2+
<head>
3+
<title>Overlay Endpoint</title>
4+
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
5+
<style type="text/css">
6+
body {
7+
background-color: rgba(0,0,0,0);
8+
font-family: 'Exo 2', sans-serif;
9+
}
10+
11+
.hidden {
12+
display: none;
13+
}
14+
15+
.center {
16+
align: center;
17+
}
18+
19+
#names {
20+
display: flex;
21+
}
22+
23+
#names > .name-div {
24+
flex: 1;
25+
}
26+
27+
.name-div {
28+
color: white;
29+
font-size: 32;
30+
padding-top: 1%;
31+
font-weight: bold;
32+
}
33+
34+
#name-divider {
35+
width: 25%;
36+
}
37+
38+
#name-blue {
39+
text-align: right;
40+
}
41+
42+
#name-orange {
43+
text-align: left;
44+
margin-left: 5%;
45+
}
46+
47+
.set {
48+
position: absolute;
49+
left:0;
50+
top:0;
51+
z-index: -5;
52+
}
53+
54+
#footer > img {
55+
margin-left: auto;
56+
margin-right: auto;
57+
position: absolute;
58+
top: 8%;
59+
left: 0;
60+
right: 0;
61+
}
62+
63+
#blue-action {
64+
left: 7% !important;
65+
top: 1% !important;
66+
}
67+
68+
#orange-action {
69+
left: auto !important;
70+
top: 1% !important;
71+
right: 7% !important;
72+
}
73+
74+
.fade-in {
75+
visibility: visible;
76+
opacity: 1;
77+
transition: opacity 2s linear;
78+
}
79+
80+
.fade-out {
81+
visibility: hidden;
82+
opacity: 0;
83+
transition: visibility 0s 2s, opacity 2s linear;
84+
}
85+
</style>
86+
</head>
87+
88+
<body>
89+
<video id="goal-splash" muted="muted" class="set">
90+
<source src="/imgs/frame.webm" type="video/webm" />
91+
</video>
92+
93+
<img src="/imgs/top.png" class="set hide-after-match" />
94+
<img id="blue-action" class="set hide-after-match fade-out" height=64 width=64 />
95+
<img id="orange-action" class="set hide-after-match fade-out" height=64 width=64 />
96+
97+
<div id="names" class="hide-after-match">
98+
<div class="name-div" id="name-blue">Blue Team</div>
99+
<div id="name-divider"></div>
100+
<div class="name-div" id="name-orange">Orange Team</div>
101+
</div>
102+
103+
104+
<div id="footer" class="hide-after-match">
105+
<img src="/imgs/logo.png" height=10% width=auto />
106+
</div>
107+
108+
<script type="text/javascript">
109+
function loadRunner() {
110+
last_total_goals = 0
111+
blue_saves = 0
112+
blue_shots = 0
113+
blue_demos = 0
114+
115+
orange_saves = 0
116+
orange_shots = 0
117+
orange_demos = 0
118+
119+
setInterval(function() {
120+
eel.get_game_tick_packet()().then( packet => {
121+
blue_names = document.getElementById("name-blue")
122+
orange_names = document.getElementById("name-orange")
123+
124+
if (packet.game_info.is_match_ended || packet.game_cars == 0) {
125+
126+
for (let el of document.getElementsByClassName("hide-after-match")) {
127+
el.style.display = "none"
128+
}
129+
blue_names.innerHTML = "Game ended"
130+
orange_names.innerHTML = "Game ended"
131+
last_total_goals = 0
132+
133+
} else {
134+
135+
for (let el of document.getElementsByClassName("hide-after-match")) {
136+
if (el.style.display == "none") {
137+
style = "flex"
138+
if (el.classList.contains("set")) {
139+
style = "initial"
140+
}
141+
el.style.display = style
142+
}
143+
}
144+
145+
blue_cars = []
146+
orange_cars = []
147+
148+
new_blue_saves = 0
149+
new_blue_shots = 0
150+
new_blue_demos = 0
151+
152+
new_orange_saves = 0
153+
new_orange_shots = 0
154+
new_orange_demos = 0
155+
156+
goal_amount = 0
157+
158+
for (let el of packet.game_cars) {
159+
goal_amount += el.score_info.goals
160+
161+
if (el.name != "") {
162+
if (el.team == 0) {
163+
blue_cars.push(el)
164+
new_blue_shots += el.score_info.shots
165+
new_blue_saves += el.score_info.saves
166+
new_blue_demos += el.score_info.demolitions
167+
} else {
168+
orange_cars.push(el)
169+
new_orange_shots += el.score_info.shots
170+
new_orange_saves += el.score_info.saves
171+
new_orange_demos += el.score_info.demolitions
172+
}
173+
}
174+
}
175+
176+
if (new_blue_demos > blue_demos){
177+
blue_demos = new_blue_demos
178+
blue_action("demo")
179+
} else if (new_blue_shots > blue_shots) {
180+
blue_shots = new_blue_shots
181+
blue_action("shot")
182+
} else if (new_blue_saves > blue_saves) {
183+
blue_saves = new_blue_saves
184+
blue_action("save")
185+
}
186+
187+
if (new_orange_demos > orange_demos){
188+
orange_demos = new_orange_demos
189+
orange_action("demo")
190+
} else if (new_orange_shots > orange_shots) {
191+
orange_shots = new_orange_shots
192+
orange_action("shot")
193+
} else if (new_orange_saves > orange_saves) {
194+
orange_saves = new_orange_saves
195+
orange_action("save")
196+
}
197+
198+
if (goal_amount > last_total_goals){
199+
last_total_goals = goal_amount
200+
setTimeout(do_goal_splash, 1080)
201+
// setTimeout(do_goal_splash, 11100)
202+
}
203+
204+
if (blue_cars.length == 1) {
205+
blue_name = blue_cars[0].name
206+
} else if (blue_cars.length == 2) {
207+
blue_name = blue_cars[0].name + " & " + blue_cars[1].name
208+
} else {
209+
cars = blue_cars.map( x => x.name )
210+
blue_name = cars.slice(0, cars.length - 1).join(", ") + " & " + cars[cars.length - 1]
211+
}
212+
213+
blue_names.innerHTML = blue_name
214+
215+
if (orange_cars.length == 1) {
216+
orange_name = orange_cars[0].name
217+
} else if (orange_cars.length == 2) {
218+
orange_name = orange_cars[0].name + " & " + orange_cars[1].name
219+
} else {
220+
cars = orange_cars.map( x => x.name )
221+
orange_name = cars.slice(0, cars.length - 1).join(", ") + " & " + cars[cars.length - 1]
222+
}
223+
224+
orange_names.innerHTML = orange_name
225+
}
226+
})
227+
}, (1000 / 60))
228+
}
229+
230+
function do_goal_splash(){
231+
vid = document.getElementById("goal-splash")
232+
233+
vid.style.display = "block"
234+
vid.play()
235+
setTimeout(function() {
236+
vid.style.display = "none"
237+
vid.pause()
238+
vid.currentTime = 0
239+
}, 2000)
240+
}
241+
242+
function blue_action(action){
243+
src = "/imgs/" + action + ".png"
244+
el = document.getElementById("blue-action")
245+
el.src = src
246+
el.classList.remove("fade-out")
247+
el.classList.add("fade-in")
248+
setTimeout(function(){
249+
el.classList.remove("fade-in")
250+
el.classList.add("fade-out")
251+
}, 2500)
252+
}
253+
254+
function orange_action(action){
255+
src = "/imgs/" + action + ".png"
256+
el = document.getElementById("orange-action")
257+
el.src = src
258+
el.classList.remove("fade-out")
259+
el.classList.add("fade-in")
260+
setTimeout(function(){
261+
el.classList.remove("fade-in")
262+
el.classList.add("fade-out")
263+
}, 2500)
264+
}
265+
</script>
266+
<script type="text/javascript" src="/eel.js" onload="loadRunner()"></script>
267+
</body>
268+
</html>

0 commit comments

Comments
 (0)