React App

+ {new Array(amountOfMaps).fill(0).map((_, i) => ( +

i ? "win" : ""} ${left.side}`} /> + ))} +

{ bo ? `BEST OF ${bo}` : '' }

+ {new Array(amountOfMaps).fill(0).map((_, i) => ( +

i ? "win" : ""} ${right.side}`} /> + ))} +

+ ); + } +} diff --git a/src/HUD/MatchBar/TeamLogo.tsx b/src/HUD/MatchBar/TeamLogo.tsx new file mode 100644 index 0000000..53a40e5 --- /dev/null +++ b/src/HUD/MatchBar/TeamLogo.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Team } from 'csgogsi-socket'; +import * as I from '../../api/interfaces'; +import { apiUrl } from './../../api/api'; + +export default class TeamLogo extends React.Component<{ team?: Team | I.Team | null, height?: number, width?: number}> { + render(){ + const { team } = this.props; + if(!team) return null; + let id = ''; + const { logo } = team; + if('_id' in team){ + id = team._id; + } else if('id' in team && team.id){ + id = team.id; + } + return ( +

+ { logo && id ?

: ''} +

+ ); + } + +} diff --git a/src/HUD/MatchBar/TeamScore.tsx b/src/HUD/MatchBar/TeamScore.tsx new file mode 100644 index 0000000..4e7c718 --- /dev/null +++ b/src/HUD/MatchBar/TeamScore.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import * as I from "csgogsi-socket"; +import WinIndicator from "./WinIndicator"; +import { Timer } from "./MatchBar"; +import TeamLogo from './TeamLogo'; +import PlantDefuse from "../Timers/PlantDefuse" + +interface IProps { + team: I.Team; + orientation: "left" | "right"; + timer: Timer | null; + showWin: boolean; +} + +export default class TeamScore extends React.Component { + render() { + const { orientation, timer, team, showWin } = this.props; + return ( + <> +

{team.name}

+ +

+ + + + ); + } +} diff --git a/src/HUD/MatchBar/WinIndicator.tsx b/src/HUD/MatchBar/WinIndicator.tsx new file mode 100644 index 0000000..1fd3294 --- /dev/null +++ b/src/HUD/MatchBar/WinIndicator.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Team } from 'csgogsi-socket'; + +export default class WinAnnouncement extends React.Component<{ team: Team | null, show: boolean }> { + render() { + const { team, show } = this.props; + if(!team) return null; + return

+ WINS THE ROUND! +

+ } +} diff --git a/src/HUD/MatchBar/matchbar.scss b/src/HUD/MatchBar/matchbar.scss new file mode 100644 index 0000000..56a8fc8 --- /dev/null +++ b/src/HUD/MatchBar/matchbar.scss @@ -0,0 +1,391 @@ +@keyframes ShowWinCycle { + 0% { + opacity: 0; + height: 0; + } + 5% { + opacity: 1; + height: 50px; + } + 95% { + opacity: 1; + height: 50px; + } + 100% { + opacity: 0; + height: 0; + } +} +#matchbar { + display: flex; + flex-direction: row; + position: fixed; + justify-content: center; + width: 1148px; + height: 70px; + top: 10px; + left: 50%; + transform: translateX(-50%); + .CT { + color: var(--color-new-ct); + .round-thingy { + .inner { + background-color: #28abff; + } + background-color: #28abff80; + } + } + .T { + color: var(--color-new-t); + .round-thingy { + .inner { + background-color: #ffc600; + } + background-color: #ffc60080; + } + } + #timer { + display: flex; + flex-direction: column; + position: relative; + width: 126px; + height: 115px; + margin-left: 8px; + margin-right: 8px; + background-color: var(--sub-panel-color); + top: -10px; + &.no-bo { + height: 87px; + } + } + #bomb_container { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + position: absolute; + width: 100%; + height: 70px; + z-index: 0; + .bomb_timer { + width: 100%; + top: 0; + height: 0; + background-color: var(--color-bomb); + &.hide { + display: none; + } + } + .bomb_icon { + position: absolute; + width: 100%; + height: 100%; + svg { + position: absolute; + left: 50%; + transform: translateX(-50%); + top: 6px; + max-height: 80%; + max-width: 80%; + } + &.hide { + display: none; + } + } + } + #round_timer_text { + display: flex; + width: 100%; + height: 55px; + justify-content: center; + font-size: 34px; + font-weight: bold; + z-index: 1; + color: var(--white-full); + align-items: flex-end; + &.hide { + display: none; + } + } + #round_now { + display: flex; + flex-direction: column; + width: 100%; + height: 27px; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: bold; + z-index: 1; + color: var(--white-full); + &.hide { + display: none; + } + } + .team { + width: 426px; + display: flex; + align-items: center; + .logo { + display: flex; + flex-direction: row; + width: 105px; + height: 70px; + align-items: center; + overflow: hidden; + background-color: var(--sub-panel-color); + img { + max-width: 90%; + max-height: 65%; + } + } + &.left { + justify-content: center; + flex-direction: row-reverse; + .round-thingy { + left: -30px; + } + .logo { + justify-content: flex-end; + } + } + &.right { + justify-content: center; + flex-direction: row; + .round-thingy { + right: -30px; + } + .logo { + justify-content: flex-start; + } + } + } + .team-name { + display: flex; + width: 360px; + height: 70px; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 30px; + background-color: var(--sub-panel-color); + } + .round-thingy { + width: 60px; + height: 60px; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + .inner { + width: 35px; + height: 35px; + border-radius: 50%; + } + } + .score { + display: flex; + flex-direction: row; + width: 77px; + height: 70px; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 36px; + background-color: var(--sub-panel-color); + } + .bar { + display: flex; + flex-direction: row; + width: 10px; + height: 70px; + &.CT { + background-color: var(--color-new-ct); + } + &.T { + background-color: var(--color-new-t); + } + } + +} +.win_text { + position: fixed; + display: none; + opacity: 1; + width: 503px; + height: 50px; + top: 70px; + align-items: center; + color: black; + justify-content: center; + background-color: white; + font-size: 20px; + font-family: Montserrat; + font-weight: 600; + &.show { + display: flex; + animation: ShowWinCycle 5s linear 1; + animation-fill-mode: forwards; + } + &.right { + left: calc(50% + 71px); + } + &.left { + right: calc(50% + 71px); + } +} + +.defuse_plant_container { + position: fixed; + display: flex; + opacity: 1; + width: 503px; + height: 49px; + top: 70px; + align-items: center; + color: white; + justify-content: center; + background-color: rgba(0,0,0,0.65); + .defuse_plant_bar { + height: 49px; + background-color: #3c3c3c; + position: absolute; + width: 0%; + } + .defuse_plant_caption { + z-index: 1; + display: flex; + text-transform: uppercase; + align-items: flex-end; + svg { + margin-right: 13px; + } + } + &.right { + left: calc(50% + 71px); + .defuse_plant_bar { + left: 0; + } + } + &.left { + right: calc(50% + 71px); + .defuse_plant_bar { + right: 0; + } + } + &.hide { + opacity: 0; + } +} +#encapsulator { + overflow: hidden; + display: flex; + flex-direction: row; + position: fixed; + justify-content: center; + top: 80px; + width: 1148px; + height: 50px; + left: 50%; + transform: translateX(-50%); + .CT { + color: var(--color-new-ct); + } + .T { + color: var(--color-new-t); + } + .wins_bar { + display: flex; + flex-direction: row; + width: 10px; + height: 30px; + } + .wins_bar.CT { + background-color: var(--color-new-ct); + } + .wins_bar.T { + background-color: var(--color-new-t); + } +} +.alert_bar.CT { + background-color: var(--color-new-ct); +} +.alert_bar.T { + background-color: var(--color-new-t); +} +#series_container { + display: flex; + flex-direction: row; + width: 126px; + height: 30px; +} +#series_text { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: bold; + color: var(--white-full); +} +.container { + display: flex; + flex-direction: row; + width: 511px; + height: 100%; +} +.container.left { + justify-content: flex-end; +} +.container.right { + justify-content: flex-start; +} +.series_wins { + display: flex; + flex-direction: row; + width: 400px; + height: 30px; + z-index: 1; + padding-left: 6px; + padding-right: 6px; + top: -30px; + transition: top 0.5s; +} +.series_wins.show { + top: 0px; +} +.wins_box_container { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + align-items: flex-start; + justify-content: flex-start; +} +.series_wins.left { + .wins_box_container { + flex-direction: row-reverse; + } +} +.wins_box { + width: 77px; + height: 7px; + margin-left: 2px; + margin-right: 2px; + box-sizing: border-box; +} +.wins_box.CT { + background-color: rgba(0,0,0,0.6); +} +.wins_box.CT.win { + background-color: var(--color-new-ct); +} +.wins_box.T { + background-color: rgba(0,0,0,0.6); +} +.wins_box.T.win { + background-color: var(--color-new-t); +} diff --git a/src/HUD/Players/Avatar.tsx b/src/HUD/Players/Avatar.tsx new file mode 100644 index 0000000..87fa01d --- /dev/null +++ b/src/HUD/Players/Avatar.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { isDev, port } from '../../api/api'; +import { actions } from '../../App'; + +import { avatars } from './../../api/avatars'; + +import { Skull } from './../../assets/Icons'; + +interface IProps { + steamid: string, + slot?: number, + height?: number, + width?: number, + showSkull?: boolean, + showCam?: boolean +} +interface IState { + enableCams: boolean +} +export default class Avatar extends React.Component { + state = { + enableCams: !!this.props.showCam + } + componentDidMount(){ + actions.on("toggleCams", () => { + this.setState({enableCams: !this.state.enableCams}) + }); + } + render(){ + const { enableCams } = this.state; + //const url = avatars.filter(avatar => avatar.steamid === this.props.steamid)[0]; + const avatarData = avatars[this.props.steamid]; + if(!avatarData || !avatarData.url){ + return ''; + } + const slot = this.props.slot === 0 ? 10 : this.props.slot || 1; + const leftPosition = - 150*((slot-1)%5); + const topPosition = slot > 5 ? -150 : 0; + return ( +

+ { + this.props.showCam ?