Small display fixes for TA

DragaliaAPI/DragaliaAPI.Integration.Test/Features/Web/TimeAttack/TimeAttackTest.cs

@@ -1,7 +1,6 @@
 using System.Net.Http.Json;
 using DragaliaAPI.Features.Web;
 using DragaliaAPI.Features.Web.TimeAttack.Models;
-using NSubstitute.Extensions;
 
 namespace DragaliaAPI.Integration.Test.Features.Web.TimeAttack;
 
@@ -23,9 +22,10 @@ public async Task GetQuests_ReturnsQuests()
             .Should()
             .BeEquivalentTo(
                 [
-                    new() { Id = 227010105, IsCoop = true },
                     new TimeAttackQuest() { Id = 227010104, IsCoop = false },
-                ]
+                    new TimeAttackQuest() { Id = 227010105, IsCoop = true },
+                ],
+                opts => opts.WithStrictOrdering()
             );
     }
 

DragaliaAPI/DragaliaAPI/Features/Web/TimeAttack/TimeAttackService.cs

@@ -31,9 +31,11 @@ static TimeAttackService()
 
     public async Task<List<TimeAttackQuest>> GetQuests()
     {
-        List<int> uniqueQuestIds = await EntityFrameworkQueryableExtensions.ToListAsync(
-            apiContext.TimeAttackClears.Select(x => x.QuestId).Distinct()
-        );
+        List<int> uniqueQuestIds = await apiContext
+            .TimeAttackClears.Select(x => x.QuestId)
+            .Distinct()
+            .OrderBy(x => x)
+            .ToListAsyncEF();
 
         return uniqueQuestIds
             .Select(questId => new TimeAttackQuest()

Website/src/routes/(main)/events/time-attack/rankings/[questId=integer]/dataTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import { readable, writable } from 'svelte/store';
   import { slide } from 'svelte/transition';
   import { createRender, createTable, Render, Subscribe } from 'svelte-headless-table';
@@ -50,9 +50,8 @@
     table.column({
       accessor: ({ time }) => time,
       cell: ({ value: time }) => {
-        const minutes = `${Math.floor(time / 60)}`.padStart(2, '0');
-        const seconds = `${time % 60}`.padStart(2, '0').slice(0, 4);
-        return `${minutes}:${seconds}`;
+        const date = new Date(time * 1000);
+        return date.toISOString().slice(14, -3);
       },
       header: 'Clear Time'
     }),
@@ -74,23 +73,31 @@
   const expandedIds = pluginStates.expand.expandedIds;
   const { pageIndex, hasPreviousPage, hasNextPage } = pluginStates.page;
 
-  const changePage = (newPage: number) => {
+  let initialized = false;
+  let showExpanded = true;
+
+  const changePage = async (newPage: number) => {
+    // Unmount the 'grandparent' block of the team-comp to skip the slide out transition
+    showExpanded = false;
+    await tick();
+
+    // Reset the expanded IDs which would have otherwise caused a transition
     expandedIds.clear();
 
     $pageIndex = newPage;
     const params = new URLSearchParams($page.url.searchParams);
     params.set('page', ($pageIndex + 1).toString());
 
+    await goto(`?${params.toString()}`, { noScroll: true });
+
     const el = document.querySelector('#time-attack-table-title');
     if (el) {
-      el.scrollIntoView({ block: 'start' });
+      el.scrollIntoView({ block: 'nearest' });
     }
 
-    goto(`?${params.toString()}`, { noScroll: true });
+    showExpanded = true;
   };
 
-  let initialized = false;
-
   onMount(() => {
     const params = new URLSearchParams($page.url.searchParams);
     const pageNumber = Number(params.get('page'));
@@ -140,21 +147,26 @@
               </Subscribe>
             {/each}
           </Table.Row>
-          {#key pageIndex}
-            {#if $expandedIds[row.id] && row.isData()}
-              <tr class="border-b">
+          <!--
+          iOS Safari doesn't like it if you expand and close this section and starts rendering
+          the rows side-by-side... avoiding the unmount of the extra <tr/> seems to fix this.
+          The Blazor site used this kind of markup and that works fine. How mysterious!
+           --->
+          <tr aria-hidden={!$expandedIds[row.id]}>
+            {#if showExpanded}
+              {#if $expandedIds[row.id] && row.isData()}
                 <td colspan="4">
-                  <div in:slide={{ duration: 500 }} class="p-4">
+                  <div transition:slide={{ duration: 500 }} class="border-b p-4">
                     <TeamComposition
                       units={getTeam(coop, row.original.players)}
                       unitKeys={getTeamKeys(coop, row.original.players)}
                       key={row.original.rank}
                       {coop} />
                   </div>
                 </td>
-              </tr>
+              {/if}
             {/if}
-          {/key}
+          </tr>
         </Subscribe>
       {/each}
     </Table.Body>