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

viewer fixes

Browse source
This commit is contained in:
Robin Appelman 2023-04-29 16:21:05 +02:00
commit e94f0474ef
9 changed files with 125 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import {Header, WorldBoundaries} from "./Data/Parser";
import {AsyncParser} from "./Data/AsyncParser";
import {getMapBoundaries} from "./MapBoundries";
import {createSignal} from "solid-js";
import {createEffect, createSignal} from "solid-js";
import {Session, StateUpdate} from "./Session";
export interface AnalyseProps {

6
script/viewer/Analyse/MapContainer.tsx
View file

@ -21,8 +21,10 @@ export const MapContainer = (props: ParentProps<MapContainerProps>) => {
}
}
createEffect(() => {
if (isFinite(scale())) {
props.onScale && props.onScale(scale());
const s = scale();
console.log(s)
if (isFinite(s)) {
props.onScale && props.onScale(s);
}
});

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

@ -2,7 +2,7 @@ import {Player as PlayerDot} from './Render/Player';
import {Building as BuildingDot} from './Render/Building';
import {findMapAlias} from './MapBoundries';
import {PlayerState, Header, WorldBoundaries, BuildingState} from "./Data/Parser";
import {splitProps} from "solid-js";
import {createEffect, Show} from "solid-js";
export interface MapRenderProps {
header: Header;
@ -18,29 +18,22 @@ export interface MapRenderProps {
export function MapRender(props: MapRenderProps) {
const mapAlias = findMapAlias(props.header.map);
const image = `images/leveloverview/dist/${mapAlias}.webp`;
const image = `/images/leveloverview/dist/${mapAlias}.webp`;
const background = `url(${image})`;
const playerDots = () => props.players
.filter((player: PlayerState) => player.health)
.map((player: PlayerState) => {
return <PlayerDot player={player} mapBoundary={props.world}
targetSize={props.size} scale={props.scale} />
});
const buildingDots = () => props.buildings
.filter((building: PlayerState) => building.position.x)
.map((building: PlayerState) => {
return <BuildingDot building={building}
mapBoundary={props.world}
targetSize={props.size} scale={props.scale}/>
});
return (
<svg class="map-background" width={props.size.width} height={props.size.height}
style={{"background-image": background}}>
{playerDots()}
{buildingDots()}
<For each={props.players}>{(player) =>
<Show when={player.health}>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale} />
</Show>
}</For>
<For each={props.buildings}>{(building) =>
<Show when={building.position.x}>
<BuildingDot building={building} mapBoundary={props.world} targetSize={props.size} scale={props.scale}/>
</Show>
}</For>
</svg>
);
}

31
script/viewer/Analyse/Render/Building.tsx
View file

@ -40,29 +40,32 @@ function getIcon(building: BuildingState) {
return `/images/building_icons/${icon}_${team}.png`;
}
export function Building({building, mapBoundary, targetSize, scale}: BuildingProp) {
const worldWidth = mapBoundary.boundary_max.x - mapBoundary.boundary_min.x;
const worldHeight = mapBoundary.boundary_max.y - mapBoundary.boundary_min.y;
const x = building.position.x - mapBoundary.boundary_min.x;
const y = building.position.y - mapBoundary.boundary_min.y;
const scaledX = x / worldWidth * targetSize.width;
const scaledY = (worldHeight - y) / worldHeight * targetSize.height;
const maxHealth = healthMap[building.level];
export function Building(props: BuildingProp) {
const worldWidth = props.mapBoundary.boundary_max.x - props.mapBoundary.boundary_min.x;
const worldHeight = props.mapBoundary.boundary_max.y - props.mapBoundary.boundary_min.y;
const x = () => props.building.position.x - props.mapBoundary.boundary_min.x;
const y = () => props.building.position.y - props.mapBoundary.boundary_min.y;
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.building.level];
if (!maxHealth) {
return null;
}
const alpha = building.health / maxHealth;
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(${270 - props.building.angle})`;
const alpha = () => props.building.health / maxHealth;
try {
const image = getIcon(building);
return <g transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}
opacity={alpha}>
const image = getIcon(props.building);
return <g transform={transform()}
opacity={alpha()}>
<image href={image} className={"player-icon"} height={32}
width={32}
transform={`translate(-16 -16)`}/>
<Show when={building.angle}>
<Show when={props.building.angle}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
transform={`rotate(${270 - building.angle})`}/>
transform={rotate()}/>
</Show>
</g>
} catch (e) {

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

@ -1,73 +1,76 @@
import {PlayerState, WorldBoundaries, Team} from "../Data/Parser";
import {createEffect} from "solid-js";
export interface PlayerProp {
player: PlayerState;
mapBoundary: WorldBoundaries;
targetSize: {
width: number;
height: number;
};
scale: number;
player: PlayerState;
mapBoundary: WorldBoundaries;
targetSize: {
width: number;
height: number;
};
scale: number;
}
const healthMap = {
0: 100, //fallback
1: 125,//scout
2: 150,//sniper
3: 200,//soldier,
4: 175,//demoman,
5: 150,//medic,
6: 300,//heavy,
7: 175,//pyro
8: 125,//spy
9: 125,//engineer
0: 100, //fallback
1: 125,//scout
2: 150,//sniper
3: 200,//soldier,
4: 175,//demoman,
5: 150,//medic,
6: 300,//heavy,
7: 175,//pyro
8: 125,//spy
9: 125,//engineer
};
const classMap = {
0: "empty",
1: "scout",
2: "sniper",
3: "soldier",
4: "demoman",
5: "medic",
6: "heavy",
7: "pyro",
8: "spy",
9: "engineer"
0: "empty",
1: "scout",
2: "sniper",
3: "soldier",
4: "demoman",
5: "medic",
6: "heavy",
7: "pyro",
8: "spy",
9: "engineer"
};
export function Player({player, mapBoundary, targetSize, scale}: PlayerProp) {
const worldWidth = mapBoundary.boundary_max.x - mapBoundary.boundary_min.x;
const worldHeight = mapBoundary.boundary_max.y - mapBoundary.boundary_min.y;
const x = player.position.x - mapBoundary.boundary_min.x;
const y = player.position.y - mapBoundary.boundary_min.y;
const scaledX = x / worldWidth * targetSize.width;
const scaledY = (worldHeight - y) / worldHeight * targetSize.height;
const maxHealth = healthMap[player.playerClass];
const alpha = player.health / maxHealth;
const teamColor = (player.team === Team.Red) ? '#a75d50' : '#5b818f';
const imageOpacity = player.health === 0 ? 0 : (1 + alpha) / 2;
export function Player(props: PlayerProp) {
const worldWidth = props.mapBoundary.boundary_max.x - props.mapBoundary.boundary_min.x;
const worldHeight = props.mapBoundary.boundary_max.y - props.mapBoundary.boundary_min.y;
const x = () => props.player.position.x - props.mapBoundary.boundary_min.x;
const y = () => props.player.position.y - props.mapBoundary.boundary_min.y;
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.player.playerClass];
const alpha = () => props.player.health / maxHealth();
const teamColor = () => (props.player.team === Team.Red) ? '#a75d50' : '#5b818f';
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})`;
return <g
transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
opacity={imageOpacity}
transform={`rotate(${270 - player.angle})`}/>
<circle r={16} stroke-width={1} stroke="white" fill={teamColor}
opacity={alpha}/>
{getClassImage(player, imageOpacity)}
</g>
return <g
transform={transform()}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
opacity={imageOpacity()}
transform={rotate()}/>
<circle r={16} stroke-width={1} stroke="white" fill={teamColor()}
opacity={alpha()}/>
{getClassImage(props.player, imageOpacity())}
</g>
}
function getClassImage(player: PlayerState, imageOpacity: number) {
if (!classMap[player.playerClass]) {
return [];
}
const image = `/images/class_icons/${classMap[player.playerClass]}.svg`;
return <image href={image}
class={"player-icon " + player.team}
opacity={imageOpacity}
height={32}
width={32}
transform={`translate(-16 -16)`}/>
if (!classMap[player.playerClass]) {
return [];
}
const image = `/images/class_icons/${classMap[player.playerClass]}.svg`;
return <image href={image}
class={"player-icon " + player.team}
opacity={imageOpacity}
height={32}
width={32}
transform={`translate(-16 -16)`}/>
}

8
script/viewer/Panner/Panner.tsx
View file

@ -42,8 +42,8 @@ export const Panner = (props: ParentProps<PannerProps>) => {
startX = event.pageX;
startY = event.pageY;
setTranslateX(panner.viewport.x);
setTranslateY(panner.viewport.y);
setTranslateX(Math.floor(panner.viewport.x));
setTranslateY(Math.floor(panner.viewport.y));
setScale(panner.scale);
}
@ -66,9 +66,7 @@ export const Panner = (props: ParentProps<PannerProps>) => {
setTranslateY(panner.viewport.y);
setScale(panner.scale);
if (props.onScale) {
props.onScale(panner.scale);
}
props.onScale(panner.scale);
}
const mouseWheel = (event) => {