bug(GameList): Fix multiple sessions expanding

CHANGELOG.md

@@ -105,6 +105,8 @@ tech changes will usually be stripped from release notes for the public
     -   Moving composites to a different location could sometimes lead to errors on the client even though the moves were succesful serverside
 -   Select Tool:
     -   Snapping an existing shape point to some other point could be overriden with a snap to the grid
+-   Game Listing:
+    -   Clicking on a session that shares a name with another session would foldout both
 
 ## [2024.3.1] - 2024-11-12
 

client/src/dashboard/games/GameList.vue

@@ -18,11 +18,13 @@ const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 
+type RoomInfoWithId = RoomInfo & { id: number };
+
 interface SessionState {
-    owned: RoomInfo[];
-    joined: RoomInfo[];
+    owned: RoomInfoWithId[];
+    joined: RoomInfoWithId[];
     error: string;
-    focussed?: RoomInfo;
+    focussed?: RoomInfoWithId;
 }
 
 const state: SessionState = reactive({
@@ -37,7 +39,7 @@ watch(sort, () => {
     sortData(state.joined);
 });
 
-function sortData(data: RoomInfo[]): void {
+function sortData(data: RoomInfoWithId[]): void {
     data.sort((a, b) => {
         if (sort.value === "clock") {
             if (a.last_played === null) return 1;
@@ -61,17 +63,18 @@ onMounted(async () => {
     const response = await http.get("/api/rooms");
     if (response.ok) {
         const data = (await response.json()) as { owned: RoomInfo[]; joined: RoomInfo[] };
-        state.owned = data.owned;
-        state.joined = data.joined;
+        // Add an arbitrary id to each one to do some checks that survive sorting
+        state.owned = data.owned.map((r, i) => ({ ...r, id: i }));
+        state.joined = data.joined.map((r, i) => ({ ...r, id: -i - 1 }));
         sortData(state.owned);
         sortData(state.joined);
     } else {
         state.error = await getErrorReason(response);
     }
 });
 
-function focus(session: RoomInfo): void {
-    if (state.focussed?.name === session.name) {
+function focus(session: RoomInfoWithId): void {
+    if (state.focussed?.id === session.id) {
         state.focussed = undefined;
     } else {
         state.focussed = session;
@@ -225,8 +228,8 @@ async function exportCampaign(): Promise<void> {
             <div class="sessions">
                 <div
                     v-for="session of state.joined"
-                    :key="session.creator + '-' + session.name"
-                    :class="{ focus: state.focussed?.name === session.name }"
+                    :key="session.id"
+                    :class="{ focus: state.focussed?.id === session.id }"
                     @click="focus(session)"
                 >
                     <img