fix: move socket interfaces to module scope, fix CSSProperties import

client/src/components/ParticleOverlay.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import type { CSSProperties } from "react";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 import type { AtmosphereState } from "../lib/atmosphereTypes";
@@ -15,14 +16,14 @@ function ensureEngine(): Promise<void> {
   return enginePromise;
 }
 
-const overlayStyle: React.CSSProperties = {
+const overlayStyle: CSSProperties = {
   position: "fixed",
   inset: 0,
   zIndex: 9997,
   pointerEvents: "none",
 };
 
-const instanceStyle: React.CSSProperties = {
+const instanceStyle: CSSProperties = {
   position: "absolute",
   inset: 0,
 };

server/src/socket.ts

@@ -2,6 +2,19 @@ import { Server } from "socket.io";
 import db from "./db.js";
 import { rollDice } from "./dice.js";
 
+interface EffectState {
+  active: boolean;
+  intensity: number;
+}
+
+interface AtmosphereUpdateData {
+  campaignId: number;
+  fog: EffectState;
+  fire: EffectState;
+  rain: EffectState;
+  embers: EffectState;
+}
+
 export function setupSocket(io: Server) {
   io.on("connection", (socket) => {
     socket.on("join-campaign", (campaignId: string) => {
@@ -90,19 +103,6 @@ export function setupSocket(io: Server) {
       },
     );
 
-    interface EffectState {
-      active: boolean;
-      intensity: number;
-    }
-
-    interface AtmosphereUpdateData {
-      campaignId: number;
-      fog: EffectState;
-      fire: EffectState;
-      rain: EffectState;
-      embers: EffectState;
-    }
-
     socket.on("atmosphere:update", (data: AtmosphereUpdateData) => {
       const { campaignId, ...atmosphere } = data;
       io.to(`campaign:${campaignId}`).emit("atmosphere:update", atmosphere);