mirror of
https://codeberg.org/demostf/frontend.git
synced 2026-06-03 18:24:12 +02:00
viewer fixes
This commit is contained in:
parent
5910b2f35a
commit
e94f0474ef
9 changed files with 125 additions and 100 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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)`}/>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue