Introduce Location Targetting System (#6)

Author: jonatan-holmgren

web/public/crosshair.svg

@@ -297,6 +297,11 @@ export const usePartyListOrder = (
 export type PartySettings = {
     private: boolean;
     steam_only: boolean;
+    location?: {
+        lat: number;
+        lng: number;
+        map_id: string;
+    };
     [key: string]: any;
 };
 
@@ -323,13 +328,27 @@ export const usePartySettings = (party_id: string) => {
 
             for (const event of fEvents) {
                 if (event.data.type == 'PartySettingChanged') {
+                    if (event.data.setting == 'location') {
+                        const data = event.data.value as {
+                            lat: number;
+                            lng: number;
+                            map_id: string;
+                        };
+
+                        settings.location = {
+                            lat: data.lat,
+                            lng: data.lng,
+                            map_id: data.map_id,
+                        };
+                    }
+
                     settings[event.data.setting] = event.data.value;
                 }
             }
 
             setLocalSettings(settings);
         }
-    }, [events]);
+    }, [events, setLocalSettings]);
 
     return {
         data: localSettings,

web/src/api/party.ts

@@ -777,8 +777,8 @@ export interface components {
          *       "name": "John D.",
          *       "avatar_url": "https://avatars.akamai.steamstatic.com/0000000000000000.jpg",
          *       "profile_url": "https://steamcommunity.com/id/john_doe",
-         *       "created_at": "2025-03-31T17:14:49.346356862+00:00",
-         *       "updated_at": "2025-03-31T17:14:49.346359012+00:00"
+         *       "created_at": "2025-04-02T19:24:57.122836365+00:00",
+         *       "updated_at": "2025-04-02T19:24:57.122838146+00:00"
          *     }
          */
         User: {

web/src/api/schema.gen.ts

@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+
+import { usePartySettings } from '@/api/party';
+
+import { ServerMapModelInner } from './ServerFinder';
+
+export const MapPreview = ({ party_id }: { party_id: string }) => {
+    const { data: settings } = usePartySettings(party_id);
+
+    const mapRef = useRef<L.Map | null>(null);
+
+    return (
+        <div className="card p-4 h-fit flex flex-col gap-2 w-full">
+            {settings?.location?.map_id ? (
+                <ServerMapModelInner
+                    frozen={true}
+                    mapId={settings.location.map_id}
+                    partyId={party_id}
+                    mapRef={mapRef}
+                />
+            ) : (
+                <div className="text-secondary">No map selected</div>
+            )}
+        </div>
+    );
+};

web/src/components/party/management/MapPreview.tsx

@@ -6,39 +6,39 @@ import { LocationPicker } from '@/routes/$partyId';
 
 import { PartyMembers } from './members/PartyMembers';
 
-export const PartySettings: FC<{party_id: string}> = ({ party_id }) => {
+export const PartySettings: FC<{ party_id: string }> = ({ party_id }) => {
     const { data: settings, update } = usePartySettings(party_id);
 
     return (
         <div className="flex flex-col gap-2 w-full text">
-                <div className="card p-4 h-fit flex flex-col gap-2 w-full">
-                    <h3 className="">Settings</h3>
-                    <ul className="text-secondary w-full">
-                        <li className="flex items-center justify-between gap-2">
-                            Private Party
-                            <Switch
-                                checked={settings?.private}
-                                onCheckedChange={(val) => {
-                                    update('private', val);
-                                }}
-                            />
-                        </li>
-                        <li className="flex items-center justify-between gap-2">
-                            Steam Only
-                            <Switch
-                                checked={settings?.steam_only}
-                                onCheckedChange={(val) => {
-                                    update('steam_only', val);
-                                }}
-                            />
-                        </li>
-                    </ul>
-                    <ul className="text-secondary w-full">
-                        <li className="flex items-center justify-between gap-2">
-                            <h3>Location</h3>
-                            <LocationPicker />
-                        </li>
-                    </ul>
+            <div className="card p-4 h-fit flex flex-col gap-2 w-full">
+                <h3 className="">Settings</h3>
+                <ul className="text-secondary w-full">
+                    <li className="flex items-center justify-between gap-2">
+                        Private Party
+                        <Switch
+                            checked={settings?.private}
+                            onCheckedChange={(val) => {
+                                update('private', val);
+                            }}
+                        />
+                    </li>
+                    <li className="flex items-center justify-between gap-2">
+                        Steam Only
+                        <Switch
+                            checked={settings?.steam_only}
+                            onCheckedChange={(val) => {
+                                update('steam_only', val);
+                            }}
+                        />
+                    </li>
+                </ul>
+                <ul className="text-secondary w-full">
+                    <li className="flex items-center justify-between gap-2">
+                        <h3>Location</h3>
+                        <LocationPicker partyId={party_id} />
+                    </li>
+                </ul>
             </div>
             <PartyMembers party_id={party_id} />
         </div>