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 ubered players
All checks were successful
CI / checks (push) Successful in 1m1s
Details

Browse source
This commit is contained in:
Robin Appelman 2025-06-26 01:43:09 +02:00
commit c96f2e6b7b
5 changed files with 39 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -6,7 +6,7 @@
"": {
"dependencies": {
"@demostf/edit": "0.2.0",
"@demostf/tf-demos-viewer": "^0.2.1",
"@demostf/tf-demos-viewer": "^0.2.3",
"@lutaok/solid-modal": "^0.1.1",
"@solid-primitives/autofocus": "^0.0.111",
"@solid-primitives/keyboard": "^1.2.8",
@ -23,9 +23,9 @@
"integrity": "sha512-s9wk3QVm+aTpMhIyfdGIHRm5qHp7FQ1dq/Jn0fms+lXsB1xY3wgjfWH+5gwRjjo/Dd3UMNM0o3atjO2uh+CxOQ=="
},
"node_modules/@demostf/tf-demos-viewer": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.2.1.tgz",
"integrity": "sha512-YDDi+hBMWYpVimQ4Y2YAnm7yAuFpRpmf8ZSgKBAdpSfUUSKVnlYuVeri4yZIYOHS2fLRYUAg2OH5J/ejumiOlg=="
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.2.3.tgz",
"integrity": "sha512-pN+D6qKy+qy835ituO5DJ8zHGOdX7/ubwXpwWST0ae3u1QARegw/KdJzKrvhU47hLzn5zp1uUgRWqZdOReBckw=="
},
"node_modules/@lutaok/solid-modal": {
"version": "0.1.1",

2
package.json
View file

@ -1,7 +1,7 @@
{
"dependencies": {
"@demostf/edit": "0.2.0",
"@demostf/tf-demos-viewer": "^0.2.1",
"@demostf/tf-demos-viewer": "^0.2.3",
"@lutaok/solid-modal": "^0.1.1",
"@solid-primitives/autofocus": "^0.0.111",
"@solid-primitives/keyboard": "^1.2.8",

7
script/viewer/Analyse/Data/Parser.ts
View file

@ -168,6 +168,7 @@ export interface PlayerState {
playerClass: Class,
info: PlayerInfo,
charge: number,
ubered: boolean,
}
export interface BuildingState {
@ -290,7 +291,8 @@ function unpackPlayer(bytes: Uint8Array, base: number, world: WorldBoundaries, i
const y = unpack_f32(bytes[base + 2] + (bytes[base + 3] << 8), world.boundary_min.y, world.boundary_max.y);
const team_class_health = bytes[base + 4] + (bytes[base + 5] << 8);
const angle = unpack_angle(bytes[base + 6]);
const health = team_class_health & 1013;
const ubered = (team_class_health & 1) == 1;
const health = (team_class_health >> 1) & 511;
const team = (team_class_health >> 14) as Team;
const playerClass = ((team_class_health >> 10) & 15) as Class;
const charge = bytes[base + 7];
@ -302,7 +304,8 @@ function unpackPlayer(bytes: Uint8Array, base: number, world: WorldBoundaries, i
team,
playerClass,
info,
charge
charge,
ubered,
}
}

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

@ -30,6 +30,29 @@ export function MapRender(props: MapRenderProps) {
return (
<svg class="map-background" width={props.size.width} height={props.size.height}
style={{"background-image": background}}>
<defs>
<filter id="sofGlowRed" height="300%" width="300%" x="-75%" y="-75%">
<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"/>
<feGaussianBlur in="thicken" stdDeviation="5" result="blurred"/>
<feFlood flood-color="rgb(255,52,0)" result="glowColor"/>
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored"/>
<feMerge>
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="sofGlowBlue" height="300%" width="300%" x="-75%" y="-75%">
<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"/>
<feGaussianBlur in="thicken" stdDeviation="5" result="blurred"/>
<feFlood flood-color="rgb(0,186,255)" result="glowColor"/>
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlow_colored"/>
<feMerge>
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<For each={props.players}>{(player) =>
<Show when={player.health}>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale}

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

@ -51,6 +51,9 @@ export function Player(props: PlayerProp) {
const imageOpacity = () => props.player.health === 0 ? 0 : (1 + alpha()) / 2;
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)') : '';
console.log(props.player);
return <g
onmouseover={() => props.onHover(props.player.info.userId)}
@ -59,8 +62,10 @@ export function Player(props: PlayerProp) {
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
opacity={imageOpacity()}
transform={rotate()}/>
<circle r={16} stroke-width={props.highlighted ? 4 : 1.5} stroke="white" fill={teamColor()}
<circle r={16} stroke-width={props.highlighted ? 4 : 1.5} stroke="white"
fill={teamColor()}
opacity={alpha()}
filter={filter()}
/>
{getClassImage(props.player, imageOpacity())}
</g>