+
+ );
};
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 +172,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 && (
+
{bombData && bombData.m_blow_time > 0 && !bombData.m_is_defused && (
diff --git a/webapp/src/components/Draggable.jsx b/webapp/src/components/Draggable.jsx
new file mode 100644
index 0000000..1532ca5
--- /dev/null
+++ b/webapp/src/components/Draggable.jsx
@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+
+const Draggable = ({ children, imgref, avrPing, ...props }) => {
+ const [position, setPosition] = useState({ x: 0, y: 0 });
+ const [isDragging, setIsDragging] = useState(false);
+ const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+ const draggableRef = useRef(null);
+ let moveoverride = "false";
+ let newtransx = "0";
+ let newtransy = "0";
+ if (imgref) {
+ moveoverride = imgref.getAttribute("moveoverride");
+ newtransx = imgref.getAttribute("newtransx");
+ newtransy = imgref.getAttribute("newtransy");
+ }
+
+ const handleMouseDown = (e) => {
+ if (e.button !== 0 || moveoverride!="false") return;
+ setIsDragging(true);
+ setDragOffset({
+ x: e.clientX - position.x,
+ y: e.clientY - position.y,
+ });
+ };
+
+ const handleMouseMove = (e) => {
+ if (!isDragging) return;
+ if (e.clientX - dragOffset.x < imgref.width*0.5 && e.clientX - dragOffset.x > imgref.width*-0.5 && e.clientY - dragOffset.y < imgref.height*0.5 && e.clientY - dragOffset.y > imgref.height*-0.5) {
+ setPosition({
+ x: e.clientX - dragOffset.x,
+ y: e.clientY - dragOffset.y,
+ });
+ }
+ };
+
+ const handleMouseUp = () => {
+ setIsDragging(false);
+ };
+
+ useEffect(()=>{
+ if (moveoverride=="true") {
+ setPosition({x: newtransx, y: newtransy})
+ }
+ }, [moveoverride, newtransx, newtransy])
+
+ return (
+
@@ -149,10 +225,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 +247,36 @@ 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.
+ {children && typeof children === "object" && children.type
+ ? {
+ ...children,
+ props: {
+ ...children.props,
+ isbeingdragged: `${isDragging}`,
+ moveoverride: `${false}`,
+ style: {
+ ...children.props.style,
+ transform: `translate(${position.x}px, ${position.y}px)`,
+ transition: `transform ${avrPing}ms linear, scale 100ms linear`
+ },
+ },
+ }
+ : children}
+
+ );
+};
+
+export default Draggable;
diff --git a/webapp/src/components/SettingsButton.jsx b/webapp/src/components/SettingsButton.jsx
index a175dd7..0442005 100644
--- a/webapp/src/components/SettingsButton.jsx
+++ b/webapp/src/components/SettingsButton.jsx
@@ -1,10 +1,21 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
const SettingsButton = ({ settings, onSettingsChange }) => {
const [isOpen, setIsOpen] = useState(false);
+ const settingsMenu = useRef(null);
+ const settingsBut = useRef(null);
+
+ const closeSettingsIfOpen = (e)=>{
+ if(isOpen && !settingsMenu.current?.contains(e.target) && !settingsBut.current?.contains(e.target)){
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown',closeSettingsIfOpen)
return (
-
+
+ {window.innerHeight>500 && (
+ )}
{isOpen && (
-
+
diff --git a/webapp/src/components/player.jsx b/webapp/src/components/player.jsx
index 2ccd4b1..970c52e 100644
--- a/webapp/src/components/player.jsx
+++ b/webapp/src/components/player.jsx
@@ -1,6 +1,5 @@
import { useRef, useState, useEffect } from "react";
-import { getRadarPosition, playerColors } from "../utilities/utilities";
-
+import { getRadarPosition, playerColors, calculatePositionWithScale, calculateMapOffsetForCentering } from "../utilities/utilities";
let playerRotations = [];
const calculatePlayerRotation = (playerData) => {
@@ -18,18 +17,28 @@ const Player = ({ playerData, mapData, radarImage, localTeam, averageLatency, se
const [lastKnownPosition, setLastKnownPosition] = useState(null);
const radarPosition = getRadarPosition(mapData, playerData.m_position) || { x: 0, y: 0 };
const invalidPosition = radarPosition.x <= 0 && radarPosition.y <= 0;
-
const playerRef = useRef();
const playerBounding = (playerRef.current &&
playerRef.current.getBoundingClientRect()) || { width: 0, height: 0 };
const playerRotation = calculatePlayerRotation(playerData);
+ const [scaledSize, setScaledSize] = useState(0.7 * settings.dotSize);
- const radarImageBounding = (radarImage !== undefined &&
- radarImage.getBoundingClientRect()) || { width: 0, height: 0 };
-
- const scaledSize = 0.7 * settings.dotSize;
+ useEffect(() => {
+ if (window.innerHeight<=500) setScaledSize(0.7 * settings.dotSize+1.5); else setScaledSize(0.7 * settings.dotSize);
+ }, [window.innerHeight])
- // Store the last known position when the player dies
+ useEffect(() => {
+ if (settings.showOnlyEnemies && playerData.m_team === localTeam) {
+ if (!settings.followYourself) {
+ setScaledSize(0.0);
+ } else if (settings.followYourself && playerData.m_steam_id!=settings.whichPlayerAreYou) {
+ setScaledSize(0.0);
+ } else {
+ setScaledSize(0.7 * settings.dotSize);
+ }
+ if (settings.showAllNames) {settings.showAllNames = false;} } else { setScaledSize(0.7 * settings.dotSize) }
+ }, [settings.showOnlyEnemies, settings.followYourself])
+
useEffect(() => {
if (playerData.m_is_dead) {
if (!lastKnownPosition) {
@@ -38,15 +47,29 @@ const Player = ({ playerData, mapData, radarImage, localTeam, averageLatency, se
} else {
setLastKnownPosition(null);
}
- }, [playerData.m_is_dead, radarPosition, lastKnownPosition]);
+ }, [playerData.m_is_dead, radarPosition]);
const effectivePosition = playerData.m_is_dead ? lastKnownPosition || { x: 0, y: 0 } : radarPosition;
+ const scaledPos = calculatePositionWithScale(radarImage, effectivePosition);
const radarImageTranslation = {
- x: radarImageBounding.width * effectivePosition.x - playerBounding.width * 0.5,
- y: radarImageBounding.height * effectivePosition.y - playerBounding.height * 0.5,
+ x: (scaledPos[0] - playerBounding.width * 0.5),
+ y: (scaledPos[1] - playerBounding.height * 0.5),
};
+ if (playerData.m_steam_id==settings.whichPlayerAreYou) {
+ if (radarImage && mapData && playerData.m_position && settings.followYourself) {
+ const radarOffset = calculateMapOffsetForCentering(playerData.m_position, radarImage, mapData);
+ if (radarImage.getAttribute("isbeingdragged")=="false") {
+ radarImage.setAttribute("moveoverride", "true")
+ radarImage.setAttribute("newtransx", `${Math.floor(radarOffset.x)}`)
+ radarImage.setAttribute("newtransy", `${Math.floor(radarOffset.y)}`)
+ }
+ } else if (radarImage) {
+ radarImage.setAttribute("moveoverride", "false")
+ }
+ }
+
return (
+ )}
);
};
diff --git a/webapp/src/components/playercard.jsx b/webapp/src/components/playercard.jsx
index 31abd50..22a20fb 100644
--- a/webapp/src/components/playercard.jsx
+++ b/webapp/src/components/playercard.jsx
@@ -1,47 +1,74 @@
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)
+ if (playerData.m_model_name&&!playerData.m_is_dead)
setModelName(playerData.m_model_name);
- }, [playerData.m_model_name]);
+ else
+ setModelName("cs_observer");
+ }, [playerData.m_model_name, playerData.m_is_dead]);
return (
-
@@ -85,8 +118,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 +131,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 +146,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 +168,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 +188,8 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
].map((_, i) => (
))}
@@ -164,7 +198,7 @@ const PlayerCard = ({ playerData, isOnRightSide }) => {
Radar Settings
-
+
-
+
diff --git a/webapp/src/components/bomb.jsx b/webapp/src/components/bomb.jsx
index 1c925d2..9c29cf9 100644
--- a/webapp/src/components/bomb.jsx
+++ b/webapp/src/components/bomb.jsx
@@ -1,5 +1,5 @@
import { useRef } from "react";
-import { getRadarPosition, teamEnum } from "../utilities/utilities";
+import { getRadarPosition, teamEnum, calculatePositionWithScale } from "../utilities/utilities";
const Bomb = ({ bombData, mapData, radarImage, localTeam, averageLatency, settings }) => {
const radarPosition = getRadarPosition(mapData, bombData);
@@ -8,12 +8,11 @@ const Bomb = ({ bombData, mapData, radarImage, localTeam, averageLatency, settin
const bombBounding = (bombRef.current &&
bombRef.current.getBoundingClientRect()) || { width: 0, height: 0 };
- const radarImageBounding = (radarImage !== undefined &&
- radarImage.getBoundingClientRect()) || { width: 0, height: 0 };
- const radarImageTranslation = {
- x: radarImageBounding.width * radarPosition.x - bombBounding.width * 0.5,
- y: radarImageBounding.height * radarPosition.y - bombBounding.height * 0.5,
- };
+ const scaledPos = calculatePositionWithScale(radarImage, radarPosition);
+ const radarImageTranslation = {
+ x: (scaledPos[0] - bombBounding.width * 0.5),
+ y: (scaledPos[1] - bombBounding.height * 0.5),
+ };
// Calculate bomb size based on settings
const baseSize = 1.5; // Base size in vw
@@ -34,7 +33,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..b4fecdb
--- /dev/null
+++ b/webapp/src/components/droppedweapons.jsx
@@ -0,0 +1,43 @@
+import { useRef } from "react";
+import { getRadarPosition, teamEnum, colorSchemePallette, weaponList, calculatePositionWithScale } 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 scaledPos = calculatePositionWithScale(radarImage, radarPosition);
+ const radarImageTranslation = {
+ x: (scaledPos[0] - wepBounding.width * 0.5),
+ y: (scaledPos[1] - wepBounding.height * 0.5),
+ };
+
+return (
+
- Dot Size
+ Player Dot Size
{settings.dotSize}x
{
}}
/>
+
+
+
+
+ {(!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..51b236d
--- /dev/null
+++ b/webapp/src/components/grenade.jsx
@@ -0,0 +1,104 @@
+import { useRef } from "react";
+import GrenadeEffects from "./grenadeeffects.jsx";
+import { getRadarPosition, teamEnum, calculatePositionWithScale } 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 scaledPos = calculatePositionWithScale(radarImage, radarPosition);
+ const radarImageTranslation = {
+ x: (scaledPos[0] - grenBounding.width * 0.5),
+ y: (scaledPos[1] - 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..d7ed68a
--- /dev/null
+++ b/webapp/src/components/grenadeeffects.jsx
@@ -0,0 +1,72 @@
+import { useRef } from "react";
+import { getRadarPosition, teamEnum, calculatePositionWithScale } from "../utilities/utilities";
+
+const GrenadeEffects = ({ grenadeData, type, mapData, settings, averageLatency, radarImage }) => {
+
+ let radarScale = 1; try { let scale = radarImage.style.scale; if (scale) radarScale = scale;} catch {}
+
+ const smokeSize = 3 * radarScale;
+ const fireSize = 1.3 * radarScale;
+ 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 scaledPos = calculatePositionWithScale(radarImage, radarPosition);
+ const radarImageTranslation = {
+ x: (scaledPos[0] - grenBounding.width * 0.5),
+ y: (scaledPos[1] - grenBounding.height * 0.5),
+ };
+
+ if (type == "smoke") {
+ return (
+
+
+
+
+
+
+
+ );
+ } else if (type == "molo") {
+ 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 (
) : 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.leveling && !playerData.m_is_dead) && (
+
+
+
+
- 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 +104,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}
- 
+
+
+
+
{playerArray.map((player) => (
);
};
diff --git a/webapp/src/main.jsx b/webapp/src/main.jsx
index 9981940..31d28fb 100644
--- a/webapp/src/main.jsx
+++ b/webapp/src/main.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import App from './app.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(