import analyser and migrate to solidjs, untested

script/viewer/Analyse/AnalyseMenu.css

@@ -0,0 +1,42 @@
+.analyse-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.5;
+  transition: all 0.5s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .share-session {
+
+    background: transparent;
+    color: var(--primary-color);
+    font-size: 200%;
+    width: 32px;
+    height: 32px;
+    margin: 10px;
+    border: none;
+    cursor: pointer;
+    background-image: url("../images/link_white.svg");
+    background-size: contain;
+
+    &:active, &:focus {
+      outline: none;
+    }
+  }
+
+  .share-text {
+    color: var(--primary-color);
+    background-color: var(--text-secondary);
+    padding: 5px;
+    margin-top: 0;
+    border: 1px #888 solid;
+    border-radius: 5px;
+
+    &:active, &:focus {
+      outline: none;
+    }
+  }
+}

script/viewer/Analyse/AnalyseMenu.tsx

@@ -0,0 +1,26 @@
+export interface AnalyseMenuProps {
+	sessionName: string;
+	onShare: Function;
+	canShare: boolean;
+	isShared: boolean;
+}
+
+export function AnalyseMenu({sessionName, onShare, canShare, isShared}:AnalyseMenuProps) {
+
+	const loc = window.location.toString().replace(/\#.+/, '') + '#' + sessionName;
+	const shareText = (isShared) ?
+		<input class="share-text" value={loc} readOnly={true}
+		       title="Use this link to join the current session"
+		       style={{width: `${(loc.length*8)}px`}}
+		       onFocus={(event)=>{(event.target as HTMLInputElement).select()}}/> : '';
+
+	const shareButton = (canShare) ? <div class="analyse-menu">
+			<button class="share-session" title="Start a shared session"
+			        onClick={()=>{onShare()}}/>
+			{shareText}
+		</div>: '';
+
+	return (<div>
+		{shareButton}
+	</div>)
+}

script/viewer/Analyse/Analyser.css

@@ -0,0 +1,75 @@
+.map-holder {
+  position: fixed;
+  top: 32px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 32px - 100px);
+}
+
+.time-control {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background-color: var(--primary-color-accent);
+
+  .timeline {
+    position: absolute;
+    bottom: 0;
+    left: 64px;
+    width: calc(100% - 64px);
+  }
+
+  .play-pause-button {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 100px;
+    width: 64px;
+    background-color: transparent;
+    color: black;
+    font-size: 200%;
+    border: none;
+
+    &:focus, &:active {
+      outline: none;
+    }
+  }
+}
+
+.error-holder {
+  .error-image {
+    text-align: center;
+    padding: 20px;
+    font-size: 250%;
+
+    &::after {
+      display: block;
+      content: '';
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-image: url('../images/teleporter.png');
+      width: 100%;
+      height: 500px;
+      margin: 50px 0;
+    }
+  }
+
+  .error {
+    background-color: #FF9494;
+    line-height: 32px;
+    margin: 0 -30px;
+    padding: 32px;
+    padding-left: 74px;
+    background-image: url('../images/error.png');
+    background-size: 32px;
+    background-repeat: no-repeat;
+    background-position: 32px 32px;
+
+    .error-hint {
+      margin-top: 32px;
+    }
+  }
+}

script/viewer/Analyse/Analyser.tsx

@@ -0,0 +1,199 @@
+import {MapRender} from './MapRender';
+import {MapContainer} from "./MapContainer";
+import {throttle, debounce} from 'throttle-debounce';
+import {Timeline} from './Render/Timeline';
+import {SpecHUD} from './Render/SpecHUD';
+import {AnalyseMenu} from './AnalyseMenu'
+import {Header, WorldBoundaries} from "@demostf/parser-worker";
+
+import {AsyncParser} from "./Data/AsyncParser";
+import {getMapBoundaries} from "./MapBoundries";
+import {createSignal} from "solid-js";
+import {Session, StateUpdate} from "./Session";
+
+export interface AnalyseProps {
+	header: Header;
+	isStored: boolean;
+	parser: AsyncParser;
+}
+
+export interface AnalyseState {
+	worldSize: {
+		width: number;
+		height: number;
+	}
+	backgroundBoundaries: WorldBoundaries;
+	tick: number;
+	playing: boolean;
+	scale: number;
+	error?: string;
+	isShared: boolean;
+}
+
+
+export const Analyser = (props: AnalyseProps) => {
+	const parser = props.parser;
+	const intervalPerTick = props.header.interval_per_tick;
+
+	const [tick, setTick] = createSignal<number>();
+	const [scale, setScale] = createSignal<number>();
+	const [playing, setPlaying] = createSignal<boolean>();
+	const [sessionName, setSessionName] = createSignal<string>();
+
+	let lastFrameTime = 0;
+	let playStartTick = 0;
+	let playStartTime = 0;
+
+	const onUpdate = (update: StateUpdate) => {
+		if (update["tick"]) {
+			setTick(update["tick"]);
+		}
+		if (update["playing"]) {
+			setPlaying(update["playing"]);
+		}
+	}
+
+	let session: Session | null = null;
+	if (props.isStored && window.location.hash) {
+		const parsed = parseInt(window.location.hash.substr(1), 10);
+		if (('#' + parsed) === window.location.hash) {
+			setTick(Math.floor(parsed));
+		} else {
+			const name = window.location.hash.substring(1);
+			Session.join(name, onUpdate);
+			setSessionName(name);
+		}
+	}
+
+	const map = parser.demo.header.map;
+	const backgroundBoundaries = getMapBoundaries(map);
+	if (!backgroundBoundaries) {
+		throw new Error(`Map not supported "${map}".`);
+	}
+	const worldSize = {
+		width: backgroundBoundaries.boundary_max.x - backgroundBoundaries.boundary_min.x,
+		height: backgroundBoundaries.boundary_max.y - backgroundBoundaries.boundary_min.y,
+	};
+
+	const setTickNow = (tick) => {
+		lastFrameTime = 0;
+		playStartTick = tick;
+		playStartTime = window.performance.now();
+		setTick(tick);
+		setHash(tick);
+		if (session) {
+			session.update({tick});
+		}
+	}
+
+	const pause = () => {
+		setPlaying(false);
+		lastFrameTime = 0;
+		if (session) {
+			session.update({playing: false});
+		}
+	}
+
+	const play = () => {
+		playStartTick = tick();
+		playStartTime = window.performance.now();
+		setPlaying(true);
+		requestAnimationFrame(animFrame);
+		if (session) {
+			session.update({playing: false});
+		}
+	}
+
+	const togglePlay = () => {
+		if (playing()) {
+			pause();
+		} else {
+			play();
+		}
+	}
+
+	const syncPlayTick = debounce(500, () => {
+		if (session) {
+			session.update({
+				playing: playing(),
+				tick: tick(),
+			});
+		}
+	});
+
+	const setHash = debounce(250, (tick) => {
+		if (!session && props.isStored) {
+			history.replaceState('', '', '#' + tick);
+		}
+	});
+
+	const animFrame = (timestamp:number) => {
+		const timePassed = (timestamp - playStartTime) / 1000;
+		const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick));
+		lastFrameTime = timestamp;
+		if (targetTick >= (parser.demo.tick - 1)) {
+			pause();
+		}
+		setHash(targetTick);
+		setTick(targetTick);
+		syncPlayTick();
+
+		if (playing()) {
+			requestAnimationFrame(animFrame);
+		}
+	}
+
+	const players = () => parser.getPlayersAtTick(tick());
+	const buildings = () => parser.getBuildingsAtTick(tick());
+	const kills = parser.getKills();
+	const playButtonText = () => (playing()) ? '⏸' : '▶️';
+	const disabled = session && !session.isOwner();
+	const isShared = () => sessionName() !== '';
+
+	return (
+		<div>
+			<div class="map-holder">
+				<MapContainer contentSize={worldSize}
+							  onScale={setScale}>
+					<MapRender size={worldSize}
+							   players={players()}
+							   buildings={buildings()}
+							   header={props.header}
+							   world={backgroundBoundaries}
+							   scale={scale()}/>
+				</MapContainer>
+				<AnalyseMenu sessionName={sessionName()}
+							 onShare={() => {
+								 session = Session.create({
+									 tick: tick(),
+									 playing: playing()
+								 });
+								 setSessionName(session.sessionName);
+							 }}
+							 canShare={props.isStored && !disabled}
+							 isShared={isShared()}
+				/>
+				<SpecHUD parser={parser} tick={tick()}
+						 players={players()} kills={kills}/>
+			</div>
+			<div class="time-control"
+				 title={`${tickToTime(tick(), intervalPerTick)} (tick ${tick()})`}>
+				<input class="play-pause-button" type="button"
+					   onClick={togglePlay}
+					   value={playButtonText()}
+					   disabled={disabled}
+				/>
+				<Timeline parser={parser} tick={tick()}
+						  onSetTick={throttle(50, (tick) => {
+							  setTickNow(tick);
+						  })}
+						  disabled={disabled}/>
+			</div>
+		</div>
+	);
+}
+
+function tickToTime(tick: number, intervalPerTick: number): string {
+	let seconds = Math.floor(tick * intervalPerTick);
+	return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+}

script/viewer/Analyse/Data/AsyncParser.js

@@ -0,0 +1,58 @@
+"use strict";
+exports.__esModule = true;
+exports.AsyncParser = void 0;
+var parser_worker_1 = require("@demostf/parser-worker");
+var AsyncParser = /** @class */ (function () {
+    function AsyncParser(buffer, progressCallback) {
+        this.buffer = buffer;
+        this.progressCallback = progressCallback;
+    }
+    AsyncParser.prototype.cache = function () {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            var worker = new Worker(new URL('./ParseWorker.ts', import.meta.url));
+            worker.postMessage({
+                buffer: _this.buffer
+            }, [_this.buffer]);
+            worker.onmessage = function (event) {
+                if (event.data.error) {
+                    reject(event.data.error);
+                    return;
+                }
+                else if (event.data.progress) {
+                    _this.progressCallback(event.data.progress);
+                    return;
+                }
+                else if (event.data.demo) {
+                    var cachedData = event.data.demo;
+                    console.log("packed data: ".concat((cachedData.data.length / (1024 * 1024)).toFixed(1), "MB"));
+                    _this.world = cachedData.world;
+                    _this.demo = new parser_worker_1.ParsedDemo(cachedData.playerCount, cachedData.buildingCount, cachedData.world, cachedData.header, cachedData.data, cachedData.kills, cachedData.playerInfo, cachedData.tickCount);
+                    resolve(_this.demo);
+                }
+            };
+        });
+    };
+    AsyncParser.prototype.getPlayersAtTick = function (tick) {
+        var players = [];
+        for (var i = 0; i < this.demo.playerCount; i++) {
+            players.push(this.demo.getPlayer(tick, i));
+        }
+        return players;
+    };
+    AsyncParser.prototype.getBuildingsAtTick = function (tick) {
+        var buildings = [];
+        for (var i = 0; i < this.demo.buildingCount; i++) {
+            var building = this.demo.getBuilding(tick, i);
+            if (building.health > 0) {
+                buildings.push(building);
+            }
+        }
+        return buildings;
+    };
+    AsyncParser.prototype.getKills = function () {
+        return this.demo.kills;
+    };
+    return AsyncParser;
+}());
+exports.AsyncParser = AsyncParser;

script/viewer/Analyse/Data/AsyncParser.ts

@@ -0,0 +1,63 @@
+import {ParsedDemo, PlayerState, WorldBoundaries, Header, Kill, BuildingState} from "@demostf/parser-worker";
+import {getMapBoundaries} from "../MapBoundries";
+
+export class AsyncParser {
+	buffer: ArrayBuffer;
+	demo: ParsedDemo;
+	world: WorldBoundaries;
+	progressCallback: (progress: number) => void;
+
+	constructor(buffer: ArrayBuffer, progressCallback: (progress: number) => void) {
+		this.buffer = buffer;
+		this.progressCallback = progressCallback;
+	}
+
+	cache(): Promise<ParsedDemo> {
+		return new Promise((resolve, reject) => {
+			const worker = new Worker(new URL('./ParseWorker.ts', import.meta.url));
+			worker.postMessage({
+				buffer: this.buffer
+			}, [this.buffer]);
+			worker.onmessage = (event) => {
+				if (event.data.error) {
+					reject(event.data.error);
+					return;
+				} else if (event.data.progress) {
+					this.progressCallback(event.data.progress);
+					return;
+				} else if (event.data.demo) {
+					const cachedData: ParsedDemo = event.data.demo;
+					console.log(`packed data: ${(cachedData.data.length / (1024 * 1024)).toFixed(1)}MB`);
+					this.world = cachedData.world;
+					this.demo = new ParsedDemo(cachedData.playerCount, cachedData.buildingCount, cachedData.world, cachedData.header, cachedData.data, cachedData.kills, cachedData.playerInfo, cachedData.tickCount);
+					resolve(this.demo);
+				}
+			}
+		});
+	}
+
+	getPlayersAtTick(tick: number): PlayerState[] {
+		const players: PlayerState[] = [];
+		for (let i = 0; i < this.demo.playerCount; i++) {
+			players.push(this.demo.getPlayer(tick, i));
+		}
+
+		return players;
+	}
+
+	getBuildingsAtTick(tick: number): BuildingState[] {
+		const buildings: BuildingState[] = [];
+		for (let i = 0; i < this.demo.buildingCount; i++) {
+			const building = this.demo.getBuilding(tick, i);
+			if (building.health > 0) {
+				buildings.push(building);
+			}
+		}
+
+		return buildings;
+	}
+
+	getKills(): Kill[] {
+		return this.demo.kills
+	}
+}

script/viewer/Analyse/Data/ParseWorker.js

@@ -0,0 +1,25 @@
+"use strict";
+exports.__esModule = true;
+var parser_worker_1 = require("@demostf/parser-worker");
+/**
+ * @global postMessage
+ * @param event
+ */
+onmessage = function (event) {
+    var buffer = event.data.buffer;
+    var bytes = new Uint8Array(buffer);
+    (0, parser_worker_1.parseDemo)(bytes, function (progress) {
+        postMessage({
+            progress: progress
+        });
+    }).then(function (parsed) {
+        postMessage({
+            demo: parsed
+        }, [parsed.data.buffer]);
+    })["catch"](function (e) {
+        console.error(e);
+        postMessage({
+            error: e.message
+        });
+    });
+};

script/viewer/Analyse/Data/ParseWorker.ts

@@ -0,0 +1,27 @@
+import {parseDemo} from "@demostf/parser-worker";
+
+declare function postMessage(message: any, transfer?: any[]): void;
+
+/**
+ * @global postMessage
+ * @param event
+ */
+onmessage = (event: MessageEvent) => {
+	const buffer: ArrayBuffer = event.data.buffer;
+	const bytes = new Uint8Array(buffer);
+	parseDemo(bytes, (progress) => {
+		postMessage({
+			progress
+		});
+	}).then(parsed => {
+		postMessage({
+			demo: parsed
+		}, [parsed.data.buffer]);
+	}).catch(e => {
+		console.error(e);
+		postMessage({
+			error: e.message
+		});
+	});
+
+};

script/viewer/Analyse/MapBoundries.ts

@@ -0,0 +1,60 @@
+import {mapBoundaries} from './boundaries';
+
+mapBoundaries['koth_viaduct'] = mapBoundaries['koth_product_rc8'];
+mapBoundaries['cp_prolands'] = mapBoundaries['cp_badlands'];
+
+const mapAliases = new Map<string, string>([
+	['cp_prolands', 'cp_badlands']
+]);
+
+function getMapBasename(map: string): string {
+	if (map.startsWith('cp_gullywash_f') && !map.startsWith('cp_gullywash_final')) {
+		return 'cp_gullywash_f6';
+	}
+	if (mapBoundaries[map]) {
+		return map;
+	}
+	const trimMapName = (map) => {
+		while (map.lastIndexOf('_') > map.indexOf('_')) {
+			map = map.substr(0, map.lastIndexOf('_'));
+		}
+		return map;
+	};
+	const trimmed = trimMapName(map);
+	if (mapBoundaries[trimmed]) {
+		return trimmed;
+	}
+	for (const existingMap of Object.keys(mapBoundaries)) {
+		if (trimMapName(existingMap) === map) {
+			return existingMap;
+		}
+	}
+	for (const existingMap of Object.keys(mapBoundaries)) {
+		if (trimMapName(existingMap) === trimmed) {
+			return existingMap;
+		}
+	}
+	return map;
+}
+
+export function findMapAlias(map: string): string {
+	const baseName = getMapBasename(map);
+	const alias = mapAliases.get(baseName);
+	return alias ? alias : baseName;
+}
+
+export interface MapBoundries {
+	boundary_min: {
+		x: number;
+		y: number;
+	};
+	boundary_max: {
+		x: number;
+		y: number;
+	}
+}
+
+export function getMapBoundaries(map: string): MapBoundries | null {
+	const mapAlias = findMapAlias(map);
+	return mapBoundaries[mapAlias];
+}

script/viewer/Analyse/MapContainer.css

@@ -0,0 +1,5 @@
+.map-container {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}

script/viewer/Analyse/MapContainer.tsx

@@ -0,0 +1,34 @@
+import {Panner} from "../Panner/Panner";
+import {createEffect, createSignal} from "solid-js";
+
+export class MapContainerProps {
+    contentSize: {
+        width: number;
+        height: number;
+    };
+    onScale?: (scale: number) => any;
+    children: Element;
+}
+
+export const MapContainer = ({children, contentSize, onScale}: MapContainerProps) => {
+    const [container, setContainer] = createSignal<Element>();
+    const scale = () => Math.min(
+        container().clientWidth / contentSize.width,
+        container().clientHeight / contentSize.height
+    );
+    createEffect(() => {
+        if (isFinite(scale())) {
+            onScale && onScale(scale());
+        }
+    });
+
+    return (
+        <div class="map-container" ref={setContainer}>
+            <Panner width={container().clientWidth} height={container().clientHeight}
+                    scale={scale()} contentSize={contentSize}
+                    onScale={onScale}>
+                {children}
+            </Panner>
+        </div>
+    )
+}

script/viewer/Analyse/MapRender.css

@@ -0,0 +1,9 @@
+.map-background {
+  /*width: 1000px;*/
+  /*height: 1000px;*/
+  min-height: 500px;
+  min-width: 700px;
+  background: black no-repeat;
+  background-position: bottom left;
+  background-size: contain;
+}

script/viewer/Analyse/MapRender.tsx

@@ -0,0 +1,51 @@
+import {Player as PlayerDot} from './Render/Player';
+import {Building as BuildingDot} from './Render/Building';
+import {findMapAlias} from './MapBoundries';
+import {PlayerState, Header, WorldBoundaries, BuildingState} from "@demostf/parser-worker";
+
+export interface MapRenderProps {
+	header: Header;
+	players: PlayerState[];
+	buildings: BuildingState[];
+	size: {
+		width: number;
+		height: number;
+	},
+	world: WorldBoundaries;
+	scale: number;
+}
+
+declare const require: {
+	<T>(path: string): T;
+	(paths: string[], callback: (...modules: any[]) => void): void;
+	ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
+};
+
+export function MapRender({header, players, size, world, scale, buildings}: MapRenderProps) {
+	const mapAlias = findMapAlias(header.map);
+	const image = `images/leveloverview/dist/${mapAlias}.webp`;
+	const background = `url(${image})`;
+
+	const playerDots = players
+		.filter((player: PlayerState) => player.health)
+		.map((player: PlayerState) => {
+			return <PlayerDot player={player} mapBoundary={world}
+			                  targetSize={size} scale={scale} />
+		});
+
+	const buildingDots = buildings
+		.filter((building: PlayerState) => building.position.x)
+		.map((building: PlayerState) => {
+			return <BuildingDot building={building}
+			                    mapBoundary={world}
+			                    targetSize={size} scale={scale}/>
+		});
+
+	return (
+		<svg class="map-background" width={size.width} height={size.height}
+		     style={{"background-image": background}}>
+			{playerDots}
+			{buildingDots}
+		</svg>
+	);
+}

script/viewer/Analyse/Render/Building.tsx

@@ -0,0 +1,74 @@
+import {BuildingState, WorldBoundaries, BuildingType, Team} from "@demostf/parser-worker";
+
+export interface BuildingProp {
+	building: BuildingState;
+	mapBoundary: WorldBoundaries;
+	targetSize: {
+		width: number;
+		height: number;
+	};
+	scale: number;
+}
+
+const healthMap = [0, 150, 180, 216];
+
+function getBuildingType(type: BuildingType) {
+	switch (type) {
+		case BuildingType.TeleporterEntrance:
+			return 'tele_entrance';
+		case BuildingType.TeleporterExit:
+			return 'tele_exit';
+		case BuildingType.Dispenser:
+			return 'dispenser';
+		case BuildingType.Level1Sentry:
+			return 'sentry_1';
+		case BuildingType.Level2Sentry:
+			return 'sentry_2';
+		case BuildingType.Level3Sentry:
+			return 'sentry_3';
+		case BuildingType.MiniSentry:
+			return 'sentry_1';
+		default:
+			return 'unknown';
+	}
+}
+
+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({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];
+	if (!maxHealth) {
+		return null;
+	}
+
+	const alpha = building.health / maxHealth;
+	try {
+		const image = getIcon(building);
+
+		const angle = (building.angle) ?
+			<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
+					 transform={`rotate(${270 - building.angle})`}/> : '';
+
+		return <g transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}
+				  opacity={alpha}>
+			{angle}
+			<image href={image} class={"player-icon"} height={32}
+					  width={32}
+					  transform={`translate(-16 -16)`}/>
+		</g>
+	} catch (e) {
+		console.log(e);
+
+		return null;
+	}
+}

script/viewer/Analyse/Render/KillFeed.css

@@ -0,0 +1,45 @@
+.killfeed {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 15px;
+  user-select: none;
+
+  .kill {
+    .red {
+      color: #a75d50;
+    }
+    .blue {
+      color: #5b818f;
+    }
+
+    &.active-player {
+      background-color: #ddcfb2;
+    }
+
+    display: inline-block;
+    margin: 3px;
+    white-space: nowrap;
+    background-color: #2d2727cc;
+    border-radius: 5px;
+    padding: 5px 15px;
+    width: auto;
+    text-align: right;
+    color: var(--primary-color);
+    font-weight: bold;
+    float: right;
+    clear: both;
+
+    .player {
+      padding: 0 5px;
+    }
+  }
+}
+
+.kill-icon {
+  display: inline-block;
+  height: 22px;
+  width: auto;
+  vertical-align: middle;
+  filter: brightness(600%);
+}

script/viewer/Analyse/Render/KillFeed.tsx

@@ -0,0 +1,65 @@
+import {Kill, PlayerState} from "@demostf/parser-worker";
+import {killAlias} from "./killAlias";
+
+export interface KillFeedProps {
+	kills: Kill[],
+	tick: number;
+	players: PlayerState[];
+}
+
+export function KillFeed({kills, tick, players}: KillFeedProps) {
+	let relevantKills: Kill[] = kills.filter(kill => kill.tick <= tick && kill.tick >= (tick - 30 * 10));
+
+	return <div class="killfeed">
+		{relevantKills.map((kill, i) => <KillFeedItem kill={kill} players={players}/>)}
+	</div>
+}
+
+const teamMap = {
+	0: 'unknown',
+	2: 'red',
+	3: 'blue'
+};
+
+export function KillFeedItem({kill, players}: { kill: Kill, players: PlayerState[] }) {
+	const alias = killAlias[kill.weapon] ? killAlias[kill.weapon] : kill.weapon;
+	const attacker = getPlayer(players, kill.attacker);
+	const assister = getPlayer(players, kill.assister);
+	let victim = getPlayer(players, kill.victim);
+	let killIcon;
+	try {
+		killIcon = `/images/kill_icons/${alias}.png`;
+	} catch (e) {
+		console.log(alias);
+		killIcon = `/images/kill_icons/skull.png`;
+	}
+	if (!victim) {
+		victim = {
+			team: 0,
+			info: {
+				name: 'Missing player'
+			}
+		};
+	}
+
+	return <div class="kill">
+		{(attacker && kill.attacker !== kill.victim) ?
+			<span class={"player " + teamMap[attacker.team]}>
+				{attacker.info.name}
+				</span> : ''}
+		{(assister && kill.assister !== kill.victim) ?
+			<span class={teamMap[assister.team]}>﹢</span> : ''}
+		{(assister && kill.assister !== kill.victim) ?
+			(<span class={"player " + teamMap[assister.team]}>
+				{assister.info.name}
+				</span>) : ''}
+		<img src={killIcon} class={`kill-icon ${kill.weapon}`}/>
+		<span class={"player " + teamMap[victim.team]}>
+			{victim.info.name}
+			</span>
+	</div>
+}
+
+function getPlayer(players: PlayerState[], entityId: number): PlayerState {
+	return players.find(player => player.info.userId == entityId);
+}

script/viewer/Analyse/Render/Player.css

@@ -0,0 +1,4 @@
+.player-icon {
+  mask-size: cover;
+  mask-repeat: no-repeat;
+}

script/viewer/Analyse/Render/Player.tsx

@@ -0,0 +1,73 @@
+import {PlayerState, WorldBoundaries, Team} from "@demostf/parser-worker";
+
+export interface PlayerProp {
+	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
+};
+
+const classMap = {
+	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;
+
+	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>
+}
+
+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)`}/>
+}

script/viewer/Analyse/Render/PlayerSpec.css

@@ -0,0 +1,218 @@
+.blueSpecHolder {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.redSpecHolder {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.playerspec {
+  background-color: black;
+  color: white;
+  height: 42px;
+  width: 200px;
+  position: relative;
+  font-family: sans-serif;
+  margin-bottom: 2px;
+  user-select: none;
+
+  &.uber {
+    height: 28px;
+  }
+
+  .class-icon, .steam-avatar {
+    width: 42px;
+    height: 42px;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-position: top left;
+    background-size: 100% 100%;
+
+    &.uber {
+      height: 28px;
+      background-size: 28px 28px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+    }
+  }
+
+  .player-name {
+    display: inline-block;
+    position: relative;
+    padding: 0 5px;
+    white-space: nowrap;
+    width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .health-container {
+    display: inline-block;
+    position: absolute;
+    left: 42px;
+    top: 0;
+    height: 28px;
+    width: calc(100% - 42px);
+    line-height: 28px;
+    font-weight: bold;
+    .health {
+      position: relative;
+      float: right;
+      padding: 0 5px;
+    }
+
+    .healthbar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 28px;
+    }
+  }
+
+  &.red {
+    .health-container {
+      background-color: #a75d50aa;
+    }
+
+    .healthbar {
+      background-color: #a75d50;
+    }
+
+    .class-icon.scout {
+      background-image: url('../../images/class_portraits/Icon_scout.jpg');
+    }
+    .class-icon.soldier {
+      background-image: url('../../images/class_portraits/Icon_soldier.jpg');
+    }
+    .class-icon.pyro {
+      background-image: url('../../images/class_portraits/Icon_pyro.jpg');
+    }
+    .class-icon.demoman {
+      background-image: url('../../images/class_portraits/Icon_demoman.jpg');
+    }
+    .class-icon.engineer {
+      background-image: url('../../images/class_portraits/Icon_engineer.jpg');
+    }
+    .class-icon.heavy {
+      background-image: url('../../images/class_portraits/Icon_heavy.jpg');
+    }
+    .class-icon.medic {
+      background-image: url('../../images/class_portraits/Icon_medic.jpg');
+    }
+    .class-icon.sniper {
+      background-image: url('../../images/class_portraits/Icon_sniper.jpg');
+    }
+    .class-icon.spy{
+      background-image: url('../../images/class_portraits/Icon_spy.jpg');
+    }
+    .class-icon.uber {
+      background-image: url('../../images/charge_red.svg');
+    }
+
+    .class-icon, .steam-avatar {
+      right: 0;
+      left: auto;
+    }
+
+    .health-container {
+      right: 42px;
+      left: auto;
+    }
+
+    .health {
+      float: left;
+    }
+
+    .player-name {
+      float: right;
+      direction: ltr;
+      text-align: right;
+    }
+  }
+
+  &.blue {
+    .health-container {
+      background-color: #5b818faa;
+    }
+
+    .healthbar {
+      background-color: #5b818f;
+    }
+
+    .class-icon.scout {
+      background-image: url('../../images/class_portraits/Icon_scout_blue.jpg');
+    }
+    .class-icon.soldier {
+      background-image: url('../../images/class_portraits/Icon_soldier_blue.jpg');
+    }
+    .class-icon.pyro {
+      background-image: url('../../images/class_portraits/Icon_pyro_blue.jpg');
+    }
+    .class-icon.demoman {
+      background-image: url('../../images/class_portraits/Icon_demoman_blue.jpg');
+    }
+    .class-icon.engineer {
+      background-image: url('../../images/class_portraits/Icon_engineer_blue.jpg');
+    }
+    .class-icon.heavy {
+      background-image: url('../../images/class_portraits/Icon_heavy_blue.jpg');
+    }
+    .class-icon.medic {
+      background-image: url('../../images/class_portraits/Icon_medic_blue.jpg');
+    }
+    .class-icon.sniper {
+      background-image: url('../../images/class_portraits/Icon_sniper_blue.jpg');
+    }
+    .class-icon.spy {
+      background-image: url('../../images/class_portraits/Icon_spy_blue.jpg');
+    }
+    .class-icon.uber {
+      background-image: url('../../images/charge_blue.svg');
+    }
+  }
+
+  &.overhealed {
+    .health {
+      color: #79d297;
+    }
+
+    .health:after {
+      position: absolute;
+      top: 21px;
+      right: 0;
+      padding: 0 5px;
+      font-size: 10px;
+      font-weight: bold;
+      content: 'OVERHEALED'
+    }
+
+    &.red .health:after {
+      position: absolute;
+      top: 21px;
+      left: 0;
+      right: auto;
+    }
+  }
+
+  &.dead {
+    .healthbar, .health {
+      display: none;
+    }
+
+    .health-container {
+      background-color: transparent;
+    }
+
+    .class-icon {
+      opacity: 0.5;
+    }
+  }
+}

script/viewer/Analyse/Render/PlayerSpec.tsx

@@ -0,0 +1,139 @@
+import {PlayerState} from "@demostf/parser-worker";
+
+export interface PlayerSpecProps {
+	player: PlayerState;
+}
+
+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
+};
+
+const classMap = {
+	1: "scout",
+	2: "sniper",
+	3: "soldier",
+	4: "demoman",
+	5: "medic",
+	6: "heavy",
+	7: "pyro",
+	8: "spy",
+	9: "engineer"
+};
+
+const classSort = {
+	1: 1, //scout
+	3: 2, //soldier
+	7: 3, //pyro
+	4: 4, //demoman
+	6: 5, //heavy
+	9: 6, //engineer
+	5: 7, //medic
+	2: 8, //sniper
+	8: 9, //spy
+};
+
+const teamMap = {
+	0: "other",
+	1: "spectator",
+	2: "red",
+	3: "blue",
+}
+
+export interface PlayersSpecProps {
+	players: PlayerState[];
+}
+
+export function PlayersSpec({players}: PlayersSpecProps) {
+	const redPlayers = players
+		.filter((player) => player.team === 2);
+	const bluePlayers = players
+		.filter((player) => player.team === 3);
+	redPlayers.sort((a, b) => classSort[a.playerClass] - classSort[b.playerClass]);
+	bluePlayers.sort((a, b) => classSort[a.playerClass] - classSort[b.playerClass]);
+
+	const redPlayerSpecs = redPlayers
+		.map((player, i) => <PlayerSpec player={player}/>)
+		.concat(
+			redPlayers
+				.filter(player => player.playerClass === 5)
+				.map((player, i) => <UberSpec
+					team={teamMap[player.team]}
+					chargeLevel={player.charge}
+					isDeath={player.health < 1}
+				/>)
+		);
+	const bluePlayerSpecs = bluePlayers
+		.map((player, i) => <PlayerSpec player={player}/>).concat(
+			bluePlayers
+				.filter(player => player.playerClass === 5)
+				.map((player, i) => {
+					// console.log(player);
+					return (<UberSpec
+						team={teamMap[player.team]}
+						chargeLevel={player.charge}
+						isDeath={player.health < 1}
+					/>)
+				})
+		);
+
+	return (<div>
+		<div class="redSpecHolder">{redPlayerSpecs}</div>
+		<div class="blueSpecHolder">{bluePlayerSpecs}</div>
+	</div>);
+}
+
+export function PlayerSpec({player}: PlayerSpecProps) {
+	const healthPercent = Math.min(100, player.health / healthMap[player.playerClass] * 100);
+	const healthStatusClass = (player.health > healthMap[player.playerClass]) ? 'overhealed' : (player.health <= 0 ? 'dead' : '');
+
+	return (
+		<div
+			class={"playerspec " + teamMap[player.team] + " webp " + healthStatusClass}>
+			{getPlayerIcon(player)}
+			<div class="health-container">
+				<div class="healthbar"
+					 style={{width: healthPercent + '%'}}/>
+				<span class="player-name">{player.info.name}</span>
+				<span class="health">{player.health}</span>
+			</div>
+		</div>
+	);
+}
+
+function getPlayerIcon(player: PlayerState) {
+	if (classMap[player.playerClass]) {
+		return <div class={classMap[player.playerClass] + " class-icon"}/>
+	} else {
+		return <div class={"class-icon"}/>
+	}
+}
+
+export interface UberSpecProps {
+	chargeLevel: number;
+	team: string;
+	isDeath: boolean;
+}
+
+export function UberSpec({chargeLevel, team, isDeath}: UberSpecProps) {
+	const healthStatusClass = (isDeath) ? 'dead' : '';
+	return (
+		<div class={`playerspec uber ${team} ${healthStatusClass}`}>
+			<div class={"uber class-icon"}/>
+			<div class="health-container">
+				<div class="healthbar"
+					 style={{width: chargeLevel + '%'}}/>
+				<span class="player-name">Charge</span>
+				<span class="health">{Math.round(chargeLevel)}</span>
+			</div>
+		</div>
+	);
+}

script/viewer/Analyse/Render/SpecHUD.tsx

@@ -0,0 +1,19 @@
+import {PlayersSpec} from './PlayerSpec';
+import {KillFeed} from './KillFeed';
+import {AsyncParser} from "../Data/AsyncParser";
+import {PlayerState, Kill} from "@demostf/parser-worker";
+
+export interface SpecHUDProps {
+	tick: number;
+	parser: AsyncParser;
+	players: PlayerState[];
+	kills: Kill[]
+}
+
+export function SpecHUD({tick, parser, players, kills}: SpecHUDProps) {
+	return (<div class="spechud">
+		<KillFeed tick={tick} kills={kills} players={players}/>
+		<PlayersSpec players={players}/>
+	</div>)
+}
+

script/viewer/Analyse/Render/Timeline.css

@@ -0,0 +1,23 @@
+.timeline {
+  width: 100%;
+  height: 100px;
+  /*bottom: 0;*/
+  /*position: relative;*/
+}
+
+.timeline-progress {
+  position: absolute;
+  bottom: -60px;
+  left: 0;
+  width: 100%;
+  height: 160px;
+}
+
+.timeline-background {
+  position: absolute;
+  bottom: 22px;
+  left: 0;
+  width: 100%;
+  height: 78px;
+  transform: scale(1, -1);
+}

script/viewer/Analyse/Render/Timeline.tsx

@@ -0,0 +1,69 @@
+import {ParsedDemo, PlayerState, Header, WorldBoundaries, Team} from "@demostf/parser-worker";
+
+export interface TimelineProps {
+	parser: AsyncParser;
+	tick: number;
+	onSetTick: (tick: number) => any;
+	disabled?: boolean;
+}
+
+export const Timeline = ({parser, tick, onSetTick, disabled}) => {
+	const background = <TimeLineBackground parser={parser}/>;
+
+	return (<div class="timeline">
+		{background}
+		<input class="timeline-progress" type="range" min={0}
+			   max={parser.demo.tickCount} value={tick}
+			   disabled={disabled}
+			   onChange={(event) => {onSetTick(parseInt(event.target.value, 10))}}
+		/>
+	</div>);
+}
+
+import {AsyncParser} from "../Data/AsyncParser";
+import {createSignal} from "solid-js";
+
+function TimeLineBackground({parser}:{parser: AsyncParser}) {
+	const length = Math.floor(parser.demo.tickCount / 30);
+	const blueHealth = new Uint16Array(length);
+	const redHealth = new Uint16Array(length);
+	let index = 0;
+	let maxHealth = 0;
+	for (let tick = 0; tick < parser.demo.tickCount; tick += 30) {
+		index++;
+		const players = parser.getPlayersAtTick(tick);
+		for (const player of players) {
+			if (player.team === 2) {
+				redHealth[index] += player.health;
+			} else if (player.team === 3) {
+				blueHealth[index] += player.health;
+			}
+		}
+		if (blueHealth[index] > 0 && redHealth[index] > 0) {
+			maxHealth = Math.max(maxHealth, blueHealth[index], redHealth[index]);
+		}
+	}
+
+	let darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+	let redStroke = darkMode ? '#ff756bff' : '#ff000088';
+	let blueStroke = darkMode ? '#7378ffff' : '#0000ff88';
+
+	const redHealthPath = redHealth.reduce(pathReducer, 'M 0 0');
+	const blueHealthPath = blueHealth.reduce(pathReducer, 'M 0 0');
+
+	return (
+		<svg class="timeline-background"
+		     viewBox={`0 0 ${length} ${maxHealth}`}
+		     preserveAspectRatio="none">
+			<path d={redHealthPath} stroke={redStroke} stroke-width={2}
+			      fill="transparent"
+			      vector-effect="non-scaling-stroke"/>
+			<path d={blueHealthPath} stroke={blueStroke} stroke-width={2}
+			      fill="transparent"
+			      vector-effect="non-scaling-stroke"/>
+		</svg>);
+}
+
+function pathReducer(path, y, x) {
+	return `${path} L ${x} ${y}`
+}

script/viewer/Analyse/Render/killAlias.ts

@@ -0,0 +1,38 @@
+export const killAlias = {
+	'world': 'skull',
+	'player': 'skull',
+	'telefrag': 'skull',
+	'shotgun_pyro': 'shotgun',
+	'tf_projectile_pipe_remote': 'stickybomb_launcher',
+	'the_classic': 'classic',
+	'tf_projectile_arrow': 'huntsman',
+	'club': 'kukri',
+	'shotgun_primary': 'shotgun',
+	'shotgun_soldier': 'shotgun',
+	'shotgun_hwg': 'shotgun',
+	'pickaxe': 'escape_plan',
+	'tf_projectile_pipe': 'grenade_launcher',
+	'obj_sentrygun': 'sentrygun1',
+	'steel_fists': 'fists_of_steel',
+	'tf_projectile_rocket': 'rocket_launcher',
+	'obj_sentrygun3': 'sentrygun3',
+	'obj_sentrygun2': 'sentrygun2',
+	'worldspawn': 'skull',
+	'nonnonviolent_protest': 'conscientious_objector',
+	'deflect_promode': 'deflect_rocket',
+	'trigger_hurt': 'bleed',
+	'quake_rl': 'original',
+	'wrangler_kill': 'wrangler',
+	'obj_minisentry': 'minisentry',
+	'pistol_scout': 'pistol',
+	'bleed_kill': 'bleed',
+	'maxgun': 'lugermorph',
+	'rocketlauncher_directhit': 'direct_hit',
+	'frontier_kill': 'frontier_justice',
+	'robot_arm_kill': 'gunslinger',
+	'wrench_jag': 'jag',
+	'loose_cannon_explosion': 'loose_cannon',
+	'samrevolver': 'big_kill',
+	'long_heatmaker': 'huo-long_heater',
+	'pep_pistol': 'pistol'
+};

script/viewer/Analyse/Session.ts

@@ -0,0 +1,152 @@
+import {ownKeys} from "solid-js/store/types/store";
+
+const syncUri = 'wss://sync.demos.tf';
+
+export class Session {
+    public readonly owner_token: string | null;
+    private socket: WebSocket | null;
+    public readonly sessionName: string;
+    private initialState: PlaybackState | null;
+    private readonly onState: (StateUpdate) => void | null;
+
+    constructor(name: string, owner_token: string | null = null, initialState: PlaybackState | null, onState: (StateUpdate) => void | null = null) {
+        this.owner_token = owner_token;
+        this.sessionName = name;
+        this.initialState = initialState;
+        this.onState = onState;
+    }
+
+    public static create(state: PlaybackState): Session {
+        return new Session(generateToken(), generateToken(), state)
+    }
+
+    public static join(name: string, onState: (StateUpdate) => void): Session {
+        return new Session(name, null, null, onState);
+    }
+
+    private open() {
+        if (this.socket) {
+            return;
+        }
+        this.socket = new WebSocket(syncUri);
+        this.socket.onopen = () => {
+            if (this.socket) {
+                if (this.owner_token) {
+                    this.socket.send(JSON.stringify({
+                        type: 'create',
+                        session: this.sessionName,
+                        token: this.owner_token
+                    }));
+                    this.socket.send(JSON.stringify({
+                        type: 'tick',
+                        session: this.sessionName,
+                        tick: this.initialState.tick
+                    }));
+                    this.socket.send(JSON.stringify({
+                        type: 'play',
+                        session: this.sessionName,
+                        play: this.initialState.playing
+                    }));
+                    this.initialState = null;
+                } else {
+                    this.socket.send(JSON.stringify({
+                        type: 'join',
+                        session: this.sessionName
+                    }));
+                    this.socket.onmessage = (event) => {
+                        const packet = JSON.parse(event.data) as Packet;
+                        if (packet.type === 'tick') {
+                            this.onState({
+                                tick: packet.tick
+                            });
+                        }
+                        if (packet.type === 'play') {
+                            if (packet.play || packet.tick) {
+                                this.onState({
+                                    playing: true
+                                });
+                            } else {
+                                this.onState({
+                                    playing: false
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        this.socket.onclose = () => {
+            this.socket = null;
+            setTimeout(this.open.bind(this), 250);
+        };
+        this.socket.onerror = () => {
+            this.socket = null;
+            setTimeout(this.open.bind(this), 250);
+        };
+    }
+
+    public isOwner(): boolean {
+        return this.owner_token !== null;
+    }
+
+    public update(update: StateUpdate): void {
+        if (this.socket && this.isOwner()) {
+            if (update["tick"]) {
+                this.socket.send(JSON.stringify({
+                    type: 'tick',
+                    session: this.sessionName,
+                    tick: update["tick"]
+                }));
+            }
+            if (update["playing"]) {
+                this.socket.send(JSON.stringify({
+                    type: 'play',
+                    session: this.sessionName,
+                    play: update["playing"]
+                }));
+            }
+        }
+    }
+}
+
+function generateToken(): string {
+    let string = "";
+    const alphabet = "abcdefghijklmnopqrstuvwxyz";
+
+    while (string.length < 6) {
+        string += alphabet[Math.floor(Math.random() * alphabet.length)];
+    }
+    return string;
+}
+
+export interface PlaybackState {
+    tick: number,
+    playing: boolean,
+}
+
+export type StateUpdate = Partial<PlaybackState>;
+
+interface JoinPacket {
+    type: 'join';
+    session: string;
+}
+
+interface CreatePacket {
+    type: 'create';
+    session: string;
+}
+
+export interface TickPacket {
+    type: 'tick';
+    session: string;
+    tick: number;
+}
+
+export interface PlayPacket {
+    type: 'play';
+    session: string;
+    play?: boolean;
+    tick?: boolean; //old sync server
+}
+
+export type Packet = JoinPacket | CreatePacket | TickPacket | PlayPacket;

script/viewer/Analyse/boundaries.ts

@@ -0,0 +1,462 @@
+export const mapBoundaries = {
+  "pl_badwater_pro_v9": {
+	"boundary_min": {
+	  "x": -2427,
+	  "y": -3340
+	},
+	"boundary_max": {
+	  "x": 3785,
+	  "y": 2922
+	}
+  },
+  "cp_gullywash_final1": {
+	"boundary_min": {
+	  "x": -4050,
+	  "y": -2950
+	},
+	"boundary_max": {
+	  "x": 5432,
+	  "y": 2260
+	}
+  },
+  "cp_gullywash_f6": {
+	"boundary_min": {
+	  "x": -4717,
+	  "y": -2643
+	},
+	"boundary_max": {
+	  "x": 4765,
+	  "y": 2567
+	}
+  },
+  "cp_process_final": {
+	"boundary_min": {
+	  "x": -5222,
+	  "y": -3146
+	},
+	"boundary_max": {
+	  "x": 5216,
+	  "y": 3128
+	}
+  },
+  "cp_badlands": {
+	"boundary_min": {
+	  "x": -4285,
+	  "y": -4898
+	},
+	"boundary_max": {
+	  "x": 2577,
+	  "y": 4858
+	}
+  },
+  "pl_upward": {
+	"boundary_min": {
+	  "x": -2653,
+	  "y": -4344
+	},
+	"boundary_max": {
+	  "x": 3097,
+	  "y": 2180
+	}
+  },
+  "koth_product_rc8": {
+	"boundary_min": {
+	  "x": -2859,
+	  "y": -3668
+	},
+	"boundary_max": {
+	  "x": -171,
+	  "y": 3776
+	}
+  },
+  "cp_snakewater_final1": {
+	"boundary_min": {
+	  "x": -5671,
+	  "y": -2649
+	},
+	"boundary_max": {
+	  "x": 6687,
+	  "y": 2961
+	}
+  },
+  "ultiduo_baloo_v2": {
+	"boundary_min": {
+	  "x": -1678,
+	  "y": -1964
+	},
+	"boundary_max": {
+	  "x": 1678,
+	  "y": 1964
+	}
+  },
+  "cp_sunshine": {
+	"boundary_min": {
+	  "x": -8798,
+	  "y": 173
+	},
+	"boundary_max": {
+	  "x": -2502,
+	  "y": 10279
+	}
+  },
+  "cp_metalworks_rc7": {
+	"boundary_min": {
+	  "x": -3034,
+	  "y": -6699
+	},
+	"boundary_max": {
+	  "x": 3374,
+	  "y": 4939
+	}
+  },
+  "cp_steel": {
+	"boundary_min": {
+	  "x": -2406,
+	  "y": -3422
+	},
+	"boundary_max": {
+	  "x": 2924,
+	  "y": 2684
+	}
+  },
+  "koth_lakeside_final": {
+	"boundary_min": {
+	  "x": -4617,
+	  "y": -2160
+	},
+	"boundary_max": {
+	  "x": 4491,
+	  "y": 1114
+	}
+  },
+  "cp_granary_pro_b10": {
+	"boundary_min": {
+	  "x": -3069,
+	  "y": -6539
+	},
+	"boundary_max": {
+	  "x": 7,
+	  "y": 6263
+	}
+  },
+  "koth_ashville_rc1": {
+	"boundary_min": {
+	  "x": -1423,
+	  "y": -3920
+	},
+	"boundary_max": {
+	  "x": 1501,
+	  "y": 3890
+	}
+  },
+  "cp_reckoner_b3a": {
+	"boundary_min": {
+	  "x": -3800,
+	  "y": -4921
+	},
+	"boundary_max": {
+	  "x": 3794,
+	  "y": 4879
+	}
+  },
+  "pl_borneo": {
+	"boundary_min": {
+	  "x": -3470,
+	  "y": -8160
+	},
+	"boundary_max": {
+	  "x": 3168,
+	  "y": 3786
+	}
+  },
+  "pl_swiftwater_final1": {
+	"boundary_min": {
+	  "x": 408,
+	  "y": -6128
+	},
+	"boundary_max": {
+	  "x": 6296,
+	  "y": 2624
+	}
+  },
+  "ultiduo_grove_b2": {
+	"boundary_min": {
+	  "x": -2099,
+	  "y": -1793
+	},
+	"boundary_max": {
+	  "x": 2099,
+	  "y": 1793
+	}
+  },
+  "pl_vigil_b2": {
+	"boundary_min": {
+	  "x": -1019,
+	  "y": -2070
+	},
+	"boundary_max": {
+	  "x": 4875,
+	  "y": 4784
+	}
+  },
+  "koth_bagel_rc4": {
+	"boundary_min": {
+	  "x": -4286,
+	  "y": -1234
+	},
+	"boundary_max": {
+	  "x": 4196,
+	  "y": 1150
+	}
+  },
+  "ctf_ballin_sky": {
+	"boundary_min": {
+	  "x": -1024,
+	  "y": -1504
+	},
+	"boundary_max": {
+	  "x": 1024,
+	  "y": 1504
+	}
+  },
+  "koth_ultiduo_r_b7": {
+	"boundary_min": {
+	  "x": -1337,
+	  "y": -1313
+	},
+	"boundary_max": {
+	  "x": 1337,
+	  "y": 1313
+	}
+  },
+  "koth_warmtic_rc4": {
+	"boundary_min": {
+	  "x": -1337,
+	  "y": -4437
+	},
+	"boundary_max": {
+	  "x": 2099,
+	  "y": 4547
+	}
+  },
+  "cp_alloy_rc2a": {
+	"boundary_min": {
+	  "x": -4271,
+	  "y": -3262
+	},
+	"boundary_max": {
+	  "x": 1801,
+	  "y": 5492
+	}
+  },
+  "pl_millstone_ugc_7": {
+	"boundary_min": {
+	  "x": -3349,
+	  "y": -1776
+	},
+	"boundary_max": {
+	  "x": 2709,
+	  "y": 4840
+	}
+  },
+  "cp_vanguard": {
+	"boundary_min": {
+	  "x": -5585,
+	  "y": -1896
+	},
+	"boundary_max": {
+	  "x": 5585,
+	  "y": 1896
+	}
+  },
+  "koth_cascade_b6": {
+	"boundary_min": {
+	  "x": -1682,
+	  "y": -3807
+	},
+	"boundary_max": {
+	  "x": 1714,
+	  "y": 3735
+	}
+  },
+  "koth_coalplant_b8": {
+	"boundary_min": {
+	  "x": -1513,
+	  "y": -4089
+	},
+	"boundary_max": {
+	  "x": 1527,
+	  "y": 4083
+	}
+  },
+  "koth_ramjam_rc1": {
+	"boundary_min": {
+	  "x": -3464,
+	  "y": -1865
+	},
+	"boundary_max": {
+	  "x": 3464,
+	  "y": 1851
+	}
+  },
+  "dm_airfusion_final": {
+	"boundary_min": {
+	  "x": -855,
+	  "y": -2533
+	},
+	"boundary_max": {
+	  "x": 2315,
+	  "y": 337
+	}
+  },
+  "dm_biohazard_cal": {
+	"boundary_min": {
+	  "x": 422,
+	  "y": 366
+	},
+	"boundary_max": {
+	  "x": 2486,
+	  "y": 1942
+	}
+  },
+  "dm_caverns_r1": {
+	"boundary_min": {
+	  "x": -1979,
+	  "y": -1476
+	},
+	"boundary_max": {
+	  "x": 1091,
+	  "y": 1884
+	}
+  },
+  "dm_ethic": {
+	"boundary_min": {
+	  "x": -1549,
+	  "y": -1537
+	},
+	"boundary_max": {
+	  "x": 273,
+	  "y": -19
+	}
+  },
+  "dm_killbox_kbh_2p": {
+	"boundary_min": {
+	  "x": -1510,
+	  "y": -1017
+	},
+	"boundary_max": {
+	  "x": 1010,
+	  "y": 1017
+	}
+  },
+  "dm_lockdown_r6": {
+	"boundary_min": {
+	  "x": -4670,
+	  "y": 1257
+	},
+	"boundary_max": {
+	  "x": -2382,
+	  "y": 6343
+	}
+  },
+  "dm_lostarena": {
+	"boundary_min": {
+	  "x": -867,
+	  "y": -1421
+	},
+	"boundary_max": {
+	  "x": 1277,
+	  "y": 1041
+	}
+  },
+  "dm_lostvillage_v3": {
+	"boundary_min": {
+	  "x": -513,
+	  "y": -1830
+	},
+	"boundary_max": {
+	  "x": 2163,
+	  "y": 2000
+	}
+  },
+  "dm_tigcrik_r2": {
+	"boundary_min": {
+	  "x": -1608,
+	  "y": -402
+	},
+	"boundary_max": {
+	  "x": 264,
+	  "y": 1268
+	}
+  },
+  "cp_kalinka": {
+	"boundary_min": {
+	  "x": -4117,
+	  "y": -5036
+	},
+	"boundary_max": {
+	  "x": 4117,
+	  "y": 4740
+	}
+  },
+  "cp_cardinal": {
+	"boundary_min": {
+	  "x": -6716,
+	  "y": -1782
+	},
+	"boundary_max": {
+	  "x": 6716,
+	  "y": 1782
+	}
+  },
+  "koth_airfield": {
+	"boundary_min": {
+	  "x": -3102,
+	  "y": -2094
+	},
+	"boundary_max": {
+	  "x": 3102,
+	  "y": 2094
+	}
+  },
+  "koth_clearcut": {
+	"boundary_min": {
+	  "x": -4432,
+	  "y": -1283
+	},
+	"boundary_max": {
+	  "x": 4438,
+	  "y": 1255
+	}
+  },
+  "cp_villa": {
+	"boundary_min": {
+	  "x": -5988,
+	  "y": -2466
+	},
+	"boundary_max": {
+	  "x": 5988,
+	  "y": 2466
+	}
+  },
+  "cp_gravelpit": {
+	"boundary_min": {
+	  "x": -5359,
+	  "y": -328
+	},
+	"boundary_max": {
+	  "x": 1795,
+	  "y": 5610
+	}
+  },
+  "koth_proplant": {
+	"boundary_min": {
+	  "x": -1530,
+	  "y": -4109
+	},
+	"boundary_max": {
+	  "x": 1530,
+	  "y": 4071
+	}
+  }
+}