Chat overlay, tactical map bot/player distinction, red lead dot, evasion AI, 7v6 bots, less turbulence, skirt depthWrite fix

src/App.tsx

@@ -21,7 +21,7 @@ import {
 } from "./types";
 import { MainMenu } from "./components/MainMenu";
 import { PilotRegistration } from "./components/PilotRegistration";
-import { GameHUD } from "./components/GameHUD";
+import { GameHUD, ChatMessage } from "./components/GameHUD";
 import { GameEngine } from "./game/gameEngine";
 import { WorldRenderer } from "./game/worldRenderer";
 import { InputManager } from "./game/inputManager";
@@ -135,6 +135,9 @@ export default function App() {
     key: 0
   });
 
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const multiplayerSocketRef = useRef<WebSocket | null>(null);
+
   const [isPaused, setIsPaused] = useState(false);
   const isPausedRef = useRef(false);
   const [showTacticalMap, setShowTacticalMap] = useState(false);
@@ -374,6 +377,7 @@ export default function App() {
       const wsUrl = `${protocol}${window.location.host}/multiplayer`;
       try {
         socket = new WebSocket(wsUrl);
+        multiplayerSocketRef.current = socket;
         socket.onerror = (err) => {
           console.warn("Multiplayer matchmaking offline or connectivity error. Operating in offline/local capability.", err);
         };
@@ -594,6 +598,13 @@ export default function App() {
               });
             }
           }
+          if (msg.type === "chat_broadcast") {
+            setChatMessages(prev => [...prev.slice(-49), {
+              sender: msg.senderName,
+              text: msg.text,
+              ts: Date.now()
+            }]);
+          }
         } catch (err) {
           console.error("Multiplayer message parse/apply error:", err);
         }
@@ -1144,6 +1155,23 @@ export default function App() {
             mapId={activeEngine.selectedMapId}
             showTacticalMap={showTacticalMap}
             onCloseTacticalMap={() => setShowTacticalMap(false)}
+            chatMessages={chatMessages}
+            onSendChat={(text) => {
+              const sock = multiplayerSocketRef.current;
+              if (sock && sock.readyState === WebSocket.OPEN) {
+                sock.send(JSON.stringify({
+                  type: "chat",
+                  senderName: progression.nickname || "PILOT",
+                  text
+                }));
+              } else {
+                setChatMessages(prev => [...prev.slice(-49), {
+                  sender: progression.nickname || "PILOT",
+                  text,
+                  ts: Date.now()
+                }]);
+              }
+            }}
           />
         </div>
       )}

src/components/GameHUD.tsx

@@ -18,6 +18,12 @@ import {
 import { Crosshair, MapPin, Zap } from "lucide-react";
 import { MAP_REGISTRY } from "../game/content/maps/registry";
 
+export interface ChatMessage {
+  sender: string;
+  text: string;
+  ts: number;
+}
+
 interface HUDProps {
   playerPilot: Pilot | undefined;
   pilots: Pilot[];
@@ -41,6 +47,8 @@ interface HUDProps {
   mapId: string;
   showTacticalMap: boolean;
   onCloseTacticalMap: () => void;
+  chatMessages?: ChatMessage[];
+  onSendChat?: (text: string) => void;
 }
 
 function clamp(n: number, min: number, max: number) {
@@ -386,20 +394,51 @@ const TacticalMapOverlay: React.FC<{
                 );
               })}
 
-              {pilots.filter(pilot => pilot.damage.fuselage > 0).map(pilot => {
-                const point = project(pilot.x, pilot.z);
-                const color = pilot.team === 1 ? "#fb7185" : "#38bdf8";
-                return (
-                  <g key={pilot.id} transform={`translate(${point.x} ${point.y}) rotate(${pilot.yaw * 180 / Math.PI})`}>
-                    <path
-                      d="M0 -13L8 10L0 6L-8 10Z"
-                      fill={pilot.id === "player" ? "#facc15" : color}
-                      stroke="#020617"
-                      strokeWidth="2"
-                    />
-                  </g>
-                );
-              })}
+              {(() => {
+                const playerPilotOnMap = pilots.find(p => p.id === "player");
+                const myTeam = playerPilotOnMap?.team ?? 1;
+                return pilots.filter(p => p.damage.fuselage > 0).map(pilot => {
+                  const pt = project(pilot.x, pilot.z);
+                  const isMe = pilot.id === "player";
+                  const allied = pilot.team === myTeam;
+                  const teamColor = pilot.team === 1 ? "#fb7185" : "#38bdf8";
+                  const deg = pilot.yaw * 180 / Math.PI;
+
+                  if (pilot.isBot) {
+                    // Bots: hollow circle with small cross
+                    const botColor = allied ? teamColor : teamColor;
+                    return (
+                      <g key={pilot.id} transform={`translate(${pt.x} ${pt.y})`}>
+                        <circle r="7" fill="none" stroke={botColor} strokeWidth="1.5" strokeOpacity="0.6" strokeDasharray="4 2" />
+                        <line x1="-4" y1="0" x2="4" y2="0" stroke={botColor} strokeWidth="1" strokeOpacity="0.6" />
+                        <line x1="0" y1="-4" x2="0" y2="4" stroke={botColor} strokeWidth="1" strokeOpacity="0.6" />
+                      </g>
+                    );
+                  }
+
+                  // Real players: solid arrow
+                  const fill = isMe ? "#facc15" : teamColor;
+                  return (
+                    <g key={pilot.id} transform={`translate(${pt.x} ${pt.y}) rotate(${deg})`}>
+                      <path d="M0 -14L9 11L0 7L-9 11Z" fill={fill} stroke="#020617" strokeWidth="2" />
+                      {/* Allied player name — not shown for enemies (CoD convention) */}
+                      {allied && !isMe && (
+                        <text
+                          x="0" y="-20"
+                          textAnchor="middle"
+                          fill={teamColor}
+                          fontSize="9"
+                          fontWeight="700"
+                          fontFamily="monospace"
+                          transform={`rotate(${-deg})`}
+                        >
+                          {pilot.name}
+                        </text>
+                      )}
+                    </g>
+                  );
+                });
+              })()}
             </svg>
           </div>
 
@@ -435,10 +474,12 @@ const TacticalMapOverlay: React.FC<{
             <div className="mt-6 text-[8px] font-black tracking-[0.2em] text-slate-500 uppercase">
               Legend
             </div>
-            <div className="mt-3 space-y-3 text-[9px] text-slate-300">
-              <div className="flex items-center gap-3"><span className="text-amber-300">▲</span> Your aircraft</div>
-              <div className="flex items-center gap-3"><span className="text-rose-400">▲</span> Red team</div>
-              <div className="flex items-center gap-3"><span className="text-sky-400">▲</span> Blue team</div>
+            <div className="mt-3 space-y-2.5 text-[9px] text-slate-300">
+              <div className="flex items-center gap-3"><span className="text-amber-300">▲</span> You</div>
+              <div className="flex items-center gap-3"><span className="text-rose-400">▲</span> Red player</div>
+              <div className="flex items-center gap-3"><span className="text-sky-400">▲</span> Blue player</div>
+              <div className="flex items-center gap-3"><span className="text-rose-400 opacity-60">⊕</span> Red bot</div>
+              <div className="flex items-center gap-3"><span className="text-sky-400 opacity-60">⊕</span> Blue bot</div>
               <div className="flex items-center gap-3"><span className="text-emerald-300">◇</span> Ground objective</div>
             </div>
           </aside>
@@ -471,7 +512,7 @@ const LeadProjector: React.FC = () => {
           style={{ boxShadow: "0 0 0 1px #000, inset 0 0 0 1px #000" }}
         >
           <div
-            className="w-1.5 h-1.5 bg-amber-400 rounded-full"
+            className="w-1.5 h-1.5 bg-red-500 rounded-full"
             style={{ boxShadow: "0 0 0 1px #000" }}
           />
 
@@ -644,6 +685,8 @@ export const GameHUD: React.FC<HUDProps> = ({
   mapId,
   showTacticalMap,
   onCloseTacticalMap,
+  chatMessages = [],
+  onSendChat,
 }) => {
   if (!playerPilot) return null;
 
@@ -1040,6 +1083,70 @@ export const GameHUD: React.FC<HUDProps> = ({
         </div>
       )}
 
+      {/* In-game chat overlay */}
+      {onSendChat && (
+        <ChatOverlay messages={chatMessages} onSend={onSendChat} />
+      )}
+
+    </div>
+  );
+};
+
+const ChatOverlay: React.FC<{ messages: ChatMessage[]; onSend: (t: string) => void }> = ({ messages, onSend }) => {
+  const [input, setInput] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const now = Date.now();
+  const recent = messages.filter(m => now - m.ts < 10000).slice(-5);
+
+  const submit = () => {
+    const text = input.trim();
+    if (text) { onSend(text); setInput(""); }
+    setOpen(false);
+  };
+
+  React.useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.code === "KeyT" && !(e.target instanceof HTMLInputElement)) {
+        e.preventDefault();
+        setOpen(true);
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <div className="absolute left-3 bottom-28 z-50 w-72 flex flex-col gap-1 pointer-events-none">
+      <div className="flex flex-col gap-0.5">
+        {recent.map((m, i) => (
+          <div key={i} className="text-[9px] font-mono bg-black/45 rounded px-1.5 py-0.5 leading-snug">
+            <span className="text-amber-400 font-black">{m.sender}</span>
+            <span className="text-slate-200 ml-1">{m.text}</span>
+          </div>
+        ))}
+      </div>
+      {open && (
+        <div className="pointer-events-auto flex items-center gap-1 bg-black/70 border border-slate-700 rounded px-2 py-1 mt-0.5">
+          <input
+            ref={inputRef}
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === "Enter") submit();
+              if (e.key === "Escape") { setOpen(false); setInput(""); }
+            }}
+            maxLength={120}
+            placeholder="Press Enter to send..."
+            className="flex-1 bg-transparent text-[9px] text-white outline-none font-mono placeholder-slate-500"
+          />
+          <span className="text-[7px] text-slate-500 font-mono">ESC</span>
+        </div>
+      )}
+      {!open && recent.length === 0 && (
+        <div className="text-[6.5px] text-slate-600 font-mono">[T] CHAT</div>
+      )}
     </div>
   );
 };

src/game/botAISystem.ts

@@ -99,33 +99,45 @@ export class BotAISystem {
         const tPos = new Vector3(target.x, target.y, target.z);
         const tVel = new Vector3(target.vx, target.vy, target.vz);
         const dist = botPos.distanceTo(tPos);
-
-        const bulletSpeed = 800;
-        const timeToTgt = dist / bulletSpeed;
-        const leadTargetPos = tPos.clone().addScaledVector(tVel, timeToTgt);
-
-        // Enforce a terrain floor — bots must not dive into the ground chasing.
-        const safeLeadY = Math.max(leadTargetPos.y, 180);
-        bot.aiState.destinationX = leadTargetPos.x;
-        bot.aiState.destinationY = bot.y < 150 ? Math.max(safeLeadY, bot.y + 200) : safeLeadY;
-        bot.aiState.destinationZ = leadTargetPos.z;
-
-        const bearingAngle = leadTargetPos.clone().sub(botPos).normalize();
         const localForward = getForwardVector(bot);
-        const aimDot = bearingAngle.dot(localForward);
-
-        // Keep speed high enough to pursue across large map distances.
-        // Only bleed throttle when very close and already lined up.
-        if (dist > 1200) {
-          bot.throttle = Math.min(1.0, bot.throttle + dt * 0.5);
-        } else if (aimDot < 0.85) {
-          bot.throttle = Math.max(0.65, bot.throttle - dt * 0.3);
+
+        // Check if the target is behind the bot (being pursued) — trigger evasion break.
+        const toTarget = tPos.clone().sub(botPos).normalize();
+        const targetOnTail = toTarget.dot(localForward) < -0.5 && dist < 800;
+
+        if (targetOnTail) {
+          // Break turn: juke perpendicular + climb to escape the firing cone.
+          const t = Date.now() / 1000;
+          const juke = Math.sin(t * 3.7) * 600;
+          bot.aiState.destinationX = bot.x + localForward.z * juke;
+          bot.aiState.destinationY = Math.max(250, bot.y + 400);
+          bot.aiState.destinationZ = bot.z - localForward.x * juke;
+          bot.throttle = Math.min(1.0, bot.throttle + dt * 0.8);
         } else {
-          bot.throttle = Math.min(1.0, bot.throttle + dt * 0.4);
-        }
+          const bulletSpeed = 820;
+          const timeToTgt = dist / bulletSpeed;
+          const leadTargetPos = tPos.clone().addScaledVector(tVel, timeToTgt);
+
+          // Terrain floor — bots must not dive into the ground chasing.
+          const safeLeadY = Math.max(leadTargetPos.y, 180);
+          bot.aiState.destinationX = leadTargetPos.x;
+          bot.aiState.destinationY = bot.y < 150 ? Math.max(safeLeadY, bot.y + 200) : safeLeadY;
+          bot.aiState.destinationZ = leadTargetPos.z;
+
+          const bearingAngle = leadTargetPos.clone().sub(botPos).normalize();
+          const aimDot = bearingAngle.dot(localForward);
+
+          if (dist > 1200) {
+            bot.throttle = Math.min(1.0, bot.throttle + dt * 0.5);
+          } else if (aimDot < 0.85) {
+            bot.throttle = Math.max(0.65, bot.throttle - dt * 0.3);
+          } else {
+            bot.throttle = Math.min(1.0, bot.throttle + dt * 0.4);
+          }
 
-        if (aimDot > 0.93 && dist < 1200) {
-          handleWeaponFiring(bot, true, false, dt);
+          if (aimDot > 0.93 && dist < 1200) {
+            handleWeaponFiring(bot, true, false, dt);
+          }
         }
       } else {
         bot.aiState.behavior = "patrol";

src/game/gameEngine.ts

@@ -290,8 +290,8 @@ export class GameEngine {
     this.pilots.push(playerPilot);
     this.playerPilotId = "player";
 
-    let adversaryCount = 5;
-    let teammateCount = 4;
+    let adversaryCount = 7;
+    let teammateCount = 6;
 
     if (this.matchMode === MatchMode.DuelArena) {
       adversaryCount = 1;

src/game/worldRenderer.ts

@@ -306,7 +306,7 @@ export class WorldRenderer {
     {
       const skirtSize = world.radius * 12;
       const fogColor = new THREE.Color(this.mapDef.atmosphere.fogColor);
-      const skirtMat = new THREE.MeshBasicMaterial({ color: fogColor, fog: false });
+      const skirtMat = new THREE.MeshBasicMaterial({ color: fogColor, fog: false, depthWrite: false });
       const skirtMesh = new THREE.Mesh(
         new THREE.PlaneGeometry(skirtSize, skirtSize),
         skirtMat
@@ -1076,7 +1076,7 @@ export class WorldRenderer {
     // Kicks in above 450 km/h and peaks near VNE.
     this.cameraShakeTime += dt;
     const shakeKmph = new THREE.Vector3(playerPilot.vx, playerPilot.vy, playerPilot.vz).length() * 3.6;
-    const shakeStrength = THREE.MathUtils.clamp((shakeKmph - 450) / 200, 0, 1) * 0.28;
+    const shakeStrength = THREE.MathUtils.clamp((shakeKmph - 500) / 250, 0, 1) * 0.10;
     if (shakeStrength > 0) {
       const t = this.cameraShakeTime;
       this.camera.position.x += Math.sin(t * 18.7) * Math.sin(t * 6.3) * shakeStrength;