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

fix building opacity

Browse source
This commit is contained in:
Robin Appelman 2025-06-28 19:38:31 +02:00
commit 066cf9287f
1 changed files with 56 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,70 +2,71 @@ import {BuildingState, WorldBoundaries, BuildingType, Team} from "../Data/Parser
import {Show} from "solid-js"; import {Show} from "solid-js";
export interface BuildingProp { export interface BuildingProp {
building: BuildingState; building: BuildingState;
mapBoundary: WorldBoundaries; mapBoundary: WorldBoundaries;
targetSize: { targetSize: {
width: number; width: number;
height: number; height: number;
}; };
scale: number; scale: number;
} }
const healthMap = [0, 150, 180, 216]; const healthMap = [0, 150, 180, 216];
function getBuildingType(type: BuildingType) { function getBuildingType(type: BuildingType) {
switch (type) { switch (type) {
case BuildingType.TeleporterEntrance: case BuildingType.TeleporterEntrance:
return require("inline://images/building_icons/tele_entrance.png"); return require("inline://images/building_icons/tele_entrance.png");
case BuildingType.TeleporterExit: case BuildingType.TeleporterExit:
return require("inline://images/building_icons/tele_exit.png"); return require("inline://images/building_icons/tele_exit.png");
case BuildingType.Dispenser: case BuildingType.Dispenser:
return require("inline://images/building_icons/dispenser.png"); return require("inline://images/building_icons/dispenser.png");
case BuildingType.Level1Sentry: case BuildingType.Level1Sentry:
return require("inline://images/building_icons/sentry_1.svg"); return require("inline://images/building_icons/sentry_1.svg");
case BuildingType.Level2Sentry: case BuildingType.Level2Sentry:
return require("inline://images/building_icons/sentry_2.png"); return require("inline://images/building_icons/sentry_2.png");
case BuildingType.Level3Sentry: case BuildingType.Level3Sentry:
return require("inline://images/building_icons/sentry_3.png"); return require("inline://images/building_icons/sentry_3.png");
case BuildingType.MiniSentry: case BuildingType.MiniSentry:
return require("inline://images/building_icons/sentry_1.png"); return require("inline://images/building_icons/sentry_1.png");
default: default:
return ''; return '';
} }
} }
export function Building(props: BuildingProp) { export function Building(props: BuildingProp) {
const worldWidth = props.mapBoundary.boundary_max.x - props.mapBoundary.boundary_min.x; 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 worldHeight = props.mapBoundary.boundary_max.y - props.mapBoundary.boundary_min.y;
const x = () => props.building.position.x - props.mapBoundary.boundary_min.x; const x = () => props.building.position.x - props.mapBoundary.boundary_min.x;
const y = () => props.building.position.y - props.mapBoundary.boundary_min.y; const y = () => props.building.position.y - props.mapBoundary.boundary_min.y;
const scaledX = () => x() / worldWidth * props.targetSize.width; const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height; const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.building.level]; const maxHealth = () => healthMap[props.building.level];
const teamColor = () => (props.building.team === Team.Red) ? '#a75d50' : '#5b818f'; const teamColor = () => (props.building.team === Team.Red) ? '#a75d50' : '#5b818f';
if (!maxHealth) { if (!maxHealth) {
return null; return null;
} }
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`; const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(${270 - props.building.angle})`; const rotate = () => `rotate(${270 - props.building.angle})`;
const alpha = () => props.building.health / maxHealth; const alpha = () => props.building.health / maxHealth();
try { const imageOpacity = () => props.building.health === 0 ? 0 : (1 + alpha()) / 2;
const image = () => getBuildingType(props.building.buildingType); try {
return <g transform={transform()} const image = () => getBuildingType(props.building.buildingType);
opacity={alpha()}> return <g transform={transform()}>
<circle r={16} stroke-width={1} stroke="white" fill={teamColor()} <circle r={16} stroke-width={1} stroke="white" fill={teamColor()}
opacity={alpha()}/> opacity={alpha()}/>
<image href={image()} className={"player-icon"} height={32} width={32} transform={`translate(-16 -16)`}/> <image href={image()} class="player-icon" height={32} width={32} transform={`translate(-16 -16)`}
<Show when={props.building.angle}> opacity={imageOpacity()}/>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white" <Show when={props.building.angle}>
transform={rotate()}/> <polygon points="-6,14 0, 16 6,14 0,24" fill="white"
</Show> transform={rotate()}/>
</g> </Show>
} catch (e) { </g>
console.log(e); } catch (e) {
console.log(e);
return null; return null;
} }
} }