inline js data

script/viewer.tsx

@@ -36,6 +36,7 @@ ready(async () => {
 
 const parse = async (data: ArrayBuffer, parseProgress: HTMLProgressElement, stored: boolean) => {
     const header = parseHeaderFromBuffer(data);
+    console.log(header);
     const parser = new AsyncParser(data, (progress) => parseProgress.value = progress);
     await parser.cache();
 

script/viewer/Analyse/Render/Building.tsx

@@ -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}>

script/viewer/Analyse/Render/Player.tsx

@@ -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}