+
+ );
+};
+
const App = () => {
const [averageLatency, setAverageLatency] = useState(0);
const [playerArray, setPlayerArray] = useState([]);
+ const [grenadeData, setGrenadeData] = useState([]);
+ const [droppedWeaponsData, setDroppedWeaponsData] = useState([]);
const [mapData, setMapData] = useState();
const [localTeam, setLocalTeam] = useState();
const [bombData, setBombData] = useState();
const [settings, setSettings] = useState(loadSettings());
- const [bannerOpened, setBannerOpened] = useState(true)
+ const [showPlayerPrompt, setShowPlayerPrompt] = useState(false);
- // Save settings to local storage whenever they change
useEffect(() => {
localStorage.setItem("radarSettings", JSON.stringify(settings));
}, [settings]);
+ useEffect(() => {
+ if (settings.whichPlayerAreYou === "0" && playerArray.length > 0 || settings.whichPlayerAreYou === undefined && playerArray.length > 0 ) {
+ setShowPlayerPrompt(true);
+ } else if (settings.whichPlayerAreYou !== "0" && settings.whichPlayerAreYou !== undefined) {
+ setShowPlayerPrompt(false);
+ }
+ }, [playerArray, settings.whichPlayerAreYou]);
+ const handlePlayerSelect = (playerIdx) => {
+ setSettings((prevSettings) => ({
+ ...prevSettings,
+ whichPlayerAreYou: playerIdx,
+ }));
+ setShowPlayerPrompt(false);
+ };
+
useEffect(() => {
const fetchData = async () => {
let webSocket = null;
@@ -100,23 +163,33 @@ const App = () => {
setAverageLatency(getLatency());
const parsedData = JSON.parse(await event.data.text());
- setPlayerArray(parsedData.m_players);
setLocalTeam(parsedData.m_local_team);
setBombData(parsedData.m_bomb);
+ setGrenadeData(parsedData.m_grenades);
+ setDroppedWeaponsData(parsedData.m_dropped_weapons);
const map = parsedData.m_map;
if (map !== "invalid") {
+ setPlayerArray(parsedData.m_players);
setMapData({
...(await (await fetch(`data/${map}/data.json`)).json()),
name: map,
});
document.body.style.backgroundImage = `url(./data/${map}/background.png)`;
+ } else {
+ setMapData({ name: "invalid" });
+ setPlayerArray([]);
+ document.body.style.backgroundImage = `url(./data/de_mirage/background.png)`;
}
};
};
fetchData();
}, []);
+
+ if (playerArray && playerArray.length > 0) {
+ tempPlayer_ = playerArray.find((player) => player.m_steam_id === settings.whichPlayerAreYou);
+ }
return (
+
+ Select Yourself
+This is used to show you different map levels.
Please choose YOURSELF!
-
+ {players
+ .filter(player => player.m_steam_id !== "0")
+ .filter(player => player.m_team === localTeam)
+ .map((player) => (
+
- onSelect(player.m_steam_id)} + className="p-3 bg-gray-700 hover:bg-radar-blue text-white rounded-md cursor-pointer transition-all duration-200 flex justify-between items-center" + > + {player.m_name} + + {player.m_steam_id} + + + ))} +
{
backdropFilter: `blur(7.5px)`,
}}
>
- {bannerOpened && (
-
-
- €3.49 -
- HURRACAN - Plug & play feature rich shareable CS2 Web Radar
- Learn more
-
-
-
- )}
+ {showPlayerPrompt && playerArray.length > 0 && (
+ 
+ )}
);
};
diff --git a/webapp/src/components/playercard.jsx b/webapp/src/components/playercard.jsx
index 31abd50..f92f029 100644
--- a/webapp/src/components/playercard.jsx
+++ b/webapp/src/components/playercard.jsx
@@ -1,10 +1,18 @@
import { useState, useEffect } from "react";
import MaskedIcon from "./maskedicon";
-import { playerColors, teamEnum } from "../utilities/utilities";
+import { playerColors, teamEnum, colorSchemePallette } from "../utilities/utilities";
-const PlayerCard = ({ playerData, isOnRightSide }) => {
+const PlayerCard = ({ playerData, isOnRightSide, settings }) => {
const [modelName, setModelName] = useState(playerData.m_model_name);
+ function getArmor(armor) {
+ if (armor<=100 && armor>0) {
+ return armor;
+ } else {
+ return 0;
+ }
+ }
+
useEffect(() => {
if (playerData.m_model_name)
setModelName(playerData.m_model_name);
@@ -15,33 +23,38 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
style={{ opacity: `${(playerData.m_is_dead && `0.5`) || `1`}` }}
className={`flex ${isOnRightSide && `flex-row-reverse`}`}
>
-
{bombData && bombData.m_blow_time > 0 && !bombData.m_is_defused && (
diff --git a/webapp/src/components/SettingsButton.jsx b/webapp/src/components/SettingsButton.jsx
index a175dd7..dfda242 100644
--- a/webapp/src/components/SettingsButton.jsx
+++ b/webapp/src/components/SettingsButton.jsx
@@ -1,7 +1,16 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
const SettingsButton = ({ settings, onSettingsChange }) => {
const [isOpen, setIsOpen] = useState(false);
+ const settingsMenu = useRef(null);
+
+ const closeSettingsIfOpen = (e)=>{
+ if(isOpen && !settingsMenu.current?.contains(e.target)){
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown',closeSettingsIfOpen)
return (
@@ -149,10 +216,10 @@ const App = () => {
color={
(bombData.m_is_defusing &&
bombData.m_blow_time - bombData.m_defuse_time > 0 &&
- `bg-radar-green`) ||
+ `#00FF00`) ||
(bombData.m_blow_time - bombData.m_defuse_time < 0 &&
- `bg-radar-red`) ||
- `bg-radar-secondary`
+ `#FF0000`) ||
+ `${colorSchemePallette[settings.colorScheme][1]}`
}
/>
{`${bombData.m_blow_time.toFixed(1)}s ${(bombData.m_is_defusing &&
@@ -171,31 +238,34 @@ const App = () => {
/>
{
playerData={player}
settings={settings}
/>
- ))}
+ )))}
-
- {playerArray
+ {(playerArray && playerArray.length > 0 && playerArray
.filter((player) => player.m_team == 2)
.map((player) => (
- Connected! Waiting for data from usermode + Connected! Please wait for the host to join the match.
@@ -14,7 +23,7 @@ const SettingsButton = ({ settings, onSettingsChange }) => {
{isOpen && (
- 
diff --git a/webapp/src/components/player.jsx b/webapp/src/components/player.jsx
index 2ccd4b1..cf32683 100644
--- a/webapp/src/components/player.jsx
+++ b/webapp/src/components/player.jsx
@@ -27,7 +27,9 @@ const Player = ({ playerData, mapData, radarImage, localTeam, averageLatency, se
const radarImageBounding = (radarImage !== undefined &&
radarImage.getBoundingClientRect()) || { width: 0, height: 0 };
- const scaledSize = 0.7 * settings.dotSize;
+ let scaledSize = 0.7 * settings.dotSize;
+
+ if (settings.showOnlyEnemies && playerData.m_team === localTeam) { scaledSize = 0.0; if (settings.showAllNames) {settings.showAllNames = false;} }
// Store the last known position when the player dies
useEffect(() => {
@@ -70,6 +72,8 @@ const Player = ({ playerData, mapData, radarImage, localTeam, averageLatency, se
) : null}
+
+
{/* Rotating container for player elements */}
{/* View cone (kept exactly as it was) */}
- {settings.showViewCones && !playerData.m_is_dead && (
+ {(settings.showOnlyEnemies && playerData.m_team === localTeam && settings.showViewCones && !playerData.m_is_dead) || (settings.showViewCones && !playerData.m_is_dead) && (
)}
+ {(mapData.name === "de_nuke" && !playerData.m_is_dead) && (
+
+
diff --git a/webapp/src/components/bomb.jsx b/webapp/src/components/bomb.jsx
index 1c925d2..5d8c70e 100644
--- a/webapp/src/components/bomb.jsx
+++ b/webapp/src/components/bomb.jsx
@@ -34,7 +34,7 @@ const Bomb = ({ bombData, mapData, radarImage, localTeam, averageLatency, settin
`#c90b0b`
}`,
WebkitMask: `url('./assets/icons/c4_sml.png') no-repeat center / contain`,
- opacity: `1`,
+ opacity: `${settings.showOnlyEnemies && bombData.owner_entity < 141288103162675 && localTeam == teamEnum.terrorist ? 0 : 1}`,
zIndex: `1`,
}}
/>
diff --git a/webapp/src/components/droppedweapons.jsx b/webapp/src/components/droppedweapons.jsx
new file mode 100644
index 0000000..43dbfbd
--- /dev/null
+++ b/webapp/src/components/droppedweapons.jsx
@@ -0,0 +1,44 @@
+import { useRef } from "react";
+import { getRadarPosition, teamEnum, colorSchemePallette, weaponList } from "../utilities/utilities";
+import MaskedIcon from "./maskedicon";
+
+const DroppedWeapon = ({ droppedWeaponData, mapData, settings, averageLatency, radarImage }) => {
+
+ const radarPosition = getRadarPosition(mapData, { x: droppedWeaponData.m_x, y: droppedWeaponData.m_y });
+
+ const wepRef = useRef();
+ const wepBounding = (wepRef.current &&
+ wepRef.current.getBoundingClientRect()) || { width: 0, height: 0 };
+ const radarImageBounding = (radarImage !== undefined &&
+ radarImage.getBoundingClientRect()) || { width: 0, height: 0 };
+ const radarImageTranslation = {
+ x: radarImageBounding.width * radarPosition.x - wepBounding.width * 0.5,
+ y: radarImageBounding.width * radarPosition.y - wepBounding.height * 0.5,
+ };
+
+return (
+ Radar Settings
@@ -55,8 +64,18 @@ const SettingsButton = ({ settings, onSettingsChange }) => {
}}
/>
-
+
+
+ {(!settings.showOnlyEnemies) && (
+ )}
+
+
+
+ {settings.showGrenades && (
+
+
+
+
+
+ )}
+
+
+
+ {settings.showDroppedWeapons && (
+
+ ㅤㅤㅤ↑ Grenade Size
+ {settings.thrownGrenadeSize}x
+
+ onSettingsChange({ ...settings, thrownGrenadeSize: parseFloat(e.target.value) })}
+ className="w-full ml-11 mb-2 h-2 rounded-lg appearance-none cursor-pointer accent-radar-primary"
+ style={{
+ background: `linear-gradient(to right, #b1d0e7 ${((settings.thrownGrenadeSize - 0.1) / 1.9) * 100}%, rgba(59, 130, 246, 0.2) ${((settings.thrownGrenadeSize - 0.1) / 1.9) * 100}%)`,
+ width: "80%"
+ }}
+ />
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ ㅤㅤㅤ↑ Weapon Size
+ {settings.droppedWeaponSize}x
+
+ onSettingsChange({ ...settings, droppedWeaponSize: parseFloat(e.target.value) })}
+ className="w-full ml-11 mb-2 h-2 rounded-lg appearance-none cursor-pointer accent-radar-primary"
+ style={{
+ background: `linear-gradient(to right, #b1d0e7 ${((settings.droppedWeaponSize - 0.1) / 1.9) * 100}%, rgba(59, 130, 246, 0.2) ${((settings.droppedWeaponSize - 0.1) / 1.9) * 100}%)`,
+ width: "80%"
+ }}
+ />
+
+
+
+ {(settings.droppedWeaponIgnoreNade && !weaponList["grenades"].includes(droppedWeaponData.m_name) || !settings.droppedWeaponIgnoreNade) &&
+
+
+)
+
+};
+
+export default DroppedWeapon;
\ No newline at end of file
diff --git a/webapp/src/components/grenade.jsx b/webapp/src/components/grenade.jsx
new file mode 100644
index 0000000..6a36461
--- /dev/null
+++ b/webapp/src/components/grenade.jsx
@@ -0,0 +1,105 @@
+import { useRef } from "react";
+import GrenadeEffects from "./grenadeeffects.jsx";
+import { getRadarPosition, teamEnum } from "../utilities/utilities";
+import MaskedIcon from "./maskedicon.jsx";
+
+const Grenade = ({ grenadeData, mapData, settings, averageLatency, radarImage, type }) => {
+
+ const firePositions = grenadeData.m_firePositions || {};
+
+ const radarPosition = getRadarPosition(mapData, { x: grenadeData.m_x, y: grenadeData.m_y });
+
+ const grenRef = useRef();
+ const grenBounding = (grenRef.current &&
+ grenRef.current.getBoundingClientRect()) || { width: 0, height: 0 };
+ const radarImageBounding = (radarImage !== undefined &&
+ radarImage.getBoundingClientRect()) || { width: 0, height: 0 };
+ const radarImageTranslation = {
+ x: radarImageBounding.width * radarPosition.x - grenBounding.width * 0.5,
+ y: radarImageBounding.width * radarPosition.y - grenBounding.height * 0.5,
+ };
+
+ if(type == "landed") {
+ if (grenadeData.m_type == "smoke") {
+ return (
+
+
+
+ );
+
+ }
+
+ } else {
+ return (
+
+
+ {firePositions[0]!=null && firePositions.map((firePosition, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+};
+
+export default Grenade;
\ No newline at end of file
diff --git a/webapp/src/components/grenadeeffects.jsx b/webapp/src/components/grenadeeffects.jsx
new file mode 100644
index 0000000..abf9acf
--- /dev/null
+++ b/webapp/src/components/grenadeeffects.jsx
@@ -0,0 +1,75 @@
+import { useRef } from "react";
+import { getRadarPosition, teamEnum } from "../utilities/utilities";
+
+const GrenadeEffects = ({ grenadeData, type, mapData, settings, averageLatency, radarImage }) => {
+
+ const smokeSize = 3;
+ const fireSize = 1.3;
+ const radarPosition = getRadarPosition(mapData, { x: grenadeData.m_x, y: grenadeData.m_y });
+
+ const grenRef = useRef();
+ const grenBounding = (grenRef.current &&
+ grenRef.current.getBoundingClientRect()) || { width: 0, height: 0 };
+
+ const radarImageBounding = (radarImage !== undefined &&
+ radarImage.getBoundingClientRect()) || { width: 0, height: 0 };
+
+ if (type == "smoke") {
+ const radarImageTranslation = {
+ x: radarImageBounding.width * radarPosition.x - grenBounding.width * 0.5,
+ y: radarImageBounding.width * radarPosition.y - grenBounding.height * 0.5,
+ };
+ return (
+
+
+
+
+
+
+
+ );
+ } else if (type == "molo") {
+ const radarImageTranslation = {
+ x: radarImageBounding.width * radarPosition.x - grenBounding.width * 0.5,
+ y: radarImageBounding.width * radarPosition.y - grenBounding.height * 0.5,
+ };
+ return (
+
+ );
+ }
+};
+
+export default GrenadeEffects;
\ No newline at end of file
diff --git a/webapp/src/components/maskedicon.jsx b/webapp/src/components/maskedicon.jsx
index a42726b..3a3f183 100644
--- a/webapp/src/components/maskedicon.jsx
+++ b/webapp/src/components/maskedicon.jsx
@@ -1,11 +1,11 @@
const MaskedIcon = ({ path, height, color }) => {
return (
+
@@ -85,8 +104,8 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
color={`${
(playerData.m_weapons.m_active ==
playerData.m_weapons.m_primary &&
- `bg-radar-primary`) ||
- `bg-radar-secondary`
+ `${colorSchemePallette[settings.colorScheme][0]}`) ||
+ `${colorSchemePallette[settings.colorScheme][1]}`
}`}
/>
)}
@@ -98,8 +117,8 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
color={`${
(playerData.m_weapons.m_active ==
playerData.m_weapons.m_secondary &&
- `bg-radar-primary`) ||
- `bg-radar-secondary`
+ `${colorSchemePallette[settings.colorScheme][0]}`) ||
+ `${colorSchemePallette[settings.colorScheme][1]}`
}`}
/>
)}
@@ -113,8 +132,8 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
height={28}
color={`${
(playerData.m_weapons.m_active == melee &&
- `bg-radar-primary`) ||
- `bg-radar-secondary`
+ `${colorSchemePallette[settings.colorScheme][0]}`) ||
+ `${colorSchemePallette[settings.colorScheme][1]}`
}`}
/>
))}
@@ -135,8 +154,8 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
height={28}
color={`${
(playerData.m_weapons.m_active == utility &&
- `bg-radar-primary`) ||
- `bg-radar-secondary`
+ `${colorSchemePallette[settings.colorScheme][0]}`) ||
+ `${colorSchemePallette[settings.colorScheme][1]}`
}`}
/>
))}
@@ -155,7 +174,8 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
].map((_, i) => (
))}
@@ -164,7 +184,7 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
+
+
- window.open(
- `https://steamcommunity.com/profiles/${playerData.m_steam_id}`,
- "_blank",
- "noopener,noreferrer"
- )
- }
+ className={`flex flex-col gap-[0.375rem] justify-center items-center`}
>
- {playerData.m_name}
+
-
-
+ window.open(
+ `https://steamcommunity.com/profiles/${playerData.m_steam_id}`,
+ "_blank",
+ "noopener,noreferrer"
+ )
+ }
+ >
+ {playerData.m_name}
+
+ {/* */}
+
+
{
@@ -71,9 +90,9 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
(playerData.m_has_helmet && `kevlar_helmet`) || `kevlar`
}.svg`}
height={16}
- color={`bg-radar-secondary`}
+ color={`${colorSchemePallette[settings.colorScheme][1]}`}
/>
- {playerData.m_armor}
+ {getArmor(playerData.m_armor)}
+
+
{playerData.m_health}
jW{c7fd