31 |
35 | );
36 | }
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import './styles/global.css'
2 | import 'react-toastify/dist/ReactToastify.min.css';
3 |
4 | import {LiveGame} from "./components/LiveStatusGameCard/LiveGame";
5 | import {HashRouter, Switch, Route, Redirect} from "react-router-dom";
6 | import {Footer} from "./components/Footer/Footer";
7 | import {LiveGames} from "./components/LiveGameCard/LiveGames";
8 | import {Navbar} from "./components/Navbar/Navbar";
9 | import { useTheme } from './theme/ThemeContext'
10 | import React from "react";
11 |
12 | function App() {
13 | const { theme } = useTheme();
14 |
15 | return (
16 |
32 |
34 | {`${toggled ? "🔊" : "🔈"}`}
33 |
18 |
28 |
20 |
21 |
22 |
23 |
25 |
26 |
27 |
37 |
41 | );
42 | }
--------------------------------------------------------------------------------
/src/assets/images/baron.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/LiveStatusGameCard/types/detailsPersistentTypes.ts:
--------------------------------------------------------------------------------
1 | export interface Tournament {
2 | id: string;
3 | }
4 |
5 | export interface League {
6 | id: string;
7 | slug: string;
8 | image: string;
9 | name: string;
10 | }
11 |
12 | export interface Strategy {
13 | count: number;
14 | }
15 |
16 | export interface Result {
17 | gameWins: number;
18 | }
19 |
20 | export interface Team {
21 | id: string;
22 | name: string;
23 | code: string;
24 | image: string;
25 | result: Result;
26 | }
27 |
28 | export interface Team2 {
29 | id: string;
30 | side: string;
31 | }
32 |
33 | export interface Game {
34 | number: number;
35 | id: string;
36 | state: string;
37 | teams: Team2[];
38 | vods: any[];
39 | }
40 |
41 | export interface Match {
42 | strategy: Strategy;
43 | teams: Team[];
44 | games: Game[];
45 | }
46 |
47 | export interface Stream {
48 | parameter: string;
49 | locale: string;
50 | provider: string;
51 | countries: string[];
52 | offset: number;
53 | }
54 |
55 | export interface Event {
56 | id: string;
57 | type: string;
58 | tournament: Tournament;
59 | league: League;
60 | match: Match;
61 | streams: Stream[];
62 | }
63 |
64 | export interface Data {
65 | event: Event;
66 | }
67 |
68 | export interface GameDetails {
69 | data: Data;
70 | }
--------------------------------------------------------------------------------
/src/components/LiveGameCard/types/liveGameTypes.ts:
--------------------------------------------------------------------------------
1 | export interface League {
2 | id: string;
3 | slug: string;
4 | name: string;
5 | image: string;
6 | priority: number;
7 | }
8 |
9 | export interface Result {
10 | outcome: string;
11 | gameWins: number;
12 | }
13 |
14 | export interface Record {
15 | wins: number;
16 | losses: number;
17 | }
18 |
19 | export interface Team {
20 | id: string;
21 | name: string;
22 | slug: string;
23 | code: string;
24 | image: string;
25 | result: Result;
26 | record: Record;
27 | }
28 |
29 | export interface Strategy {
30 | type: string;
31 | count: number;
32 | }
33 |
34 | export interface Match {
35 | id: string;
36 | teams: Team[];
37 | strategy: Strategy;
38 | }
39 |
40 | export interface Stream {
41 | parameter: string;
42 | locale: string;
43 | provider: string;
44 | countries: string[];
45 | offset: number;
46 | }
47 |
48 | export interface Event {
49 | id: string;
50 | startTime: Date;
51 | state: string;
52 | type: string;
53 | blockName: string;
54 | league: League;
55 | match: Match;
56 | streams: Stream[];
57 | }
58 |
59 | export interface Schedule {
60 | events: Event[];
61 | }
62 |
63 | export interface Data {
64 | schedule: Schedule;
65 | }
66 |
67 | export interface LoLLiveGames {
68 | data: Data;
69 | }
--------------------------------------------------------------------------------
/src/components/LiveGameCard/LiveGameCard.tsx:
--------------------------------------------------------------------------------
1 | import {Link} from "react-router-dom";
2 | import {Event} from "./types/liveGameTypes";
3 |
4 | type Props = {
5 | game: Event;
6 | }
7 |
8 | export function LiveGameCard({ game }: Props) {
9 | return (
10 |
11 |
38 |
40 | 🌙
39 |
12 |
34 |
35 | );
36 | }
--------------------------------------------------------------------------------
/src/components/LiveGameCard/ScheduleGameCard.tsx:
--------------------------------------------------------------------------------
1 | import {Link} from "react-router-dom";
2 | import {Event} from "./types/scheduleType";
3 |
4 | type Props = {
5 | game: Event;
6 | }
7 |
8 | export function ScheduleGameCard({ game }: Props) {
9 | return (
10 |
11 | {game.league.name}
13 | 14 |
15 |
33 |
16 | ![{game.match.teams[0].name}/]({game.match.teams[0].image})
18 |
19 | {game.match.teams[0].name}
20 |
21 |
22 |
23 | VS
24 | 25 |
26 | ![{game.match.teams[1].name}/]({game.match.teams[1].image})
28 |
29 | {game.match.teams[1].name}
30 |
31 |
32 |
12 |
34 |
35 | );
36 | }
--------------------------------------------------------------------------------
/src/theme/Themes.ts:
--------------------------------------------------------------------------------
1 | import { ThemeType } from './ThemeContext'
2 | import { Theme } from './Theme'
3 |
4 | export const THEMES: Record{game.league.name}
13 | 14 |
15 |
33 |
16 |
18 |
19 | {game.match.teams[0].name}
20 |
21 |
22 |
23 | VS
24 | 25 |
26 |
28 |
29 | {game.match.teams[1].name}
30 |
31 |
32 |
34 |
38 | );
39 | }
40 |
41 | function filterByTeams(event: LiveEvents) {
42 | return event.match !== undefined;
43 | }
44 |
45 | let date = new Date(Date.now());
46 | function filterByTodayDate(event: TodayEvent) {
47 | let eventDate = event.startTime.toString().split("T")[0].split("-");
48 |
49 | if(parseInt(eventDate[0]) === date.getFullYear() &&
50 | parseInt(eventDate[1]) === (date.getUTCMonth() + 1) &&
51 | parseInt(eventDate[2]) === date.getDate()){
52 |
53 | if(event.match === undefined) return false
54 | if(event.match.id === undefined) return false
55 |
56 | return true;
57 | }else{
58 | return false;
59 | }
60 | }
--------------------------------------------------------------------------------
/src/assets/images/dragon-elder.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/utils/LoLEsportsAPI.ts:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 |
3 | //export const ITEMS_URL = "https://ddragon.leagueoflegends.com/cdn/11.5.1/img/item/"
4 | export const ITEMS_URL = "https://ddragon.bangingheads.net/cdn/latest/img/item/"
5 | export const CHAMPIONS_URL = "https://ddragon.bangingheads.net/cdn/latest/img/champion/"
6 |
7 | const API_URL_PERSISTED = "https://esports-api.lolesports.com/persisted/gw"
8 | const API_URL_LIVE = "https://feed.lolesports.com/livestats/v1"
9 | const API_KEY = "0TvQnueqKa5mxJntVWt0w4LpLfEkrV1Ta8rQBb9Z"
10 |
11 | export function getLiveGames() {
12 | return axios.get(`${API_URL_PERSISTED}/getLive?hl=pt-BR`, {
13 | headers: {
14 | "x-api-key": API_KEY,
15 | },
16 | })
17 | }
18 |
19 | export function getSchedule() {
20 | return axios.get(`${API_URL_PERSISTED}/getSchedule?hl=pt-BR`, {
21 | headers: {
22 | "x-api-key": API_KEY,
23 | },
24 | })
25 | }
26 |
27 | export function getLiveWindowGame(gameId: string, date: string) {
28 | return axios.get(`${API_URL_LIVE}/window/${gameId}`, {
29 | params: {
30 | "hl": "pt-BR",
31 | "startingTime": date,
32 | },
33 | headers: {
34 | "x-api-key": API_KEY,
35 | },
36 | })
37 | }
38 |
39 | export function getLiveDetailsGame(gameId: string, date: string) {
40 | return axios.get(`${API_URL_LIVE}/details/${gameId}`, {
41 | params: {
42 | "hl": "pt-BR",
43 | "startingTime": date,
44 | },
45 | headers: {
46 | "x-api-key": API_KEY,
47 | },
48 | })
49 | }
50 |
51 | export function getGameDetails(gameId: string) {
52 | return axios.get(`${API_URL_PERSISTED}/getEventDetails`, {
53 | params: {
54 | "hl": "pt-BR",
55 | "id": gameId,
56 | },
57 | headers: {
58 | "x-api-key": API_KEY,
59 | },
60 | })
61 | }
62 |
63 |
64 | export function getISODateMultiplyOf10() {
65 | const date = new Date();
66 | date.setMilliseconds(0);
67 |
68 | if (date.getSeconds() % 10 !== 0) {
69 | date.setSeconds(date.getSeconds() - (date.getSeconds() % 10));
70 | }
71 |
72 | date.setSeconds(date.getSeconds() - 60);
73 |
74 | return date.toISOString();
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/Navbar/styles/navbarStyle.css:
--------------------------------------------------------------------------------
1 | .navbar-container {
2 | display: flex;
3 | justify-content: center;
4 |
5 | width: 100%;
6 | height: 5rem;
7 |
8 | background-color: var(--card-color);
9 | box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4);
10 | }
11 |
12 | .navbar-logo-container{
13 | display: flex;
14 | justify-content: center;
15 | }
16 |
17 | .navbar-logo {
18 | display: flex;
19 | align-items: center;
20 | justify-content: center;
21 | flex-direction: column;
22 | }
23 |
24 | .navbar-container::before, .navbar-logo-container, .toggle-container {
25 | content: '';
26 | flex-basis: 100%;
27 | }
28 |
29 | .navbar-icon-img {
30 | width: 2.5rem;
31 | }
32 |
33 | .navbar-icon-img > path {
34 | fill: var(--logo-color);
35 | }
36 |
37 | .navbar-icon {
38 | color: var(--title);
39 | font: 500 1.25rem 'Inter', sans-serif;
40 | margin-bottom: 0.5rem;
41 | }
42 |
43 | /*
44 | theme and sound toggle
45 | */
46 |
47 | .settings-container {
48 | display: flex;
49 | align-items: center;
50 | width: 100%;
51 | }
52 |
53 | .sound-toggle {
54 | margin-left: 100%;
55 | cursor: pointer;
56 | height: 1.5rem;
57 | width: 2.5rem;
58 | border-radius: 50px;
59 | border: 3px solid var(--gray-line);
60 | background-color: var(--theme-switch-bg);
61 | }
62 |
63 | .theme-toggle {
64 | margin-left: 35%;
65 | cursor: pointer;
66 | height: 1.5rem;
67 | width: 2.5rem;
68 | border-radius: 50px;
69 | border: 3px solid var(--gray-line);
70 | background-color: var(--theme-switch-bg);
71 | }
72 |
73 | @media(max-width: 980px) {
74 | .theme-toggle {
75 | margin-left: 0;
76 | }
77 | .sound-toggle {
78 | margin-left: 0;
79 | }
80 | }
81 |
82 | .notch {
83 | display: flex;
84 | justify-content: center;
85 | align-items: center;
86 | height: 1.75rem;
87 | width: 1.75rem;
88 | border-radius: 50%;
89 | background-color: var(--theme-switch-notch);
90 | transform: translate(-50%, -20%);
91 | transition: all 0.5s;
92 | }
93 |
94 | .dark > .notch {
95 | transform: translate(50%, -20%);
96 | }
97 |
98 | .muted > .notch {
99 | transform: translate(50%, -20%);
100 | }
--------------------------------------------------------------------------------
/src/components/LiveGameCard/GameCardList.tsx:
--------------------------------------------------------------------------------
1 | import {LiveGameCard} from "./LiveGameCard";
2 | import {ScheduleGameCard} from "./ScheduleGameCard";
3 |
4 | import {Event as LiveEvent} from "./types/liveGameTypes";
5 | import {Event as TodayEvent} from "./types/scheduleType";
6 |
7 | import Galaxy from "../../assets/images/galaxy.svg"
8 |
9 | type Props = {
10 | liveGames: LiveEvent[];
11 | todayGames: TodayEvent[];
12 | }
13 |
14 | export function GameCardList({ liveGames, todayGames }: Props) {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | type PropsLive = {
27 | liveGames: LiveEvent[];
28 | }
29 |
30 | function LiveGames({liveGames}: PropsLive) {
31 | if (liveGames !== undefined && liveGames.length !== 0) {
32 | return (
33 |
34 |
43 | );
44 | }else {
45 | return (
46 |
35 | {liveGames.map(game => (
36 |
42 |
47 | 
48 |
50 | );
51 | }
52 | }
53 |
54 | type PropsToday = {
55 | todayGames: TodayEvent[];
56 | }
57 |
58 | function TodayGames({todayGames}: PropsToday) {
59 | if (todayGames !== undefined && todayGames.length !== 0) {
60 |
61 | let date = new Date();
62 |
63 | return (
64 | NENHUM JOGO AO VIVO
49 |
65 |
77 | );
78 | }else{
79 | return (
80 |
81 | );
82 | }
83 | }
--------------------------------------------------------------------------------
/src/components/LiveStatusGameCard/ItemsDisplay.tsx:
--------------------------------------------------------------------------------
1 | import {Frame} from "./types/detailsLiveTypes";
2 |
3 | import {ITEMS_URL} from "../../utils/LoLEsportsAPI"
4 |
5 | type Props = {
6 | participantId: number,
7 | lastFrame: Frame
8 | }
9 |
10 | export function ItemsDisplay({ participantId, lastFrame }: Props) {
11 |
12 | const items = lastFrame.participants[participantId].items;
13 |
14 | /*
15 | A api da riot não nos retorna nada sobre o arauto, quando
16 | um jogador pega o arauto sua trinket some para sempre (a
17 | menos que ele retorne na base e compre outra), assim podemos
18 | supor que o jogador pegou o arauto
19 |
20 | Update:
21 | Infelizmente por todo o projeto ser client side o jogador
22 | sempre estará com arauto, futuramente se fomos fazer algo
23 | a logica do arauto poderá ser implementada server-side,
24 | retirando o arauto após 240s
25 | */
26 |
27 | /*if (!(items.includes(3340) || items.includes(3363) || items.includes(3364))) {
28 | items.push(3513); // Supondo que o jogador que não possui ward está com arauto
29 | }*/
30 |
31 | let trinket = -1;
32 | const itemsID = Array.from(new Set(items)).sort(sortItems);
33 |
34 | if(itemsID[0] !== undefined && (itemsID[0] === 3340 || itemsID[0] === 3363 || itemsID[0] === 3364)) {
35 | trinket = itemsID.shift() as number;
36 | }
37 |
38 | return (
39 | JOGOS DO DIA
66 |
67 |
76 |
68 | {todayGames.map(game => (
69 |
75 |
40 | {[...Array(6)].map((x, i) => {
41 |
42 | if(itemsID[i] !== undefined) {
43 | return (
44 |
71 | );
72 | }
73 |
74 | /*
75 | (3364, 3363, 3340) são os ids das trinkets (wards)
76 | para verificar se um jogar pegou o arauto, basicamente
77 | vemos se o jogador não possui nenhuma trinket, logo
78 | adicionamos o id 3513 (arauto) ao seus itens
79 | */
80 |
81 | const sortItems = (a: number, b: number) => { // (3364, 3363, 3340) id das wards | 3513 id do arauto
82 | if(a === 3364 || a === 3363 || a === 3340 || a === 3513) return -1;
83 | if(b === 3364 || b === 3363 || b === 3340 || a === 3513) return 1;
84 |
85 | //return (a > b ? 1 : -1);
86 | return b - a;
87 | }
--------------------------------------------------------------------------------
/src/components/LiveStatusGameCard/LiveGame.tsx:
--------------------------------------------------------------------------------
1 | import './styles/playerStatusStyle.css'
2 |
3 | import {
4 | getGameDetails,
5 | getISODateMultiplyOf10,
6 | getLiveDetailsGame,
7 | getLiveWindowGame
8 | } from "../../utils/LoLEsportsAPI";
9 | import {useEffect, useState} from "react";
10 | import {GameMetadata, Frame as FrameWindow} from "./types/windowLiveTypes";
11 | import Loading from '../../assets/images/loading.svg'
12 | import {PlayersTable} from "./PlayersTable";
13 | import BigNumber from "bignumber.js";
14 | import {Frame as FrameDetails} from "./types/detailsLiveTypes";
15 | import {GameDetails} from "./types/detailsPersistentTypes";
16 |
17 | export function LiveGame({ match }: any) {
18 | const [lastFrameWindow, setLastFrameWindow] = useState
45 | 
46 |
47 | )
48 | }else{
49 | return (
50 |
51 | )
52 | }
53 |
54 | })
55 | }
56 |
57 |
58 | {trinket !== -1 ?
59 | (
60 |
46 |
61 | 
62 |
63 | )
64 | :
65 | (
66 |
67 | )
68 | }
69 |
70 |
62 |
91 | 
92 |
93 | )
94 | }
95 | }
--------------------------------------------------------------------------------
/src/assets/images/galaxy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/LiveStatusGameCard/styles/playerStatusStyle.css:
--------------------------------------------------------------------------------
1 | .mini-health-bar {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .mini-health-bar > div {
7 | flex: 1;
8 | border-radius: 4px;
9 | min-width: 5rem;
10 | background: var(--gray-line);
11 | position: relative;
12 | }
13 |
14 | .mini-health-bar > div > div {
15 | height: 28px;
16 | border-radius: 4px;
17 | transition: width 1s;
18 | background: var(--green);
19 | }
20 |
21 | span.mini-current-health {
22 | position: absolute;
23 | top: 50%;
24 | left: 50%;
25 | transform: translate(-50%, -50%);
26 | font-size: 12px;
27 | font-weight: 400;
28 | }
29 |
30 | /*
31 | HEADER IMAGES
32 | */
33 |
34 | .live-game-stats-header-team-images {
35 | display: flex;
36 | align-items: center;
37 | }
38 |
39 | .live-game-stats-header-team-images > h1 {
40 | flex: 1;
41 | text-align: center;
42 | }
43 |
44 | .live-game-stats-header-team-images > h1 > h3 {
45 | font-weight: 500;
46 | font-size: 1rem;
47 | }
48 |
49 | .live-game-stats-header-team-images > h3 {
50 | flex: 1;
51 | text-align: center;
52 | }
53 |
54 | .live-game-stats-header-team-images > .blue-team {
55 | flex: 1;
56 | display: flex;
57 | justify-content: center;
58 |
59 | width: 4rem;
60 | height: 4rem;
61 |
62 | border-radius: 5px;
63 | padding: 0.30rem;
64 |
65 | filter: drop-shadow(0px 0px 0px #222);
66 |
67 | }
68 |
69 | .live-game-stats-header-team-images > .red-team {
70 | display: flex;
71 | flex: 1;
72 | flex-direction: row-reverse;
73 | justify-content: center;
74 | text-align: right;
75 |
76 | width: 4rem;
77 | height: 4rem;
78 |
79 | border-radius: 5px;
80 | padding: 0.30rem;
81 | filter: drop-shadow(0px 0px 0px #222);
82 | }
83 |
84 | /*
85 | HEADER STATUS
86 | */
87 |
88 | .live-game-stats-header-status {
89 | margin-top: 1.5rem;
90 | display: flex;
91 | }
92 |
93 | .live-game-stats-header-status > .blue-team > .team-stats > svg > path {
94 | fill: var(--blue-twitter);
95 | }
96 |
97 | .live-game-stats-header-status > .blue-team > .team-stats > svg > g {
98 | fill: var(--blue-twitter);
99 | }
100 |
101 | .live-game-stats-header-status > .red-team > .team-stats > svg > path {
102 | fill: var(--red);
103 | }
104 |
105 | .live-game-stats-header-status > .red-team > .team-stats > svg > g {
106 | fill: var(--red);
107 | }
108 |
109 | .live-game-stats-header-status > .blue-team {
110 | flex: 1;
111 | display: flex;
112 | justify-content: space-between;
113 | margin-right: 15rem;
114 | }
115 |
116 | @media(max-width: 1080px) {
117 | .live-game-stats-header-status > .blue-team {
118 | margin-right: 10rem;
119 | }
120 | }
121 |
122 | @media(max-width: 720px) {
123 | .live-game-stats-header-status > .blue-team {
124 | margin-right: 1rem;
125 | }
126 | }
127 |
128 | .live-game-stats-header-status > .red-team {
129 | display: flex;
130 | flex: 1;
131 | flex-direction: row-reverse;
132 | justify-content: space-between;
133 | text-align: right;
134 | }
135 |
136 | .team-stats {
137 | color: var(--text);
138 | display: inline-block;
139 | text-align: center;
140 | width: 24px;
141 | }
142 |
143 | .team-stats > span {
144 | display: flex;
145 | justify-content: center;
146 | }
147 |
148 | /*
149 | Gold bar
150 | */
151 |
152 | .live-game-stats-header-gold {
153 | margin: 1rem 0;
154 | display: flex;
155 | }
156 |
157 | .live-game-stats-header-gold > .blue-team {
158 | border-bottom: 4px solid var(--blue-twitter);
159 | }
160 |
161 | .live-game-stats-header-gold > .red-team {
162 | border-bottom: 4px solid var(--red);
163 | }
164 |
165 | /*
166 | Status dragons
167 | */
168 | .live-game-stats-header-dragons{
169 | display: flex;
170 | min-height: 24px;
171 | }
172 |
173 | .live-game-stats-header-dragons > .blue-team {
174 | flex: 1;
175 | }
176 |
177 | .live-game-stats-header-dragons > .red-team {
178 | text-align: right;
179 | flex: 1;
180 | }
181 |
182 | .blue-team > .dragon {
183 | margin-right: 0.75rem;
184 | }
185 |
186 | .red-team > .dragon {
187 | margin-left: 0.75rem;
188 | }
189 |
190 | /*
191 | PLAYER
192 | */
193 |
194 | .status-live-game-card {
195 | background: var(--card-color);
196 | box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.4);
197 | border-radius: 4px;
198 | }
199 |
200 | .status-live-game-card-content {
201 | margin: 1.5rem 1.5rem;
202 | overflow-x: auto;
203 | }
204 |
205 | .status-live-game-card-table {
206 | width: 100%;
207 | }
208 |
209 | .player-champion-info {
210 | text-align: left;
211 | display: flex;
212 | align-items: center;
213 | }
214 |
215 | .player-champion-info-level{
216 | position: absolute;
217 | transform: translate(-50%, 100%);
218 | font-size: 12px;
219 | }
220 |
221 | .player-champion-info-name {
222 | margin-left: 0.5rem;
223 | display: flex;
224 | flex-direction: column;
225 | }
226 |
227 | .player-card-player-name {
228 | font-size: 10px;
229 | }
230 |
231 | .player-champion {
232 | width: 32px;
233 | border-radius: 50%;
234 | background: var(--gray-line);
235 | }
236 |
237 | .player-stats{
238 | color: var(--text)
239 | }
240 |
241 | .table-top-row-champion{
242 | width: 12rem;
243 | }
244 |
245 | .table-top-row-vida{
246 | height: 28px;
247 | width: 15rem;
248 | }
249 |
250 | .table-top-row-items {
251 | height: 28px;
252 | width: 12rem;
253 | }
254 |
255 | .table-top-row {
256 | height: 28px;
257 | }
258 |
259 | .player-stats {
260 | /*width: 64px;*/
261 | height: 28px;
262 | line-height: 28px;
263 | font-size: 12px;
264 | font-weight: 400;
265 | background: var(--gray-line);
266 | text-align: center;
267 | border-radius: 3px;
268 | }
269 |
270 | .player-stats-kda {
271 | width: 28px;
272 | }
273 |
274 | /*
275 |
276 | */
277 |
278 | .player-stats-items {
279 | height: 28px;
280 |
281 | display: flex;
282 | justify-content: center;
283 | align-items: center;
284 |
285 | background: var(--gray-line);
286 | border-radius: 4px;
287 | }
288 |
289 | .player-stats-item {
290 | flex: 1;
291 |
292 | display: flex;
293 | align-items: center;
294 | justify-content: center;
295 | }
296 |
297 | .player-stats-item > img {
298 | height: 26px;
299 | border-radius: 4px;
300 | }
301 |
302 | /*
303 |
304 | */
305 |
306 | .player-gold-positive {
307 | color: var(--green-positive);
308 | font-weight: 500;
309 | }
310 |
311 | .player-gold-negative {
312 | color: var(--red);
313 | font-weight: 500;
314 | }
315 |
316 | .loading-game-container {
317 | display: flex;
318 | width: 100%;
319 | height: 60vh;
320 | justify-content: center;
321 | align-items: center;
322 | }
323 |
324 | .loading-game-image{
325 | width: 20%;
326 | }
327 |
328 | /*
329 | Toast LiveAPIWatcher
330 | */
331 |
332 | .toast-watcher {
333 | display: flex;
334 | align-items: center;
335 | }
336 |
337 | .toast-image {
338 | display: flex;
339 |
340 | width: 2rem;
341 | height: 2rem;
342 |
343 | margin-right: 1rem;
344 | }
--------------------------------------------------------------------------------
/src/components/LiveStatusGameCard/LiveAPIWatcher.tsx:
--------------------------------------------------------------------------------
1 | import './styles/playerStatusStyle.css'
2 |
3 | import {GameMetadata, Participant} from "./types/windowLiveTypes";
4 |
5 | import React, {useEffect, useState} from "react";
6 | import {ToastContainer, toast} from 'react-toastify';
7 | import {Frame as FrameWindow} from "./types/windowLiveTypes";
8 |
9 | import useSound from "use-sound";
10 | import {Team} from "./types/detailsPersistentTypes";
11 |
12 | const firstblood = require("../../assets/audios/firstblood.ogg");
13 | const kill = require("../../assets/audios/campeao_eliminado.ogg");
14 | const tower_blue = require("../../assets/audios/azul_torre_destruida.ogg");
15 | const tower_red = require("../../assets/audios/vermelha_torre_destruida.ogg");
16 | const dragon_blue = require("../../assets/audios/azul_dragao.ogg");
17 | const dragon_red = require("../../assets/audios/vermelha_dragao.ogg");
18 | const baron_blue = require("../../assets/audios/azul_baron.ogg");
19 | const baron_red = require("../../assets/audios/vermelha_baron.ogg");
20 | const inib_blue = require("../../assets/audios/azul_inib_destruido.ogg");
21 | const inib_red = require("../../assets/audios/vermelha_inib_destruido.ogg");
22 |
23 | type Props = {
24 | lastFrameWindow: FrameWindow,
25 | gameMetadata: GameMetadata,
26 | blueTeam: Team,
27 | redTeam: Team,
28 | }
29 |
30 | type StatusWatcher = {
31 | inhibitors: {
32 | blue: number,
33 | red: number
34 | }
35 | dragons: {
36 | blue: number,
37 | red: number
38 | }
39 | towers: {
40 | blue: number,
41 | red: number
42 | }
43 | barons: {
44 | blue: number,
45 | red: number
46 | }
47 | participants: {
48 | blue: Participant[]
49 | red: Participant[]
50 | }
51 | }
52 |
53 | export function LiveAPIWatcher({ lastFrameWindow, gameMetadata, blueTeam, redTeam } : Props) {
54 | const [status, setStatus] = useState
157 |
162 | , {
163 | pauseOnFocusLoss: false,
164 | position: toast.POSITION.TOP_LEFT
165 | }
166 | )
167 | }else{
168 | toast.error(
169 |
158 | 
159 |
160 | {message}
161 |
170 |
171 |
173 | , {
174 | pauseOnFocusLoss: false,
175 | position: toast.POSITION.TOP_RIGHT
176 | }
177 | )
178 | }
179 | }
--------------------------------------------------------------------------------
/src/components/LiveStatusGameCard/PlayersTable.tsx:
--------------------------------------------------------------------------------
1 | import './styles/playerStatusStyle.css'
2 |
3 | import { GameMetadata } from "./types/windowLiveTypes";
4 | import {GameDetails} from "./types/detailsPersistentTypes";
5 |
6 | import {MiniHealthBar} from "./MiniHealthBar";
7 | import React, {useEffect, useState} from "react";
8 | import {toast} from 'react-toastify';
9 | import {Frame as FrameDetails} from "./types/detailsLiveTypes";
10 | import {Frame as FrameWindow, Participant as ParticipantWindow} from "./types/windowLiveTypes";
11 |
12 | import {ReactComponent as TowerSVG} from '../../assets/images/tower.svg';
13 | import {ReactComponent as BaronSVG} from '../../assets/images/baron.svg';
14 | import {ReactComponent as KillSVG} from '../../assets/images/kill.svg';
15 | import {ReactComponent as GoldSVG} from '../../assets/images/gold.svg';
16 | import {ReactComponent as InhibitorSVG} from '../../assets/images/inhibitor.svg';
17 |
18 | import {ReactComponent as OceanDragonSVG} from '../../assets/images/dragon-ocean.svg';
19 | import {ReactComponent as InfernalDragonSVG} from '../../assets/images/dragon-infernal.svg';
20 | import {ReactComponent as CloudDragonSVG} from '../../assets/images/dragon-cloud.svg';
21 | import {ReactComponent as MountainDragonSVG} from '../../assets/images/dragon-mountain.svg';
22 | import {ReactComponent as ElderDragonSVG} from '../../assets/images/dragon-elder.svg';
23 | import {ItemsDisplay} from "./ItemsDisplay";
24 |
25 | import {Helmet} from "react-helmet";
26 | import {LiveAPIWatcher} from "./LiveAPIWatcher";
27 | import { CHAMPIONS_URL } from '../../utils/LoLEsportsAPI';
28 |
29 | type Props = {
30 | lastFrameWindow: FrameWindow,
31 | lastFrameDetails: FrameDetails,
32 | gameMetadata: GameMetadata,
33 | gameDetails: GameDetails,
34 | }
35 |
36 | export function PlayersTable({ lastFrameWindow, lastFrameDetails, gameMetadata, gameDetails } : Props) {
37 | const [gameState, setGameState] = useState{message}
172 |
78 |
79 |
80 |
81 |
82 |
83 |
334 |
335 | );
336 | }
337 |
338 | function getGoldDifference(player: ParticipantWindow, side: string, gameMetadata: GameMetadata, frame: FrameWindow) {
339 | if(6 > player.participantId) { // blue side
340 | const redPlayer = frame.redTeam.participants[player.participantId - 1];
341 | const goldResult = player.totalGold - redPlayer.totalGold;
342 |
343 | return {
344 | style: goldResult > 0 ? "positive" : "negative",
345 | goldDifference: goldResult > 0 ? "+" + Number(goldResult).toLocaleString("pt-br") : Number(goldResult).toLocaleString("pt-br")
346 | };
347 | }else{
348 | const bluePlayer = frame.blueTeam.participants[player.participantId - 6];
349 | const goldResult = player.totalGold - bluePlayer.totalGold;
350 |
351 | return {
352 | style: goldResult > 0 ? "positive" : "negative",
353 | goldDifference: goldResult > 0 ? "+" + Number(goldResult).toLocaleString("pt-br") : Number(goldResult).toLocaleString("pt-br")
354 | };
355 | }
356 | }
357 |
358 | function getDragonSVG(dragonName: string){
359 | switch (dragonName) {
360 | case "ocean": return
84 |
169 |
170 |
250 |
251 |
252 |
253 |
331 |
332 |
333 |
85 |
167 |
168 |
86 |
91 | VS
92 |
94 |
99 |
87 | 
88 |
89 | {blueTeam.code}
90 |
91 | VS
92 | {gameState.toUpperCase()}
93 |
94 | {redTeam.code}
95 |
96 | 
97 |
98 |
100 |
149 |
101 |
124 |
102 |
105 |
106 |
109 |
110 |
113 |
114 |
119 |
120 |
123 |
125 |
148 |
126 |
129 |
130 |
133 |
134 |
137 |
138 |
143 |
144 |
147 |
150 |
151 |
152 |
153 |
154 |
166 |
155 | {lastFrameWindow.blueTeam.dragons.map(dragon => (
156 | getDragonSVG(dragon)
157 | ))}
158 |
159 |
160 |
161 | {lastFrameWindow.redTeam.dragons.slice().reverse().map(dragon => (
162 | getDragonSVG(dragon)
163 | ))}
164 |
165 | | 172 | {blueTeam.name.toUpperCase()} 173 | | 174 |175 | VIDA 176 | | 177 |178 | ITEMS 179 | | 180 |181 | CS 182 | | 183 |184 | K 185 | | 186 |187 | D 188 | | 189 |190 | A 191 | | 192 |193 | Ouro 194 | | 195 |196 | +/- 197 | | 198 |
|---|---|---|---|---|---|---|---|---|
|
207 |
208 |
219 |
214 | {gameMetadata.blueTeamMetadata.participantMetadata[player.participantId - 1].championId}
215 | {gameMetadata.blueTeamMetadata.participantMetadata[player.participantId - 1].summonerName}
217 |
218 | |
220 |
221 | |
223 |
224 | |
226 |
227 | {player.creepScore}
228 | |
229 |
230 | {player.kills}
231 | |
232 |
233 | {player.deaths}
234 | |
235 |
236 | {player.assists}
237 | |
238 |
239 | {Number(player.totalGold).toLocaleString('pt-br')}
241 | |
242 |
243 | {goldDifference.goldDifference}
244 | |
245 |
| 255 | {redTeam.name.toUpperCase()} 256 | | 257 |258 | VIDA 259 | | 260 |261 | ITEMS 262 | | 263 |264 | CS 265 | | 266 |267 | K 268 | | 269 |270 | D 271 | | 272 |273 | A 274 | | 275 |276 | Ouro 277 | | 278 |279 | +/- 280 | | 281 |
|---|---|---|---|---|---|---|---|---|
|
290 |
291 |
301 |
297 | {gameMetadata.redTeamMetadata.participantMetadata[player.participantId - 6].championId}
298 | {gameMetadata.redTeamMetadata.participantMetadata[player.participantId - 6].summonerName}
299 |
300 | |
302 |
303 | |
305 |
306 | |
308 |
309 | {player.creepScore}
310 | |
311 |
312 | {player.kills}
313 | |
314 |
315 | {player.deaths}
316 | |
317 |
318 | {player.assists}
319 | |
320 |
321 | {Number(player.totalGold).toLocaleString('pt-br')}
322 | |
323 |
324 | {goldDifference.goldDifference}
325 | |
326 |