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

show destructions in kill feed

Browse source
This commit is contained in:
Robin Appelman 2024-12-08 15:46:01 +01:00
commit 6d351a1aae
3 changed files with 51 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

3
script/viewer/Analyse/Analyser.tsx
View file

@ -225,7 +225,6 @@ export const Analyser = (props: AnalyseProps) => {
const players = () => parser.getPlayersAtTick(tick()); const players = () => parser.getPlayersAtTick(tick());
const buildings = () => parser.getBuildingsAtTick(tick()); const buildings = () => parser.getBuildingsAtTick(tick());
const projectiles = () => parser.getProjectilesAtTick(tick()); const projectiles = () => parser.getProjectilesAtTick(tick());
const kills = parser.getKills();
const events = parser.getEvents(); const events = parser.getEvents();
const playButtonText = () => (playing()) ? '⏸' : '▶️'; const playButtonText = () => (playing()) ? '⏸' : '▶️';
const inShared = session && !session.isOwner(); const inShared = session && !session.isOwner();
@ -262,7 +261,7 @@ export const Analyser = (props: AnalyseProps) => {
inShared={inShared} inShared={inShared}
/> />
<SpecHUD parser={parser} tick={tick()} <SpecHUD parser={parser} tick={tick()}
players={players()} kills={kills}/> players={players()} events={events}/>
</div> </div>
<div class="time-control" <div class="time-control"
title={timeTitle()}> title={timeTitle()}>

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

@ -1,20 +1,20 @@
import {Kill, PlayerState} from "../Data/Parser"; import {BuildingDestroyedEvent, Event, Kill, PlayerState} from "../Data/Parser";
import {killAlias} from "./killAlias"; import {killAlias} from "./killAlias";
import {For, Show} from "solid-js"; import {For, Show} from "solid-js";
export interface KillFeedProps { export interface KillFeedProps {
kills: Kill[], events: Event[],
tick: number; tick: number;
players: PlayerState[]; players: PlayerState[];
} }
export function KillFeed(props: KillFeedProps) { export function KillFeed(props: KillFeedProps) {
const {kills} = props; const {events} = props;
const relevantKills = () => kills.filter(kill => kill.tick <= props.tick && kill.tick >= (props.tick - 30 * 10)); const relevantEvents = () => events.filter(event => event.tick <= props.tick && event.tick >= (props.tick - 30 * 10));
return <ul class="killfeed"> return <ul class="killfeed">
<For each={relevantKills()}>{(kill) => <For each={relevantEvents()}>{(event) =>
<KillFeedItem kill={kill} players={props.players}/> <KillFeedItem event={event} players={props.players}/>
}</For> }</For>
</ul> </ul>
} }
@ -26,11 +26,27 @@ export const teamMap = {
}; };
interface KillFeedItemProps { interface KillFeedItemProps {
kill: Kill; event: Event;
players: PlayerState[]; players: PlayerState[];
} }
export function KillFeedItem(props: KillFeedItemProps) { export function KillFeedItem(props: KillFeedItemProps) {
return <>
<Show when={props.event.type === "kill"}>
<KillFeedKillItem players={props.players} kill={props.event.kill}/>
</Show>
<Show when={props.event.type === "building_destroyed"}>
<KillFeedDestroyedItem players={props.players} event={props.event}/>
</Show>
</>
}
interface KillFeedKillItemProps {
kill: Kill;
players: PlayerState[];
}
export function KillFeedKillItem(props: KillFeedKillItemProps) {
const attacker = getPlayer(props.players, props.kill.attacker); const attacker = getPlayer(props.players, props.kill.attacker);
const assister = getPlayer(props.players, props.kill.assister); const assister = getPlayer(props.players, props.kill.assister);
let victim = getPlayer(props.players, props.kill.victim); let victim = getPlayer(props.players, props.kill.victim);
@ -42,8 +58,25 @@ export function KillFeedItem(props: KillFeedItemProps) {
</li> </li>
} }
interface KillFeedDestroyedItemProps {
event: BuildingDestroyedEvent;
players: PlayerState[];
}
export function KillFeedDestroyedItem(props: KillFeedDestroyedItemProps) {
const attacker = getPlayer(props.players, props.event.attacker_id);
const assister = getPlayer(props.players, props.event.assister_id);
let victim = getPlayer(props.players, props.event.victim_id);
return <li class="kill">
<PlayerNames players={[attacker, assister]}/>
<KillIcon kill={props.event}/>
<PlayerName player={victim}/><span className={teamMap[victim.team]}>({props.event.building_type})</span>
</li>
}
interface KillIconProps { interface KillIconProps {
kill: Kill; kill: Kill | BuildingDestroyedEvent;
} }
export function KillIcon(props: KillIconProps) { export function KillIcon(props: KillIconProps) {

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

@ -1,19 +1,19 @@
import {PlayersSpec} from './PlayerSpec'; import {PlayersSpec} from './PlayerSpec';
import {KillFeed} from './KillFeed'; import {KillFeed} from './KillFeed';
import {AsyncParser} from "../Data/AsyncParser"; import {AsyncParser} from "../Data/AsyncParser";
import {PlayerState, Kill} from "../Data/Parser"; import {PlayerState, Kill, Event} from "../Data/Parser";
export interface SpecHUDProps { export interface SpecHUDProps {
tick: number; tick: number;
parser: AsyncParser; parser: AsyncParser;
players: PlayerState[]; players: PlayerState[];
kills: Kill[] events: Event[]
} }
export function SpecHUD(props: SpecHUDProps) { export function SpecHUD(props: SpecHUDProps) {
return (<div class="spechud"> return (<div class="spechud">
<KillFeed tick={props.tick} kills={props.kills} players={props.players}/> <KillFeed tick={props.tick} events={props.events} players={props.players}/>
<PlayersSpec players={props.players}/> <PlayersSpec players={props.players}/>
</div>) </div>)
} }