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

highlight player dot/spec on hover

Browse source
This commit is contained in:
Robin Appelman 2024-12-22 15:54:14 +01:00
commit 3644dbda6e
7 changed files with 355 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -51,6 +51,7 @@ export const Analyser = (props: AnalyseProps) => {
const closeDialogs = () => {
setModalState(ModalState.Closed);
};
const [highlighted, setHighlighted] = createSignal<number>(0);
createEffect(() => {
const e = event();
@ -243,7 +244,10 @@ export const Analyser = (props: AnalyseProps) => {
projectiles={projectiles()}
header={props.header}
world={backgroundBoundaries}
scale={scale()}/>
scale={scale()}
onHover={setHighlighted}
highlighted={highlighted()}
/>
</MapContainer>
<AnalyseMenu sessionName={sessionName()}
onShare={() => {
@ -261,7 +265,9 @@ export const Analyser = (props: AnalyseProps) => {
inShared={inShared}
/>
<SpecHUD parser={parser} tick={tick()}
players={players()} events={events}/>
players={players()} events={events}
highlighted={highlighted()}
onHover={setHighlighted}/>
</div>
<div class="time-control"
title={timeTitle()}>

7
script/viewer/Analyse/MapRender.tsx
View file

@ -16,6 +16,8 @@ export interface MapRenderProps {
},
world: WorldBoundaries;
scale: number;
onHover: (userId: number) => void;
highlighted: number;
}
const map_root = document.querySelector('[data-maps]').getAttribute('data-maps');
@ -30,7 +32,10 @@ export function MapRender(props: MapRenderProps) {
style={{"background-image": background}}>
<For each={props.players}>{(player) =>
<Show when={player.health}>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale}/>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale}
onHover={props.onHover}
highlighted={props.highlighted === player.info.userId}
/>
</Show>
}</For>
<For each={props.buildings}>{(building) =>

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

@ -71,7 +71,7 @@ export function KillFeedDestroyedItem(props: KillFeedDestroyedItemProps) {
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>
<PlayerName player={victim}/><span class={teamMap[victim.team]}>({props.event.building_type})</span>
</li>
}
@ -98,7 +98,7 @@ interface PlayerNameProps {
export function PlayerName(props: PlayerNameProps) {
return <Show when={props.player}>
<span className={"player " + teamMap[props.player.team]}>
<span class={"player " + teamMap[props.player.team]}>
{props.player.info.name}
</span>
</Show>
@ -111,7 +111,7 @@ interface PlayerNamesProps {
export function PlayerNames(props: PlayerNamesProps) {
return <For each={props.players}>{(player, i) => <>
<Show when={i() > 0 && player}>
<span className={teamMap[player.team]}>+</span>
<span class={teamMap[player.team]}>+</span>
</Show>
<PlayerName player={player}/>
</>}</For>

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

@ -8,6 +8,8 @@ export interface PlayerProp {
height: number;
};
scale: number;
onHover: (userId: number) => void;
highlighted: boolean;
}
const healthMap = {
@ -51,12 +53,15 @@ export function Player(props: PlayerProp) {
const rotate = () => `rotate(${270 - props.player.angle})`;
return <g
onmouseover={() => props.onHover(props.player.info.userId)}
onmouseout={() => props.onHover(0)}
transform={transform()}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
opacity={imageOpacity()}
transform={rotate()}/>
<circle r={16} stroke-width={1.5} stroke="white" fill={teamColor()}
opacity={alpha()}/>
<circle r={16} stroke-width={props.highlighted ? 5 : 1.5} stroke="white" fill={teamColor()}
opacity={alpha()}
/>
{getClassImage(props.player, imageOpacity())}
</g>
}

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

@ -3,6 +3,8 @@ import {KillFeedItem} from "./KillFeed";
export interface PlayerSpecProps {
player: PlayerState;
onHover: (userId: number) => void;
highlighted: boolean;
}
const healthMap = {
@ -51,16 +53,20 @@ const teamMap = {
export interface PlayersSpecProps {
players: PlayerState[];
onHover: (userId: number) => void;
highlighted: number;
}
function sortPlayer(a, b) {
return classSort[a.playerClass] - classSort[b.playerClass];
}
function filterPlayers(players: PlayerState[], team: number): PlayerState[] {
const filtered = players.filter((player) => player.team === team);
filtered.sort(sortPlayer);
return filtered;
}
function medics(players: PlayerState[]): PlayerState[] {
return players.filter(player => player.playerClass === 5);
}
@ -73,8 +79,9 @@ export function PlayersSpec(props: PlayersSpecProps) {
return (<div>
<div class="redSpecHolder">
<For each={redPlayers()}>{(player) =>
<PlayerSpec player={player}/>
<For each={redPlayers()}>{(player: PlayerState) =>
<PlayerSpec player={player} highlighted={player.info.userId == props.highlighted}
onHover={props.onHover}/>
}</For>
<For each={redMedics()}>{(player) =>
<UberSpec
@ -86,7 +93,8 @@ export function PlayersSpec(props: PlayersSpecProps) {
</div>
<div class="blueSpecHolder">
<For each={bluePlayers()}>{(player) =>
<PlayerSpec player={player}/>
<PlayerSpec player={player} highlighted={player.info.userId == props.highlighted}
onHover={props.onHover}/>
}</For>
<For each={blueMedics()}>{(player) =>
<UberSpec
@ -99,19 +107,27 @@ export function PlayersSpec(props: PlayersSpecProps) {
</div>);
}
export function PlayerSpec({player}: PlayerSpecProps) {
const healthPercent = Math.min(100, player.health / healthMap[player.playerClass] * 100);
const healthStatusClass = (player.health > healthMap[player.playerClass]) ? 'overhealed' : (player.health <= 0 ? 'dead' : '');
export function PlayerSpec(props: PlayerSpecProps) {
const healthPercent = () => Math.min(100, props.player.health / healthMap[props.player.playerClass] * 100);
const healthStatusClass = () => (props.player.health > healthMap[props.player.playerClass]) ? 'overhealed' : (props.player.health <= 0 ? 'dead' : '');
return (
<div
class={"playerspec " + teamMap[player.team] + " webp " + healthStatusClass}>
{getPlayerIcon(player)}
onmouseover={() => props.onHover(props.player.info.userId)}
onmouseout={() => props.onHover(0)}
classList={{
"playerspec": true,
[teamMap[props.player.team]]: true,
"webp": true,
[healthStatusClass()]: true,
highlighted: props.highlighted,
}}>
{getPlayerIcon(props.player)}
<div class="health-container">
<div class="healthbar"
style={{width: healthPercent + '%'}}/>
<span class="player-name">{player.info.name}</span>
<span class="health">{player.health}</span>
style={{width: healthPercent() + '%'}}/>
<span class="player-name">{props.player.info.name}</span>
<span class="health">{props.player.health}</span>
</div>
</div>
);

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

@ -7,13 +7,15 @@ export interface SpecHUDProps {
tick: number;
parser: AsyncParser;
players: PlayerState[];
events: Event[]
events: Event[];
onHover: (userId: number) => void;
highlighted: number | null;
}
export function SpecHUD(props: SpecHUDProps) {
return (<div class="spechud">
<KillFeed tick={props.tick} events={props.events} players={props.players}/>
<PlayersSpec players={props.players}/>
<PlayersSpec players={props.players} onHover={props.onHover} highlighted={props.highlighted}/>
</div>)
}

25
style/pages/viewer/PlayerSpec.css
View file

@ -63,6 +63,7 @@
width: calc(100% - 42px);
line-height: 28px;
font-weight: bold;
& .health {
position: relative;
float: right;
@ -89,30 +90,39 @@
& .class-icon.scout {
background-image: url('inline://images/class_portraits/Icon_scout.webp');
}
& .class-icon.soldier {
background-image: url('inline://images/class_portraits/Icon_soldier.webp');
}
& .class-icon.pyro {
background-image: url('inline://images/class_portraits/Icon_pyro.webp');
}
& .class-icon.demoman {
background-image: url('inline://images/class_portraits/Icon_demoman.webp');
}
& .class-icon.engineer {
background-image: url('inline://images/class_portraits/Icon_engineer.webp');
}
& .class-icon.heavy {
background-image: url('inline://images/class_portraits/Icon_heavy.webp');
}
& .class-icon.medic {
background-image: url('inline://images/class_portraits/Icon_medic.webp');
}
& .class-icon.sniper {
background-image: url('inline://images/class_portraits/Icon_sniper.webp');
}
& .class-icon.spy{
& .class-icon.spy {
background-image: url('inline://images/class_portraits/Icon_spy.webp');
}
& .class-icon.uber {
background-image: url('inline://images/charge_red.svg');
}
@ -150,35 +160,48 @@
& .class-icon.scout {
background-image: url('inline://images/class_portraits/Icon_scout_blue.webp');
}
& .class-icon.soldier {
background-image: url('inline://images/class_portraits/Icon_soldier_blue.webp');
}
& .class-icon.pyro {
background-image: url('inline://images/class_portraits/Icon_pyro_blue.webp');
}
& .class-icon.demoman {
background-image: url('inline://images/class_portraits/Icon_demoman_blue.webp');
}
& .class-icon.engineer {
background-image: url('inline://images/class_portraits/Icon_engineer_blue.webp');
}
& .class-icon.heavy {
background-image: url('inline://images/class_portraits/Icon_heavy_blue.webp');
}
& .class-icon.medic {
background-image: url('inline://images/class_portraits/Icon_medic_blue.webp');
}
& .class-icon.sniper {
background-image: url('inline://images/class_portraits/Icon_sniper_blue.webp');
}
& .class-icon.spy {
background-image: url('inline://images/class_portraits/Icon_spy_blue.webp');
}
& .class-icon.uber {
background-image: url('inline://images/charge_blue.svg');
}
}
&.highlighted:not(.dead) {
outline: white 2px solid;
}
&.overhealed {
& .health {
color: #79d297;