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

inline js data

Browse source
This commit is contained in:
Robin Appelman 2023-04-29 17:30:56 +02:00
commit 1e2a3e28e7
8 changed files with 111 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,30 +16,24 @@ const healthMap = [0, 150, 180, 216];
function getBuildingType(type: BuildingType) {
switch (type) {
case BuildingType.TeleporterEntrance:
return 'tele_entrance';
return require("inline://images/building_icons/tele_entrance.png");
case BuildingType.TeleporterExit:
return 'tele_exit';
return require("inline://images/building_icons/tele_exit.png");
case BuildingType.Dispenser:
return 'dispenser';
return require("inline://images/building_icons/dispenser.png");
case BuildingType.Level1Sentry:
return 'sentry_1';
return require("inline://images/building_icons/sentry_1.png");
case BuildingType.Level2Sentry:
return 'sentry_2';
return require("inline://images/building_icons/sentry_2.png");
case BuildingType.Level3Sentry:
return 'sentry_3';
return require("inline://images/building_icons/sentry_3.png");
case BuildingType.MiniSentry:
return 'sentry_1';
return require("inline://images/building_icons/sentry_1.png");
default:
return 'unknown';
return '';
}
}
function getIcon(building: BuildingState) {
const icon = getBuildingType(building.buildingType);
const team = building.team === Team.Red ? 'red' : 'blue';
return `/images/building_icons/${icon}_${team}.png`;
}
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;
@ -48,6 +42,7 @@ export function Building(props: BuildingProp) {
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.building.level];
const teamColor = () => (props.building.team === Team.Red) ? '#a75d50' : '#5b818f';
if (!maxHealth) {
return null;
}
@ -57,10 +52,12 @@ export function Building(props: BuildingProp) {
const alpha = () => props.building.health / maxHealth;
try {
const image = getIcon(props.building);
const image = () => getBuildingType(props.building.buildingType);
return <g transform={transform()}
opacity={alpha()}>
<image href={image} className={"player-icon"} height={32}
<circle r={16} stroke-width={1} stroke="white" fill={teamColor()}
opacity={alpha()}/>
<image href={image()} className={"player-icon"} height={32}
width={32}
transform={`translate(-16 -16)`}/>
<Show when={props.building.angle}>

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

@ -1,5 +1,4 @@
import {PlayerState, WorldBoundaries, Team} from "../Data/Parser";
import {createEffect} from "solid-js";
export interface PlayerProp {
player: PlayerState;
@ -24,17 +23,17 @@ const healthMap = {
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"
const imageMap = {
0: require("inline://images/class_icons/empty.svg"),
1: require("inline://images/class_icons/scout.svg"),
2: require("inline://images/class_icons/sniper.svg"),
3: require("inline://images/class_icons/soldier.svg"),
4: require("inline://images/class_icons/demoman.svg"),
5: require("inline://images/class_icons/medic.svg"),
6: require("inline://images/class_icons/heavy.svg"),
7: require("inline://images/class_icons/pyro.svg"),
8: require("inline://images/class_icons/spy.svg"),
9: require("inline://images/class_icons/engineer.svg"),
};
export function Player(props: PlayerProp) {
@ -63,11 +62,10 @@ export function Player(props: PlayerProp) {
}
function getClassImage(player: PlayerState, imageOpacity: number) {
if (!classMap[player.playerClass]) {
if (!imageMap[player.playerClass]) {
return [];
}
const image = `/images/class_icons/${classMap[player.playerClass]}.svg`;
return <image href={image}
return <image href={imageMap[player.playerClass]}
class={"player-icon " + player.team}
opacity={imageOpacity}
height={32}