demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

spechud fixes

Browse source
This commit is contained in:
Robin Appelman 2023-04-29 17:44:18 +02:00
commit f5f553c446
3 changed files with 49 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

9
script/viewer/Analyse/Render/KillFeed.tsx
View file

@ -7,11 +7,14 @@ export interface KillFeedProps {
players: PlayerState[]; players: PlayerState[];
} }
export function KillFeed({kills, tick, players}: KillFeedProps) { export function KillFeed(props: KillFeedProps) {
let relevantKills: Kill[] = kills.filter(kill => kill.tick <= tick && kill.tick >= (tick - 30 * 10)); const {kills} = props;
const relevantKills = () => kills.filter(kill => kill.tick <= props.tick && kill.tick >= (props.tick - 30 * 10));
return <div class="killfeed"> return <div class="killfeed">
{relevantKills.map((kill, i) => <KillFeedItem kill={kill} players={players}/>)} <For each={relevantKills()}>{(kill) =>
<KillFeedItem kill={kill} players={props.players}/>
}</For>
</div> </div>
} }

72
script/viewer/Analyse/Render/PlayerSpec.tsx
View file

@ -1,4 +1,5 @@
import {PlayerState} from "../Data/Parser"; import {PlayerState} from "../Data/Parser";
import {KillFeedItem} from "./KillFeed";
export interface PlayerSpecProps { export interface PlayerSpecProps {
player: PlayerState; player: PlayerState;
@ -52,42 +53,49 @@ export interface PlayersSpecProps {
players: PlayerState[]; players: PlayerState[];
} }
export function PlayersSpec({players}: PlayersSpecProps) { function sortPlayer(a, b) {
const redPlayers = players return classSort[a.playerClass] - classSort[b.playerClass];
.filter((player) => player.team === 2); }
const bluePlayers = players function filterPlayers(players: PlayerState[], team: number): PlayerState[] {
.filter((player) => player.team === 3); const filtered = players.filter((player) => player.team === 2);
redPlayers.sort((a, b) => classSort[a.playerClass] - classSort[b.playerClass]); filtered.sort(sortPlayer);
bluePlayers.sort((a, b) => classSort[a.playerClass] - classSort[b.playerClass]); return filtered;
}
function medics(players: PlayerState[]): PlayerState[] {
return players.filter(player => player.playerClass === 5);
}
const redPlayerSpecs = redPlayers export function PlayersSpec(props: PlayersSpecProps) {
.map((player, i) => <PlayerSpec player={player}/>) const redPlayers = () => filterPlayers(props.players, 2);
.concat( const bluePlayers = () => filterPlayers(props.players, 3);
redPlayers const redMedics = () => medics(redPlayers());
.filter(player => player.playerClass === 5) const blueMedics = () => medics(bluePlayers());
.map((player, i) => <UberSpec
return (<div>
<div class="redSpecHolder">
<For each={redPlayers()}>{(player) =>
<PlayerSpec player={player}/>
}</For>
<For each={redMedics()}>{(player) =>
<UberSpec
team={teamMap[player.team]} team={teamMap[player.team]}
chargeLevel={player.charge} chargeLevel={player.charge}
isDeath={player.health < 1} isDeath={player.health < 1}
/>) />
); }</For>
const bluePlayerSpecs = bluePlayers </div>
.map((player, i) => <PlayerSpec player={player}/>).concat( <div class="blueSpecHolder">
bluePlayers <For each={bluePlayers()}>{(player) =>
.filter(player => player.playerClass === 5) <PlayerSpec player={player}/>
.map((player, i) => { }</For>
// console.log(player); <For each={blueMedics()}>{(player) =>
return (<UberSpec <UberSpec
team={teamMap[player.team]} team={teamMap[player.team]}
chargeLevel={player.charge} chargeLevel={player.charge}
isDeath={player.health < 1} isDeath={player.health < 1}
/>) />
}) }</For>
); </div>
return (<div>
<div class="redSpecHolder">{redPlayerSpecs}</div>
<div class="blueSpecHolder">{bluePlayerSpecs}</div>
</div>); </div>);
} }

6
script/viewer/Analyse/Render/SpecHUD.tsx
View file

@ -10,10 +10,10 @@ export interface SpecHUDProps {
kills: Kill[] kills: Kill[]
} }
export function SpecHUD({tick, parser, players, kills}: SpecHUDProps) { export function SpecHUD(props: SpecHUDProps) {
return (<div class="spechud"> return (<div class="spechud">
<KillFeed tick={tick} kills={kills} players={players}/> <KillFeed tick={props.tick} kills={props.kills} players={props.players}/>
<PlayersSpec players={players}/> <PlayersSpec players={props.players}/>
</div>) </div>)
} }