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

spy info, medigun name
All checks were successful
CI / checks (push) Successful in 59s
Details

Browse source
This commit is contained in:
Robin Appelman 2025-06-28 19:20:37 +02:00
commit bdc35d0907
16 changed files with 143 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

8
script/viewer/Analyse/Render/Player.tsx
View file

@ -1,4 +1,4 @@
import {PlayerState, WorldBoundaries, Team} from "../Data/Parser";
import {Class, PlayerState, SpyState, Team, WorldBoundaries} from "../Data/Parser";
export interface PlayerProp {
player: PlayerState;
@ -52,6 +52,9 @@ export function Player(props: PlayerProp) {
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(${270 - props.player.angle})`;
const filter = () => props.player.ubered ? ((props.player.team === Team.Red) ? 'url(#sofGlowRed)' : 'url(#sofGlowBlue)') : '';
const circleStrokeStyle = () => props.player.playerClass === Class.Spy ? `${(props.player.class_data as SpyState).cloak} 100` : "none";
const teamHatch = () => (props.player.team === Team.Red) ? `url(#diagonalHatchRed)` : `url(#diagonalHatchBlue)`
const fill = () => props.player.cloaked ? teamHatch() : teamColor();
return <g
onmouseover={() => props.onHover(props.player.info.userId)}
@ -61,7 +64,8 @@ export function Player(props: PlayerProp) {
opacity={imageOpacity()}
transform={rotate()}/>
<circle r={16} stroke-width={props.highlighted ? 4 : 1.5} stroke="white"
fill={teamColor()}
stroke-dasharray={circleStrokeStyle()}
fill={fill()}
opacity={alpha()}
filter={filter()}
/>

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

@ -1,5 +1,4 @@
import {PlayerState} from "../Data/Parser";
import {KillFeedItem} from "./KillFeed";
import {Class, MedigunType, PlayerState, SpyState} from "../Data/Parser";
export interface PlayerSpecProps {
player: PlayerState;
@ -68,7 +67,7 @@ function filterPlayers(players: PlayerState[], team: number): PlayerState[] {
}
function medics(players: PlayerState[]): PlayerState[] {
return players.filter(player => player.playerClass === 5);
return players.filter(player => player.playerClass === Class.Medic);
}
export function PlayersSpec(props: PlayersSpecProps) {
@ -86,7 +85,8 @@ export function PlayersSpec(props: PlayersSpecProps) {
<For each={redMedics()}>{(player) =>
<UberSpec
team={teamMap[player.team]}
chargeLevel={player.charge}
chargeLevel={player.class_data.charge}
medigun={player.class_data.medigun}
isDeath={player.health < 1}
/>
}</For>
@ -99,7 +99,8 @@ export function PlayersSpec(props: PlayersSpecProps) {
<For each={blueMedics()}>{(player) =>
<UberSpec
team={teamMap[player.team]}
chargeLevel={player.charge}
chargeLevel={player.class_data.charge}
medigun={player.class_data.medigun}
isDeath={player.health < 1}
/>
}</For>
@ -135,7 +136,15 @@ export function PlayerSpec(props: PlayerSpecProps) {
function getPlayerIcon(player: PlayerState) {
if (classMap[player.playerClass]) {
return <div class={classMap[player.playerClass] + " class-icon"}/>
const className = classMap[player.playerClass];
if (player.playerClass === Class.Spy && classMap[(player.class_data as SpyState).disguise_class]) {
const disguiseClassName = classMap[(player.class_data as SpyState).disguise_class];
return (<div class={className + " class-icon"}>
<div class={disguiseClassName + " disguise"}/>
</div>)
} else {
return <div class={className + " class-icon"}/>
}
} else {
return <div class={"class-icon"}/>
}
@ -143,20 +152,33 @@ function getPlayerIcon(player: PlayerState) {
export interface UberSpecProps {
chargeLevel: number;
medigun: MedigunType;
team: string;
isDeath: boolean;
}
export function UberSpec({chargeLevel, team, isDeath}: UberSpecProps) {
const healthStatusClass = (isDeath) ? 'dead' : '';
export function UberSpec(props: UberSpecProps) {
const healthStatusClass = (props.isDeath) ? 'dead' : '';
const medigunName = () => {
switch (props.medigun) {
case MedigunType.Kritzkrieg:
return "Kritzkrieg";
case MedigunType.Quickfix:
return "Quickfix";
case MedigunType.Vaccinator:
return "Vaccinator";
default:
return "Ubercharge";
}
}
return (
<div class={`playerspec uber ${team} ${healthStatusClass}`}>
<div class={`playerspec uber ${props.team} ${healthStatusClass}`}>
<div class={"uber class-icon"}/>
<div class="health-container">
<div class="healthbar"
style={{width: chargeLevel + '%'}}/>
<span class="player-name">Charge</span>
<span class="health">{Math.round(chargeLevel)}</span>
style={{width: props.chargeLevel + '%'}}/>
<span class="player-name">{medigunName()}</span>
<span class="health">{Math.round(props.chargeLevel)}</span>
</div>
</div>
);