Player names!

Merge 'development' into 'main'

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "radarflow"
-version = "0.2.4"
+version = "0.2.5"
 authors = ["Janek S <development@superyu.xyz"]
 edition = "2021"
 
@@ -8,39 +8,39 @@ edition = "2021"
 
 [dependencies]
 # memory
-memflow = "0.2.1"
+memflow = "0.2.3"
 memflow-native = { git = "https://github.com/memflow/memflow-native" }
 dataview = "1.0.1"
 
 # logging
-log = "0.4.21"
-simple_logger = "4.3.3"
+log = "0.4.22"
+simple_logger = "5.0.0"
 
 # error handling
-anyhow = "1.0.81"
+anyhow = "1.0.93"
 
 # derive stuff
 enum-primitive-derive = "0.3.0"
-num-traits = "0.2.18"
-serde = { version = "1.0.197", features = ["derive"] }
-serde_json = "1.0.115"
-clap = { version = "4.5.4", features = ["derive", "string"] }
+num-traits = "0.2.19"
+serde = { version = "1.0.215", features = ["derive"] }
+serde_json = "1.0.133"
+clap = { version = "4.5.21", features = ["derive", "string"] }
 
 # tokio
 tokio = { version = "1.37.0", features = ["full"] }
 
 # networking
-axum = { version = "0.7.5", features = ["ws"] }
-tower-http = { version = "0.5.2", features = ["fs"] }
-tower = "0.4.13"
-local-ip-address = "0.6.1"
+axum = { version = "0.7.9", features = ["ws"] }
+tower-http = { version = "0.6.2", features = ["fs"] }
+tower = "0.5.1"
+local-ip-address = "0.6.3"
 
 # other
-itertools = "0.12.1"
+itertools = "0.13.0"
 
 
 [build-dependencies]
-reqwest = { version = "0.12.2", features = ["blocking"] }
-serde = { version = "1.0.197", features = ["derive"] }
-serde_json = "1.0.115"
-vergen = { version = "8.3.1", features = ["build", "cargo", "git", "gitcl", "rustc", "si"] }
+reqwest = { version = "0.12.9", features = ["blocking"] }
+serde = { version = "1.0.215", features = ["derive"] }
+serde_json = "1.0.133"
+vergen-gitcl = { version = "1.0.0", features = ["build", "cargo", "rustc",] }

build.rs

@@ -1,7 +1,7 @@
 use std::error::Error;
 
 use serde::{Deserialize, Serialize};
-use vergen::EmitBuilder;
+use vergen_gitcl::{Emitter, GitclBuilder};
 
 #[derive(Clone, Deserialize, Serialize)]
 struct InfoJson {
@@ -36,29 +36,27 @@ fn build_number() -> Result<(), Box<dyn Error>> {
 fn main() -> Result<(), Box<dyn Error>> {
 
     download(
-        "https://raw.githubusercontent.com/a2x/cs2-dumper/main/output/client.dll.rs",
+        "https://raw.githubusercontent.com/a2x/cs2-dumper/refs/heads/main/output/client_dll.rs",
         "./src/dma/cs2dumper/client_mod.rs"
     ).expect("Failed to download build file \"client.dll.rs\"");
 
     download(
-        "https://raw.githubusercontent.com/a2x/cs2-dumper/main/output/offsets.rs",
+        "https://raw.githubusercontent.com/a2x/cs2-dumper/refs/heads/main/output/offsets.rs",
         "./src/dma/cs2dumper/offsets_mod.rs"
     ).expect("Failed to download build file \"offsets.rs\"");
 
     download(
-        "https://raw.githubusercontent.com/a2x/cs2-dumper/main/output/engine2.dll.rs",
+        "https://raw.githubusercontent.com/a2x/cs2-dumper/refs/heads/main/output/engine2_dll.rs",
         "./src/dma/cs2dumper/engine2_mod.rs"
     ).expect("Failed to download build file \"engine2.dll.rs\"");
 
     build_number()?;
 
-    EmitBuilder::builder()
-        .git_sha(true)
-        .git_commit_date()
-        .cargo_debug()
-        .cargo_target_triple()
-        .rustc_semver()
-        .rustc_llvm_version()
+    let gitcl = GitclBuilder::all_git()?;
+
+
+    Emitter::new()
+        .add_instructions(&gitcl)?
         .emit()?;
 
     Ok(())

src/cli.rs

@@ -45,7 +45,11 @@ fn version() -> String {
         avail.join(", ")
     };
 
-    format!(" {pkg_ver} (rev {git_hash})\nCommit Date: {commit_date}\nAvailable Connectors: {avail_cons}")
+    format!(
+        "{pkg_ver} (rev {git_hash})\n\
+        Commit Date: {commit_date}\n\
+        Available Connectors: {avail_cons}\n"
+    )
 }
 
 fn port_in_range(s: &str) -> Result<u16, String> {

src/comms.rs

@@ -16,12 +16,15 @@ pub struct PlayerData {
     has_awp: bool,
 
     #[serde(rename = "isScoped")]
-    is_scoped: bool
+    is_scoped: bool,
+
+    #[serde(rename = "playerName")]
+    player_name: String
 }
 
 impl PlayerData {
-    pub fn new(pos: Vec3, yaw: f32, player_type: PlayerType, has_bomb: bool, has_awp: bool, is_scoped: bool) -> PlayerData {
-        PlayerData { pos, yaw, player_type, has_bomb, has_awp, is_scoped }
+    pub fn new(pos: Vec3, yaw: f32, player_type: PlayerType, has_bomb: bool, has_awp: bool, is_scoped: bool, player_name: String) -> PlayerData {
+        PlayerData { pos, yaw, player_type, has_bomb, has_awp, is_scoped, player_name }
     }
 }
 
@@ -77,16 +80,13 @@ pub struct RadarData {
     #[serde(rename(serialize = "entityData"))]
     player_data: Vec<EntityData>,
 
-    #[serde(rename = "triggerbot_shoot")]
-    triggerbot_shoot: bool,
-
     //#[serde(rename(serialize = "localYaw"))]
     //local_yaw: f32,
 }
 
 impl RadarData {
-    pub fn new(ingame: bool, map_name: String, player_data: Vec<EntityData>, freq: usize, bomb_planted: bool, bomb_cannot_defuse: bool, bomb_defuse_timeleft: f32, bomb_exploded: bool, bomb_being_defused: bool, bomb_defuse_length: f32, bomb_defuse_end: f32, triggerbot_shoot: bool,) -> RadarData {
-        RadarData { ingame, map_name, player_data, freq, bomb_planted, bomb_can_defuse: bomb_cannot_defuse, bomb_defuse_timeleft, bomb_exploded, bomb_being_defused, bomb_defuse_length, bomb_defuse_end, triggerbot_shoot }
+    pub fn new(ingame: bool, map_name: String, player_data: Vec<EntityData>, freq: usize, bomb_planted: bool, bomb_cannot_defuse: bool, bomb_defuse_timeleft: f32, bomb_exploded: bool, bomb_being_defused: bool, bomb_defuse_length: f32, bomb_defuse_end: f32) -> RadarData {
+        RadarData { ingame, map_name, player_data, freq, bomb_planted, bomb_can_defuse: bomb_cannot_defuse, bomb_defuse_timeleft, bomb_exploded, bomb_being_defused, bomb_defuse_length, bomb_defuse_end }
     }
 
     /// Returns empty RadarData, it's also the same data that gets sent to clients when not ingame
@@ -102,8 +102,7 @@ impl RadarData {
             bomb_exploded: false,
             bomb_being_defused: false,
             bomb_defuse_length: 0.0,
-            bomb_defuse_end: 0.0,
-            triggerbot_shoot: false,
+            bomb_defuse_end: 0.0
         }
     }
 }

src/dma/context/mod.rs

@@ -97,7 +97,7 @@ impl DmaCtx {
         let mut team = 0i32;
         let mut clipping_weapon = 0u64;
         let mut is_scoped = 0u8;
-        let mut crosshair_id = 0u8;
+        let mut player_name_ptr = 0u64;
 
         {
             let mut batcher = MemoryViewBatcher::new(&mut self.process);
@@ -107,9 +107,23 @@ impl DmaCtx {
             batcher.read_into(controller + cs2dumper::client::C_BaseEntity::m_iTeamNum, &mut team);
             batcher.read_into(pawn + cs2dumper::client::C_CSPlayerPawnBase::m_pClippingWeapon, &mut clipping_weapon);
             batcher.read_into(pawn + cs2dumper::client::C_CSPlayerPawn::m_bIsScoped, &mut is_scoped);
-            batcher.read_into(pawn + cs2dumper::client::C_CSPlayerPawnBase::m_iIDEntIndex, &mut crosshair_id);
+            batcher.read_into(controller + cs2dumper::client::CCSPlayerController::m_sSanitizedPlayerName, &mut player_name_ptr);
         }
-    
+
+        let player_name = if player_name_ptr != 0 {
+            let mut name_buffer = [0u8; 32];
+            self.process.read_raw_into(player_name_ptr.into(), &mut name_buffer)?;
+
+            let name_len = name_buffer.iter().position(|&c| c == 0).unwrap_or(name_buffer.len());
+            String::from_utf8_lossy(&name_buffer[..name_len]).to_string()
+        } else {
+            match team {
+                2 => format!("T Player"),
+                3 => format!("CT Player"),
+                _ => format!("Unknown Player"),
+            }
+        };
+
         let team = TeamID::from_i32(team);
 
         let has_awp = {
@@ -129,7 +143,7 @@ impl DmaCtx {
             health,
             has_awp,
             is_scoped: is_scoped != 0,
-            crosshair_id
+            player_name,
         })
     }
 
@@ -255,5 +269,5 @@ pub struct BatchedPlayerData {
     pub health: u32,
     pub has_awp: bool,
     pub is_scoped: bool,
-    pub crosshair_id: u8,
+    pub player_name: String,
 }

src/dma/mod.rs

@@ -165,7 +165,8 @@ pub async fn run(radar_data: ArcRwlockRadarData, connector: Connector, pcileech_
                             PlayerType::Local,
                             has_bomb,
                             local_data.has_awp,
-                            local_data.is_scoped
+                            local_data.is_scoped,
+                            local_data.player_name
                         )
                     )
                 );
@@ -202,7 +203,8 @@ pub async fn run(radar_data: ArcRwlockRadarData, connector: Connector, pcileech_
                             player_type,
                             has_bomb,
                             player_data.has_awp,
-                            player_data.is_scoped
+                            player_data.is_scoped,
+                            player_data.player_name
                         )
                     )
                 );
@@ -220,8 +222,7 @@ pub async fn run(radar_data: ArcRwlockRadarData, connector: Connector, pcileech_
                 data.bomb_exploded,
                 data.bomb_being_defused,
                 data.bomb_defuse_length,
-                bomb_defuse_end,
-                local_data.crosshair_id != 0 && local_data.crosshair_id != 255
+                bomb_defuse_end
             );
         } else {
             let mut radar = radar_data.write().await;

src/dma/threaddata/mod.rs

@@ -21,7 +21,7 @@ pub struct CsData {
     // Common
     pub local: u64,
     pub local_pawn: u64,
-    pub is_dead: bool,
+    // pub is_dead: bool,   // TODO: Why is this here?
     pub tick_count: i32,
     pub freeze_period: bool,
     pub round_start_count: u8,
@@ -169,7 +169,7 @@ impl CsData {
         {
             // Globals
             let tick_count_addr = (self.globals + 0x40).into();
-            let map_addr = (self.globals + 0x188).into();
+            let map_addr = (self.globals + 384).into();
 
             // Gamerules
             let bomb_dropped_addr = (self.gamerules + cs2dumper::client::C_CSGameRules::m_bBombDropped as u64).into();
@@ -178,7 +178,7 @@ impl CsData {
             let round_start_count_addr = (self.gamerules + cs2dumper::client::C_CSGameRules::m_nRoundStartCount as u64).into();
 
             // Game Entity System
-            let highest_index_addr = (self.game_ent_sys + cs2dumper::offsets::client_dll::dwGameEntitySystem_getHighestEntityIndex as u64).into();
+            let highest_index_addr = (self.game_ent_sys + cs2dumper::offsets::client_dll::dwGameEntitySystem_highestEntityIndex as u64).into();
 
             let mut batcher = ctx.process.batcher();
             batcher.read_into(
@@ -237,7 +237,7 @@ impl CsData {
         }
 
 
-        let map_string = ctx.process.read_char_string_n(map_ptr.into(), 32).unwrap_or(String::from("<empty>"));
+        let map_string = ctx.process.read_utf8_lossy(map_ptr.into(), 32).unwrap_or(String::from("<empty>"));
 
         self.map = map_string;
         self.bomb_dropped = bomb_dropped != 0;

webradar/assets/json/de_nuke.json

@@ -3,6 +3,5 @@
   "pos_y": 2887.0,
   "scale": 7.0,
   "rotate": 0,
-  "zoom": 0.0,
-  "altitude_split": -495
+  "zoom": 0.0
 }

webradar/assets/json/de_vertigo.json

@@ -3,6 +3,5 @@
   "pos_y": 1762.0,
   "scale": 4.0,
   "rotate": 0,
-  "zoom": 0.0,
-  "altitude_split": 11700
+  "zoom": 0.0
 }

webradar/script.js

@@ -1,16 +1,14 @@
 // Colors
 const localColor = "#109856"
-const localLowerColor = "#064024"
 const teamColor = "#68a3e5"
-const teamLowerColor = "#2c4969"
 const enemyColor = "#ec040b"
-const enemyLowerColor = "#4f0002"
 const bombColor = "#eda338"
 const textColor = "#d1d1d1"
 
 // Settings
-shouldZoom = true
-drawStats = false
+shouldZoom = false
+
+drawStats = true
 
 // Common
 canvas = null
@@ -38,11 +36,11 @@ if (location.protocol == 'https:') {
 } else {
     websocketAddr = `ws://${window.location.host}/ws`
 }
-websocketAddr = "ws://192.168.0.235:8000/ws"
+//websocketAddr = "ws://192.168.0.235:8000/ws"
 
 // Util functions
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
-const degreesToRadians = (degrees) => degrees * (Math.PI/180);
+const degreesToRadians = (degrees) => degrees * (Math.PI / 180);
 function makeBoundingRect(x1, y1, x2, y2, aspectRatio) {
     const topLeftX = x1;
     const topLeftY = y1;
@@ -95,7 +93,7 @@ function boundingCoordinates(coordinates, boundingRect) {
     const newX = (coordinates.x - boundingRect.x) / xScale;
     const newY = (coordinates.y - boundingRect.y) / yScale;
 
-    return {x: newX, y: newY};
+    return { x: newX, y: newY };
 }
 
 function boundingScale(value, boundingRect) {
@@ -110,7 +108,48 @@ function mapCoordinates(coordinates) {
     offset_x /= map.scale;
     offset_y /= -map.scale;
 
-    return {x: offset_x, y: offset_y}
+    return { x: offset_x, y: offset_y }
+}
+
+function drawPlayerName(pos, playerName, playerType, hasAwp, hasBomb) {
+    if (!map) return;
+
+    if (zoomSet) {
+        pos = boundingCoordinates(mapCoordinates(pos), boundingRect);
+        textSize = boundingScale(12, boundingRect);
+    } else {
+        pos = mapCoordinates(pos);
+        textSize = 12;
+    }
+
+    const textY = pos.y + 20;
+
+    let displayName = playerName;
+    if (playerType === "Local") {
+        displayName = "YOU";
+        ctx.fillStyle = localColor;
+    } else if (playerType === "Team") {
+        ctx.fillStyle = teamColor;
+    } else if (playerType === "Enemy") {
+        ctx.fillStyle = enemyColor;
+    }
+
+    if (hasAwp) {
+        displayName += " [AWP]";
+    }
+    if (hasBomb) {
+        displayName += " [C4]";
+    }
+
+    ctx.font = `${textSize}px Arial`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "black";
+    ctx.strokeText(displayName, pos.x, textY);
+
+    ctx.fillText(displayName, pos.x, textY);
 }
 
 function render() {
@@ -135,15 +174,14 @@ function render() {
                     } 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)
+                boundingRect = makeBoundingRect(minX - safetyBound, minY - safetyBound, maxX + safetyBound, maxY + safetyBound, image.width / image.height)
 
                 zoomSet = true
             } else if (zoomSet) {
@@ -157,42 +195,32 @@ function render() {
                     if (data.Bomb !== undefined) {
                         drawBomb(data.Bomb.pos, data.Bomb.isPlanted)
                     } else {
-                        let fillStyle = localLowerColor
+                        let fillStyle = localColor
 
-                        if (map && map.altitude_split && data.Player.pos.z < map.altitude_split) {
+                        switch (data.Player.playerType) {
+                            case "Team":
+                                fillStyle = teamColor
+                                break;
 
-                            switch (data.Player.playerType) {
-                                case "Team":
-                                    fillStyle = teamLowerColor
-                                    break;
-    
-                                case "Enemy":
-                                    fillStyle = enemyLowerColor
-                                    break;
-                            }
-                        } else {
-                            fillStyle = localColor
-                            switch (data.Player.playerType) {
-                                case "Team":
-                                    fillStyle = teamColor
-                                    break;
-    
-                                case "Enemy":
-                                    fillStyle = enemyColor
-                                    break;
-                            }
+                            case "Enemy":
+                                fillStyle = enemyColor
+                                break;
                         }
 
                         drawEntity(
                             data.Player.pos,
-                            fillStyle, 
+                            fillStyle,
                             data.Player.isDormant,
                             data.Player.hasBomb,
                             data.Player.yaw,
                             data.Player.hasAwp,
                             data.Player.playerType,
                             data.Player.isScoped
-                        )
+                        );
+
+                        if (drawStats && data.Player.playerName) {
+                            drawPlayerName(data.Player.pos, data.Player.playerName, data.Player.playerType);
+                        }
                     }
                 });
             }
@@ -200,13 +228,13 @@ function render() {
             if (radarData != null) {
                 if (radarData.bombPlanted && !radarData.bombExploded && radarData.bombDefuseTimeleft >= 0) {
 
-                    let maxWidth = 1024-128-128;
+                    let maxWidth = 1024 - 128 - 128;
                     let timeleft = radarData.bombDefuseTimeleft;
-    
+
                     // Base bar
                     ctx.fillStyle = "black"
                     ctx.fillRect(128, 16, maxWidth, 16)
-                    
+
                     // Bomb timer
                     if (radarData.bombBeingDefused) {
                         if (radarData.bombCanDefuse) {
@@ -218,14 +246,14 @@ function render() {
                         ctx.fillStyle = bombColor
                     }
 
-                    ctx.fillRect(130, 18, (maxWidth-2) * (timeleft / 40), 12)
+                    ctx.fillRect(130, 18, (maxWidth - 2) * (timeleft / 40), 12)
 
                     ctx.font = "24px Arial";
                     ctx.textAlign = "center"
                     ctx.textBaseline = "middle"
                     ctx.fillStyle = textColor
-                    ctx.fillText(`${timeleft.toFixed(1)}s`, 1024/2, 28+24); 
-                    
+                    ctx.fillText(`${timeleft.toFixed(1)}s`, 1024 / 2, 28 + 24);
+
                     // Defuse time lines
                     ctx.strokeStyle = "black"
                     ctx.lineWidth = 2
@@ -238,8 +266,8 @@ function render() {
 
                     // Normal defuse
                     ctx.beginPath()
-                    ctx.moveTo(130 + (maxWidth-2) * (10 / 40), 16)
-                    ctx.lineTo(130 + (maxWidth-2) * (10 / 40), 32)
+                    ctx.moveTo(130 + (maxWidth - 2) * (10 / 40), 16)
+                    ctx.lineTo(130 + (maxWidth - 2) * (10 / 40), 32)
                     ctx.stroke()
 
                     // Defuse stamp line
@@ -247,8 +275,8 @@ function render() {
                         console.log(radarData.bombDefuseEnd)
                         ctx.strokeStyle = "green"
                         ctx.beginPath()
-                        ctx.moveTo(130 + (maxWidth-2) * (radarData.bombDefuseEnd / 40), 16)
-                        ctx.lineTo(130 + (maxWidth-2) * (radarData.bombDefuseEnd / 40), 32)
+                        ctx.moveTo(130 + (maxWidth - 2) * (radarData.bombDefuseEnd / 40), 16)
+                        ctx.lineTo(130 + (maxWidth - 2) * (radarData.bombDefuseEnd / 40), 32)
                         ctx.stroke()
                     }
                 }
@@ -260,12 +288,12 @@ function render() {
                 ctx.textAlign = "center"
                 ctx.textBaseline = "middle"
                 ctx.fillStyle = textColor
-                ctx.fillText("Not on a server", 1024/2, 1024/2); 
+                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); 
+                ctx.fillText("Disconnected", 1024 / 2, 1024 / 2);
             }
         }
 
@@ -326,7 +354,7 @@ function drawBomb(pos, planted) {
     }
 }
 
-function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, isScoped) {
+function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, isScoped, playerName) {
     if (map == null)
         return
 
@@ -348,7 +376,7 @@ function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, i
         ctx.font = "20px Arial";
         ctx.textAlign = "center"
         ctx.fillStyle = fillStyle
-        ctx.fillText("?", pos.x, pos.y); 
+        ctx.fillText("?", pos.x, pos.y);
     } else {
 
         if (hasAwp) {
@@ -402,9 +430,9 @@ function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, i
         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
+        const cicleYaw = 90 - yaw
+        const startAngle = degreesToRadians(cicleYaw - arrowWidth) - Math.PI / 2
+        const endAngle = degreesToRadians(cicleYaw + arrowWidth) - Math.PI / 2
 
         // Draw arrow
 
@@ -478,15 +506,23 @@ function connect() {
             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);
-                radarData = data; 
+                radarData = data;
                 freq = data.freq;
 
+                if (data.entityData) {
+                    data.entityData.forEach(entity => {
+                        if (entity.Player) {
+                            console.log(`Player: ${entity.Player.playerType}, Name: ${entity.Player.playerName || 'undefined'}`);
+                        }
+                    });
+                }
+
                 if (data.ingame == false) {
                     mapName = null
                     entityData = null
@@ -507,7 +543,7 @@ function connect() {
                 requestAnimationFrame(render);
             }
         };
-        
+
         socket.onclose = (event) => {
             if (event.wasClean) {
                 console.log("[radarflow] connection closed");
@@ -519,11 +555,11 @@ function connect() {
             websocket = null
             unloadMap()
 
-            setTimeout(function() {
+            setTimeout(function () {
                 connect();
             }, 1000);
         };
-    
+
         socket.onerror = (error) => {
             console.log(`[radarflow] websocket error: ${error}`);
         };
@@ -537,8 +573,8 @@ function connect() {
 }
 
 addEventListener("DOMContentLoaded", (e) => {
-    document.getElementById("zoomCheck").checked = true;
-
+    document.getElementById("zoomCheck").checked = false;
+    document.getElementById("statsCheck").checked = true;
 
     canvas = document.getElementById('canvas');
     canvas.width = 1024;

webradar/styles.css

@@ -6,6 +6,9 @@ body {
     align-items: center;
     height: 100vh;
     background-color: #000000; /* Change the background color as needed */
+    background-image: url('assets/image/background.png');
+    background-repeat: repeat;
+    background-size: 128px 128px;
 }
 
 #canvasContainer {
@@ -23,12 +26,27 @@ canvas {
 }
 
 #settingsHolder {
-    visibility: hidden;
-    position: absolute;
-    top: inherit;
-    left: inherit;
-    width: inherit;
-    height: 20%;
+    visibility: visible;
+    position: fixed;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: auto;
+    height: auto;
+    z-index: 100;
+}
+
+#settingsHolder .settings {
+    display: flex;
+    flex-direction: column;
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: white;
+    visibility: visible;
+    opacity: 0.8;
+    padding: 10px;
+    background-color: rgba(25, 25, 25, 0.7);
+    border-radius: 5px;
+    transition: opacity 0.3s ease;
 }
 
 #settingsHolder:hover .settings {