Initial Commit

web/assets/json/cs_italy.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -2647.0,
+  "pos_y": 2592.0,
+  "scale": 4.6,
+  "rotate": 1,
+  "zoom": 1.5
+}

web/assets/json/cs_office.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -1838.0,
+  "pos_y": 1858.0,
+  "scale": 4.1,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_ancient.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -2953.0,
+  "pos_y": 2164.0,
+  "scale": 5.0,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_anubis.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -2796.0,
+  "pos_y": 3328.0,
+  "scale": 5.22,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_dust2.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -2476.0,
+  "pos_y": 3239.0,
+  "scale": 4.400000095367432,
+  "rotate": 1,
+  "zoom": 1.100000023841858
+}

web/assets/json/de_inferno.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -2087.0,
+  "pos_y": 3870.0,
+  "scale": 4.9,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_mirage.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -3230.0,
+  "pos_y": 1713.0,
+  "scale": 5.0,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_nuke.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -3453.0,
+  "pos_y": 2887.0,
+  "scale": 7.0,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_overpass.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -4831.0,
+  "pos_y": 1781.0,
+  "scale": 5.2,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/assets/json/de_vertigo.json

@@ -0,0 +1,7 @@
+{
+  "pos_x": -3168.0,
+  "pos_y": 1762.0,
+  "scale": 4.0,
+  "rotate": 0,
+  "zoom": 0.0
+}

web/cs2/positions/cs_italy.txt

@@ -0,0 +1,31 @@
+// HLTV overview description file for cs_italy.bsp
+
+"cs_italy"
+{
+	"material"	"overviews/cs_italy"	// texture file
+	"pos_x"		"-2647"	// upper left world coordinate
+	"pos_y"		"2592"
+	"scale"		"4.6" 
+	"rotate"	"1"
+	"zoom"		"1.5"
+
+		// loading screen icons and positions
+	"CTSpawn_x"	"0.41"
+	"CTSpawn_y"	"0.91"
+	"TSpawn_x"	"0.6"
+	"TSpawn_y"	"0.1"
+
+	"Hostage1_x"	"0.43"
+	"Hostage1_y"	"0.29"
+	"Hostage2_x"	"0.48"
+	"Hostage2_y"	"0.24"
+	"Hostage3_x"	"0.64"
+	"Hostage3_y"	"0.03"
+	"Hostage4_x"	"0.72"
+	"Hostage4_y"	"0.05"
+//	"Hostage5_x"	"0.8"
+//	"Hostage5_y"	"0.3"
+//	"Hostage6_x"	"0.6"
+//	"Hostage6_y"	"0.9"
+}
+

web/cs2/positions/cs_office.txt

@@ -0,0 +1,29 @@
+// HLTV overview description file for cs_office.bsp
+
+"cs_office"
+{
+	"material"	"overviews/cs_office"	// texture file
+	"pos_x"		"-1838"	// upper left world coordinate
+	"pos_y"		"1858"
+	"scale"		"4.1" 
+
+	// loading screen icons and positions
+	"CTSpawn_x"	"0.16"
+	"CTSpawn_y"	"0.89"
+	"TSpawn_x"	"0.78"
+	"TSpawn_y"	"0.30"
+
+	"Hostage1_x"	"0.84"
+	"Hostage1_y"	"0.27"
+	"Hostage2_x"	"0.84"
+	"Hostage2_y"	"0.48"
+	"Hostage3_x"	"0.91"
+	"Hostage3_y"	"0.48"
+	"Hostage4_x"	"0.77"
+	"Hostage4_y"	"0.48"
+	"Hostage5_x"	"0.77"
+	"Hostage5_y"	"0.55"
+//	"Hostage6_x"	"0.6"
+//	"Hostage6_y"	"0.9"
+}
+

web/cs2/positions/de_ancient.txt

@@ -0,0 +1,23 @@
+// HLTV overview description file for de_ancient.bsp
+
+"de_ancient"
+{
+	"material"	"overviews/de_ancient"	// texture file
+	"pos_x"		"-2953"	// upper left world coordinate
+	"pos_y"		"2164"
+	"scale"		"5"
+	"rotate"	"0"
+	"zoom"		"0"
+
+			// loading screen icons and positions
+	"CTSpawn_x"	"0.51"
+	"CTSpawn_y"	"0.17"
+	"TSpawn_x"	"0.485"
+	"TSpawn_y"	"0.87"
+
+	"bombA_x"	"0.31"
+	"bombA_y"	"0.25"
+	"bombB_x"	"0.80"
+	"bombB_y"	"0.40"
+}
+

web/cs2/positions/de_anubis.txt

@@ -0,0 +1,12 @@
+// TAVR - AUTO RADAR. v 2.5.0a
+"de_anubis"
+{
+	"CTSpawn_x" "0.610000"
+	"CTSpawn_y" "0.220000"
+	"TSpawn_x" "0.580000"
+	"TSpawn_y" "0.930000"
+	"material" "overviews/de_anubis"
+	"pos_x" "-2796.000000"
+	"pos_y" "3328.000000"
+	"scale" "5.220000"
+}

web/cs2/positions/de_dust2.txt

@@ -0,0 +1,27 @@
+// HLTV overview description file for de_dust2_v2.bsp
+
+"de_dust2"
+{
+	"material"	"overviews/de_dust2_v2"	// texture file
+	"pos_x"		"-2476"	// upper left world coordinate
+	"pos_y"		"3239"
+	"scale"		"4.4" 
+	"rotate"	"1"
+	"zoom"		"1.1"
+	
+	"inset_left"		"0.0"
+	"inset_top"			"0.0"
+	"inset_right"		"0.0"
+	"inset_bottom"		"0.0"
+
+	// loading screen icons and positions
+	"CTSpawn_x"	"0.62"
+	"CTSpawn_y"	"0.21"
+	"TSpawn_x"	"0.39"
+	"TSpawn_y"	"0.91"
+
+	"bombA_x"	"0.80"
+	"bombA_y"	"0.16"
+	"bombB_x"	"0.21"
+	"bombB_y"	"0.12"
+}

web/cs2/positions/de_inferno.txt

@@ -0,0 +1,20 @@
+// HLTV overview description file for de_inferno.bsp
+
+"de_inferno"
+{
+	"material"	"overviews/de_inferno"	// texture file
+	"pos_x"		"-2087"	// upper left world coordinate
+	"pos_y"		"3870"
+	"scale"		"4.9" 
+
+	// loading screen icons and positions
+	"CTSpawn_x"	"0.9"
+	"CTSpawn_y"	"0.35"
+	"TSpawn_x"	"0.1"
+	"TSpawn_y"	"0.67"
+
+	"bombA_x"	"0.81"
+	"bombA_y"	"0.69"
+	"bombB_x"	"0.49"
+	"bombB_y"	"0.22"
+}

web/cs2/positions/de_mirage.txt

@@ -0,0 +1,25 @@
+"de_mirage"
+{
+	"material"	"overviews/de_mirage"	// texture file
+	"pos_x"		"-3230"	// X coordinate,
+	"pos_y"		"1713"	// Y coordinate,
+	"scale"		"5.00" 	// and used scale used when taking the screenshot
+	"rotate"	"0"	// map was rotated by 90 degress in image editor
+	"zoom"		"0"	// optimal zoom factor if map is shown in full size
+
+	// loading screen icons and positions
+	"CTSpawn_x"	"0.28"
+	"CTSpawn_y"	"0.70"
+	"TSpawn_x"	"0.87"
+	"TSpawn_y"	"0.36"
+
+	"bombA_x"	"0.54"
+	"bombA_y"	"0.76"
+	"bombB_x"	"0.23"
+	"bombB_y"	"0.28"
+	
+	"inset_left"		"0.135"
+	"inset_top"			"0.08"
+	"inset_right"		"0.105"
+	"inset_bottom"		"0.08"
+}

web/cs2/positions/de_nuke.txt

@@ -0,0 +1,41 @@
+// HLTV overview description file for de_nuke.bsp
+
+"de_nuke"
+{
+	"material"	"overviews/de_nuke"	// texture file
+	"pos_x"		"-3453"	// upper left world coordinate
+	"pos_y"		"2887"
+	"scale"		"7" 
+
+	"verticalsections"
+	{
+		"default" // use the primary radar image
+		{
+			"AltitudeMax" "10000"
+			"AltitudeMin" "-495"
+		}
+		"lower" // i.e. de_nuke_lower_radar.dds
+		{
+			"AltitudeMax" "-495"
+			"AltitudeMin" "-10000"
+		}
+	}
+	
+	// loading screen icons and positions
+	"CTSpawn_x"	"0.82"
+	"CTSpawn_y"	"0.45"
+	"TSpawn_x"	"0.19"
+	"TSpawn_y"	"0.54"
+
+	"bombA_x"	"0.58"
+	"bombA_y"	"0.48"
+	"bombB_x"	"0.58"
+	"bombB_y"	"0.58"
+
+	"inset_left"		"0.33"
+	"inset_top"			"0.2"
+	"inset_right"		"0.2"
+	"inset_bottom"		"0.2"
+	
+}
+

web/cs2/positions/de_overpass.txt

@@ -0,0 +1,22 @@
+// HLTV overview description file for de_overpass.bsp
+
+"de_overpass"
+{
+	"material"	"overviews/de_overpass"	// texture file
+	"pos_x"		"-4831"	// upper left world coordinate
+	"pos_y"		"1781"
+	"scale"		"5.2"
+	"rotate"	"0"
+	"zoom"		"0"
+
+		// loading screen icons and positions
+	"CTSpawn_x"	"0.49"
+	"CTSpawn_y"	"0.2"
+	"TSpawn_x"	"0.66"
+	"TSpawn_y"	"0.93"
+
+	"bombA_x"	"0.55"
+	"bombA_y"	"0.23"
+	"bombB_x"	"0.7"
+	"bombB_y"	"0.31"
+}

web/cs2/positions/de_vertigo.txt

@@ -0,0 +1,40 @@
+// HLTV overview description file for de_vertigo.bsp
+
+"de_vertigo"
+{
+	"material"	"overviews/de_vertigo_radar"	// texture file
+	"pos_x"		"-3168"	// upper left world coordinate
+	"pos_y"		"1762"
+	"scale"		"4.0" 
+
+	"verticalsections"
+	{
+		"default" // use the primary radar image
+		{
+			"AltitudeMax" "20000"
+			"AltitudeMin" "11700"
+		}
+		"lower" // i.e. de_nuke_lower_radar.dds
+		{
+			"AltitudeMax" "11700"
+			"AltitudeMin" "-10000"
+		}
+	}
+
+	// loading screen icons and positions
+	"CTSpawn_x"	"0.54"
+	"CTSpawn_y"	"0.25"
+	"TSpawn_x"	"0.20"
+	"TSpawn_y"	"0.75"
+
+	"bombA_x"	"0.705"
+	"bombA_y"	"0.585"
+	"bombB_x"	"0.222"
+	"bombB_y"	"0.223"
+	
+	"inset_left"		"0.1"
+	"inset_top"			"0.1"
+	"inset_right"		"0.2"
+	"inset_bottom"		"0.15"
+	
+}

web/cs2/positions/workshop_preview.txt

@@ -0,0 +1,7 @@
+"workshop_preview"
+{
+	"autogenerated_tga"		"1"
+	"pos_x"		"-2071"
+	"pos_y"		"711"
+	"scale"		"1.699219"
+}

web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>radarflow</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>

web/script.js

@@ -0,0 +1,416 @@
+// Colors
+const localColor = "#109856"
+const teamColor = "#68a3e5"
+const enemyColor = "#ec040b"
+const bombColor = "#eda338"
+const textColor = "#d1d1d1"
+
+// Should zoom or not
+shouldZoom = true
+
+// Common
+canvas = null
+ctx = null
+
+// radarflow specific
+image = null
+map = null
+mapName = null
+loaded = false
+entityData = null
+update = false
+
+/// Radarflow zoom in
+zoomSet = false
+safetyBound = 50
+boundingRect = null
+
+// networking
+websocket = null
+if (location.protocol == 'https:') {
+    websocketAddr = `wss://${window.location.host}/ws`
+} else {
+    websocketAddr = `ws://${window.location.host}/ws`
+}
+
+// Util functions
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+const degreesToRadians = (degrees) => degrees * (Math.PI/180);
+function makeBoundingRect(x1, y1, x2, y2, aspectRatio) {
+    const topLeftX = x1;
+    const topLeftY = y1;
+    const bottomRightX = x2;
+    const bottomRightY = y2;
+
+    const width = bottomRightX - topLeftX;
+    const height = bottomRightY - topLeftY;
+
+    let newWidth, newHeight;
+    if (width / height > aspectRatio) {
+        // Wider rectangle
+        newHeight = width / aspectRatio;
+        newWidth = width;
+    } else {
+        // Taller rectangle
+        newWidth = height * aspectRatio;
+        newHeight = height;
+    }
+
+    const centerX = (topLeftX + bottomRightX) / 2;
+    const centerY = (topLeftY + bottomRightY) / 2;
+
+    const rectMinX = centerX - newWidth / 2;
+    const rectMaxX = centerX + newWidth / 2;
+    const rectMinY = centerY - newHeight / 2;
+    const rectMaxY = centerY + newHeight / 2;
+
+    const boundingRectangle = {
+        x: rectMinX,
+        y: rectMinY,
+        width: rectMaxX - rectMinX,
+        height: rectMaxY - rectMinY,
+    }
+
+    const boundingRectangle2 = {
+        x: 0,
+        y: 0,
+        width: image.width / 1.2,
+        height: image.width / 1.2,
+    }
+
+    return boundingRectangle;
+}
+
+function boundingCoordinates(coordinates, boundingRect) {
+    const xScale = boundingRect.width / image.width;
+    const yScale = boundingRect.height / image.height;
+
+    const newX = (coordinates.x - boundingRect.x) / xScale;
+    const newY = (coordinates.y - boundingRect.y) / yScale;
+
+    return {x: newX, y: newY};
+}
+
+function boundingScale(value, boundingRect) {
+    const scale = image.width / boundingRect.width;
+    return value * scale
+}
+
+function mapCoordinates(coordinates) {
+    let offset_x = coordinates.x - map.pos_x;
+    let offset_y = coordinates.y - map.pos_y;
+
+    offset_x /= map.scale;
+    offset_y /= -map.scale;
+
+    return {x: offset_x, y: offset_y}
+}
+
+function render() {
+    if (update) {
+        fillCanvas()
+        if (loaded) {
+            update = false
+
+            // Iterate through the array and update the min/max values
+            if (entityData != null && map != null && image != null && shouldZoom) {
+
+                let minX = Infinity
+                let minY = Infinity
+                let maxX = -Infinity
+                let maxY = -Infinity
+
+                entityData.forEach((data) => {
+                    let mapCords = null
+
+                    if (data.Bomb !== undefined) {
+                        mapCords = mapCoordinates(data.Bomb.pos)
+                    } else {
+                        mapCords = mapCoordinates(data.Player.pos)
+                    }
+    
+                    minX = Math.min(minX, mapCords.x);
+                    minY = Math.min(minY, mapCords.y);
+                    maxX = Math.max(maxX, mapCords.x);
+                    maxY = Math.max(maxY, mapCords.y);
+                });
+
+
+                boundingRect = makeBoundingRect(minX-safetyBound, minY-safetyBound, maxX+safetyBound, maxY+safetyBound, image.width/image.height)
+
+                zoomSet = true
+            } else if (zoomSet) {
+                zoomSet = false
+            }
+
+            drawImage()
+
+            if (entityData != null) {
+                entityData.forEach((data) => {
+                    if (data.Bomb !== undefined) {
+                        drawBomb(data.Bomb.pos, data.Bomb.isPlanted)
+                    } else {
+                        let fillStyle = localColor
+
+                        switch (data.Player.playerType) {
+                            case "Team":
+                                fillStyle = teamColor
+                                break;
+
+                            case "Enemy":
+                                fillStyle = enemyColor
+                                break;
+                        }
+
+                        drawEntity(
+                            data.Player.pos,
+                            fillStyle, 
+                            data.Player.isDormant,
+                            data.Player.hasBomb,
+                            data.Player.yaw
+                        )
+                    }
+                });
+            }
+        } else {
+            if (websocket != null) {
+                ctx.font = "100px Arial";
+                ctx.textAlign = "center"
+                ctx.textBaseline = "middle"
+                ctx.fillStyle = textColor
+                ctx.fillText("Not on a server", 1024/2, 1024/2); 
+            } else {
+                ctx.font = "100px Arial";
+                ctx.textAlign = "center"
+                ctx.fillStyle = textColor
+                ctx.fillText("Disconnected", 1024/2, 1024/2); 
+            }
+        }
+    }
+
+    if (websocket != null) {
+        websocket.send("requestInfo");
+    }
+}
+
+function fillCanvas() {
+    ctx.fillStyle = "#0f0f0f";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+function drawImage() {
+    if (image == null || canvas == null)
+        return
+
+    if (zoomSet != false && boundingRect.x != null) {
+        ctx.drawImage(image, boundingRect.x, boundingRect.y, boundingRect.width, boundingRect.height, 0, 0, canvas.width, canvas.height)
+    } else {
+        ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height)
+    }
+}
+
+function drawBomb(pos, planted) {
+    if (map == null)
+        return
+
+    if (zoomSet) {
+        pos = boundingCoordinates(mapCoordinates(pos), boundingRect)
+        size = boundingScale(5, boundingRect);
+    } else {
+        pos = mapCoordinates(pos)
+        size = 5
+    }
+
+    ctx.beginPath();
+    ctx.arc(pos.x, pos.y, size, 0, 2 * Math.PI);
+    ctx.fillStyle = bombColor;
+    ctx.fill();
+    ctx.closePath();
+
+    if (planted && ((new Date().getTime() / 1000) % 1) > 0.5) {
+        ctx.strokeStyle = enemyColor
+        ctx.lineWidth = 1;
+        ctx.stroke()
+    }
+}
+
+function drawEntity(pos, fillStyle, dormant, hasBomb, yaw) {
+    if (map == null)
+        return
+
+    if (zoomSet) {
+        pos = boundingCoordinates(mapCoordinates(pos), boundingRect)
+        circleRadius = boundingScale(7, boundingRect);
+        distance = circleRadius + boundingScale(2, boundingRect);
+        radius = distance + boundingScale(2, boundingRect)
+        arrowWidth = 35
+    } else {
+        pos = mapCoordinates(pos)
+        circleRadius = 7
+        distance = circleRadius + 2
+        radius = distance + 5;
+        arrowWidth = 35;
+    }
+
+    if (dormant) {
+        ctx.font = "20px Arial";
+        ctx.textAlign = "center"
+        ctx.fillStyle = fillStyle
+        ctx.fillText("?", pos.x, pos.y); 
+    } else {
+
+        // Draw circle
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, circleRadius, 0, 2 * Math.PI);
+        ctx.fillStyle = fillStyle;
+        ctx.fill();
+
+        if (hasBomb) {
+            ctx.beginPath();
+            ctx.arc(pos.x, pos.y, circleRadius / 2, 0, 2 * Math.PI);
+            ctx.fillStyle = "#dbb81d";
+            ctx.fill();
+        }
+
+
+        ctx.closePath();
+
+        // Calculate arrowhead points
+
+
+        const arrowHeadX = pos.x + radius * Math.cos(yaw * (Math.PI / 180))
+        const arrowHeadY = pos.y - radius * Math.sin(yaw * (Math.PI / 180))
+
+        const arrowCornerX1 = pos.x + distance * Math.cos((yaw - arrowWidth) * (Math.PI / 180))
+        const arrowCornerY1 = pos.y - distance * Math.sin((yaw - arrowWidth) * (Math.PI / 180))
+
+        const arrowCornerX2 = pos.x + distance * Math.cos((yaw + arrowWidth) * (Math.PI / 180))
+        const arrowCornerY2 = pos.y - distance * Math.sin((yaw + arrowWidth) * (Math.PI / 180))
+
+
+        const cicleYaw = 90-yaw
+        const startAngle = degreesToRadians(cicleYaw-arrowWidth)-Math.PI/2
+        const endAngle = degreesToRadians(cicleYaw+arrowWidth)-Math.PI/2
+
+        // Draw arrow
+
+        /// Backside of the arrow
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, distance, startAngle, endAngle)
+
+        /// Draw from corners to arrowhead
+        ctx.lineTo(arrowCornerX1, arrowCornerY1);
+        ctx.lineTo(arrowHeadX, arrowHeadY);
+        ctx.lineTo(arrowCornerX2, arrowCornerY2);
+        ctx.closePath()
+
+        ctx.fillStyle = 'white'
+        ctx.fill();
+    }
+}
+
+function loadMap(mapName) {
+    console.log(`[radarflow] loading map ${mapName}`)
+    loaded = true;
+    const map_img = new Image();
+    map_img.src = `assets/image/${mapName}_radar_psd.png`;
+
+    fetch(`assets/json/${mapName}.json`)
+        .then(response => response.json())
+        .then(data => {
+            map = data;
+        })
+        .catch(error => {
+            console.error('Error loading JSON file:', error);
+        });
+
+    map_img.onload = () => {
+        image = map_img;
+        update = true;
+    };
+}
+
+function unloadMap() {
+    console.log("[radarflow] unloading map")
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    map = null
+    mapName = null
+    loaded = false,
+    update = true
+    requestAnimationFrame(render);
+}
+
+function connect() {
+    if (websocket == null) {
+        let socket = new WebSocket(websocketAddr)
+
+        socket.onopen = () => {
+            console.log("[radarflow] Connection established")
+            websocket.send("requestInfo");
+        };
+        
+        socket.onmessage = (event) => {
+            if (event.data == "error") {
+                console.log("[radarflow] Server had an unknown error")
+            } else {
+                let data = JSON.parse(event.data);
+
+                if (data.ingame == false) {
+                    mapName = null
+                    entityData = null
+
+                    if (loaded)
+                        unloadMap()
+                } else {
+                    if (!loaded) {
+                        mapName = data.mapName
+                        entityData = data.entityData
+                        loadMap(mapName)
+                    } else {
+                        entityData = data.entityData
+                    }
+                }
+
+                update = true
+                requestAnimationFrame(render);
+            }
+        };
+        
+        socket.onclose = (event) => {
+            if (event.wasClean) {
+                console.log("[radarflow] connection closed");
+            } else {
+                console.log("[radarflow] connection died");
+            }
+
+            playerData = null
+            websocket = null
+            unloadMap()
+
+            setTimeout(function() {
+                connect();
+            }, 1000);
+        };
+    
+        socket.onerror = (error) => {
+            console.log(`[radarflow] websocket error: ${error}`);
+        };
+
+        websocket = socket;
+    } else {
+        setTimeout(() => {
+            connect();
+        }, 1000);
+    }
+}
+
+addEventListener("DOMContentLoaded", (e) => {
+    canvas = document.getElementById('canvas');
+    canvas.width = 1024;
+    canvas.height = 1024;
+    canvasAspectRatio = canvas.width / canvas.height
+    ctx = canvas.getContext('2d');
+
+    console.log(`[radarflow] connecting to ${websocketAddr}`)
+    connect()
+});

web/styles.css

@@ -0,0 +1,17 @@
+body {
+    margin: 0;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #000000; /* Change the background color as needed */
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: block;
+    object-fit: contain;
+}