@four-leaf-studios/rl-overlay 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +150 -100
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +152 -102
- package/dist/index.esm.js.map +1 -1
- package/dist/types/ScoreboardSeriesBox.d.ts +2 -1
- package/package.json +2 -2
- package/src/Scoreboard.tsx +2 -1
- package/src/ScoreboardSeriesBox.tsx +5 -4
- package/test-overlay/package.json +27 -27
- package/test-overlay/public/mock-css.css +75 -112
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@four-leaf-studios/rl-overlay",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"main": "dist/index.cjs.js",
|
|
5
5
|
"module": "dist/index.esm.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"typescript": "^5.8.3"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@four-leaf-studios/rl-socket-hook": "^1.2.
|
|
46
|
+
"@four-leaf-studios/rl-socket-hook": "^1.2.4",
|
|
47
47
|
"@rysh/json-to-css": "^1.0.0",
|
|
48
48
|
"framer-motion": "^12.9.4"
|
|
49
49
|
}
|
package/src/Scoreboard.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import Timer from "./Timer";
|
|
|
7
7
|
import ScoreboardSeriesBox from "./ScoreboardSeriesBox";
|
|
8
8
|
import ScoreboardGameBox from "./ScoreboardGameBox";
|
|
9
9
|
import useReplay from "./hooks/useReplay";
|
|
10
|
+
import { Team } from "./types";
|
|
10
11
|
|
|
11
12
|
export const Scoreboard = () => {
|
|
12
13
|
const broadcast = useBroadcast();
|
|
@@ -41,7 +42,7 @@ export const Scoreboard = () => {
|
|
|
41
42
|
</div>
|
|
42
43
|
|
|
43
44
|
<div className="bottom_bar">
|
|
44
|
-
{broadcast.teams.map((team:
|
|
45
|
+
{broadcast.teams.map((team: Team, idx: number) => (
|
|
45
46
|
<ScoreboardSeriesBox
|
|
46
47
|
key={team.id || idx}
|
|
47
48
|
team={team}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
3
|
import { memo } from "react";
|
|
4
|
+
import { Team } from "./types";
|
|
4
5
|
|
|
5
6
|
interface ScoreboardSeriesBoxProps {
|
|
6
|
-
team:
|
|
7
|
+
team: Team;
|
|
7
8
|
seriesNumber: number;
|
|
8
9
|
}
|
|
9
10
|
|
|
@@ -17,10 +18,10 @@ export const ScoreboardSeriesBoxComponent: React.FC<
|
|
|
17
18
|
const pointsCount = Math.ceil(bestOf / 2);
|
|
18
19
|
const points = Array.from({ length: pointsCount }, (_, index) => index);
|
|
19
20
|
|
|
20
|
-
const
|
|
21
|
-
const modifier =
|
|
21
|
+
const isLeftTeam = team.id === "0";
|
|
22
|
+
const modifier = isLeftTeam ? "left" : "right";
|
|
22
23
|
const teamColor =
|
|
23
|
-
team.color?.primary_color || (
|
|
24
|
+
team.color?.primary_color || (isLeftTeam ? "#0052cc" : "#ff6600");
|
|
24
25
|
|
|
25
26
|
return (
|
|
26
27
|
<div
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "test-overlay",
|
|
3
|
-
"private": true,
|
|
4
|
-
"version": "0.0.0",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "vite",
|
|
8
|
-
"build": "vite build",
|
|
9
|
-
"lint": "eslint .",
|
|
10
|
-
"preview": "vite preview"
|
|
11
|
-
},
|
|
12
|
-
"dependencies": {
|
|
13
|
-
"react": "^19.0.0",
|
|
14
|
-
"react-dom": "^19.0.0"
|
|
15
|
-
},
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"@eslint/js": "^9.22.0",
|
|
18
|
-
"@types/react": "^19.0.10",
|
|
19
|
-
"@types/react-dom": "^19.0.4",
|
|
20
|
-
"@vitejs/plugin-react": "^4.3.4",
|
|
21
|
-
"eslint": "^9.22.0",
|
|
22
|
-
"eslint-plugin-react-hooks": "^5.2.0",
|
|
23
|
-
"eslint-plugin-react-refresh": "^0.4.19",
|
|
24
|
-
"globals": "^16.0.0",
|
|
25
|
-
"vite": "^6.3.1"
|
|
26
|
-
}
|
|
27
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "test-overlay",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"lint": "eslint .",
|
|
10
|
+
"preview": "vite preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"react": "^19.0.0",
|
|
14
|
+
"react-dom": "^19.0.0"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@eslint/js": "^9.22.0",
|
|
18
|
+
"@types/react": "^19.0.10",
|
|
19
|
+
"@types/react-dom": "^19.0.4",
|
|
20
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
21
|
+
"eslint": "^9.22.0",
|
|
22
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
23
|
+
"eslint-plugin-react-refresh": "^0.4.19",
|
|
24
|
+
"globals": "^16.0.0",
|
|
25
|
+
"vite": "^6.3.1"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/* Scoreboard styles */
|
|
2
|
+
/* Global Styles */
|
|
1
3
|
/* Whatever font you want to use */
|
|
2
4
|
/* latin-ext */
|
|
3
5
|
@font-face {
|
|
@@ -28,27 +30,10 @@
|
|
|
28
30
|
.overlay {
|
|
29
31
|
--fallback-darker-mutual: black;
|
|
30
32
|
}
|
|
33
|
+
/* Global Styles END */
|
|
31
34
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
.bottom_bar {
|
|
36
|
-
display: flex;
|
|
37
|
-
justify-content: center;
|
|
38
|
-
align-items: center;
|
|
39
|
-
width: 100%;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.scoreboard_box {
|
|
43
|
-
width: 785px;
|
|
44
|
-
height: 100px;
|
|
45
|
-
left: 0;
|
|
46
|
-
right: 0;
|
|
47
|
-
top: 0.5rem;
|
|
48
|
-
margin: auto;
|
|
49
|
-
position: relative;
|
|
50
|
-
}
|
|
51
|
-
|
|
35
|
+
/* Scoreboard */
|
|
36
|
+
/* Timer */
|
|
52
37
|
.time_box {
|
|
53
38
|
position: absolute;
|
|
54
39
|
margin: auto;
|
|
@@ -73,6 +58,35 @@
|
|
|
73
58
|
animation: slideIn 0.5s ease-in-out;
|
|
74
59
|
}
|
|
75
60
|
|
|
61
|
+
.main_bar {
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.top_bar {
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.bottom_bar {
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
align-items: center;
|
|
72
|
+
width: 100%;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.scoreboard_box {
|
|
76
|
+
width: 785px;
|
|
77
|
+
height: 100px;
|
|
78
|
+
left: 0;
|
|
79
|
+
right: 0;
|
|
80
|
+
top: 0.5rem;
|
|
81
|
+
margin: auto;
|
|
82
|
+
position: relative;
|
|
83
|
+
background: linear-gradient(
|
|
84
|
+
to right,
|
|
85
|
+
var(--team-left-primary) 49.9%,
|
|
86
|
+
var(--team-right-primary) 50.1%
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
76
90
|
.name_box {
|
|
77
91
|
}
|
|
78
92
|
|
|
@@ -81,54 +95,19 @@
|
|
|
81
95
|
z-index: 0;
|
|
82
96
|
width: 100%;
|
|
83
97
|
height: 100px;
|
|
84
|
-
padding: 0 10px;
|
|
85
98
|
border-radius: 5px;
|
|
86
99
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
87
100
|
display: flex;
|
|
88
101
|
align-items: center;
|
|
89
|
-
gap: 10px;
|
|
90
102
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
91
103
|
|
|
92
104
|
--horizontal-padding: 4.2rem;
|
|
93
105
|
}
|
|
94
106
|
|
|
95
|
-
.scoreboard_team_box::before {
|
|
96
|
-
content: "";
|
|
97
|
-
position: absolute;
|
|
98
|
-
top: 0;
|
|
99
|
-
left: 0;
|
|
100
|
-
right: 0;
|
|
101
|
-
bottom: 0;
|
|
102
|
-
background: inherit;
|
|
103
|
-
z-index: -1;
|
|
104
|
-
display: flex;
|
|
105
|
-
border-radius: 5px;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.scoreboard_team_box::after {
|
|
109
|
-
content: "";
|
|
110
|
-
position: absolute;
|
|
111
|
-
z-index: -1;
|
|
112
|
-
width: 83.5%;
|
|
113
|
-
height: 79px;
|
|
114
|
-
flex-shrink: 0;
|
|
115
|
-
border-radius: 5px;
|
|
116
|
-
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
117
|
-
display: flex;
|
|
118
|
-
align-items: center;
|
|
119
|
-
gap: 60px;
|
|
120
|
-
overflow: hidden;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
107
|
.left_scoreboard_team_box {
|
|
124
108
|
left: 0;
|
|
125
109
|
justify-content: flex-start;
|
|
126
110
|
padding-left: var(--horizontal-padding);
|
|
127
|
-
background-color: var(--team-left-primary);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.left_scoreboard_team_box::after {
|
|
131
|
-
right: 0;
|
|
132
111
|
background: linear-gradient(
|
|
133
112
|
180deg,
|
|
134
113
|
var(--team-left-primary) 0%,
|
|
@@ -140,11 +119,6 @@
|
|
|
140
119
|
right: 0;
|
|
141
120
|
justify-content: flex-end;
|
|
142
121
|
padding-right: var(--horizontal-padding);
|
|
143
|
-
background-color: var(--team-right-primary);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.right_scoreboard_team_box::after {
|
|
147
|
-
left: 0;
|
|
148
122
|
background: linear-gradient(
|
|
149
123
|
180deg,
|
|
150
124
|
var(--team-right-primary) 0%,
|
|
@@ -186,45 +160,73 @@
|
|
|
186
160
|
}
|
|
187
161
|
|
|
188
162
|
.logo_box {
|
|
189
|
-
height:
|
|
163
|
+
height: 80%;
|
|
190
164
|
object-fit: contain;
|
|
191
|
-
padding: 0.1rem;
|
|
192
165
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
166
|
+
|
|
167
|
+
padding: 1rem;
|
|
168
|
+
border-radius: 5px;
|
|
169
|
+
overflow: hidden;
|
|
193
170
|
}
|
|
194
171
|
|
|
195
172
|
.left_logo_box {
|
|
196
173
|
order: 0;
|
|
174
|
+
border-top-right-radius: 0;
|
|
175
|
+
border-bottom-right-radius: 0;
|
|
176
|
+
background-image: linear-gradient(
|
|
177
|
+
to bottom,
|
|
178
|
+
rgba(0, 0, 0, 0) 0%,
|
|
179
|
+
rgba(5, 0, 0, 0.53) 100%
|
|
180
|
+
);
|
|
197
181
|
}
|
|
198
182
|
|
|
199
183
|
.right_logo_box {
|
|
200
184
|
order: 1;
|
|
185
|
+
border-top-left-radius: 0;
|
|
186
|
+
border-bottom-left-radius: 0;
|
|
187
|
+
background-image: linear-gradient(
|
|
188
|
+
to bottom,
|
|
189
|
+
rgba(0, 0, 0, 0) 0%,
|
|
190
|
+
rgba(5, 0, 0, 0.53) 100%
|
|
191
|
+
);
|
|
201
192
|
}
|
|
202
193
|
|
|
203
194
|
.score_box {
|
|
204
|
-
|
|
195
|
+
height: 80%;
|
|
196
|
+
flex: 1;
|
|
205
197
|
display: flex;
|
|
206
198
|
flex-direction: column;
|
|
207
199
|
justify-content: center;
|
|
208
200
|
flex-shrink: 0;
|
|
209
|
-
text-align: center;
|
|
210
201
|
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
211
202
|
font-family: Lato;
|
|
212
203
|
font-size: 60px;
|
|
213
204
|
font-weight: 800;
|
|
214
205
|
line-height: normal;
|
|
215
206
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
207
|
+
overflow: hidden;
|
|
216
208
|
}
|
|
217
209
|
|
|
218
210
|
.left_score_box {
|
|
219
|
-
margin-left: var(--margin);
|
|
220
211
|
color: var(--team-left-secondary);
|
|
221
212
|
order: 1;
|
|
213
|
+
padding-right: 20%;
|
|
214
|
+
background-image: linear-gradient(
|
|
215
|
+
to bottom,
|
|
216
|
+
rgba(0, 0, 0, 0) 0%,
|
|
217
|
+
rgba(5, 0, 0, 0.53) 100%
|
|
218
|
+
);
|
|
222
219
|
}
|
|
223
220
|
|
|
224
221
|
.right_score_box {
|
|
225
|
-
margin-right: var(--margin);
|
|
226
222
|
color: var(--team-right-secondary);
|
|
227
223
|
order: 0;
|
|
224
|
+
padding-left: 20%;
|
|
225
|
+
background-image: linear-gradient(
|
|
226
|
+
to bottom,
|
|
227
|
+
rgba(0, 0, 0, 0) 0%,
|
|
228
|
+
rgba(5, 0, 0, 0.53) 100%
|
|
229
|
+
);
|
|
228
230
|
}
|
|
229
231
|
|
|
230
232
|
.series_box {
|
|
@@ -289,6 +291,7 @@
|
|
|
289
291
|
.game_box {
|
|
290
292
|
display: none;
|
|
291
293
|
}
|
|
294
|
+
/* Scoreboard End */
|
|
292
295
|
|
|
293
296
|
/* Replay Section */
|
|
294
297
|
.replay_box {
|
|
@@ -308,15 +311,6 @@
|
|
|
308
311
|
gap: 12px;
|
|
309
312
|
}
|
|
310
313
|
|
|
311
|
-
.replay_box::after {
|
|
312
|
-
content: "";
|
|
313
|
-
width: 20px;
|
|
314
|
-
height: 20px;
|
|
315
|
-
background-color: rgb(255, 79, 79);
|
|
316
|
-
border-radius: 50%;
|
|
317
|
-
clip-path: circle(50% at 50% 50%);
|
|
318
|
-
}
|
|
319
|
-
|
|
320
314
|
.replay_text {
|
|
321
315
|
color: rgb(255, 79, 79);
|
|
322
316
|
text-align: center;
|
|
@@ -326,7 +320,9 @@
|
|
|
326
320
|
font-weight: 800;
|
|
327
321
|
line-height: normal;
|
|
328
322
|
}
|
|
323
|
+
/* Replay END */
|
|
329
324
|
|
|
325
|
+
/* Teams */
|
|
330
326
|
.team_box {
|
|
331
327
|
position: absolute;
|
|
332
328
|
top: 49px;
|
|
@@ -429,7 +425,9 @@
|
|
|
429
425
|
.right_boost_meter_bar {
|
|
430
426
|
background-color: var(--team-right-primary);
|
|
431
427
|
}
|
|
428
|
+
/* Teams END */
|
|
432
429
|
|
|
430
|
+
/* Stat Box */
|
|
433
431
|
.stat_box {
|
|
434
432
|
position: absolute;
|
|
435
433
|
bottom: 0;
|
|
@@ -538,6 +536,7 @@
|
|
|
538
536
|
.stat_box_player_boost .boost_meter_bar {
|
|
539
537
|
margin: unset;
|
|
540
538
|
}
|
|
539
|
+
/* Statbox END */
|
|
541
540
|
|
|
542
541
|
/* Target Boost (the circular meter) */
|
|
543
542
|
.target_boost {
|
|
@@ -694,40 +693,4 @@
|
|
|
694
693
|
.right_target_boost_value {
|
|
695
694
|
color: var(--team-right-secondary);
|
|
696
695
|
}
|
|
697
|
-
|
|
698
|
-
/* Replay Section */
|
|
699
|
-
.replay_box {
|
|
700
|
-
position: absolute;
|
|
701
|
-
margin: auto;
|
|
702
|
-
left: 0px;
|
|
703
|
-
right: 0px;
|
|
704
|
-
z-index: 500;
|
|
705
|
-
width: 449px;
|
|
706
|
-
height: 101px;
|
|
707
|
-
background-color: #1d1d21;
|
|
708
|
-
clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
|
|
709
|
-
|
|
710
|
-
display: flex;
|
|
711
|
-
justify-content: center;
|
|
712
|
-
align-items: center;
|
|
713
|
-
gap: 12px;
|
|
714
|
-
}
|
|
715
|
-
|
|
716
|
-
.replay_box::after {
|
|
717
|
-
content: "";
|
|
718
|
-
width: 20px;
|
|
719
|
-
height: 20px;
|
|
720
|
-
background-color: rgb(255, 79, 79);
|
|
721
|
-
border-radius: 50%;
|
|
722
|
-
clip-path: circle(50% at 50% 50%);
|
|
723
|
-
}
|
|
724
|
-
|
|
725
|
-
.replay_text {
|
|
726
|
-
color: rgb(255, 79, 79);
|
|
727
|
-
text-align: center;
|
|
728
|
-
font-family: Lato;
|
|
729
|
-
font-size: 48px;
|
|
730
|
-
font-style: normal;
|
|
731
|
-
font-weight: 800;
|
|
732
|
-
line-height: normal;
|
|
733
|
-
}
|
|
696
|
+
/* Target Boost END */
|